Add basic WebAssembly example

It doesn't work yet. It makes the first call to OpenAI, but not the second.
philippgille · Apr 25, 2024 · 140a5f9 · 140a5f9
1 parent ee7328f
commit 140a5f9
Show file tree

Hide file tree

Showing 6 changed files with 726 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/chromem-go.wasm b/examples/webassembly/chromem-go.wasm
diff --git a/examples/webassembly/index.html b/examples/webassembly/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <script src="wasm_exec.js"></script>
+    <script>
+        const go = new Go();
+        let mod, inst;
+
+        console.log("Initializing WASM...");
+        WebAssembly.instantiateStreaming(fetch("chromem-go.wasm"), go.importObject).then((result) => {
+            mod = result.module;
+            inst = result.instance;
+
+            // TODO: Which one?
+            run();
+            // go.run(inst);
+        });
+
+        async function run() {
+            await go.run(inst);
+        }
+
+        function initDBWithKey() {
+            const openaiApiKey = document.getElementById("openai-api-key").value;
+            window.initDB(openaiApiKey)
+        }
+
+        function addDocuments() {
+            window.addDocument("1", "The sky is blue because of Rayleigh scattering.");
+            // TODO: The second call never gets executed. Why?
+            // TODO: Change from setTimeout to promises or async/await
+            setTimeout(() => {
+                window.addDocument("2", "Leaves are green because chlorophyll absorbs red and blue light.");
+            }, 2000);
+        }
+
+        function queryAndPrint() {
+            const res = window.query("Why is the sky blue?");
+            const outputElement = document.getElementById("output");
+            outputElement.textContent = `ID: ${res.ID}\nSimilarity: ${res.Similarity}\nContent: ${res.Content}`;
+        }
+
+        function runWorkflow() {
+            initDBWithKey();  // First, initialize the DB with the API key
+            // Adding a delay before adding documents to ensure DB initialization is complete
+            // TODO: Change from setTimeout to promises or async/await
+            setTimeout(() => {
+                addDocuments();
+                // Adding another delay before querying to ensure documents have been added
+                setTimeout(queryAndPrint, 5000);  // Adjust time as necessary based on operation complexity
+            }, 5000);  // Adjust time as necessary based on operation complexity
+        }
+    </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>