Initial RapidSpeech WASM demo

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Copy the static WASM demo files (built locally — see HOWTO.md).
+COPY public/ /app/public/
+COPY serve.py /app/serve.py
+
+EXPOSE 7860
+
+CMD ["python3", "serve.py", "7860", "/app/public"]

README.md

@@ -1,12 +1,43 @@
 ---
-title: RapidSpeech Wasm
-emoji: 🔥
-colorFrom: pink
-colorTo: red
+title: RapidSpeech.cpp WASM Demo
+emoji: 🎙️
+colorFrom: blue
+colorTo: purple
 sdk: docker
+app_port: 7860
 pinned: false
-license: mit
-short_description: 'RapidSpeech.cpp WASM demo '
+license: apache-2.0
+short_description: On-device ASR + TTS in your browser via WebAssembly + WebGPU
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# RapidSpeech.cpp — Browser Demo
+
+Three-tab WebAssembly demo for [RapidSpeech.cpp](https://github.com/RapidAI/RapidSpeech.cpp):
+
+- **ASR Offline** — upload a WAV (or record one) → optional neural VAD → transcript with timestamps.
+- **ASR Online** — live mic → neural VAD → streaming transcripts, with optional two-pass (CTC → LLM rescore).
+- **TTS Offline** — text → speech via OmniVoice / OpenVoice2 (with voice-cloning).
+
+Everything runs **locally in your browser** via WebAssembly + WebGPU + pthreads. After the WASM module loads, audio and model bytes never leave the page.
+
+## Why Docker SDK?
+
+The demo needs cross-origin isolation (COOP+COEP) so `SharedArrayBuffer` and pthreads are available. HuggingFace's static SDK does not reliably set those headers, so this Space uses the **Docker SDK** with a tiny Python server (`serve.py`) that emits the right headers explicitly.
+
+## Models
+
+Pick any GGUF from [RapidAI/RapidSpeech](https://huggingface.co/RapidAI/RapidSpeech) and paste the resolve URL into the demo. Recommended starters:
+
+- ASR: `funasr-nano-q4_k_m.gguf` (~600 MB)
+- VAD: `silero-vad-v6.gguf` (~2 MB)
+- TTS: `omnivoice-q4_k_m.gguf` or `openvoice2-base-en.gguf`
+
+## Browser requirements
+
+- **Chromium 113+** for WebGPU (Chrome / Edge / Opera). Firefox / Safari fall back to CPU.
+- Mic input requires HTTPS — HuggingFace Spaces already serves over HTTPS.
+
+## Source
+
+Full project, native C++ CLI, Python / Node bindings, and conversion scripts:
+[github.com/RapidAI/RapidSpeech.cpp](https://github.com/RapidAI/RapidSpeech.cpp)

public/app.js

@@ -0,0 +1,51 @@
+/**
+ * Tab router for the multi-task RapidSpeech web demo.
+ *
+ * Loads each per-tab module exactly once with a fresh RapidSpeechWASM
+ * instance factory. Pages are isolated — switching tabs does not reset
+ * loaded models on the inactive tabs.
+ */
+(function () {
+  // Factory: each call returns a brand-new RapidSpeechWASM instance, which
+  // owns its own Emscripten module (MODULARIZE=1 returns a fresh instance).
+  async function createInstance() {
+    const mod = await RapidSpeechModule();
+    return new RapidSpeechWASM(mod);
+  }
+
+  const tabs = [
+    { id: 'asr-offline', mod: window.RSPageAsrOffline },
+    { id: 'asr-online',  mod: window.RSPageAsrOnline  },
+    { id: 'tts-offline', mod: window.RSPageTtsOffline },
+  ];
+
+  function showTab(id) {
+    document.querySelectorAll('.tab-btn').forEach(b => {
+      b.classList.toggle('active', b.dataset.tab === id);
+    });
+    document.querySelectorAll('section[data-page]').forEach(s => {
+      s.hidden = s.dataset.page !== id;
+    });
+    if (location.hash.slice(1) !== id) {
+      history.replaceState(null, '', '#' + id);
+    }
+  }
+
+  // Wire tab clicks.
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => showTab(btn.dataset.tab));
+  });
+
+  // Initialize every page once (so DOM listeners and state are bound).
+  for (const { id, mod } of tabs) {
+    if (!mod) { console.warn('Missing page module for', id); continue; }
+    const root = document.querySelector(`section[data-page="${id}"]`);
+    if (!root) { console.warn('Missing root for', id); continue; }
+    mod.init({ root, createInstance });
+  }
+
+  // Honor URL hash on load.
+  const initial = (location.hash || '').slice(1);
+  const valid = tabs.find(t => t.id === initial);
+  showTab(valid ? initial : 'asr-offline');
+})();

public/index.html

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RapidSpeech — WebAssembly Demo</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+
+    <div class="header">
+      <h1>Rapid<span>Speech</span></h1>
+      <p>ASR &amp; TTS in the Browser — WebAssembly + WebGPU</p>
+    </div>
+
+    <nav class="tabs">
+      <button class="tab-btn active" data-tab="asr-offline">ASR Offline</button>
+      <button class="tab-btn"        data-tab="asr-online">ASR Online</button>
+      <button class="tab-btn"        data-tab="tts-offline">TTS Offline</button>
+    </nav>
+
+    <!-- ─── ASR Offline ─────────────────────────────────────── -->
+    <section data-page="asr-offline">
+      <div class="card">
+        <div class="card-title">Model</div>
+        <div class="form-row">
+          <label>Model URL</label>
+          <input type="text" data-id="model-url"
+                 placeholder="https://huggingface.co/RapidAI/RapidSpeech/resolve/main/ASR/FunasrNano/funasr-nano-q4_k_m.gguf">
+        </div>
+        <div class="form-row">
+          <label>Threads</label>
+          <input type="number" data-id="n-threads" value="4" min="1" max="8">
+          <label style="min-width: 80px;">Use LLM</label>
+          <input type="checkbox" data-id="use-llm" checked>
+        </div>
+        <div class="progress-container" data-id="progress-container">
+          <div class="progress-track"><div class="progress-fill" data-id="progress-bar"></div></div>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-load" data-id="load-btn">Load Model</button>
+        </div>
+        <div class="status idle" data-id="status">Enter a model URL and click Load.</div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">VAD (optional — silero-vad or firered-vad)</div>
+        <div class="form-row">
+          <label>VAD model URL</label>
+          <input type="text" data-id="vad-url"
+                 placeholder="https://huggingface.co/RapidAI/RapidSpeech/resolve/main/VAD/silero_vad_v6.gguf">
+        </div>
+        <div class="form-row">
+          <label>Threshold</label>
+          <input type="range" data-id="vad-threshold" min="0.1" max="0.9" step="0.05" value="0.5">
+          <span class="range-value" data-id="vad-threshold-val">0.50</span>
+          <label style="min-width: 100px;">Min seg (s)</label>
+          <input type="number" data-id="vad-min-seg" value="0.3" step="0.1" min="0" max="2">
+        </div>
+        <div class="progress-container" data-id="vad-progress-container">
+          <div class="progress-track"><div class="progress-fill" data-id="vad-progress-bar"></div></div>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-load" data-id="vad-load-btn">Load VAD</button>
+        </div>
+        <div class="status idle" data-id="vad-status">No VAD loaded — full clip will be transcribed.</div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Input</div>
+        <div class="form-row">
+          <label>Source</label>
+          <select data-id="source-mode">
+            <option value="upload">Upload WAV</option>
+            <option value="record">Record from mic</option>
+          </select>
+        </div>
+        <div class="form-row" data-id="upload-row">
+          <label>Audio file</label>
+          <input type="file" data-id="audio-file" accept="audio/*">
+        </div>
+        <div class="form-row" data-id="record-row" style="display:none;">
+          <label>Recording</label>
+          <button class="btn btn-primary" data-id="rec-btn" disabled>● Record</button>
+          <span data-id="rec-time" class="vad-info">00:00.0</span>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-primary" data-id="run-btn" disabled>Transcribe</button>
+          <button class="btn btn-ghost"   data-id="redecode-btn" disabled>Re-decode (LLM)</button>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Transcript</div>
+        <div class="transcript" data-id="transcript"></div>
+      </div>
+    </section>
+
+    <!-- ─── ASR Online ──────────────────────────────────────── -->
+    <section data-page="asr-online" hidden>
+      <div class="card">
+        <div class="card-title">Model</div>
+        <div class="form-row">
+          <label>Model URL</label>
+          <input type="text" data-id="model-url"
+                 placeholder="https://huggingface.co/RapidAI/RapidSpeech/resolve/main/ASR/FunasrNano/funasr-nano-q4_k_m.gguf">
+        </div>
+        <div class="form-row">
+          <label>Threads</label>
+          <input type="number" data-id="n-threads" value="4" min="1" max="8">
+          <label style="min-width: 80px;">Use LLM</label>
+          <input type="checkbox" data-id="use-llm" checked>
+          <label style="min-width: 90px;">Two-pass</label>
+          <input type="checkbox" data-id="two-pass">
+        </div>
+        <div class="progress-container" data-id="progress-container">
+          <div class="progress-track"><div class="progress-fill" data-id="progress-bar"></div></div>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-load" data-id="load-btn">Load Model</button>
+        </div>
+        <div class="status idle" data-id="status">Enter a model URL and click Load.</div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">VAD (neural — silero-vad or firered-vad; falls back to energy gate)</div>
+        <div class="form-row">
+          <label>VAD model URL</label>
+          <input type="text" data-id="vad-url"
+                 placeholder="https://huggingface.co/RapidAI/RapidSpeech/resolve/main/VAD/firered-stream-vad.gguf">
+        </div>
+        <div class="progress-container" data-id="vad-progress-container">
+          <div class="progress-track"><div class="progress-fill" data-id="vad-progress-bar"></div></div>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-load" data-id="vad-load-btn">Load VAD</button>
+          <span class="status idle" data-id="vad-status" style="flex:1;">Energy gate (default).</span>
+        </div>
+        <div class="form-row">
+          <label>Speech threshold</label>
+          <input type="range" data-id="vad-threshold" min="0.001" max="0.9" step="0.005" value="0.5">
+          <span class="range-value" data-id="vad-threshold-val">0.500</span>
+        </div>
+        <div class="form-row">
+          <label>Silence frames (energy mode only)</label>
+          <input type="range" data-id="silence-frames" min="5" max="40" step="1" value="15">
+          <span class="range-value" data-id="silence-frames-val">15</span>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Microphone</div>
+        <div class="btn-row">
+          <button class="btn btn-primary"   data-id="start-btn" disabled>Start</button>
+          <button class="btn btn-secondary" data-id="stop-btn"  disabled>Stop</button>
+          <button class="btn btn-ghost"     data-id="clear-btn">Clear</button>
+        </div>
+        <div class="vad-container">
+          <div class="vad-track"><div class="vad-fill" data-id="vad-bar"></div></div>
+          <div class="vad-meta">
+            <span class="vad-label" data-id="vad-label">silence</span>
+            <span class="vad-info"  data-id="info"></span>
+          </div>
+        </div>
+        <div class="status error" data-id="rtf-warn"
+             style="display:none; margin-top:8px;"></div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Transcript</div>
+        <div class="transcript" data-id="transcript"></div>
+        <div class="partial" data-id="partial"></div>
+      </div>
+    </section>
+
+    <!-- ─── TTS Offline ─────────────────────────────────────── -->
+    <section data-page="tts-offline" hidden>
+      <div class="card">
+        <div class="card-title">Model</div>
+        <div class="form-row">
+          <label>Model URL</label>
+          <input type="text" data-id="model-url"
+                 placeholder="https://huggingface.co/RapidAI/RapidSpeech/resolve/main/TTS/omnivoice-q4_k_m.gguf">
+        </div>
+        <div class="form-row">
+          <label>Threads</label>
+          <input type="number" data-id="n-threads" value="4" min="1" max="8">
+        </div>
+        <div class="progress-container" data-id="progress-container">
+          <div class="progress-track"><div class="progress-fill" data-id="progress-bar"></div></div>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-load" data-id="load-btn">Load Model</button>
+        </div>
+        <div class="status idle" data-id="status">Enter a model URL and click Load.</div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Generation params</div>
+        <div class="form-row">
+          <label>Instruct</label>
+          <select data-id="instruct">
+            <option value="male">male</option>
+            <option value="female">female</option>
+            <option value="child">child</option>
+          </select>
+          <label style="min-width: 80px;">Language</label>
+          <select data-id="language">
+            <option value="English">English</option>
+            <option value="Chinese">Chinese</option>
+          </select>
+        </div>
+        <div class="form-row">
+          <label>Seed</label>
+          <input type="number" data-id="seed" value="42">
+          <label style="min-width: 120px;">Diffusion steps</label>
+          <input type="range" data-id="steps" min="8" max="50" step="1" value="32">
+          <span class="range-value" data-id="steps-val">32</span>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Voice cloning (optional)</div>
+        <div class="form-row">
+          <label>Reference WAV</label>
+          <input type="file" data-id="ref-audio" accept="audio/*">
+        </div>
+        <div class="form-row">
+          <label>Reference text</label>
+          <input type="text" data-id="ref-text" placeholder="Transcription of the reference clip">
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Synthesize</div>
+        <div class="form-row">
+          <label style="min-width: 110px;">Text</label>
+          <textarea data-id="text" placeholder="Type the text you want to synthesize..."></textarea>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-primary" data-id="gen-btn" disabled>Generate</button>
+          <button class="btn btn-ghost"   data-id="clear-btn">Clear</button>
+        </div>
+        <div class="audio-output" data-id="audio-output" hidden>
+          <audio data-id="audio" controls></audio>
+          <a class="download-link" data-id="download" download="rapidspeech-tts.wav">⬇ Download WAV</a>
+          <span class="vad-info" data-id="gen-info"></span>
+        </div>
+      </div>
+    </section>
+
+    <div class="footer">
+      <a href="https://github.com/lovemefan/RapidSpeech.cpp" target="_blank">RapidSpeech.cpp</a>
+      &mdash; GGUF speech models, in your browser.
+    </div>
+  </div>
+
+  <!-- Emscripten-generated WASM glue -->
+  <script src="rapidspeech-wasm.js"></script>
+  <!-- Bridge + shared utils -->
+  <script src="rapidspeech-bridge.js"></script>
+  <script src="utils.js"></script>
+  <!-- Per-tab modules -->
+  <script src="pages/asr-offline.js"></script>
+  <script src="pages/asr-online.js"></script>
+  <script src="pages/tts-offline.js"></script>
+  <!-- Tab router -->
+  <script src="app.js"></script>
+</body>
+</html>

