-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
65 lines (63 loc) · 2.57 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>webgpu embed demo</title>
<style>
body {
font-family: sans-serif;
}
#progress-container {
width: 100%;
background-color: #f3f3f3;
}
#progress-bar {
width: 0;
height: 30px;
background-color: #4caf50;
}
</style>
</head>
<body>
<div id="app">
<h1>Experiment: Running Quantized BGE-M3 Embedding Model in the Browser for Full Privacy</h1>
<p>
This experiment demonstrates running a quantized BGE-M3 embedding model directly in the browser (unfortunately
model is to big for mobile browsers), supporting multilingual and cross-lingual similarities while ensuring full
privacy. The model operates entirely on the client side, avoiding any data transmission to external servers.
</p>
<p>
Results are not ideal but are good enough for many use cases. I started this after taking many notes on some
broad topic and was not sure if some thought was already touched on previously. The original version was
implemented in Python, but later I got interested in seeing how it can be done in the browser.
</p>
<p>
The implementation uses the <code>@xenova/transformers</code> (Transformers JS) and <code>onnxruntime-web</code> packages with a
BGE-M3 model that is 570MB in size after being 8-bit quantized.
</p>
<p>
The complete code and implementation details can be found in the
<a href="https://github.com/ciekawy/webgpu-embed-demo/">webgpu-embed-demo GitHub repository</a>.
</p>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<div id="main">
<textarea id="bulk-input" rows="10" cols="50" placeholder="Paste your list of items here..."></textarea>
<button onclick="processBulkInput()">Process Bulk Input</button>
<button onclick="processBulkInput(true)">Load demo</button>
<br>
<textarea type="text" id="new-item" placeholder="Add a new item" onkeyup="findSimilarItems()"></textarea>
<button onclick="addItem()">Add item</button>
<button onclick="resetItems()">Reset</button>
<h3>Similar Items</h3>
<ul id="similar-items"></ul>
<h3>Items</h3>
<ul id="item-list"></ul>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>