---
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
---

# Tesela Lab · Motor de búsqueda / Search & Discovery

lab.logic2b.com/tesela

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

## 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 te interesa algo parecido para tu producto, hablamos.

### Qué demuestra

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

### Detalles

**Categoría**

Motor de búsqueda / Search & Discovery

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG inline

### Categorías

[Comercio y buscadores](https://logic2b.com/sistemas/comercio-buscadores) Buscador Algoritmos E-commerce Tiempo real

### 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)

## Labs relacionados

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

[**Albarán** Inventario y almacén](https://logic2b.com/lab/albaran) [**Pespunte** Comercio / Configuradores de producto](https://logic2b.com/lab/pespunte) [**Dioptría** Salud y clínicas](https://logic2b.com/lab/dioptria)

---

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)