public/pages/asr-offline.js

@@ -0,0 +1,313 @@
+/**
+ * ASR Offline — upload a file or record a clip, transcribe the whole thing.
+ * Optional neural VAD (silero-vad / firered-vad) segments long clips into
+ * speech regions and transcribes each region separately.
+ *
+ * Exposes window.RSPageAsrOffline.init({root, createInstance}).
+ */
+(function () {
+  const { decodeFileToMono16k, escapeHtml, statusSetter, TARGET_SR } = window.RSUtils;
+
+  function $(root, id) { return root.querySelector(`[data-id="${id}"]`); }
+
+  async function init({ root, createInstance }) {
+    const els = {
+      modelUrl: $(root, 'model-url'),
+      nThreads: $(root, 'n-threads'),
+      useLlm:   $(root, 'use-llm'),
+      loadBtn:  $(root, 'load-btn'),
+      status:   $(root, 'status'),
+      progress: $(root, 'progress-container'),
+      progressBar: $(root, 'progress-bar'),
+
+      vadUrl:        $(root, 'vad-url'),
+      vadThreshold:  $(root, 'vad-threshold'),
+      vadThresholdVal: $(root, 'vad-threshold-val'),
+      vadMinSeg:     $(root, 'vad-min-seg'),
+      vadLoadBtn:    $(root, 'vad-load-btn'),
+      vadStatus:     $(root, 'vad-status'),
+      vadProgress:   $(root, 'vad-progress-container'),
+      vadProgressBar:$(root, 'vad-progress-bar'),
+
+      sourceMode: $(root, 'source-mode'),
+      uploadRow:  $(root, 'upload-row'),
+      recordRow:  $(root, 'record-row'),
+      audioFile:  $(root, 'audio-file'),
+      recBtn:     $(root, 'rec-btn'),
+      recTime:    $(root, 'rec-time'),
+
+      runBtn:      $(root, 'run-btn'),
+      redecodeBtn: $(root, 'redecode-btn'),
+      transcript:  $(root, 'transcript'),
+    };
+
+    const setStatus    = statusSetter(els.status);
+    const setVadStatus = statusSetter(els.vadStatus);
+
+    let rs = null;
+    let vad = null;
+    let pendingPcm = null;   // Float32Array @ 16k, ready to run
+    let mediaStream = null;
+    let mediaRecorder = null;
+    let recChunks = [];
+    let recStartTime = 0;
+    let recTimer = null;
+    let recording = false;
+
+    els.vadThreshold.addEventListener('input', () => {
+      const v = parseFloat(els.vadThreshold.value);
+      els.vadThresholdVal.textContent = v.toFixed(2);
+      if (vad && vad.isReady) vad.setThreshold(v);
+    });
+    els.vadThresholdVal.textContent = parseFloat(els.vadThreshold.value).toFixed(2);
+
+    els.sourceMode.addEventListener('change', () => {
+      const isRecord = els.sourceMode.value === 'record';
+      els.uploadRow.style.display = isRecord ? 'none' : '';
+      els.recordRow.style.display = isRecord ? '' : 'none';
+    });
+
+    els.loadBtn.addEventListener('click', loadModel);
+    els.vadLoadBtn.addEventListener('click', loadVad);
+    els.audioFile.addEventListener('change', onFilePicked);
+    els.recBtn.addEventListener('click', toggleRecord);
+    els.runBtn.addEventListener('click', runTranscribe);
+    els.redecodeBtn.addEventListener('click', runRedecode);
+
+    async function loadModel() {
+      const url = els.modelUrl.value.trim();
+      if (!url) { setStatus('Please enter a model URL.', 'error'); return; }
+
+      setStatus('Downloading model...', 'loading');
+      els.loadBtn.disabled = true;
+      els.progress.style.display = 'block';
+
+      try {
+        rs = await createInstance();
+        const nThreads = parseInt(els.nThreads.value, 10) || 4;
+        await rs.initAsr(url, nThreads, (p) => {
+          els.progressBar.style.width = (p * 100).toFixed(1) + '%';
+        });
+        rs.setUseLlm(els.useLlm.checked);
+        els.useLlm.addEventListener('change', () => rs.setUseLlm(els.useLlm.checked));
+        els.progress.style.display = 'none';
+        els.recBtn.disabled = false;
+        if (pendingPcm) els.runBtn.disabled = false;
+        setStatus(`Ready — ${rs.archName} @ ${rs.sampleRate}Hz`, 'ready');
+      } catch (err) {
+        setStatus('Failed: ' + err.message, 'error');
+        els.progress.style.display = 'none';
+      } finally {
+        els.loadBtn.disabled = false;
+      }
+    }
+
+    async function loadVad() {
+      const url = els.vadUrl.value.trim();
+      if (!url) { setVadStatus('Enter a VAD model URL first.', 'error'); return; }
+
+      setVadStatus('Downloading VAD...', 'loading');
+      els.vadLoadBtn.disabled = true;
+      els.vadProgress.style.display = 'block';
+
+      try {
+        // The VAD shares the same WASM module as the ASR context. Each tab
+        // already has its own MODULARIZE'd module, so the VAD lives next to
+        // the rs context on that module.
+        if (!rs) {
+          rs = await createInstance();
+        }
+        vad = new window.RapidSpeechVAD(rs._mod);
+        await vad.load(url, 2, (p) => {
+          els.vadProgressBar.style.width = (p * 100).toFixed(1) + '%';
+        });
+        vad.setThreshold(parseFloat(els.vadThreshold.value));
+        els.vadProgress.style.display = 'none';
+        setVadStatus(`Ready — ${vad.arch}`, 'ready');
+      } catch (err) {
+        setVadStatus('Failed: ' + err.message, 'error');
+        els.vadProgress.style.display = 'none';
+        vad = null;
+      } finally {
+        els.vadLoadBtn.disabled = false;
+      }
+    }
+
+    async function onFilePicked() {
+      const f = els.audioFile.files[0];
+      if (!f) return;
+      setStatus('Decoding audio...', 'loading');
+      try {
+        pendingPcm = await decodeFileToMono16k(f);
+        setStatus(`Decoded ${f.name} — ${(pendingPcm.length / TARGET_SR).toFixed(2)} s`, 'ready');
+        if (rs) els.runBtn.disabled = false;
+      } catch (err) {
+        setStatus('Decode failed: ' + err.message, 'error');
+      }
+    }
+
+    async function toggleRecord() {
+      if (recording) {
+        stopRecording();
+        return;
+      }
+      try {
+        mediaStream = await navigator.mediaDevices.getUserMedia({
+          audio: { channelCount: 1, sampleRate: { ideal: TARGET_SR } }
+        });
+      } catch { setStatus('Microphone access denied.', 'error'); return; }
+
+      recChunks = [];
+      mediaRecorder = new MediaRecorder(mediaStream);
+      mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) recChunks.push(e.data); };
+      mediaRecorder.onstop = async () => {
+        const blob = new Blob(recChunks, { type: mediaRecorder.mimeType || 'audio/webm' });
+        setStatus('Decoding recording...', 'loading');
+        try {
+          pendingPcm = await decodeFileToMono16k(blob);
+          setStatus(`Recorded ${(pendingPcm.length / TARGET_SR).toFixed(2)} s`, 'ready');
+          if (rs) els.runBtn.disabled = false;
+        } catch (err) {
+          setStatus('Decode failed: ' + err.message, 'error');
+        }
+      };
+      mediaRecorder.start();
+      recording = true;
+      recStartTime = performance.now();
+      els.recBtn.textContent = '■ Stop';
+      recTimer = setInterval(() => {
+        const t = (performance.now() - recStartTime) / 1000;
+        const m = Math.floor(t / 60);
+        const s = (t % 60).toFixed(1);
+        els.recTime.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(4, '0');
+      }, 100);
+    }
+
+    function stopRecording() {
+      if (!recording) return;
+      recording = false;
+      els.recBtn.textContent = '● Record';
+      clearInterval(recTimer);
+      mediaRecorder.stop();
+      mediaStream.getTracks().forEach(t => t.stop());
+      mediaStream = null;
+    }
+
+    // Detect speech segments using the loaded VAD.
+    function detectSegments(pcm) {
+      vad.reset();
+      vad.setThreshold(parseFloat(els.vadThreshold.value));
+      // Push in chunks so we don't fight a huge single allocation.
+      const STRIDE = 16000;
+      for (let off = 0; off < pcm.length; off += STRIDE) {
+        const end = Math.min(off + STRIDE, pcm.length);
+        vad.pushAudio(pcm.subarray(off, end));
+      }
+      const segments = vad.drainSegments(1024);
+      // If the clip ends mid-speech, close out a final segment so we don't
+      // drop the trailing audio.
+      if (vad.isSpeech) {
+        const lastEnd = pcm.length / TARGET_SR;
+        const lastStart = segments.length > 0 ? segments[segments.length - 1].end_s : 0;
+        segments.push({ start_s: Math.max(lastStart, 0), end_s: lastEnd });
+      }
+      const minSeg = parseFloat(els.vadMinSeg.value) || 0;
+      return segments.filter(s => s.end_s - s.start_s >= minSeg);
+    }
+
+    async function runTranscribe() {
+      if (!rs || !pendingPcm) return;
+      els.runBtn.disabled = true;
+      els.redecodeBtn.disabled = true;
+
+      const useVad = vad && vad.isReady;
+      const audioDur = pendingPcm.length / TARGET_SR;
+
+      if (!useVad) {
+        setStatus('Running ASR (full clip)...', 'loading');
+        rs.reset();
+        rs.pushAudio(pendingPcm);
+        const t0 = performance.now();
+        let result;
+        try { result = await rs.process(); }
+        catch (err) { setStatus('ASR failed: ' + err.message, 'error'); els.runBtn.disabled = false; return; }
+        const dt = (performance.now() - t0) / 1000;
+        const rtf = dt / audioDur;
+        if (result.status > 0 && result.text) {
+          appendLine(0, audioDur, result.text, rtf);
+          els.redecodeBtn.disabled = false;
+        } else {
+          appendLine(0, audioDur, '(no speech detected)', rtf);
+        }
+        setStatus(`Done in ${dt.toFixed(2)} s (RTF ${rtf.toFixed(2)})`, 'ready');
+        els.runBtn.disabled = false;
+        return;
+      }
+
+      setStatus('Running VAD...', 'loading');
+      const segments = detectSegments(pendingPcm);
+      if (segments.length === 0) {
+        appendLine(0, audioDur, '(no speech detected by VAD)', 0);
+        setStatus('VAD found no speech.', 'ready');
+        els.runBtn.disabled = false;
+        return;
+      }
+
+      const t0 = performance.now();
+      for (let i = 0; i < segments.length; ++i) {
+        const seg = segments[i];
+        setStatus(`Transcribing segment ${i+1}/${segments.length}...`, 'loading');
+        const s0 = Math.max(0, Math.floor(seg.start_s * TARGET_SR));
+        const s1 = Math.min(pendingPcm.length, Math.ceil(seg.end_s * TARGET_SR));
+        if (s1 <= s0) continue;
+        const slice = pendingPcm.subarray(s0, s1);
+        rs.reset();
+        rs.pushAudio(slice);
+        let result;
+        try { result = await rs.process(); }
+        catch (err) { appendLine(seg.start_s, seg.end_s, `(error: ${err.message})`, null); continue; }
+        const text = (result.status > 0 && result.text) ? result.text : '(no speech)';
+        const segDur = seg.end_s - seg.start_s;
+        appendLine(seg.start_s, seg.end_s, text, null, segDur);
+      }
+      const dt = (performance.now() - t0) / 1000;
+      const rtf = dt / audioDur;
+      els.redecodeBtn.disabled = false;
+      setStatus(`Done — ${segments.length} segment(s) in ${dt.toFixed(2)} s (RTF ${rtf.toFixed(2)})`, 'ready');
+      els.runBtn.disabled = false;
+    }
+
+    async function runRedecode() {
+      if (!rs) return;
+      els.redecodeBtn.disabled = true;
+      setStatus('Re-decoding...', 'loading');
+      const t0 = performance.now();
+      let result;
+      try { result = await rs.redecode(); }
+      catch (err) { setStatus('Redecode failed: ' + err.message, 'error'); els.redecodeBtn.disabled = false; return; }
+      const dt = (performance.now() - t0) / 1000;
+      if (result.status > 0 && result.text) {
+        appendLine(null, null, '↻ ' + result.text, null);
+      }
+      setStatus(`Re-decoded in ${dt.toFixed(2)} s`, 'ready');
+      els.redecodeBtn.disabled = false;
+    }
+
+    function appendLine(startS, endS, text, rtf, segDur) {
+      const line = document.createElement('div');
+      line.className = 'transcript-line';
+      let meta = '';
+      if (startS != null && endS != null) {
+        meta = `[${startS.toFixed(2)}s → ${endS.toFixed(2)}s]`;
+        if (rtf != null) meta += ` RTF ${rtf.toFixed(2)}`;
+      } else if (rtf != null) {
+        meta = `[RTF ${rtf.toFixed(2)}]`;
+      }
+      line.innerHTML = `<span class="timestamp">${meta}</span> ${escapeHtml(text)}`;
+      els.transcript.appendChild(line);
+      els.transcript.scrollTop = els.transcript.scrollHeight;
+    }
+  }
+
+  window.RSPageAsrOffline = { init };
+})();

