Spaces:

k2-fsa
/

web-assembly-vad-sherpa-onnx

Running

App Files Files Community

csukuangfj commited on Jul 12

Commit

3ef3ff3

1 Parent(s): 1b4da5c

update model

Browse files

Files changed (6) hide show

app-vad.js +81 -3
index.html +51 -14
sherpa-onnx-vad.js +68 -2
sherpa-onnx-wasm-main-vad.data +2 -2
sherpa-onnx-wasm-main-vad.js +0 -0
sherpa-onnx-wasm-main-vad.wasm +2 -2

app-vad.js CHANGED Viewed

@@ -5,7 +5,6 @@
 const startBtn = document.getElementById('startBtn');
 const stopBtn = document.getElementById('stopBtn');
 const clearBtn = document.getElementById('clearBtn');
-const hint = document.getElementById('hint');
 const soundClips = document.getElementById('sound-clips');
 let textArea = document.getElementById('results');
@@ -43,19 +42,98 @@ function getDisplayResult() {
 Module = {};
 Module.onRuntimeInitialized = function() {
   console.log('inited!');
-  hint.innerText = 'Model loaded! Please click start';
   startBtn.disabled = false;
-  vad = createVad(Module);
   console.log('vad is created!', vad);
   buffer = new CircularBuffer(30 * 16000, Module);
   console.log('CircularBuffer is created!', buffer);
 };
 let audioCtx;
 let mediaStream;

 const startBtn = document.getElementById('startBtn');
 const stopBtn = document.getElementById('stopBtn');
 const clearBtn = document.getElementById('clearBtn');
 const soundClips = document.getElementById('sound-clips');
 let textArea = document.getElementById('results');
 Module = {};
+// https://emscripten.org/docs/api_reference/module.html#Module.locateFile
+Module.locateFile = function(path, scriptDirectory = '') {
+  console.log(`path: ${path}, scriptDirectory: ${scriptDirectory}`);
+  return scriptDirectory + path;
+};
+// https://emscripten.org/docs/api_reference/module.html#Module.locateFile
+Module.setStatus = function(status) {
+  console.log(`status ${status}`);
+  const statusElement = document.getElementById('status');
+  if (status == 'Running...') {
+    status = 'Model downloaded. Initializing vad...'
+  }
+  statusElement.textContent = status;
+  if (status === '') {
+    statusElement.style.display = 'none';
+    // statusElement.parentNode.removeChild(statusElement);
+    document.querySelectorAll('.tab-content').forEach((tabContentElement) => {
+      tabContentElement.classList.remove('loading');
+    });
+  } else {
+    statusElement.style.display = 'block';
+    document.querySelectorAll('.tab-content').forEach((tabContentElement) => {
+      tabContentElement.classList.add('loading');
+    });
+  }
+};
 Module.onRuntimeInitialized = function() {
   console.log('inited!');
   startBtn.disabled = false;
+  initVad();
   console.log('vad is created!', vad);
   buffer = new CircularBuffer(30 * 16000, Module);
   console.log('CircularBuffer is created!', buffer);
 };
+function fileExists(filename) {
+  const filenameLen = Module.lengthBytesUTF8(filename) + 1;
+  const buffer = Module._malloc(filenameLen);
+  Module.stringToUTF8(filename, buffer, filenameLen);
+  let exists = Module._SherpaOnnxFileExists(buffer);
+  Module._free(buffer);
+  return exists;
+}
+function initVad() {
+  const sileroVad = {
+    model: '',
+    threshold: 0.50,
+    minSilenceDuration: 0.50,
+    minSpeechDuration: 0.25,
+    maxSpeechDuration: 20,
+    windowSize: 512,
+  };
+  const tenVad = {
+    model: '',
+    threshold: 0.50,
+    minSilenceDuration: 0.50,
+    minSpeechDuration: 0.25,
+    maxSpeechDuration: 20,
+    windowSize: 256,
+  };
+  let config = {
+    sileroVad: sileroVad,
+    tenVad: tenVad,
+    sampleRate: 16000,
+    numThreads: 1,
+    provider: 'cpu',
+    debug: 1,
+    bufferSizeInSeconds: 30,
+  };
+  if (fileExists('silero_vad.onnx') == 1) {
+    config.sileroVad.model = 'silero_vad.onnx'
+  } else if (fileExists('ten-vad.onnx') == 1) {
+    config.tenVad.model = 'ten-vad.onnx'
+  }
+  vad = createVad(Module, config);
+}
 let audioCtx;
 let mediaStream;

index.html CHANGED Viewed

@@ -11,30 +11,67 @@
     textarea {
       width:100%;
     }
   </style>
 </head>
-<body>
   <h1>
     Next-gen Kaldi + WebAssembly<br/>
-    VAD Demo with <a href="https://github.com/k2-fsa/sherpa-onnx">sherpa-onnx</a><br/>
     (with <a href="https://github.com/snakers4/silero-vad">silero-vad</a>)
   </h1>
-  <div>
-    <span id="hint">Loading model ... ...</span>
-    <br/>
-    <br/>
-    <button id="startBtn" disabled>Start</button>
-    <button id="stopBtn" disabled>Stop</button>
-    <button id="clearBtn">Clear</button>
-    <br/>
-    <br/>
-    <textarea id="results" rows="10" readonly></textarea>
   </div>
-  <section flex="1" overflow="auto" id="sound-clips">
-  </section>
   <script src="sherpa-onnx-vad.js"></script>
   <script src="app-vad.js"></script>

     textarea {
       width:100%;
     }
+    .loading {
+      display: none !important;
+    }
   </style>
 </head>
+<body style="font-family: 'Source Sans Pro', sans-serif; background-color: #f9fafb; color: #333; display: flex; flex-direction: column; align-items: center; height: 100vh; margin: 0;">
   <h1>
     Next-gen Kaldi + WebAssembly<br/>
+    VAD Demo using <a href="https://github.com/k2-fsa/sherpa-onnx">sherpa-onnx</a><br/>
     (with <a href="https://github.com/snakers4/silero-vad">silero-vad</a>)
   </h1>
+  <div style="width: 100%; max-width: 900px; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex: 1;">
+    <div id="status">Loading...</div>
+    <div id="singleAudioContent" class="tab-content loading">
+      <div style="display: flex; gap: 1.5rem;">
+        <div style="flex: 1; display: flex; flex-direction: row; align-items: center; gap: 1rem;">
+          <button id="startBtn" disabled>Start</button>
+          <button id="stopBtn" disabled>Stop</button>
+          <button id="clearBtn">Clear</button>
+        </div>
+      </div>
+      <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
+          <textarea id="results" rows="10" placeholder="Please click start and speak. Output will appear here..." readonly style="flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 8px; resize: none; background-color: #f8f9fa;"></textarea>
+      </div>
+      <section flex="1" overflow="auto" id="sound-clips">
+      </section>
   </div>
+  <!-- Footer Section -->
+  <div style="width: 100%; max-width: 900px; margin-top: 1.5rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-align: left; font-size: 0.9rem; color: #6c757d;">
+    <h3>Description</h3>
+    <ul>
+      <li>Everything is <strong>open-sourced.</strong> <a href="https://github.com/k2-fsa/sherpa-onnx">code</a></li>
+      <li>If you have any issues, please either <a href="https://github.com/k2-fsa/sherpa-onnx/issues">file a ticket</a> or contact us via</li>
+        <ul>
+          <li><a href="https://k2-fsa.github.io/sherpa/social-groups.html#wechat">WeChat group</a></li>
+          <li><a href="https://k2-fsa.github.io/sherpa/social-groups.html#qq">QQ group</a></li>
+          <li><a href="https://k2-fsa.github.io/sherpa/social-groups.html#bilibili-b">Bilibili</a></li>
+        </ul>
+    </ul>
+    <h3>About This Demo</h3>
+    <ul>
+      <li><strong>Private and Secure:</strong> All processing is done locally on your device (CPU) within your browser with a single thread. No server is involved, ensuring privacy and security. You can disconnect from the Internet once this page is loaded.</li>
+      <li><strong>Efficient Resource Usage:</strong> No GPU is required, leaving system resources available for webLLM analysis.</li>
+    </ul>
+    <h3>Latest Update</h3>
+    <ul>
+      <li>Update UI.</li>
+      <li>First working version.</li>
+    </ul>
+    <h3>Acknowledgement</h3>
+    <ul>
+      <li>We refer to <a href="https://huggingface.co/spaces/Banafo/Kroko-Streaming-ASR-Wasm">https://huggingface.co/spaces/Banafo/Kroko-Streaming-ASR-Wasm</a> for the UI part.</li>
+    </ul>
+  </div>
   <script src="sherpa-onnx-vad.js"></script>
   <script src="app-vad.js"></script>

sherpa-onnx-vad.js CHANGED Viewed

@@ -7,6 +7,10 @@ function freeConfig(config, Module) {
     freeConfig(config.sileroVad, Module)
   }
   Module._free(config.ptr);
 }
