browservec/examples/01-basic-flat.html at main · sharma-open-source/browservec · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BrowserVec — 01. Basic flat search</title>
<style>.bv-nav{font-size:.78rem;margin:0 0 1rem;color:#888;}.bv-nav a{color:#888;text-decoration:none;}.bv-nav a:hover{color:#1a73e8;text-decoration:underline;}body{font:14px/1.5 ui-monospace,monospace;margin:2rem;max-width:780px}pre{background:#111;color:#b9f;padding:1rem;border-radius:6px;overflow:auto}button{font:inherit;padding:.4rem .8rem;cursor:pointer}.ok{color:#5c5}.bad{color:#f55}.dim{color:#888}.hl{color:#fe9}h2{font-size:1.1rem;border-bottom:1px solid #333;padding-bottom:.25rem}</style>
</head>
<body>
<p class="bv-nav"><a href="./">&larr; All examples</a> &middot; <a href="../">Home</a></p>
<h1>01. Basic flat search (M1)</h1>
<p class="dim">The simplest BrowserVec store: fp32 brute-force GPU scan, CPU top-k (falls back to CPU-only WASM-SIMD if WebGPU is unavailable). Demonstrates <b>create</b>, <b>addBatch</b>, <b>query</b>, and comparing results against a CPU reference.</p>

<pre id="out">ready.</pre>

<p><label>vectors <input id="n" type="number" value="50000" /></label>
<label>dim <input id="dim" type="number" value="768" /></label>
<button id="run">Run flat search</button></p>

<script type="module">
import { BrowserVec } from '../src/index.ts';

const $ = (id) => document.getElementById(id);
const out = $('out');
const log = (msg, cls = '') => (out.innerHTML += `\n${cls ? `<span class="${cls}">${msg}</span>` : msg}`);
const rand = (dim) => { const v = new Float32Array(dim); for (let i = 0; i < dim; i++) v[i] = Math.random() * 2 - 1; return v; };

$('run').onclick = async () => {
  out.textContent = '';
  const startTotal = performance.now();

  // 1. Check WebGPU support
  const support = BrowserVec.isSupported();
  log(`support: ${JSON.stringify(support)}`);

  const n = +$('n').value;
  const dim = +$('dim').value;
  const k = 10;

  // 2. Generate a random corpus
  log(`\n--- Step 1: Generate corpus (${n} x ${dim}) ---`);
  const corpus = Array.from({ length: n }, () => rand(dim));
  const query = rand(dim);
  log(`corpus ready, query vector generated`);

  // 3. Create the store
  log(`\n--- Step 2: Create store ---`);
  const db = await BrowserVec.create({ dimension: dim, metric: 'cosine', fallback: 'wasm' });
  log(`store: dim=${db.dimension}, metric=${db.metric}`);
  const onGpu = db.stats().device === 'webgpu';
  if (onGpu) {
    log(`running on WebGPU.`, 'ok');
  } else {
    log('No WebGPU — running on CPU fallback (WASM-SIMD), exact fp32 results.', 'dim');
  }

  // 4. Ingest vectors
  log(`\n--- Step 3: Ingest ---`);
  let t = performance.now();
  await db.addBatch(corpus.map((v, i) => ({ id: `v${i}`, vector: v })));
  const ingestMs = performance.now() - t;
  log(`ingested ${db.count} vectors in ${ingestMs.toFixed(0)} ms (${(n / (ingestMs / 1000) / 1000).toFixed(1)}k v/s)`);

  // 5. Query the store
  log(`\n--- Step 4: ${onGpu ? 'GPU' : 'CPU fallback'} query (k=${k}) ---`);
  await db.query(query, { k }); // warm-up (compiles shaders on GPU; no-op on CPU fallback)
  t = performance.now();
  const hits = await db.query(query, { k });
  const queryMs = performance.now() - t;
  log(`${onGpu ? 'GPU' : 'CPU'} query: ${queryMs.toFixed(3)} ms`, 'ok');
  log(`top-${k} results:`);
  for (const h of hits) log(`  ${h.id.padStart(8)}  score ${h.score.toFixed(5)}`);

  // 6. CPU reference for correctness
  log(`\n--- Step 5: CPU reference ---`);
  if (!onGpu) log(`(already running on CPU fallback above — this is an independent brute-force reference to verify exactness)`, 'dim');
  t = performance.now();
  const cpuRef = corpus
    .map((v, i) => {
      let dot = 0, nq = 0, nv = 0;
      for (let d = 0; d < dim; d++) { nq += query[d] * query[d]; nv += v[d] * v[d]; dot += query[d] * v[d]; }
      return { row: i, score: dot / (Math.sqrt(nq) * Math.sqrt(nv) || 1) };
    })
    .sort((a, b) => b.score - a.score)
    .slice(0, k);
  const cpuMs = performance.now() - t;
  if (onGpu) {
    const speedup = (cpuMs / queryMs).toFixed(1);
    log(`CPU query: ${cpuMs.toFixed(1)} ms (speedup: ${speedup}x)`, 'dim');
  } else {
    log(`reference CPU query: ${cpuMs.toFixed(1)} ms`, 'dim');
  }

  // 7. Compare results
  const gpuIds = hits.map((h) => h.id);
  const refIds = cpuRef.map((r) => `v${r.row}`);
  const overlap = gpuIds.filter((id) => refIds.includes(id)).length;
  log(`\n--- Results ---`);
  log(`recall@${k} vs reference: ${overlap}/${k}`, overlap === k ? 'ok' : 'bad');
  log(`total time: ${(performance.now() - startTotal).toFixed(0)} ms`, 'dim');

  // 8. Stats
  const stats = db.stats();
  log(`\nstats: ${JSON.stringify(stats, null, 2)}`, 'dim');

  db.destroy();
  log(`\ndone.`, 'dim');
};
</script>
</body>
</html>