openwakeword-js 0.1.19 → 0.1.21

package/index.html

@@ -5,6 +5,14 @@
     <meta charset="utf-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>AI Wake Word Detector | OpenWakeWord JS</title>
+    <script type="importmap">
+    {
+      "imports": {
+        "onnxruntime-web": "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.mjs"
+      }
+    }
+    </script>
+
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com" rel="preconnect" />
     <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
@@ -286,7 +294,7 @@
                             class="h-44 overflow-y-auto rounded-xl bg-[#030406] p-4 font-mono text-[10px] text-slate-600 border border-white/5 custom-scrollbar leading-relaxed">
                             <div
                                 class="opacity-40 animate-pulse font-bold text-blue-900 border border-blue-900/40 p-1 inline-block rounded mb-2">
-                                OPENWAKEWORD-JS V0.1.18 READY</div>
+                                OPENWAKEWORD-JS V0.1.20 READY</div>
                         </div>
                     </div>
                 </details>
@@ -305,9 +313,12 @@
             model: null,
             audioContext: null,
             processor: null,
-            startTime: Date.now()
+            startTime: Date.now(),
+            lastActivationTime: 0,
+            cooldownSeconds: 2.0
         };
 
+
         const ui = {
             btn: document.getElementById('toggleBtn'),
             btnText: document.getElementById('btnText'),
@@ -348,9 +359,10 @@
                     wakewordModels: ['./models/hello_deepa.onnx', './models/namaste_deepa.onnx'],
                     melspectrogramModelPath: './models/melspectrogram.onnx',
                     embeddingModelPath: './models/embedding_model.onnx',
-                    vadModelPath: './models/silero_vad.onnx',
                     inferenceFramework: 'onnx',
                     wasmPaths: './models/'
+
+
                 });
                 await state.model.init();
                 log('Neural intelligence hub connected.', 'SYSTEM');
