Fix: Add crypto-js for the case of missing crypto.subtle in the browser

crypto.subtle is avaiable if the browser open the browser example in
localhost or 127.0.0.1. But it is not available if the browser open the
browser example in other ip address. So we need to add crypto-js for the
case of missing crypto.subtle in the browser.

clients/js/examples/browser/app.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ChromaClient } from "../../src/ChromaClient";
 import { Collection } from "../../src/types";
+import CryptoJS from "crypto-js";
 
 const SAMPLE_DOCUMENTS = [
   "apple",
@@ -14,7 +15,18 @@ const SAMPLE_DOCUMENTS = [
 const hashString = async (message: string) => {
   const encoder = new TextEncoder();
   const data = encoder.encode(message);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  let hashBuffer;
+  if (crypto.subtle) {
+    hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  } else {
+    const hash = CryptoJS.SHA256(CryptoJS.enc.Utf8.parse(message));
+    hashBuffer = new Uint8Array(hash.words.map(word => [
+      (word >> 24) & 0xff,
+      (word >> 16) & 0xff,
+      (word >> 8) & 0xff,
+      word & 0xff
+    ]).flat());
+  }
   const hashArray = Array.from(new Uint8Array(hashBuffer));
   return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
 };

clients/js/examples/browser/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "chromadb": "link:../..",
+    "crypto-js": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

clients/js/examples/browser/vite.config.mjs

@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   server: {
+    host: "0.0.0.0",
     port: 3000,
   },
   // This manual remapping is only needed because we're loading a locally linked version of the JS client