public/pages/asr-online.js

@@ -0,0 +1,521 @@
+/**
+ * ASR Online — microphone capture → VAD (neural or energy fallback) → ASR.
+ *
+ * When a VAD model (silero-vad or firered-vad) is loaded, audio is fed through
+ * the neural VAD and segments are dispatched to ASR on `is_speech_end` events.
+ * Otherwise the page falls back to an RMS-energy gate with `silence-frames`
+ * hysteresis.
+ *
+ * Exposes window.RSPageAsrOnline.init({root, createInstance}).
+ */
+(function () {
+  const { formatTime, escapeHtml, statusSetter } = window.RSUtils;
+  const SAMPLE_RATE = 16000;
+
+  function $(root, id) { return root.querySelector(`[data-id="${id}"]`); }
+
+  async function init({ root, createInstance }) {
+    const els = {
+      modelUrl: $(root, 'model-url'),
+      nThreads: $(root, 'n-threads'),
+      useLlm:   $(root, 'use-llm'),
+      twoPass:  $(root, 'two-pass'),
+      loadBtn:  $(root, 'load-btn'),
+      status:   $(root, 'status'),
+      progress: $(root, 'progress-container'),
+      progressBar: $(root, 'progress-bar'),
+
+      vadUrl:        $(root, 'vad-url'),
+      vadLoadBtn:    $(root, 'vad-load-btn'),
+      vadStatus:     $(root, 'vad-status'),
+      vadProgress:   $(root, 'vad-progress-container'),
+      vadProgressBar:$(root, 'vad-progress-bar'),
+
+      threshold:    $(root, 'vad-threshold'),
+      thresholdVal: $(root, 'vad-threshold-val'),
+      silenceFrames:    $(root, 'silence-frames'),
+      silenceFramesVal: $(root, 'silence-frames-val'),
+
+      startBtn: $(root, 'start-btn'),
+      stopBtn:  $(root, 'stop-btn'),
+      clearBtn: $(root, 'clear-btn'),
+      vadBar:   $(root, 'vad-bar'),
+      vadLabel: $(root, 'vad-label'),
+      info:     $(root, 'info'),
+      transcript: $(root, 'transcript'),
+      partial:    $(root, 'partial'),
+      rtfWarn:   $(root, 'rtf-warn'),
+    };
+
+    const setStatus    = statusSetter(els.status);
+    const setVadStatus = statusSetter(els.vadStatus);
+
+    // Mutable runtime state (rebuilt each Start).
+    let rs = null;
+    let vad = null;
+    let audioCtx = null;
+    let mediaStream = null;
+    let running = false;
+    let carry = new Float32Array(0);
+    let silenceFrames = 0;
+    let inSpeech = false;
+    let speechBuffer = [];
+    let speechStartTime = 0;
+    let audioTime = 0;
+    let workletNode = null;
+    let scriptNode = null;
+    // VAD-mode (neural) speech-buffer state.
+    let vadSpeechBuf = [];
+    let vadSpeechStart = 0;
+    // Serialize ASR dispatches — rs is a single shared context and calling
+    // rs.reset/pushAudio/process concurrently from overlapping VAD segments
+    // corrupts state and deadlocks the WebGPU queue.
+    let asrQueue = Promise.resolve();
+
+    function vadParams() {
+      return {
+        threshold: parseFloat(els.threshold.value),
+        silenceMax: parseInt(els.silenceFrames.value, 10),
+      };
+    }
+
+    els.threshold.addEventListener('input', () => {
+      const v = parseFloat(els.threshold.value);
+      els.thresholdVal.textContent = v.toFixed(3);
+      if (vad && vad.isReady) vad.setThreshold(v);
+    });
+    els.silenceFrames.addEventListener('input', () => {
+      els.silenceFramesVal.textContent = els.silenceFrames.value;
+    });
+    els.thresholdVal.textContent    = parseFloat(els.threshold.value).toFixed(3);
+    els.silenceFramesVal.textContent = els.silenceFrames.value;
+
+    els.loadBtn.addEventListener('click', loadModel);
+    els.vadLoadBtn.addEventListener('click', loadVad);
+    els.startBtn.addEventListener('click', startMic);
+    els.stopBtn.addEventListener('click', stopMic);
+    els.clearBtn.addEventListener('click', clearTranscript);
+
+    window.addEventListener('beforeunload', stopMic);
+
+    async function loadModel() {
+      const url = els.modelUrl.value.trim();
+      if (!url) { setStatus('Please enter a model URL.', 'error'); return; }
+
+      setStatus('Downloading model...', 'loading');
+      els.loadBtn.disabled = true;
+      els.progress.style.display = 'block';
+
+      try {
+        rs = await createInstance();
+        const nThreads = parseInt(els.nThreads.value, 10) || 4;
+        await rs.initAsr(url, nThreads, (p) => {
+          els.progressBar.style.width = (p * 100).toFixed(1) + '%';
+        });
+        rs.setUseLlm(els.useLlm.checked);
+        els.useLlm.addEventListener('change', () => rs.setUseLlm(els.useLlm.checked));
+
+        els.progress.style.display = 'none';
+        els.startBtn.disabled = false;
+        setStatus(`Ready — ${rs.archName} @ ${rs.sampleRate}Hz`, 'ready');
+        els.info.textContent = `${rs.archName} | ${rs.sampleRate} Hz`;
+      } catch (err) {
+        setStatus('Failed: ' + err.message, 'error');
+        els.progress.style.display = 'none';
+      } finally {
+        els.loadBtn.disabled = false;
+      }
+    }
+
+    async function loadVad() {
+      const url = els.vadUrl.value.trim();
+      if (!url) { setVadStatus('Enter a VAD model URL first.', 'error'); return; }
+      setVadStatus('Downloading VAD...', 'loading');
+      els.vadLoadBtn.disabled = true;
+      els.vadProgress.style.display = 'block';
+      try {
+        if (!rs) { rs = await createInstance(); }
+        vad = new window.RapidSpeechVAD(rs._mod);
+        await vad.load(url, 2, (p) => {
+          els.vadProgressBar.style.width = (p * 100).toFixed(1) + '%';
+        });
+        vad.setThreshold(parseFloat(els.threshold.value));
+        els.vadProgress.style.display = 'none';
+        setVadStatus(`Neural VAD — ${vad.arch}`, 'ready');
+      } catch (err) {
+        setVadStatus('Failed: ' + err.message, 'error');
+        els.vadProgress.style.display = 'none';
+        vad = null;
+      } finally {
+        els.vadLoadBtn.disabled = false;
+      }
+    }
+
+    async function startMic() {
+      if (running) return;
+      try {
+        mediaStream = await navigator.mediaDevices.getUserMedia({
+          audio: { channelCount: 1, sampleRate: { ideal: SAMPLE_RATE },
+                   echoCancellation: true, noiseSuppression: true }
+        });
+      } catch {
+        setStatus('Microphone access denied.', 'error');
+        return;
+      }
+
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
+      if (audioCtx.audioWorklet) {
+        await startWithAudioWorklet();
+      } else {
+        startWithScriptProcessor();
+      }
+
+      // Reset segmentation state.
+      carry = new Float32Array(0);
+      inSpeech = false;
+      silenceFrames = 0;
+      speechBuffer = [];
+      vadSpeechBuf = [];
+      vadSpeechStart = 0;
+      asrQueue = Promise.resolve();
+      rtfHistory.length = 0;
+      rtfWarned = false;
+      if (els.rtfWarn) els.rtfWarn.style.display = 'none';
+      if (vad && vad.isReady) vad.reset();
+
+      running = true;
+      els.startBtn.disabled = true;
+      els.stopBtn.disabled  = false;
+      setStatus(vad && vad.isReady ? 'Listening (neural VAD)...' : 'Listening (energy gate)...',
+                'listening');
+    }
+
+    function startWithScriptProcessor() {
+      const source = audioCtx.createMediaStreamSource(mediaStream);
+      scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);
+      scriptNode.onaudioprocess = (event) => {
+        if (!running) return;
+        processAudioChunk(event.inputBuffer.getChannelData(0));
+      };
+      source.connect(scriptNode);
+      scriptNode.connect(audioCtx.destination);
+    }
+
+    async function startWithAudioWorklet() {
+      const workletCode = `
+        class RSProcessor extends AudioWorkletProcessor {
+          process(inputs) {
+            const input = inputs[0];
+            if (input && input.length > 0) this.port.postMessage(input[0]);
+            return true;
+          }
+        }
+        registerProcessor('rs-processor', RSProcessor);
+      `;
+      const blob = new Blob([workletCode], { type: 'application/javascript' });
+      const url = URL.createObjectURL(blob);
+      await audioCtx.audioWorklet.addModule(url);
+      URL.revokeObjectURL(url);
+
+      workletNode = new AudioWorkletNode(audioCtx, 'rs-processor');
+      workletNode.port.onmessage = (event) => {
+        if (!running) return;
+        processAudioChunk(event.data);
+      };
+      const source = audioCtx.createMediaStreamSource(mediaStream);
+      source.connect(workletNode);
+      workletNode.connect(audioCtx.destination);
+    }
+
+    function processAudioChunk(buffer) {
+      // If the audio device gave us a non-16k stream, resample on the fly.
+      // (most browsers honor the AudioContext's 16 k sampleRate hint.)
+      let pcm = buffer;
+      if (audioCtx && audioCtx.sampleRate !== SAMPLE_RATE) {
+        // Cheap linear resample for the live path — segments going to ASR
+        // already pass through the high-quality OfflineAudioContext resampler
+        // in decodeFileToMono16k; here it just feeds VAD/energy gating.
+        const ratio = audioCtx.sampleRate / SAMPLE_RATE;
+        const outLen = Math.floor(buffer.length / ratio);
+        const tmp = new Float32Array(outLen);
+        for (let i = 0; i < outLen; ++i) tmp[i] = buffer[Math.floor(i * ratio)] || 0;
+        pcm = tmp;
+      }
+
+      if (vad && vad.isReady) {
+        processWithNeuralVad(pcm);
+      } else {
+        processWithEnergyGate(pcm);
+      }
+    }
+
+    function processWithNeuralVad(pcm) {
+      audioTime += pcm.length / SAMPLE_RATE;
+      vad.pushAudio(pcm);
+      const prob = vad.probability;
+      updateVadDisplay(Math.min(prob, 1.0), vad.isSpeech);
+
+      // Buffer the audio while drains tell us what segments closed. We always
+      // buffer (even during silence) so we can slice [start_s..end_s] out of
+      // it when an end-event arrives.
+      // Memory bound: keep at most 60 s of trailing audio in the buffer.
+      vadSpeechBuf.push(pcm);
+      const maxSamples = SAMPLE_RATE * 60;
+      let totalBuf = 0;
+      for (const b of vadSpeechBuf) totalBuf += b.length;
+      while (totalBuf > maxSamples && vadSpeechBuf.length > 1) {
+        const dropped = vadSpeechBuf.shift().length;
+        totalBuf -= dropped;
+        vadSpeechStart += dropped / SAMPLE_RATE;
+      }
+
+      // Walk frame events to find segment closes.
+      const frames = vad.drainFrames(512);
+      for (const f of frames) {
+        if (f.is_speech_end) {
+          // Segments come from drainSegments — they have absolute timestamps
+          // relative to the VAD's `samples_in` counter.
+          // We already track audioTime which mirrors that — close the segment
+          // using the segment queue.
+        }
+      }
+      const segs = vad.drainSegments(32);
+      for (const seg of segs) {
+        const startS = seg.start_s;
+        const endS   = seg.end_s;
+        // Chain onto the serial ASR queue so concurrent segments don't race.
+        asrQueue = asrQueue.then(() => dispatchVadSegment(startS, endS))
+                           .catch((err) => console.error('ASR queue error', err));
+      }
+    }
+
+    async function dispatchVadSegment(startS, endS) {
+      // Find the slice of pcm covering [startS, endS] using vadSpeechStart as
+      // the buffer origin in seconds.
+      const bufStart = vadSpeechStart;
+      const sliceStart = Math.max(0, Math.floor((startS - bufStart) * SAMPLE_RATE));
+      const sliceEnd   = Math.max(sliceStart, Math.floor((endS - bufStart) * SAMPLE_RATE));
+      if (sliceEnd <= sliceStart) return;
+
+      // Concatenate buffered chunks into a flat slice.
+      const flat = new Float32Array(sliceEnd - sliceStart);
+      let off = 0, srcOff = 0, written = 0;
+      for (const b of vadSpeechBuf) {
+        const next = srcOff + b.length;
+        if (next <= sliceStart) { srcOff = next; continue; }
+        if (srcOff >= sliceEnd) break;
+        const from = Math.max(0, sliceStart - srcOff);
+        const to   = Math.min(b.length, sliceEnd - srcOff);
+        flat.set(b.subarray(from, to), off);
+        off += to - from;
+        srcOff = next;
+        written += to - from;
+        if (srcOff >= sliceEnd) break;
+      }
+      if (written < SAMPLE_RATE * 0.2) { return; } // <200 ms — skip
+
+      const twoPass = els.twoPass && els.twoPass.checked;
+      const useLlm  = els.useLlm.checked;
+      const audioS  = written / SAMPLE_RATE;
+      const startLabel = formatTime(startS);
+      const endLabel   = formatTime(endS);
+
+      rs.reset();
+      rs.pushAudio(flat);
+
+      if (twoPass) {
+        // Pass 1: CTC greedy (fast).
+        rs.setUseLlm(false);
+        const t0 = performance.now();
+        let ctcResult;
+        try { ctcResult = await rs.process(); }
+        catch (err) { console.error('ASR process failed', err); rs.reset(); return; }
+        const ctcInferS = (performance.now() - t0) / 1000;
+        const ctcRtf    = audioS > 0 ? ctcInferS / audioS : 0;
+
+        // Render CTC as a partial line we can upgrade in place.
+        const line = appendTranscript(startLabel, endLabel,
+                                      ctcResult.text || '(no speech)',
+                                      { kind: 'ctc' });
+
+        // Pass 2: LLM rescore.
+        rs.setUseLlm(true);
+        const t1 = performance.now();
+        let llmResult;
+        try { llmResult = await rs.redecode(); }
+        catch (err) { console.error('ASR redecode failed', err); rs.reset(); return; }
+        const llmInferS = (performance.now() - t1) / 1000;
+        const totalRtf  = audioS > 0 ? (ctcInferS + llmInferS) / audioS : 0;
+        maybeWarnRtf(totalRtf);
+
+        if (llmResult.status > 0 && llmResult.text) {
+          updateTranscriptLine(line, startLabel, endLabel, llmResult.text,
+                               { kind: 'llm' });
+        }
+      } else {
+        if (!useLlm) rs.setUseLlm(false);
+        else rs.setUseLlm(true);
+        const t0 = performance.now();
+        let result;
+        try { result = await rs.process(); }
+        catch (err) { console.error('ASR process failed', err); rs.reset(); return; }
+        const inferS = (performance.now() - t0) / 1000;
+        const rtf    = audioS > 0 ? inferS / audioS : 0;
+        maybeWarnRtf(rtf);
+        if (result.status > 0 && result.text) {
+          appendTranscript(startLabel, endLabel, result.text);
+        }
+      }
+      els.partial.textContent = '';
+    }
+
+    function processWithEnergyGate(buffer) {
+      const { threshold, silenceMax } = vadParams();
+      const chunkSize = 512;
+
+      const merged = new Float32Array(carry.length + buffer.length);
+      merged.set(carry, 0);
+      merged.set(buffer, carry.length);
+
+      let offset = 0;
+      for (; offset + chunkSize <= merged.length; offset += chunkSize) {
+        const chunk = merged.subarray(offset, offset + chunkSize);
+        const energy = rmsEnergy(chunk);
+        updateVadDisplay(Math.min(energy / 0.05, 1.0), energy >= threshold);
+        audioTime += chunkSize / SAMPLE_RATE;
+
+        if (energy >= threshold) {
+          silenceFrames = 0;
+          if (!inSpeech) {
+            inSpeech = true;
+            speechStartTime = audioTime - chunkSize / SAMPLE_RATE;
+            speechBuffer = [];
+          }
+          speechBuffer.push(...chunk);
+        } else if (inSpeech) {
+          speechBuffer.push(...chunk);
+          silenceFrames++;
+          if (silenceFrames >= silenceMax) {
+            finalizeEnergySegment();
+          }
+        }
+      }
+      carry = merged.slice(offset);
+    }
+
+    function rmsEnergy(pcm) {
+      let sum = 0;
+      for (let i = 0; i < pcm.length; i++) sum += pcm[i] * pcm[i];
+      return Math.sqrt(sum / pcm.length);
+    }
+
+    async function finalizeEnergySegment() {
+      if (speechBuffer.length === 0) return;
+      const buf = speechBuffer;
+      const segStart = speechStartTime;
+      const segEnd = audioTime;
+      inSpeech = false;
+      speechBuffer = [];
+      silenceFrames = 0;
+
+      let pcm = new Float32Array(buf);
+      if (pcm.length < SAMPLE_RATE * 0.2) { rs.reset(); els.partial.textContent = ''; return; }
+
+      rs.pushAudio(pcm);
+      let result;
+      try { result = await rs.process(); }
+      catch (err) { console.error('ASR process failed', err); rs.reset(); return; }
+
+      if (result.status > 0 && result.text) {
+        appendTranscript(formatTime(segStart), formatTime(segEnd), result.text);
+      }
+      rs.reset();
+      els.partial.textContent = '';
+    }
+
+    // Track recent RTFs — warn the user once the running average passes 1.
+    const rtfHistory = [];
+    let rtfWarned = false;
+    function maybeWarnRtf(rtf) {
+      if (!isFinite(rtf) || rtf <= 0) return;
+      rtfHistory.push(rtf);
+      if (rtfHistory.length > 5) rtfHistory.shift();
+      const avg = rtfHistory.reduce((a, b) => a + b, 0) / rtfHistory.length;
+      els.info.textContent = `${rs.archName} | ${rs.sampleRate} Hz | RTF ${avg.toFixed(2)}`;
+      if (els.rtfWarn) {
+        if (avg > 1.0 && !rtfWarned) {
+          rtfWarned = true;
+          const hint = els.useLlm.checked
+            ? '关闭 "Use LLM" 可显著提升速度（仅 CTC 解码）。'
+            : '当前已关闭 LLM；浏览器 WebGPU 内核调度开销限制了 encoder 吞吐。';
+          els.rtfWarn.textContent = `⚠ RTF ≈ ${avg.toFixed(2)} — 无法实时跟上音频。${hint}`;
+          els.rtfWarn.style.display = 'block';
+        } else if (avg <= 0.9 && rtfWarned) {
+          rtfWarned = false;
+          els.rtfWarn.style.display = 'none';
+        }
+      }
+    }
+
+    function appendTranscript(start, end, text, opts = {}) {
+      const line = document.createElement('div');
+      line.className = 'transcript-line';
+      if (opts.kind) line.dataset.kind = opts.kind;
+      renderLine(line, start, end, text, opts.kind);
+      els.transcript.appendChild(line);
+      els.transcript.scrollTop = els.transcript.scrollHeight;
+      return line;
+    }
+
+    function updateTranscriptLine(line, start, end, text, opts = {}) {
+      if (!line) return;
+      if (opts.kind) line.dataset.kind = opts.kind;
+      renderLine(line, start, end, text, opts.kind);
+      els.transcript.scrollTop = els.transcript.scrollHeight;
+    }
+
+    function renderLine(line, start, end, text, kind) {
+      // CTC partial gets a tag + greyed text; LLM result replaces it.
+      const tag = kind === 'ctc' ? ' <span class="tag tag-ctc">CTC</span>'
+                : kind === 'llm' ? ' <span class="tag tag-llm">LLM</span>'
+                : '';
+      const cls = kind === 'ctc' ? ' style="opacity:0.65; font-style:italic;"' : '';
+      line.innerHTML = `<span class="timestamp">[${start} → ${end}]</span>${tag} <span${cls}>${escapeHtml(text)}</span>`;
+    }
+
+    function stopMic() {
+      if (!running) return;
+      running = false;
+      els.startBtn.disabled = false;
+      els.stopBtn.disabled  = true;
+
+      if (!vad || !vad.isReady) {
+        if (inSpeech && speechBuffer.length > 0) finalizeEnergySegment();
+      }
+      carry = new Float32Array(0);
+
+      if (workletNode) { try { workletNode.disconnect(); } catch {} workletNode = null; }
+      if (scriptNode)  { try { scriptNode.disconnect();  } catch {} scriptNode  = null; }
+      if (mediaStream) { mediaStream.getTracks().forEach(t => t.stop()); mediaStream = null; }
+      if (audioCtx && audioCtx.state !== 'closed') { audioCtx.close().catch(() => {}); audioCtx = null; }
+
+      setStatus('Stopped.', 'idle');
+      updateVadDisplay(0, false);
+    }
+
+    function clearTranscript() {
+      els.transcript.innerHTML = '';
+      els.partial.textContent = '';
+      audioTime = 0;
+    }
+
+    function updateVadDisplay(prob, isSpeech) {
+      els.vadBar.style.width = (prob * 100).toFixed(1) + '%';
+      els.vadBar.className = 'vad-fill' + (isSpeech ? ' speech' : '');
+      els.vadLabel.textContent = isSpeech ? 'SPEECH' : 'silence';
+      els.vadLabel.className = 'vad-label' + (isSpeech ? ' speech' : '');
+    }
+  }
+
+  window.RSPageAsrOnline = { init };
+})();

