Project 08, AI in the browser
Semantic Search for Notes
Search for “server problem” and find the note about a CORS error, even though none of those words match. That is search by meaning, and it runs entirely in this tab.
- Runs on
- Your CPU (WebAssembly)
- Model
- all-MiniLM-L6-v2
- First download
- About 23 MB
- Your browser
- Checking
Search your notes
Meaning search loads a 23 MB model the first time. Keyword search works right away.
Try:
Meaning search not loaded
How it works
- Turn text into numbersEach note becomes a list of 384 numbers that describes its meaning. Similar ideas get similar numbers.
- Store the vectorsNotes and their vectors are saved in IndexedDB, so they survive a page reload.
- CompareYour search is turned into a vector too, and every note is ranked by how close its vector is.
import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
const embed = await pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2");
// 384 numbers that describe the meaning of the text
const toVec = async (t) => Array.from((await embed(t, { pooling: "mean", normalize: true })).data);
const a = await toVec("Fix CORS error on the staging API");
const b = await toVec("server problem");
// Vectors are normalized, so cosine similarity is just a dot product
const score = a.reduce((sum, x, i) => sum + x * b[i], 0); // about 0.4