Product Categorization — Qdrant Demo

A semantic product categorization demo that runs entirely in the browser. Type a product name in any supported language and vector search returns the closest product categories and matches — no backend, no server, no database to run. The whole thing is a static site you can drop on Vercel.

How it works

1. Products (name, category, description, keywords) live in src/data/products.json.
2. On load, a multilingual embedding model (paraphrase-multilingual-MiniLM-L12-v2, 384-dim) is downloaded once via Transformers.js and runs in the browser (WASM/WebGPU). It is cached after the first visit.
3. Every product is embedded into a vector. Your query is embedded the same way.
4. Cosine similarity ranks the products — the same math a Qdrant collection uses — and the UI shows top categories, closest matches, and a PCA cluster map of the real vector space.

There is no backend: the Python/FastAPI + in-memory Qdrant service from the original version was pure compute, so it was replaced by in-browser embedding.

Tech stack

• React 19 + Vite (static SPA)
• @huggingface/transformers (Transformers.js) for in-browser embeddings
• Client-side cosine similarity + a tiny dependency-free PCA for the cluster map

Run locally

npm install
npm run dev      # http://localhost:5173

Build the static bundle:

npm run build    # outputs to dist/
npm run preview  # serve the production build locally

Deploy to Vercel

This repo is already linked to a Vercel project. vercel.json sets the Vite framework, dist output, and an SPA rewrite. Pushing to the linked branch deploys it.

One-time setting: if the linked Vercel project was previously configured for a different framework, set its Framework Preset to “Vite” in the Vercel dashboard (Project → Settings → Build & Development). It can't be changed from code alone.

Scaling later with Qdrant Cloud

The browser catalog is great for a demo. To search a large, durable catalog, point the same UI at a Qdrant Cloud collection — the query is still embedded in the browser, then sent to your cluster's REST query endpoint.

1. Create a collection of paraphrase-multilingual-MiniLM-L12-v2 vectors (size 384, cosine) in your Qdrant Cloud professional account and upload your points.
2. Copy .env.example to .env.local and set VITE_QDRANT_URL, VITE_QDRANT_API_KEY (use a read-only key — it ships to the browser), and optionally VITE_QDRANT_COLLECTION.
3. Restart. When both URL and key are present, the app queries Qdrant Cloud instead of the in-browser index. No other code changes.

See src/lib/qdrantCloud.js and src/lib/datasource.js.

Example queries

iPhone · vacuum cleaner · lip makeup · Smart TV · bread and butter · лосось · Система охлаждения ЦПУ · Wärmepumpentrockner für Kleidung

Adding products

Edit src/data/products.json. Each item:

{
  "id": 1,
  "name": "iPhone",
  "category": "Electronics",
  "description": "Smartphone with touchscreen, camera, and mobile apps.",
  "keywords": ["phone", "smartphone", "camera", "mobile"]
}

They are re-embedded automatically in the browser on the next load.