# Vektorové hřiště

> Interaktivní nástroj pro pochopení RAG (Retrieval Augmented Generation). Uživatel vloží text, ten se rozseká na chunky (kousky), pro každý chunk se spočítá 256-dimenzionální embedding vektor a zobrazí jako mřížka 16×16 s barevným kódováním. Pak uživatel zadá otázku, ta se převede na vektor a spočítá se kosinová podobnost s každým chunkem. Výsledkem je seřazený seznam chunků od nejpodobnějšího plus prompt, který by reálný RAG poslal jazykovému modelu. Vše běží lokálně v prohlížeči přes transformers.js, žádná data neopouštějí klienta. Autor Pavel Horák, AI Solutions Architect.

## K čemu to slouží

Doprovodný nástroj k seriálu [RAG vysvětlený lidsky](https://rag.pprojects.cz/). Cíl: ukázat na konkrétních číslech, že podobnost mezi textem a otázkou není mystická, ale spočitatelná matematika. Čtenář si vlastníma očima ověří, jak embedding modely převádějí text na vektory a jak se počítá relevance.

## Jak to funguje

Použitý model: **Xenova/multilingual-e5-small** (přes [transformers.js](https://huggingface.co/docs/transformers.js)) — 384-dimenzionální multijazyčný embedding model. Pro vizualizaci se vektory zkracují na prvních 256 dimenzí a re-normalizují (zachování velikosti 1). Kosinová podobnost se počítá jako skalární součin normalizovaných vektorů.

Čtyři kroky:

1. **Vstup textu** — uživatel vloží libovolný text (default: 6 vět z pracovněprávní oblasti).
2. **Chunking** — rozdělení podle řádků nebo vět. Max 20 chunků.
3. **Embedding** — pro každý chunk se spočítá vektor, zobrazí se jako mřížka 16×16 s barevným kódováním (zelená = vyšší hodnota, červená = nižší, šedá = blízko nuly).
4. **Hledání** — uživatel zadá otázku, ta se převede na vektor, spočítá se kosinová podobnost, chunky se seřadí. Pruhy v UI používají min-max normalizaci pro lepší vizuální rozlišení rozdílů.

Výstup: top 3 chunky se zabalí do promptu pro LLM (Claude, GPT, Gemini) ve formátu *„odpověz pouze na základě těchto úryvků"*. Samotné volání LLM nástroj neprovádí, ukazuje jen prompt.

## Omezení malého modelu

Použitý model je vědomě malý (cca 110 MB), aby se rychle stáhl v prohlížeči. Důsledek: u stylisticky podobných textů (např. všechno právní jazyk) skóre podobnosti mírně kolísá v úzkém pásu (typicky 0.78–0.92). Produkční modely jako OpenAI `text-embedding-3-large` (3072D), Voyage AI nebo Cohere mají výrazně lepší rozlišení.

Zkrácení z 384D na 256D je didaktická zkratka, ne Matryoshka representation — princip podobnosti zůstává, ale ztrácí se část informace. V reálném RAG se používá plná dimenze modelu, nebo skutečné Matryoshka modely (jako `text-embedding-3-small` od OpenAI s parametrem `dimensions`).

## Privacy a hosting

Žádná data uživatele se nikam neodesílají. Embedding model běží lokálně v prohlížeči (přes WebAssembly), výpočty probíhají na klientském zařízení. Při prvním otevření se model jednorázově stáhne (cca 110 MB) z CDN [cdn.jsdelivr.net](https://cdn.jsdelivr.net) a Hugging Face mirror, dále je v cache prohlížeče.

Hostováno na GitHub Pages, doména embedding.pprojects.cz.

## Související projekty autora

- [rag.pprojects.cz](https://rag.pprojects.cz): Pětidílný seriál o RAG (úvod, koncepčně, technicky, v praxi, pokročilé architektury).
- [claude-limits.pprojects.cz](https://claude-limits.pprojects.cz): Analyzátor efektivního kontextového okna Claude a článek o Lost in the Middle.
- [saioai.cz](https://saioai.cz): Studie a longitudinální analýzy LLM modelů.
- [pprojects.cz](https://pprojects.cz): Portfolio webových aplikací a nástrojů.
- [phorak.cz](https://phorak.cz): Osobní web autora.

## Autor

- **Pavel Horák**, AI Solutions Architect
- Identita: https://phorak.cz/#pavel-horak
- LinkedIn: https://www.linkedin.com/in/pavelhorakeu
- X: https://x.com/PavelHorakCZ