@@ -48,6 +52,42 @@ function initSherpaOnnxSileroVadModelConfig(config, Module) {
   }
 }
 function initSherpaOnnxVadModelConfig(config, Module) {
   if (!('sileroVad' in config)) {
     config.sileroVad = {
@@ -60,10 +100,23 @@ function initSherpaOnnxVadModelConfig(config, Module) {
     };
   }
   const sileroVad =
       initSherpaOnnxSileroVadModelConfig(config.sileroVad, Module);
-  const len = sileroVad.len + 4 * 4;
   const ptr = Module._malloc(len);
   const providerLen = Module.lengthBytesUTF8(config.provider || 'cpu') + 1;
@@ -86,8 +139,11 @@ function initSherpaOnnxVadModelConfig(config, Module) {
   Module.setValue(ptr + offset, config.debug || 0, 'i32');
   offset += 4;
   return {
-    buffer: buffer, ptr: ptr, len: len, sileroVad: sileroVad,
   }
 }
@@ -101,8 +157,18 @@ function createVad(Module, myConfig) {
     windowSize: 512,
   };
   let config = {
     sileroVad: sileroVad,
     sampleRate: 16000,
     numThreads: 1,
     provider: 'cpu',

     freeConfig(config.sileroVad, Module)
   }
+  if ('tenVad' in config) {
+    freeConfig(config.tenVad, Module)
+  }
   Module._free(config.ptr);
 }
   }
 }