@@ -363,16 +375,33 @@
 
         function pushDetection(name, score) {
             if (ui.empty) ui.empty.style.display = 'none';
+            const isHello = name.includes('hello_deepa');
+            const isNamaste = name.includes('namaste');
+
+            let displayText = name.replace(/_/g, ' ');
+            let langLabel = "Neural Activation Triggered";
+            let langColor = "text-slate-500";
+
+            if (isHello) {
+                displayText = "Hello Deepa Activated..";
+                langLabel = "Language: English";
+                langColor = "text-blue-400";
+            } else if (isNamaste) {
+                displayText = "Namaste Deepa Activated..";
+                langLabel = "Language: Nepali";
+                langColor = "text-red-400";
+            }
+
             const card = document.createElement('div');
-            card.className = "detection-card flex items-center justify-between p-5 bg-white/5 backdrop-blur-md rounded-[1.5rem] border border-white/10 shadow-lg";
+            card.className = "group flex flex-row items-center justify-between p-5 bg-white/[0.03] border border-white/5 rounded-2xl hover:bg-white/[0.05] hover:border-white/10 transition-all duration-300 transform animate-in fade-in slide-in-from-right-4";
             card.innerHTML = `
                 <div class="flex items-center gap-4">
-                    <div class="size-12 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-400 border border-emerald-500/20 shadow-inner">
+                    <div class="size-12 rounded-full overflow-hidden flex items-center justify-center bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 shadow-[0_0_20px_rgba(16,185,129,0.1)]">
                         <svg class="size-7" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                     </div>
                     <div class="flex flex-col">
-                        <span class="text-white font-bold capitalize text-base tracking-tight">${name.replace(/_/g, ' ')}</span>
-                        <span class="text-[9px] text-slate-500 font-black uppercase tracking-[0.1em]">Neural Activation Triggered</span>
+                        <span class="text-white font-bold capitalize text-base tracking-tight">${displayText}</span>
+                        <span class="text-[9px] ${langColor} font-black uppercase tracking-[0.1em]">${langLabel}</span>
                     </div>
                 </div>
                 <div class="flex flex-col items-end gap-1">
@@ -384,6 +413,7 @@
             if (ui.stack.children.length > 5) ui.stack.lastElementChild.remove();
         }
 
+
         async function toggle() {
             if (state.isListening) {
                 state.isListening = false;
@@ -406,26 +436,62 @@
                     state.audioContext = new AudioContext({ sampleRate: 16000 });
                     const source = state.audioContext.createMediaStreamSource(stream);
 
-                    // FIXED: Power of two buffer
-                    state.processor = state.audioContext.createScriptProcessor(1024, 1, 1);
+                    // Robust processing queue to prevent re-entrancy and state corruption
+                    const audioQueue = [];
+                    let isProcessing = false;
+
+                    async function processQueue() {
+                        if (isProcessing || audioQueue.length === 0) return;
+                        isProcessing = true;
+
+                        while (audioQueue.length > 0) {
+                            const data = audioQueue.shift();
 
+                            // Python-style Cooldown Check
+                            const currentTime = Date.now();
+                            if (currentTime - state.lastActivationTime < state.cooldownSeconds * 1000) {
+                                continue;
+                            }
+
+                            try {
+                                const results = await state.model.predict(data);
+                                for (const [n, s] of Object.entries(results)) {
+                                    if (s > state.threshold) {
+                                        const clean = n.split('/').pop().replace('.onnx', '');
+
+                                        // Detection Triggered
+                                        state.lastActivationTime = Date.now();
+                                        pushDetection(clean, s);
+                                        log(`Match Found: ${clean} (${s.toFixed(2)})`, 'MATCH');
+
+                                        // Python-style Reset & Clear Queue
+                                        if (state.model.reset) state.model.reset();
+                                        audioQueue.length = 0; // Clear the queue
+                                        break; // Only trigger one wake word at a time
+                                    }
+                                }
+                            } catch (err) {
+                                log(`Inference Error: ${err.message}`, 'ERROR');
+                            }
+                        }
+
+                        isProcessing = false;
+                    }
+
+
+                    state.processor = state.audioContext.createScriptProcessor(2048, 1, 1);
                     source.connect(state.processor);
                     state.processor.connect(state.audioContext.destination);
 
-                    state.processor.onaudioprocess = async (e) => {
+                    state.processor.onaudioprocess = (e) => {
                         if (!state.isListening) return;
-                        const data = e.inputBuffer.getChannelData(0);
-                        const results = await state.model.predict(data);
-                        for (const [n, s] of Object.entries(results)) {
-                            if (s > state.threshold) {
-                                const clean = n.split('/').pop().replace('.onnx', '');
-                                pushDetection(clean, s);
-                                log(`Match Found: ${clean} (${s.toFixed(2)})`, 'MATCH');
-                            }
-                        }
+                        const data = new Float32Array(e.inputBuffer.getChannelData(0));
+                        audioQueue.push(data);
+                        processQueue();
                     };
 
                     state.isListening = true;
+
                     ui.orbRing.classList.add('animate-pulse-ring');
                     ui.orbIcon.classList.remove('opacity-40');
                     ui.orbLabel.textContent = "listening";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "openwakeword-js",
-    "version": "0.1.19",
+    "version": "0.1.21",
     "description": "Port of openWakeWord to JavaScript/TypeScript using ONNX Runtime",
     "bin": {
         "openwakeword-js-setup": "scripts/download_models.js"

package/scripts/download_models.js

@@ -14,7 +14,7 @@ const EXTERNAL_MODELS = {
     'silero_vad.onnx': 'https://github.com/dscripka/openWakeWord/releases/download/v0.5.1/silero_vad.onnx'
 };
 
-const SAMPLE_MODELS = ['hello_deepa.onnx', 'namaste_deepa.onnx'];
+const SAMPLE_MODELS = ['hello_deepa.onnx', 'hello_deepa_old.onnx', 'namaste_deepa.onnx'];
 
 async function downloadFile(url, dest) {
     return new Promise((resolve, reject) => {
@@ -100,7 +100,7 @@ async function main() {
     copyIfExists(path.join(packageRoot, 'models', 'test.html'), path.join(MODELS_DIR, 'test.html'), 'Debug UI');
 
     console.log('\n----------------------------------------------------');
-    console.log('SETUP COMPLETE (v0.1.18)');
+    console.log('SETUP COMPLETE (v0.1.20)');
     console.log('----------------------------------------------------');
     console.log('Your precision AI wake word interface is ready.');
     console.log('\nTo start the demo:');