Spaces:

ArunKr
/

kokoro-sse

Sleeping

App Files Files Community

ArunKr commited on Aug 11

Commit

33973ad

verified ·

1 Parent(s): dbacbf7

Create static/clients.html

Browse files

Files changed (1) hide show

static/clients.html +161 -0

static/clients.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Kokoro SSE Client (Buffer → Play)</title>
+  <style>
+    :root { color-scheme: dark; }
+    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell; background: #0b1220; color: #e5e7eb; }
+    .wrap { max-width: 920px; margin: 0 auto; padding: 24px; }
+    input, textarea, select, button {
+      background: #0f172a; color: #e5e7eb; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; width: 100%;
+    }
+    button { cursor: pointer; }
+    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .mt { margin-top: 12px; }
+    .log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#0f172a; padding:12px; border-radius:10px; min-height:120px; white-space: pre-wrap;}
+    .pill { display:inline-block; padding:2px 8px; border:1px solid #334155; border-radius:9999px; font-size:12px; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>Kokoro TTS — <span class="pill">SSE</span></h1>
+    <p>This demo <b>buffers</b> audio from SSE and plays after the stream completes (simpler & reliable). For live playback, see the Python + ffplay client.</p>
+    <textarea id="text" rows="5" placeholder="Type something to synthesize...">Hello from Kokoro streaming via Server-Sent Events!</textarea>
+    <div class="row mt">
+      <div>
+        <label>Voice</label>
+        <input id="voice" value="af_sarah" />
+      </div>
+      <div>
+        <label>Speed (0.5 - 1.5)</label>
+        <input id="speed" value="1.0" />
+      </div>
+    </div>
+    <div class="row mt">
+      <div>
+        <label>Lang</label>
+        <input id="lang" value="en-us" />
+      </div>
+      <div style="display:flex;align-items:flex-end; gap:12px;">
+        <button id="start">Start SSE</button>
+        <button id="stop">Stop</button>
+      </div>
+    </div>
+    <div class="mt">
+      <audio id="player" controls></audio>
+    </div>
+    <div class="mt log" id="log"></div>
+  </div>
+  <script>
+    const log = (...args) => {
+      const el = document.getElementById('log');
+      el.textContent += args.join(' ') + "\n";
+      el.scrollTop = el.scrollHeight;
+      console.log(...args);
+    };
+    let es = null;
+    let chunks = []; // Uint8Arrays of PCM16
+    let total = 0;
+    function stopSSE() {
+      if (es) {
+        es.close();
+        es = null;
+        log("SSE closed.");
+      }
+    }
+    document.getElementById('stop').onclick = stopSSE;
+    document.getElementById('start').onclick = async () => {
+      stopSSE();
+      chunks = [];
+      total = 0;
+      document.getElementById('player').src = "";
+      const text = encodeURIComponent(document.getElementById('text').value);
+      const voice = encodeURIComponent(document.getElementById('voice').value || 'af_sarah');
+      const speed = encodeURIComponent(document.getElementById('speed').value || '1.0');
+      const lang = encodeURIComponent(document.getElementById('lang').value || 'en-us');
+      const url = `/v1/tts.sse?text=${text}&voice=${voice}&speed=${speed}&lang=${lang}`;
+      log("Connecting:", url);
+      es = new EventSource(url);
+      es.onmessage = (ev) => {
+        try {
+          const obj = JSON.parse(ev.data);
+          const b = atob(obj.pcm16);
+          const u8 = new Uint8Array(b.length);
+          for (let i = 0; i < b.length; i++) u8[i] = b.charCodeAt(i);
+          chunks.push(u8);
+          total += u8.byteLength;
+          if ((obj.seq % 10) === 0) log(`Chunk #${obj.seq}, +${u8.byteLength} bytes`);
+        } catch (err) {
+          log("Parse error:", err);
+        }
+      };
+      es.addEventListener('done', async (ev) => {
+        log("Done:", ev.data);
+        stopSSE();
+        // merge into a WAV and play
+        const wav = buildWavFromPCM16Chunks(chunks, 24000, 1);
+        const blob = new Blob([wav], { type: "audio/wav" });
+        const url = URL.createObjectURL(blob);
+        const player = document.getElementById('player');
+        player.src = url;
+        player.play();
+        log(`Total bytes: ${total}, WAV bytes: ${wav.byteLength}`);
+      });
+      es.onerror = (e) => {
+        log("SSE error:", e?.message || e);
+      };
+    };
+    function buildWavFromPCM16Chunks(chunks, sampleRate = 24000, channels = 1) {
+      let totalBytes = 0;
+      for (const c of chunks) totalBytes += c.byteLength;
+      const dataSize = totalBytes;
+      const headerSize = 44;
+      const buffer = new ArrayBuffer(headerSize + dataSize);
+      const view = new DataView(buffer);
+      // RIFF header
+      writeStr(view, 0, "RIFF");
+      view.setUint32(4, 36 + dataSize, true);
+      writeStr(view, 8, "WAVE");
+      // fmt chunk
+      writeStr(view, 12, "fmt ");
+      view.setUint32(16, 16, true);      // PCM
+      view.setUint16(20, 1, true);       // PCM format
+      view.setUint16(22, channels, true);
+      view.setUint32(24, sampleRate, true);
+      const byteRate = sampleRate * channels * 2; // 16-bit
+      view.setUint32(28, byteRate, true);
+      view.setUint16(32, channels * 2, true);     // block align
+      view.setUint16(34, 16, true);               // bits per sample
+      // data chunk
+      writeStr(view, 36, "data");
+      view.setUint32(40, dataSize, true);
+      // write PCM data
+      let offset = 44;
+      for (const c of chunks) {
+        new Uint8Array(buffer, offset, c.byteLength).set(c);
+        offset += c.byteLength;
+      }
+      return new Uint8Array(buffer);
+    }
+    function writeStr(view, offset, str) {
+      for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
+    }
+  </script>
+</body>
+</html>