public/pages/tts-offline.js

@@ -0,0 +1,152 @@
+/**
+ * TTS Offline — text → audio, optional voice cloning via reference audio.
+ * Exposes window.RSPageTtsOffline.init({root, createInstance}).
+ */
+(function () {
+  const { decodeFileToMonoAt, encodeWav, statusSetter } = window.RSUtils;
+
+  function $(root, id) { return root.querySelector(`[data-id="${id}"]`); }
+
+  async function init({ root, createInstance }) {
+    const els = {
+      modelUrl: $(root, 'model-url'),
+      nThreads: $(root, 'n-threads'),
+      loadBtn:  $(root, 'load-btn'),
+      status:   $(root, 'status'),
+      progress: $(root, 'progress-container'),
+      progressBar: $(root, 'progress-bar'),
+
+      instruct: $(root, 'instruct'),
+      language: $(root, 'language'),
+      seed:     $(root, 'seed'),
+      steps:    $(root, 'steps'),
+      stepsVal: $(root, 'steps-val'),
+
+      refAudio: $(root, 'ref-audio'),
+      refText:  $(root, 'ref-text'),
+
+      text:     $(root, 'text'),
+      genBtn:   $(root, 'gen-btn'),
+      clearBtn: $(root, 'clear-btn'),
+
+      audioOutput: $(root, 'audio-output'),
+      audio:       $(root, 'audio'),
+      download:    $(root, 'download'),
+      genInfo:     $(root, 'gen-info'),
+    };
+
+    const setStatus = statusSetter(els.status);
+
+    let rs = null;
+    let refPcm = null;     // Float32Array at refSr
+    let refSr  = 16000;
+    let lastObjectUrl = null;
+
+    els.steps.addEventListener('input', () => {
+      els.stepsVal.textContent = els.steps.value;
+    });
+    els.stepsVal.textContent = els.steps.value;
+
+    els.loadBtn.addEventListener('click', loadModel);
+    els.refAudio.addEventListener('change', onRefPicked);
+    els.genBtn.addEventListener('click', generate);
+    els.clearBtn.addEventListener('click', clearOutput);
+
+    async function loadModel() {
+      const url = els.modelUrl.value.trim();
+      if (!url) { setStatus('Please enter a model URL.', 'error'); return; }
+
+      setStatus('Downloading model...', 'loading');
+      els.loadBtn.disabled = true;
+      els.progress.style.display = 'block';
+
+      try {
+        rs = await createInstance();
+        const nThreads = parseInt(els.nThreads.value, 10) || 4;
+        // Use generic init with TTS_OFFLINE task type so the engine batches the
+        // whole utterance instead of streaming chunks.
+        await rs.init(url, RS_TASK.TTS_OFFLINE, nThreads, (p) => {
+          els.progressBar.style.width = (p * 100).toFixed(1) + '%';
+        });
+        refSr = rs.sampleRate || 24000;
+        els.progress.style.display = 'none';
+        els.genBtn.disabled = false;
+        setStatus(`Ready — ${rs.archName} @ ${rs.sampleRate}Hz`, 'ready');
+      } catch (err) {
+        setStatus('Failed: ' + err.message, 'error');
+        els.progress.style.display = 'none';
+      } finally {
+        els.loadBtn.disabled = false;
+      }
+    }
+
+    async function onRefPicked() {
+      const f = els.refAudio.files[0];
+      if (!f) { refPcm = null; return; }
+      setStatus('Decoding reference audio...', 'loading');
+      try {
+        // Decode at the model's native rate (24k for OmniVoice, but we let the
+        // engine resample if it differs). We use rs.sampleRate if loaded, else
+        // a sensible default.
+        refPcm = await decodeFileToMonoAt(f, refSr);
+        setStatus(`Reference loaded (${(refPcm.length / refSr).toFixed(2)} s)`, 'ready');
+      } catch (err) {
+        setStatus('Decode failed: ' + err.message, 'error');
+        refPcm = null;
+      }
+    }
+
+    async function generate() {
+      if (!rs) return;
+      const text = els.text.value.trim();
+      if (!text) { setStatus('Enter some text first.', 'error'); return; }
+
+      els.genBtn.disabled = true;
+      setStatus('Synthesizing...', 'loading');
+
+      // Push voice-clone reference if provided.
+      if (refPcm) {
+        rs.pushReferenceAudio(refPcm, refSr);
+        const refT = els.refText.value.trim();
+        if (refT) rs.pushReferenceText(refT);
+      }
+      rs.setTtsParams({
+        instruct: els.instruct.value,
+        language: els.language.value,
+        seed:     parseInt(els.seed.value, 10) || 42,
+      });
+      rs.setDiffusionSteps(parseInt(els.steps.value, 10) || 32);
+
+      const t0 = performance.now();
+      let pcm;
+      try { pcm = await rs.synthesize(text); }
+      catch (err) {
+        setStatus('Synthesis failed: ' + err.message, 'error');
+        els.genBtn.disabled = false;
+        return;
+      }
+      const dt = (performance.now() - t0) / 1000;
+      const dur = pcm.length / rs.sampleRate;
+      const rtf = dt / Math.max(dur, 1e-6);
+
+      const blob = encodeWav(pcm, rs.sampleRate);
+      if (lastObjectUrl) URL.revokeObjectURL(lastObjectUrl);
+      lastObjectUrl = URL.createObjectURL(blob);
+      els.audio.src = lastObjectUrl;
+      els.download.href = lastObjectUrl;
+      els.audioOutput.hidden = false;
+      els.genInfo.textContent =
+        `${dur.toFixed(2)} s synthesized in ${dt.toFixed(2)} s — RTF ${rtf.toFixed(2)}`;
+      setStatus('Done.', 'ready');
+      els.genBtn.disabled = false;
+    }
+
+    function clearOutput() {
+      els.text.value = '';
+      els.audioOutput.hidden = true;
+      if (lastObjectUrl) { URL.revokeObjectURL(lastObjectUrl); lastObjectUrl = null; }
+    }
+  }
+
+  window.RSPageTtsOffline = { init };
+})();

