---
title: "Tesela — buscador facetado con índice invertido en el navegador | Logic2b Lab"
description: "Demo técnica: motor de búsqueda facetado construido sin librerías — índice invertido sobre 10.000 productos, fuzzy matching con Levenshtein, ranking BM25 explicado y facetas con conteos en tiempo real. Pruébalo con erratas en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/tesela/
  md: https://logic2b.com/lab/tesela/index.md
---

Ruta: [Lab](https://logic2b.com/lab) › [Comercio y buscadores](https://logic2b.com/sistemas/comercio-buscadores) › Tesela

Demo interactiva · datos simulados

# Tesela Motor de búsqueda · Search & Discovery.

Buscador federado sobre 10.000 referencias: índice invertido, corrección de erratas, ranking explicado y recursos relacionados — sin librerías, todo en tu navegador.

[Abrir la demo (se abre en una pestaña nueva)](https://logic2b.com/lab/tesela/live)

**Cosas que demuestra**

17

**Función de negocio**

1

**Sectores que lo piden**

3

Tesela · demo interactiva [Abrir aparte (se abre en una pestaña nueva)](https://logic2b.com/lab/tesela/live)

## Cómo se construyó Tesela

Demo de motor de búsqueda tipo Algolia/Meilisearch construido desde cero en JavaScript puro y ejecutándose por completo en el cliente: un catálogo cerámico de 10.000 SKUs generado proceduralmente se indexa al cargar la página (índice invertido con frecuencias por campo) y responde en milisegundos mientras tecleas. La búsqueda es federada: la misma query consulta a la vez el catálogo y una base de recursos (manuales técnicos, tutoriales, vídeos y patrones de colocación dibujados en SVG), agrupa los resultados por categoría y sugiere facetas desde el propio buscador. Tolera erratas con distancia de Levenshtein propia y te dice qué corrección aplicó, recalcula los conteos de cada faceta en tiempo real según filtras, y puede justificar cada resultado: el botón «score» desglosa el ranking (coincidencia en nombre vs descripción, penalización fuzzy, boost por stock y valoración). El modo debug enseña las tripas: tokens resueltos, candidatos y tiempo de cada fase del pipeline.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si os interesa algo parecido para vuestro producto, hablamos.

### Qué demuestra

1. Índice invertido propio: 10.000 docs indexados al vuelo con frecuencias por campo (nombre/descripción)
2. Catálogo sintético de material cerámico generado con RNG seedeado — reproducible, no precocinado
3. Tokenización en español: minúsculas, acentos fuera, plurales simples y formatos («60×120» → 60x120, 60, 120)
4. Fuzzy matching con Levenshtein implementado a mano y umbral dinámico según longitud del término
5. Corrección visible: «resultados para porcelánico — buscaste porzelanico (d=1)»
6. Ranking BM25-lite explicable: botón «Explicar» con el desglose del score de cada resultado
7. Búsqueda federada: un segundo índice de recursos (manuales, tutoriales, vídeos, colocaciones) responde a la misma query
8. Resultados agrupados por categoría con «Ver todos», al estilo de los buscadores de fabricante
9. Patrones de colocación (espiga, junta trabada, damero, opus…) dibujados en SVG line-art procedural
10. Panel del buscador en tres columnas: sugerencias por frecuencia, categorías/marcas con conteos y recursos
11. Facetas con conteos instantáneos que se recalculan según query + filtros (OR interno, AND entre facetas)
12. Slider de precio con histograma de distribución de los resultados actuales
13. Búsqueda debounced en tiempo real sobre 10k docs con tiempos reales en ms visibles
14. Modo debug: resolución token a token, candidatos antes de rankear y pipeline cronometrado por fases
15. Estado completo en la URL (query, facetas, precio, orden) — cada búsqueda es compartible
16. Imágenes de producto en SVG procedural derivadas de los atributos de cada SKU (color, textura, acabado)
17. API en consola: window.tesela.query(), .explain(), .levenshtein() para inspeccionar el motor

Ficha del lab

**Tipo**

Motor de búsqueda / Search & Discovery

**Formato**

Demo interactiva, sin backend

Stack usado

- JavaScript
- SVG inline

Funciones de negocio

- [Comercio y buscadores](https://logic2b.com/sistemas/comercio-buscadores)

Lo ofrecemos con webs de

- [Tiendas online y ecommerce](https://logic2b.com/diseno-web/tiendas-online)
- [Formación y colegios](https://logic2b.com/diseno-web/formacion)
- [Biotecnología y genética](https://logic2b.com/diseno-web/biotecnologia)

Técnicas

- Buscador
- Algoritmos
- E-commerce
- Tiempo real

Demo con datos simulados: todo corre en el navegador.

## Labs relacionados. Misma función o mismos sectores.

[Ver todos](https://logic2b.com/lab)

### [Albarán](https://logic2b.com/lab/albaran)

Inventario y almacén

### [Pespunte](https://logic2b.com/lab/pespunte)

Comercio

### [Dioptría](https://logic2b.com/lab/dioptria)

Salud y clínicas

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)