browser demo

Author: aboutphilippe

next.config.mjs

@@ -1,4 +1,38 @@
+import CopyPlugin from "copy-webpack-plugin"
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  reactStrictMode: true,
+
+  webpack: (config, {}) => {
+    config.resolve.extensions.push(".ts", ".tsx")
+    config.resolve.fallback = { fs: false }
+
+    config.plugins.push(
+      new CopyPlugin({
+        patterns: [
+          {
+            from: "./node_modules/onnxruntime-web/dist/ort-wasm.wasm",
+            to: "static/chunks/[name][ext]",
+          },
+          {
+            from: "./node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm",
+            to: "static/chunks/[name][ext]",
+          },
+          {
+            from: "node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js",
+            to: "static/chunks/[name][ext]",
+          },
+          {
+            from: "node_modules/@ricky0123/vad-web/dist/*.onnx",
+            to: "static/chunks/[name][ext]",
+          },
+        ],
+      })
+    )
+
+    return config
+  },
+}
 
-export default nextConfig;
+export default nextConfig

package.json

@@ -9,14 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ricky0123/vad-react": "^0.0.24",
+    "@ricky0123/vad-web": "^0.0.18",
     "next": "14.2.5",
+    "onnxruntime-web": "^1.18.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "wavefile": "^11.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",