Spaces:

Luigi
/

Streaming-Zipformer

Running

File size: 14,875 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>🎤 Real-Time ASR Demo</title>
  <style>
    /* Page layout */
    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #f5f6fa;
      margin: 0;
      padding: 2rem;
      color: #2f3640;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    section {
      width: 100%;
      max-width: 900px;
      margin-bottom: 1.5rem;
      background: white;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
    }
    section h2 {
      margin-top: 0;
      font-size: 1.2rem;
      border-bottom: 1px solid #dcdde1;
      padding-bottom: 0.5rem;
      color: #2f3640;
    }

    /* Grid for controls */
    .controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }
    .control-item {
      display: flex;
      flex-direction: column;
    }
    .control-item > label {
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .control-item > select,
    .control-item > input,
    .control-item > textarea {
      padding: 0.5rem;
      border: 1px solid #dcdde1;
      border-radius: 5px;
      font-size: 1rem;
      background: white;
    }
    .control-item > textarea {
      resize: vertical;
      min-height: 4rem;
    }
    .control-item > button {
      margin-top: 0.5rem;
      padding: 0.5rem;
      border: none;
      border-radius: 5px;
      background-color: #44bd32;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .control-item > button:hover {
      background-color: #4cd137;
    }

    /* Status text */
    #hotwordStatus {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #e1b12c;
      font-weight: bold;
      text-align: center;
    }

    /* Mic info and volume */
    .mic-info {
      font-size: 0.9rem;
      color: #353b48;
      margin-top: 1rem;
    }
    .mic-info .label {
      font-weight: bold;
    }
    #vol {
      width: 100%;
      max-width: 500px;
      height: 20px;
      margin-top: 0.5rem;
      appearance: none;
    }
    #vol::-webkit-progress-bar {
      background-color: #dcdde1;
      border-radius: 8px;
    }
    #vol::-webkit-progress-value {
      background-color: #44bd32;
      border-radius: 8px;
      transition: width 0.2s;
    }
    #vol::-moz-progress-bar {
      background-color: #44bd32;
      border-radius: 8px;
      transition: width 0.2s;
    }

    /* Transcript */
    .transcript-container {
      margin-top: 0.5rem;
      padding: 0.5rem;
      background: #fff;
      border: 1px solid #dcdde1;
      border-radius: 8px;
      max-height: 300px;
      overflow-y: auto;
      white-space: pre-wrap;
      font-size: 1.1rem;
      color: #353b48;
    }
    .transcript-container .final {
      color: green;
      display: inline;
      margin-right: 0.5em;
    }
    .transcript-container .interim {
      color: red;
      display: inline;
    }
  </style>