public/rapidspeech-bridge.js

@@ -0,0 +1,406 @@
+/**
+ * RapidSpeech WASM JavaScript bridge.
+ *
+ * Wraps the Emscripten-compiled rapidspeech-wasm module with a high-level JS
+ * API. Supports both ASR (push PCM → text) and TTS (push text → PCM chunks).
+ *
+ * Usage (browser):
+ *   const mod = await RapidSpeechModule();
+ *   const asr = new RapidSpeechWASM(mod);
+ *   await asr.initAsr(modelUrl);
+ *   asr.pushAudio(float32Pcm);
+ *   const { text } = asr.process();
+ *
+ *   const tts = new RapidSpeechWASM(mod);
+ *   await tts.initTts(modelUrl);
+ *   tts.setTtsParams({ instruct: 'female', language: 'English', seed: 42 });
+ *   const pcm = tts.synthesize('Hello world');  // Float32Array @ tts.sampleRate
+ */
+
+// Mirror of rs_task_type_t in rapidspeech.h
+const RS_TASK = Object.freeze({
+  ASR_OFFLINE: 0,
+  ASR_ONLINE:  1,
+  TTS_OFFLINE: 2,
+  TTS_ONLINE:  3,
+  E2E_SPEECH_LLM: 4,
+});
+
+class RapidSpeechWASM {
+  constructor(module) {
+    this._mod = module;
+    this._ready = false;
+
+    // ── Bind C functions (cwrap = lighter than ccall on hot paths) ──
+    // Functions that may suspend through WebGPU's async device/buffer ops are
+    // bound with {async: true} so cwrap returns a Promise instead of dropping
+    // the result when ASYNCIFY unwinds. Always await these.
+    this._initEx        = module.cwrap('rs_wasm_init_ex', 'number', ['string', 'number', 'number'], { async: true });
+    this._init          = module.cwrap('rs_wasm_init',    'number', ['string', 'number'],           { async: true });
+    this._free          = module.cwrap('rs_wasm_free',    null,     []);
+
+    this._pushAudio     = module.cwrap('rs_wasm_push_audio',          'number', ['number', 'number']);
+    this._pushText      = module.cwrap('rs_wasm_push_text',           'number', ['string']);
+    this._pushRefAudio  = module.cwrap('rs_wasm_push_reference_audio','number', ['number', 'number', 'number']);
+    this._pushRefText   = module.cwrap('rs_wasm_push_reference_text', 'number', ['string']);
+
+    this._process       = module.cwrap('rs_wasm_process',      'number', [], { async: true });
+    this._redecode      = module.cwrap('rs_wasm_redecode',     'number', [], { async: true });
+    this._getText       = module.cwrap('rs_wasm_get_text',     'string', []);
+    this._getAudioPtr   = module.cwrap('rs_wasm_get_audio_ptr','number', []);
+    this._getAudioLen   = module.cwrap('rs_wasm_get_audio_len','number', []);
+    this._reset         = module.cwrap('rs_wasm_reset',        'number', []);
+
+    this._setPrompt     = module.cwrap('rs_wasm_set_user_input_prompt',  'number', ['string']);
+    this._setUseLlm     = module.cwrap('rs_wasm_set_use_llm',            'number', ['number']);
+    this._setCtcPrecheck= module.cwrap('rs_wasm_set_ctc_precheck',       'number', ['number']);
+    this._setTtsParams  = module.cwrap('rs_wasm_set_tts_params',         'number', ['string','string','number']);
+    this._setTtsSteps   = module.cwrap('rs_wasm_set_tts_diffusion_steps','number', ['number']);
+
+    this._getSampleRate = module.cwrap('rs_wasm_get_sample_rate', 'number', []);
+    this._getArchName   = module.cwrap('rs_wasm_get_arch_name',   'string', []);
+    this._isReady       = module.cwrap('rs_wasm_is_ready',        'number', []);
+    this._getVersion    = module.cwrap('rs_wasm_get_version',     'string', []);
+
+    this._sampleRate = 16000;
+    this._taskType   = RS_TASK.ASR_OFFLINE;
+  }
+
+  // ── Model loading ──────────────────────────────────────────
+  /**
+   * Generic init: fetch model from URL, write to /model.gguf, init context.
+   * @param {string}   modelUrl
+   * @param {number}   taskType   one of RS_TASK.*
+   * @param {number}   nThreads
+   * @param {function} onProgress(0..1)
+   */
+  async init(modelUrl, taskType = RS_TASK.ASR_OFFLINE, nThreads = 2, onProgress = null) {
+    const fileName = '/model.gguf';
+
+    let buffer;
+    if (modelUrl instanceof Uint8Array || modelUrl instanceof ArrayBuffer) {
+      buffer = modelUrl instanceof ArrayBuffer ? new Uint8Array(modelUrl) : modelUrl;
+    } else {
+      const response = await fetch(modelUrl);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch model: ${response.status} ${response.statusText}`);
+      }
+      const total = parseInt(response.headers.get('Content-Length') || '0', 10);
+      const reader = response.body.getReader();
+      const chunks = [];
+      let loaded = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        loaded += value.length;
+        if (onProgress && total > 0) onProgress(Math.min(loaded / total, 1.0));
+      }
+      buffer = new Uint8Array(loaded);
+      let off = 0;
+      for (const c of chunks) { buffer.set(c, off); off += c.length; }
+    }
+
+    this._mod.FS.writeFile(fileName, buffer);
+
+    const ret = await this._initEx(fileName, taskType, nThreads);
+    if (ret !== 0) throw new Error('rs_wasm_init_ex failed with code ' + ret);
+
+    this._sampleRate = this._getSampleRate();
+    this._taskType   = taskType;
+    this._ready = true;
+  }
+
+  initAsr(modelUrl, nThreads = 2, onProgress = null) {
+    return this.init(modelUrl, RS_TASK.ASR_OFFLINE, nThreads, onProgress);
+  }
+
+  initTts(modelUrl, nThreads = 2, onProgress = null) {
+    return this.init(modelUrl, RS_TASK.TTS_ONLINE, nThreads, onProgress);
+  }
+
+  free() {
+    if (this._ready) {
+      this._free();
+      this._ready = false;
+    }
+  }
+
+  // ── ASR ───────────────────────────────────────────────────
+  /** Push float32 PCM samples to the audio buffer. */
+  pushAudio(pcm) {
+    if (!this._ready) return;
+    const n = pcm.length;
+    const ptr = this._mod._malloc(n * 4);
+    this._mod.HEAPF32.set(pcm, ptr / 4);
+    this._pushAudio(ptr, n);
+    this._mod._free(ptr);
+  }
+
+  /** Set the LLM decoder prompt (FunASRNano). */
+  setUserInputPrompt(prompt) { this._setPrompt(String(prompt)); }
+  setUseLlm(enable)          { this._setUseLlm(enable ? 1 : 0); }
+  setCtcPrecheck(enable)     { this._setCtcPrecheck(enable ? 1 : 0); }
+  async redecode() {
+    const status = await this._redecode();
+    return { status, text: status > 0 ? this._getText() : '' };
+  }
+
+  // ── TTS ───────────────────────────────────────────────────
+  /** Set TTS generation params (OmniVoice). */
+  setTtsParams({ instruct = 'male', language = 'English', seed = 42 } = {}) {
+    this._setTtsParams(instruct, language, seed | 0);
+  }
+
+  setDiffusionSteps(nSteps) { this._setTtsSteps(nSteps | 0); }
+
+  /**
+   * Push a reference audio buffer for voice cloning.
+   * @param {Float32Array} pcm
+   * @param {number} sampleRate
+   */
+  pushReferenceAudio(pcm, sampleRate = 16000) {
+    if (!this._ready) return;
+    const n = pcm.length;
+    const ptr = this._mod._malloc(n * 4);
+    this._mod.HEAPF32.set(pcm, ptr / 4);
+    this._pushRefAudio(ptr, n, sampleRate | 0);
+    this._mod._free(ptr);
+  }
+
+  pushReferenceText(text) { this._pushRefText(String(text)); }
+
+  /** Push text for TTS to consume on the next process() call. */
+  pushText(text) {
+    if (!this._ready) return -1;
+    return this._pushText(String(text));
+  }
+
+  /**
+   * Synthesize text and return the assembled Float32Array (all chunks
+   * concatenated). Use processStreaming() if you need chunked playback.
+   */
+  async synthesize(text) {
+    if (!this._ready) throw new Error('Not initialized');
+    this.reset();
+    if (this._pushText(String(text)) !== 0) {
+      throw new Error('rs_wasm_push_text failed');
+    }
+    const chunks = [];
+    let total = 0;
+    let ret;
+    do {
+      ret = await this._process();
+      if (ret < 0) throw new Error('TTS inference error');
+      const n = this._getAudioLen();
+      if (n > 0) {
+        const ptr = this._getAudioPtr();
+        const view = this._mod.HEAPF32.subarray(ptr / 4, ptr / 4 + n);
+        const chunk = new Float32Array(n);
+        chunk.set(view); // copy out of WASM heap before the next process()
+        chunks.push(chunk);
+        total += n;
+      }
+    } while (ret > 0);
+
+    const out = new Float32Array(total);
+    let off = 0;
+    for (const c of chunks) { out.set(c, off); off += c.length; }
+    return out;
+  }
+
+  /**
+   * Async generator yielding TTS chunks as they arrive.
+   *   for await (const chunk of tts.streamSynthesize('hi')) { play(chunk); }
+   */
+  async *streamSynthesize(text) {
+    if (!this._ready) throw new Error('Not initialized');
+    this.reset();
+    if (this._pushText(String(text)) !== 0) {
+      throw new Error('rs_wasm_push_text failed');
+    }
+    let ret;
+    do {
+      ret = await this._process();
+      if (ret < 0) throw new Error('TTS inference error');
+      const n = this._getAudioLen();
+      if (n > 0) {
+        const ptr = this._getAudioPtr();
+        const view = this._mod.HEAPF32.subarray(ptr / 4, ptr / 4 + n);
+        const chunk = new Float32Array(n);
+        chunk.set(view);
+        yield chunk;
+      }
+      // Yield to the event loop so playback / UI can keep up.
+      await new Promise((r) => setTimeout(r, 0));
+    } while (ret > 0);
+  }
+
+  // ── Generic ───────────────────────────────────────────────
+  /**
+   * Run one inference step. Returns { status, text } for ASR; for TTS use
+   * synthesize() / streamSynthesize() which handle the loop.
+   */
+  async process() {
+    if (!this._ready) return { status: -1, text: '' };
+    const status = await this._process();
+    const text = status > 0 ? this._getText() : '';
+    return { status, text };
+  }
+
+  reset() {
+    if (this._ready) this._reset();
+  }
+
+  get sampleRate() { return this._sampleRate; }
+  get isReady()    { return this._ready; }
+  get archName()   { return this._ready ? this._getArchName() : 'unknown'; }
+  get version()    { return this._getVersion(); }
+  get taskType()   { return this._taskType; }
+}
+
+// ─────────────────────────────────────────────────────────────
+// RapidSpeechVAD — unified wrapper around silero-vad / firered-vad
+// ─────────────────────────────────────────────────────────────
+//
+// Same WASM module the speech context uses. Auto-detects the model
+// architecture from GGUF. Push 16 kHz mono Float32 PCM, drain segments
+// or per-frame events on demand.
+
+const VAD_SEGMENT_BYTES = 8;   // {float start_s; float end_s}
+const VAD_FRAME_BYTES   = 24;  // {i32 idx; f32 raw; f32 smooth; i32 is_sp; i32 is_st; i32 is_ed}
+
+class RapidSpeechVAD {
+  constructor(module) {
+    this._mod = module;
+    this._ready = false;
+
+    this._init        = module.cwrap('rs_wasm_vad_init',         'number', ['string', 'number'], { async: true });
+    this._free        = module.cwrap('rs_wasm_vad_free',         null,     []);
+    this._reset       = module.cwrap('rs_wasm_vad_reset',        'number', []);
+    this._setThresh   = module.cwrap('rs_wasm_vad_set_threshold','number', ['number']);
+    this._push        = module.cwrap('rs_wasm_vad_push_audio',   'number', ['number', 'number']);
+    this._isSpeech    = module.cwrap('rs_wasm_vad_is_speech',    'number', []);
+    this._getProb     = module.cwrap('rs_wasm_vad_get_probability','number', []);
+    this._getArch     = module.cwrap('rs_wasm_vad_get_arch',     'string', []);
+    this._drainSegs   = module.cwrap('rs_wasm_vad_drain_segments','number', ['number', 'number']);
+    this._drainFrames = module.cwrap('rs_wasm_vad_drain_frames', 'number', ['number', 'number']);
+
+    // Reusable IO buffers in the WASM heap. Grown on demand.
+    this._segBuf = { ptr: 0, capacity: 0 };
+    this._frmBuf = { ptr: 0, capacity: 0 };
+  }
+
+  /**
+   * Load a VAD model. URL points to a GGUF file whose general.architecture
+   * is "silero-vad" or "firered-vad".
+   */
+  async load(modelUrl, nThreads = 2, onProgress = null) {
+    const fileName = '/vad.gguf';
+
+    let buffer;
+    if (modelUrl instanceof Uint8Array || modelUrl instanceof ArrayBuffer) {
+      buffer = modelUrl instanceof ArrayBuffer ? new Uint8Array(modelUrl) : modelUrl;
+    } else {
+      const response = await fetch(modelUrl);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch VAD model: ${response.status} ${response.statusText}`);
+      }
+      const total = parseInt(response.headers.get('Content-Length') || '0', 10);
+      const reader = response.body.getReader();
+      const chunks = [];
+      let loaded = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        loaded += value.length;
+        if (onProgress && total > 0) onProgress(Math.min(loaded / total, 1.0));
+      }
+      buffer = new Uint8Array(loaded);
+      let off = 0;
+      for (const c of chunks) { buffer.set(c, off); off += c.length; }
+    }
+
+    this._mod.FS.writeFile(fileName, buffer);
+    const ret = await this._init(fileName, nThreads);
+    if (ret !== 0) throw new Error('rs_wasm_vad_init failed with code ' + ret);
+    this._ready = true;
+  }
+
+  free() {
+    if (this._segBuf.ptr) { this._mod._free(this._segBuf.ptr); this._segBuf = { ptr: 0, capacity: 0 }; }
+    if (this._frmBuf.ptr) { this._mod._free(this._frmBuf.ptr); this._frmBuf = { ptr: 0, capacity: 0 }; }
+    if (this._ready) { this._free(); this._ready = false; }
+  }
+
+  reset()                  { if (this._ready) this._reset(); }
+  setThreshold(threshold)  { if (this._ready) this._setThresh(threshold); }
+  get isSpeech()           { return this._ready ? !!this._isSpeech() : false; }
+  get probability()        { return this._ready ? this._getProb() : 0; }
+  get arch()               { return this._ready ? this._getArch() : ''; }
+  get isReady()            { return this._ready; }
+
+  /** Push 16 kHz mono Float32Array PCM. Updates internal queues. */
+  pushAudio(pcm) {
+    if (!this._ready) return;
+    const n = pcm.length;
+    const ptr = this._mod._malloc(n * 4);
+    this._mod.HEAPF32.set(pcm, ptr / 4);
+    this._push(ptr, n);
+    this._mod._free(ptr);
+  }
+
+  _ensureBuf(slot, capacity, elemBytes) {
+    if (slot.capacity >= capacity) return;
+    if (slot.ptr) this._mod._free(slot.ptr);
+    slot.ptr = this._mod._malloc(capacity * elemBytes);
+    slot.capacity = capacity;
+  }
+
+  /** Drain queued segments as [{start_s, end_s}, ...]. */
+  drainSegments(maxCount = 64) {
+    if (!this._ready) return [];
+    this._ensureBuf(this._segBuf, maxCount, VAD_SEGMENT_BYTES);
+    const n = this._drainSegs(this._segBuf.ptr, maxCount);
+    const out = new Array(n);
+    const base = this._segBuf.ptr / 4;
+    for (let i = 0; i < n; ++i) {
+      const off = base + i * 2;
+      out[i] = { start_s: this._mod.HEAPF32[off], end_s: this._mod.HEAPF32[off + 1] };
+    }
+    return out;
+  }
+
+  /** Drain queued per-frame events. */
+  drainFrames(maxCount = 256) {
+    if (!this._ready) return [];
+    this._ensureBuf(this._frmBuf, maxCount, VAD_FRAME_BYTES);
+    const n = this._drainFrames(this._frmBuf.ptr, maxCount);
+    const out = new Array(n);
+    const i32 = this._mod.HEAP32;
+    const f32 = this._mod.HEAPF32;
+    const base32 = this._frmBuf.ptr / 4; // 6 i32-slots per frame
+    for (let i = 0; i < n; ++i) {
+      const off = base32 + i * 6;
+      out[i] = {
+        frame_idx:        i32[off],
+        raw_prob:         f32[off + 1],
+        smoothed_prob:    f32[off + 2],
+        is_speech:        !!i32[off + 3],
+        is_speech_start:  !!i32[off + 4],
+        is_speech_end:    !!i32[off + 5],
+      };
+    }
+    return out;
+  }
+}
+
+// Export for both browser and Node.js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { RapidSpeechWASM, RapidSpeechVAD, RS_TASK };
+} else if (typeof globalThis !== 'undefined') {
+  globalThis.RapidSpeechWASM = RapidSpeechWASM;
+  globalThis.RapidSpeechVAD  = RapidSpeechVAD;
+  globalThis.RS_TASK = RS_TASK;
+}