+function initSherpaOnnxTenVadModelConfig(config, Module) {
+  const modelLen = Module.lengthBytesUTF8(config.model || '') + 1;
+  const n = modelLen;
+  const buffer = Module._malloc(n);
+  const len = 6 * 4;
+  const ptr = Module._malloc(len);
+  Module.stringToUTF8(config.model || '', buffer, modelLen);
+  offset = 0;
+  Module.setValue(ptr, buffer, 'i8*');
+  offset += 4;
+  Module.setValue(ptr + offset, config.threshold || 0.5, 'float');
+  offset += 4;
+  Module.setValue(ptr + offset, config.minSilenceDuration || 0.5, 'float');
+  offset += 4;
+  Module.setValue(ptr + offset, config.minSpeechDuration || 0.25, 'float');
+  offset += 4;
+  Module.setValue(ptr + offset, config.windowSize || 256, 'i32');
+  offset += 4;
+  Module.setValue(ptr + offset, config.maxSpeechDuration || 20, 'float');
+  offset += 4;
+  return {
+    buffer: buffer, ptr: ptr, len: len,
+  }
+}
 function initSherpaOnnxVadModelConfig(config, Module) {
   if (!('sileroVad' in config)) {
     config.sileroVad = {
     };
   }
+  if (!('tenVad' in config)) {
+    config.tenVad = {
+      model: '',
+      threshold: 0.50,
+      minSilenceDuration: 0.50,
+      minSpeechDuration: 0.25,
+      windowSize: 256,
+      maxSpeechDuration: 20,
+    };
+  }
   const sileroVad =
       initSherpaOnnxSileroVadModelConfig(config.sileroVad, Module);
+  const tenVad = initSherpaOnnxTenVadModelConfig(config.tenVad, Module);
+  const len = sileroVad.len + 4 * 4 + tenVad.len;
   const ptr = Module._malloc(len);
   const providerLen = Module.lengthBytesUTF8(config.provider || 'cpu') + 1;
   Module.setValue(ptr + offset, config.debug || 0, 'i32');
   offset += 4;
+  Module._CopyHeap(tenVad.ptr, tenVad.len, ptr + offset);
+  offset += tenVad.len;
   return {
+    buffer: buffer, ptr: ptr, len: len, sileroVad: sileroVad, tenVad: tenVad
   }
 }
     windowSize: 512,
   };
+  const tenVad = {
+    model: '',
+    threshold: 0.50,
+    minSilenceDuration: 0.50,
+    minSpeechDuration: 0.25,
+    maxSpeechDuration: 20,
+    windowSize: 256,
+  };
   let config = {
     sileroVad: sileroVad,
+    tenVad: tenVad,
     sampleRate: 16000,
     numThreads: 1,
     provider: 'cpu',

sherpa-onnx-wasm-main-vad.data CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f08d12ca25857236f9f06e9353588c54435b07a7e74a7d79ca4a1f8c6918c5d
-size 1807857

 version https://git-lfs.github.com/spec/v1
+oid sha256:fd37ef028574ef87d799d42c323da6e2218f024b2bb2a83fce733ca95537ac3b
+size 644930

sherpa-onnx-wasm-main-vad.js CHANGED Viewed

The diff for this file is too large to render. See raw diff

sherpa-onnx-wasm-main-vad.wasm CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c186ecca23100bbb06f3834f112a087f507d1ec83e207cf1dd5c60e6e3a5346
-size 10364436

 version https://git-lfs.github.com/spec/v1
+oid sha256:df6d196e2afdf9e034b08b6c51c1acdd0f8d88d850d2c87fc092fde37b5404ca
+size 10400397