</head>
<body>
  <h1>🎤 Speak into Your Microphone</h1>

  <section class="section--settings">
    <h2>Recognition Settings</h2>
    <div class="controls-grid">
      <div class="control-item">
        <label for="modelSelect">Model</label>
        <select id="modelSelect">
          <option value="csukuangfj/k2fsa-zipformer-bilingual-zh-en-t">k2fsa-small-bilingual-zh-en</option>
      <option value="pfluo/k2fsa-zipformer-chinese-english-mixed">k2fsa-chinese-english-mixed</option>
      <option value="k2-fsa/sherpa-onnx-streaming-zipformer-korean-2024-06-16">sherpa-onnx-zipformer-korean</option>
      <option value="k2-fsa/sherpa-onnx-streaming-zipformer-multi-zh-hans-2023-12-12">zipformer-multi-zh-hans</option>
      <option value="pkufool/icefall-asr-zipformer-streaming-wenetspeech-20230615">icefall-zipformer-wenetspeech</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-26">zipformer-en-06-26</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-21">zipformer-en-06-21</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-02-21">zipformer-en-02-21</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20">zipformer-zh-en</option>
      <option value="shaojieli/sherpa-onnx-streaming-zipformer-fr-2023-04-14">zipformer-fr</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23">zipformer-zh-14M</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17">zipformer-en-20M</option>
      <option value="csukuangfj/sherpa-onnx-streaming-zipformer-ar_en_id_ja_ru_th_vi_zh-2025-02-10">zipformer-ar_en_id_ja_ru_th_vi_zh</option>
        </select>
      </div>
      <div class="control-item">
        <label for="precisionSelect">Precision</label>
        <select id="precisionSelect">
          <option value="fp32">FP32</option>
          <option value="int8">INT8</option>
        </select>
      </div>
    </div>
    <div class="model-info">
      Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
    </div>
  </section>

  <section class="section--hotwords">
    <h2>Hotword Settings</h2>
    <div class="controls-grid">
      <div class="control-item">
        <label for="hotwordsList">Hotwords</label>
        <textarea id="hotwordsList" placeholder="One per line"></textarea>
      </div>
      <div class="control-item">
        <label for="boostScore">Boost Score: <span id="boostValue">2.0</span></label>
        <input type="range" id="boostScore" min="0" max="10" step="0.1" value="2.0" />
      </div>
      <div class="control-item">
        <button id="applyHotwords">Apply Hotwords</button>
      </div>
    </div>
    <div id="hotwordStatus">Hotword Bias: Off</div>
  </section>

  <section class="section--endpoint">
    <h2>Endpoint Detection</h2>
    <div class="controls-grid">
      <div class="control-item">
        <label for="epRule1">Rule 1 (silence ≥ s)</label>
        <input type="number" id="epRule1" step="0.1" value="2.4" />
      </div>
      <div class="control-item">
        <label for="epRule2">Rule 2 (silence ≥ s)</label>
        <input type="number" id="epRule2" step="0.1" value="1.2" />
      </div>
      <div class="control-item">
        <label for="epRule3">Rule 3 (min utt ms)</label>
        <input type="number" id="epRule3" step="50" value="300" />
      </div>
      <div class="control-item">
        <button id="applyEndpointConfig">Apply Endpoint Config</button>
      </div>
    </div>
  </section>

  <section class="section--mic">
    <h2>Microphone</h2>
    <div class="mic-info">
      <span class="label">Device:</span> <span id="micName">Detecting…</span><br>
      <span class="label">Sample Rate:</span> <span id="sampleRate">-</span> Hz
    </div>
    <progress id="vol" max="1" value="0"></progress>
  </section>

  <section class="section--transcript">
    <h2>Transcript</h2>
    <div id="transcript" class="transcript-container">…</div>
  </section>

  <script>
    const MODEL_METADATA = {
      "csukuangfj/k2fsa-zipformer-bilingual-zh-en-t": { language: ["zh", "en"], size: 115 },
      "pfluo/k2fsa-zipformer-chinese-english-mixed": { language: ["zh", "en"], size: 342 },
      "k2-fsa/sherpa-onnx-streaming-zipformer-korean-2024-06-16": { language: "korean", size: 300 },
      "k2-fsa/sherpa-onnx-streaming-zipformer-multi-zh-hans-2023-12-12": { language: "zh-Hans", size: 258 },
      "pkufool/icefall-asr-zipformer-streaming-wenetspeech-20230615": { language: "zh (WenetSpeech)", size: 273 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-26": { language: "english", size: 340 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-21": { language: "english", size: 340 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-02-21": { language: "english", size: 341 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20": { language: ["zh", "en"], size: 342 },
      "shaojieli/sherpa-onnx-streaming-zipformer-fr-2023-04-14": { language: "french", size: 282 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23": { language: "zh", size: 53 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17": { language: "en", size: 88 },
      "csukuangfj/sherpa-onnx-streaming-zipformer-ar_en_id_ja_ru_th_vi_zh-2025-02-10": {language: ["ar","en","id","ja","ru","th","vi","zh"], size: 338}
    };

    let orig_sample_rate;
    let ws;

    const vol = document.getElementById("vol");
    const transcript = document.getElementById("transcript");
    const modelSelect = document.getElementById("modelSelect");
    const precisionSelect = document.getElementById("precisionSelect");
    const hotwordsList = document.getElementById("hotwordsList");
    const boostScore = document.getElementById("boostScore");
    const boostValue = document.getElementById("boostValue");
    const applyBtn      = document.getElementById("applyHotwords");
    const hotwordStatus = document.getElementById("hotwordStatus");
    const modelLangs = document.getElementById("modelLangs");
    const modelSize = document.getElementById("modelSize");
    const micNameElem = document.getElementById("micName");
    const sampleRateElem = document.getElementById("sampleRate");

    // ← Helper to toggle the status text
    function updateHotwordStatus() {
      const enabled = hotwordsList.value.split(/\r?\n/).filter(Boolean).length > 0
        && parseFloat(boostScore.value) > 0;
      hotwordStatus.textContent = enabled
        ? "Hotword Bias: On"
        : "Hotword Bias: Off";
    }

    function updateModelInfo() {
      const meta = MODEL_METADATA[modelSelect.value];
      if (Array.isArray(meta.language)) {
        modelLangs.textContent = meta.language.join(", ");
      } else {
        modelLangs.textContent = meta.language;
      }
      modelSize.textContent = meta.size;
    }

    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      const context = new AudioContext();
      orig_sample_rate = context.sampleRate;

      // Update mic info in UI
      const track = stream.getAudioTracks()[0];
      micNameElem.textContent = track.label || 'Unknown';
      sampleRateElem.textContent = orig_sample_rate;

      updateModelInfo();
      
      // Now that we know the sample rate, open the WS
      ws = new WebSocket(`wss://${location.host}/ws`);
      ws.onopen  = () => sendConfig();
      ws.onerror = err => console.error("WebSocket error:", err);
      ws.onclose = () => console.log("WebSocket closed");

      // Unified handler for partial + final messages
      ws.onmessage = e => {
        const msg = JSON.parse(e.data);

        // 1) update volume bar
        if (msg.volume !== undefined) {
          vol.value = Math.min(msg.volume, 1.0);
        }

        // 2) distinguish “final” vs “partial”
        if (msg.final !== undefined) {
          finalUtterances.push(msg.final.trim());
          currentInterim = "";
        } else if (msg.partial !== undefined) {
          currentInterim = msg.partial;
        }

        // 3) rebuild the full, colored transcript
        transcript.innerHTML =
          finalUtterances
            .map(u => `<span class="final">${u}</span>`)
            .join("") /* margin in CSS handles spacing */
          + (currentInterim
             ? ` <span class="interim">${currentInterim}</span>`
             : "");

        // 4) auto-scroll to newest text
        transcript.scrollTop = transcript.scrollHeight;
      };

      modelSelect.addEventListener("change", () => {
        updateModelInfo();
        sendConfig();
        updateHotwordStatus();
      });
      precisionSelect.addEventListener("change", () => {
        sendConfig();
        updateHotwordStatus();
      });
      applyBtn.addEventListener("click", () => {
        sendConfig();
        updateHotwordStatus();
      });

      // Update boost display and status on slider input
      boostScore.addEventListener("input", () => {
        boostValue.textContent = boostScore.value;
        updateHotwordStatus();
      });

      const source = context.createMediaStreamSource(stream);
      const processor = context.createScriptProcessor(4096, 1, 1);
      source.connect(processor);
      processor.connect(context.destination);
      processor.onaudioprocess = e => {
        const input = e.inputBuffer.getChannelData(0);
        ws.send(new Float32Array(input).buffer);
      };
    });

  // 2) Declare state for final/interim rendering
  const finalUtterances = [];
  let currentInterim = "";

  // 3) Grab your new inputs + button
  const epRule1Input = document.getElementById("epRule1");
  const epRule2Input = document.getElementById("epRule2");
  const epRule3Input = document.getElementById("epRule3");
  const applyEndpointBtn = document.getElementById("applyEndpointConfig");

  // 4) Extend sendConfig() to include epRule1/2/3
  function sendConfig() {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({
        type:         "config",
        sampleRate:   orig_sample_rate,
        model:        modelSelect.value,
        precision:    precisionSelect.value,
        hotwords:     hotwordsList.value.split(/\r?\n/).filter(Boolean),
        hotwordsScore: parseFloat(boostScore.value),

        // ← new endpoint fields
        epRule1: parseFloat(epRule1Input.value),
        epRule2: parseFloat(epRule2Input.value),
        epRule3: parseInt(  epRule3Input.value, 10),
      }));
    }
  }

  // 5) Re-send config when user clicks “Apply Endpoint Config”
  applyEndpointBtn.addEventListener("click", () => {
    sendConfig();
  });

  // 6) Replace your existing ws.onmessage handler with this:
  ws.onmessage = e => {
    const msg = JSON.parse(e.data);

    if (msg.volume !== undefined) {
      vol.value = Math.min(msg.volume, 1.0);
    }

    if (msg.final !== undefined) {
      // endpoint fired → lock in the final utterance
      finalUtterances.push(msg.final.trim());
      currentInterim = "";
    } else if (msg.partial !== undefined) {
      // update the rolling interim
      currentInterim = msg.partial;
    }

    // rebuild the full transcript: green finals + red interim
    transcript.innerHTML =
      finalUtterances
        .map(u => `<span class="final">${u}</span>`)
        .join("")   // no explicit space here, margin handles it
      + (currentInterim
        ? `<span class="interim">${currentInterim}</span>`
        : "");

    // always scroll to bottom
    transcript.scrollTop = transcript.scrollHeight;
  };

  </script>
</body>
</html>