public/rapidspeech-wasm.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6032e567114c89bbc95b2020b697c3f0aa07ecb1b1aad4446ffa89be41f334b
+size 3983821

public/styles.css

@@ -0,0 +1,217 @@
+:root {
+  --bg: #1a1a2e;
+  --card: #16213e;
+  --accent: #0f3460;
+  --highlight: #e94560;
+  --text: #eee;
+  --dim: #8892b0;
+  --green: #4ecca3;
+  --yellow: #f0a500;
+  --radius: 8px;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+.container { max-width: 760px; width: 100%; }
+
+/* Header */
+.header { text-align: center; margin-bottom: 16px; }
+.header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
+.header h1 span { color: var(--highlight); }
+.header p { color: var(--dim); font-size: 14px; margin-top: 4px; }
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--accent);
+}
+.tab-btn {
+  flex: 1;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--dim);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active { color: var(--highlight); border-bottom-color: var(--highlight); }
+
+/* Card */
+.card {
+  background: var(--card);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 16px;
+}
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--dim);
+  margin-bottom: 12px;
+}
+
+/* Form */
+.form-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
+.form-row label { font-size: 13px; color: var(--dim); min-width: 110px; }
+.form-row input[type="text"],
+.form-row input[type="number"],
+.form-row textarea,
+.form-row select {
+  flex: 1;
+  min-width: 200px;
+  padding: 8px 12px;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+.form-row input[type="number"] { min-width: 80px; max-width: 120px; flex: 0; }
+.form-row textarea { resize: vertical; min-height: 80px; }
+.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--highlight); }
+.form-row input[type="range"] { flex: 1; }
+.form-row input[type="checkbox"] { width: 16px; height: 16px; }
+.range-value { color: var(--dim); font-size: 13px; min-width: 40px; text-align: right; }
+
+/* Buttons */
+.btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+.btn {
+  padding: 8px 18px;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-family: inherit;
+}
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-load { background: var(--accent); color: var(--text); }
+.btn-primary { background: var(--green); color: var(--bg); }
+.btn-secondary { background: var(--highlight); color: var(--text); }
+.btn-ghost { background: transparent; border: 1px solid var(--dim); color: var(--dim); }
+
+/* Progress bar */
+.progress-container { display: none; margin-top: 10px; }
+.progress-track {
+  width: 100%; height: 4px; background: var(--accent);
+  border-radius: 2px; overflow: hidden;
+}
+.progress-fill {
+  height: 100%; width: 0%; background: var(--green);
+  transition: width 0.2s;
+}
+
+/* Status */
+.status {
+  margin-top: 10px;
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 4px;
+  display: inline-block;
+}
+.status.idle { color: var(--dim); background: transparent; }
+.status.loading { color: var(--yellow); background: rgba(240,165,0,0.1); }
+.status.ready { color: var(--green); background: rgba(78,204,163,0.1); }
+.status.listening { color: var(--green); background: rgba(78,204,163,0.1); }
+.status.error { color: var(--highlight); background: rgba(233,69,96,0.1); }
+
+/* VAD meter */
+.vad-container { margin-top: 12px; }
+.vad-track {
+  width: 100%; height: 6px; background: var(--accent);
+  border-radius: 3px; overflow: hidden;
+}
+.vad-fill {
+  height: 100%; width: 0%; background: var(--dim);
+  transition: width 0.1s, background 0.2s;
+  border-radius: 3px;
+}
+.vad-fill.speech { background: var(--green); }
+.vad-meta { display: flex; justify-content: space-between; margin-top: 4px; }
+.vad-label { font-size: 12px; color: var(--dim); text-transform: uppercase; }
+.vad-label.speech { color: var(--green); font-weight: 600; }
+.vad-info { font-size: 12px; color: var(--dim); }
+
+/* Transcript */
+.transcript {
+  background: var(--bg);
+  border-radius: var(--radius);
+  padding: 16px;
+  min-height: 160px;
+  max-height: 360px;
+  overflow-y: auto;
+  font-size: 15px;
+  line-height: 1.7;
+  word-break: break-all;
+}
+.transcript-line {
+  margin-bottom: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+.transcript-line .timestamp {
+  color: var(--dim);
+  font-size: 12px;
+  font-family: monospace;
+  margin-right: 8px;
+}
+.transcript-line .tag {
+  display: inline-block;
+  font-size: 10px;
+  font-family: monospace;
+  padding: 1px 6px;
+  border-radius: 3px;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.transcript-line .tag-ctc { background: rgba(160,160,160,0.25); color: #bbb; }
+.transcript-line .tag-llm { background: rgba(80,180,120,0.25); color: #6ec491; }
+.partial {
+  color: var(--dim);
+  font-style: italic;
+  padding: 8px 16px;
+  min-height: 24px;
+  font-size: 14px;
+}
+
+/* TTS output */
+.audio-output {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.audio-output audio { width: 100%; }
+.download-link {
+  color: var(--green);
+  text-decoration: none;
+  font-size: 13px;
+}
+.download-link:hover { text-decoration: underline; }
+
+/* Footer */
+.footer {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 12px;
+  color: var(--dim);
+}
+.footer a { color: var(--highlight); text-decoration: none; }

public/utils.js

@@ -0,0 +1,111 @@
+/**
+ * Shared helpers used by the per-tab demo pages.
+ * Exposed under window.RSUtils.
+ */
+(function () {
+  const TARGET_SR = 16000;
+
+  // Read a File, decode any browser-supported audio container, mix to mono,
+  // resample to 16 kHz via OfflineAudioContext. Returns Float32Array.
+  async function decodeFileToMono16k(file) {
+    return decodeFileToMonoAt(file, TARGET_SR);
+  }
+
+  // Same as above but with caller-chosen target sample rate (used by TTS
+  // voice-cloning, which wants the model's native rate).
+  async function decodeFileToMonoAt(file, targetSr) {
+    const buf = await file.arrayBuffer();
+    const ctx = new (window.AudioContext || window.webkitAudioContext)();
+    let decoded;
+    try {
+      decoded = await ctx.decodeAudioData(buf);
+    } finally {
+      ctx.close().catch(() => {});
+    }
+    // Downmix to mono by averaging channels.
+    const n = decoded.length;
+    const mono = new Float32Array(n);
+    for (let ch = 0; ch < decoded.numberOfChannels; ch++) {
+      const src = decoded.getChannelData(ch);
+      for (let i = 0; i < n; i++) mono[i] += src[i];
+    }
+    if (decoded.numberOfChannels > 1) {
+      const inv = 1 / decoded.numberOfChannels;
+      for (let i = 0; i < n; i++) mono[i] *= inv;
+    }
+    if (decoded.sampleRate === targetSr) return mono;
+    return resample(mono, decoded.sampleRate, targetSr);
+  }
+
+  // Resample float32 PCM from `fromRate` to `toRate` via OfflineAudioContext.
+  async function resample(pcm, fromRate, toRate) {
+    if (fromRate === toRate) return pcm;
+    const targetLen = Math.ceil(pcm.length * toRate / fromRate);
+    const off = new OfflineAudioContext(1, targetLen, toRate);
+    const buf = off.createBuffer(1, pcm.length, fromRate);
+    buf.copyToChannel(pcm, 0);
+    const src = off.createBufferSource();
+    src.buffer = buf;
+    src.connect(off.destination);
+    src.start();
+    const rendered = await off.startRendering();
+    return rendered.getChannelData(0);
+  }
+
+  // Encode Float32 mono PCM into a 16-bit PCM WAV Blob.
+  function encodeWav(samples, sampleRate) {
+    const buf = new ArrayBuffer(44 + samples.length * 2);
+    const view = new DataView(buf);
+    const writeStr = (off, s) => { for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i)); };
+    writeStr(0, 'RIFF');
+    view.setUint32(4, 36 + samples.length * 2, true);
+    writeStr(8, 'WAVE');
+    writeStr(12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);              // PCM
+    view.setUint16(22, 1, true);              // mono
+    view.setUint32(24, sampleRate, true);
+    view.setUint32(28, sampleRate * 2, true); // byte rate
+    view.setUint16(32, 2, true);              // block align
+    view.setUint16(34, 16, true);             // bits per sample
+    writeStr(36, 'data');
+    view.setUint32(40, samples.length * 2, true);
+    let off = 44;
+    for (let i = 0; i < samples.length; i++, off += 2) {
+      const s = Math.max(-1, Math.min(1, samples[i]));
+      view.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+    }
+    return new Blob([buf], { type: 'audio/wav' });
+  }
+
+  function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = (seconds % 60).toFixed(1);
+    return String(m).padStart(2, '0') + ':' + String(s).padStart(4, '0');
+  }
+
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = String(str);
+    return div.innerHTML;
+  }
+
+  // setStatus helper bound to a given <span> element.
+  function statusSetter(el) {
+    return (msg, cls = 'idle') => {
+      el.textContent = msg;
+      el.className = 'status ' + cls;
+    };
+  }
+
+  window.RSUtils = {
+    TARGET_SR,
+    decodeFileToMono16k,
+    decodeFileToMonoAt,
+    resample,
+    encodeWav,
+    formatTime,
+    escapeHtml,
+    statusSetter,
+  };
+})();

serve.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+"""HuggingFace-Space-friendly static server with COOP+COEP headers.
+
+WASM pthreads + SharedArrayBuffer require cross-origin isolation; the default
+HF static SDK does not reliably set these headers, so this Space uses the
+Docker SDK and serves the demo through this tiny shim.
+
+Usage: python3 serve.py [port] [root]
+       (defaults: port 7860, root ./public)
+"""
+import os
+import sys
+from functools import partial
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+
+
+class COOPHandler(SimpleHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
+        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
+        self.send_header("Cross-Origin-Resource-Policy", "cross-origin")
+        # Allow large model downloads from anywhere
+        self.send_header("Access-Control-Allow-Origin", "*")
+        super().end_headers()
+
+
+if __name__ == "__main__":
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 7860
+    root = sys.argv[2] if len(sys.argv) > 2 else "public"
+    os.chdir(root)
+    handler = partial(COOPHandler)
+    print(f"Serving {root} on http://0.0.0.0:{port}  (crossOriginIsolated)")
+    HTTPServer(("0.0.0.0", port), handler).serve_forever()