Add example for experimental WASM binding

philippgille · Apr 25, 2024 · 545e626 · 545e626
1 parent 3fb25a9
commit 545e626
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -11,3 +11,5 @@
    - This example shows a semantic search application, using `chromem-go` as vector database for finding semantically relevant search results.
    - Loads and searches across ~5,000 arXiv papers in the "Computer Science - Computation and Language" category, which is the relevant one for Natural Language Processing (NLP) related papers.
    - Uses OpenAI for creating the embeddings
+4. [WebAssembly](webassembly)
+   - This example shows how `chromem-go` can be compiled to WebAssembly and then used from JavaScript in a browser
diff --git a/examples/webassembly/README.md b/examples/webassembly/README.md
@@ -0,0 +1,13 @@
+# WebAssembly (WASM)
+
+Go can compile to WebAssembly, which you can then use from JavaScript in a Browser or similar environments (Node, Deno, Bun etc.). You could also target WASI (WebAssembly System Interface) and run it in a standalone runtime (wazero, wasmtime, Wasmer), but in this example we focus on the Browser use case.
+
+1. Compile the `chromem-go` WASM binding to WebAssembly:
+   1. `cd /path/to/chromem-go/wasm`
+   2. `GOOS=js GOARCH=wasm go build -o ../examples/webassembly/chromem-go.wasm`
+2. Copy Go's wrapper JavaScript:
+   1. `cp $(go env GOROOT)/misc/wasm/wasm_exec.js ../examples/webassembly/wasm_exec.js`
+3. Serve the files
+   1. `cd ../examples/webassembly`
+   2. `go run github.com/philippgille/serve@latest -b localhost -p 8080` or similar
+4. Open <http://localhost:8080> in your browser
diff --git a/examples/webassembly/index.html b/examples/webassembly/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <script src="wasm_exec.js"></script>
+    <script>
+        const go = new Go();
+
+        console.log("Initializing WASM...");
+        WebAssembly.instantiateStreaming(fetch("chromem-go.wasm"), go.importObject).then((result) => {
+            console.log("WASM initialized.");
+
+            go.run(result.instance);
+        });
+
+        function initDBWithKey() {
+            console.log("Initializing DB...")
+            const openaiApiKey = document.getElementById("openai-api-key").value;
+
+            const err = initDB(openaiApiKey)
+            if (err) {
+                console.error('Returned error:', err)
+            } else {
+                console.log("DB initialized.")
+            }
+        }
+
+        async function addDocuments() {
+            console.log("Adding documents...")
+            try {
+                await addDocument("1", "The sky is blue because of Rayleigh scattering.");
+                console.log("Document 1 added.")
+                await addDocument("2", "Leaves are green because chlorophyll absorbs red and blue light.");
+                console.log("Document 2 added.")
+                console.log("Documents added.")
+            } catch (err) {
+                console.error('Caught exception', err)
+            }
+        }
+
+        async function queryAndPrint() {
+            console.log("Querying DB...")
+            try {
+                const res = await query("Why is the sky blue?");
+                console.log("DB queried.");
+
+                const outputElement = document.getElementById("output");
+                outputElement.textContent = `ID: ${res.ID}\nSimilarity: ${res.Similarity}\nContent: ${res.Content}\n`;
+            } catch (err) {
+                console.error('Caught exception', err)
+            }
+        }
+
+        async function runWorkflow() {
+            initDBWithKey();
+            await addDocuments();
+            await queryAndPrint();
+        }
+    </script>
+</head>
+
+<body>
+    <input type="text" id="openai-api-key" placeholder="Enter your OpenAI API key">
+    <button onclick="runWorkflow()">Run</button>
+    <p id="output"></p>
+</body>
+
+</html>