Spaces:
Running
Running
kitsunechat
feat(voice): streaming TTS end-to-end with diagnostics, Aidoru theming, visible TTFA
ac1593b | <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Aidoru Browser Voice</title> | |
| <link rel="stylesheet" href="./style.css?v=vtuber1"> | |
| <script src="./bundle.js?v=fix3"></script> | |
| <script type="module" src="./avatar-stage.js?v=vtuber1"></script> | |
| <script type="module" src="./tts-bridge.js?v=fix8"></script> | |
| </head> | |
| <body> | |
| <main class="app-shell"> | |
| <section class="stage-panel" aria-label="Aidoru avatar stage"> | |
| <div class="stage-backdrop" aria-hidden="true"></div> | |
| <div class="stage-noise" aria-hidden="true"></div> | |
| <div class="stage-copy"> | |
| <p class="eyebrow">Aidoru Browser Voice</p> | |
| <h1>Alexia speaks directly from the browser.</h1> | |
| <p class="lede"> | |
| Gemma streams the text, Pocket TTS streams the audio, and the avatar | |
| reacts to the same PCM that reaches the audio worklet. | |
| </p> | |
| </div> | |
| <div class="avatar-stage" data-avatar-stage> | |
| <div class="status-strip"> | |
| <span class="status-pill" data-stage-mode>Booting</span> | |
| <span class="status-pill status-pill-muted" data-bridge-banner>Waiting for TTS...</span> | |
| <span class="status-pill status-pill-latency" data-latency-pill aria-label="Streaming latency: time to first token and time to first audio" hidden> | |
| <span class="latency-cell" data-latency-ttft> | |
| <span class="latency-key">TTFT</span> | |
| <span class="latency-val" data-latency-ttft-val>—</span> | |
| </span> | |
| <span class="latency-sep" aria-hidden="true">·</span> | |
| <span class="latency-cell" data-latency-ttfa> | |
| <span class="latency-key">TTFA</span> | |
| <span class="latency-val" data-latency-ttfa-val>—</span> | |
| </span> | |
| </span> | |
| </div> | |
| <div class="avatar-scene"> | |
| <div class="room-glow" aria-hidden="true"></div> | |
| <div class="orbit-ring orbit-ring-large" aria-hidden="true"></div> | |
| <div class="orbit-ring orbit-ring-small" aria-hidden="true"></div> | |
| <iframe | |
| class="cubism-frame" | |
| data-cubism-frame | |
| src="./aidoru-runtime/avatar-direct.html?v=cubism3" | |
| title="Alexia Cubism Avatar" | |
| loading="eager" | |
| ></iframe> | |
| </div> | |
| <div class="speech-card"> | |
| <div class="speech-label"> | |
| <span>Live subtitle</span> | |
| <button type="button" class="audio-test-btn" data-audio-test aria-label="Play a test tone to verify your speakers">Test audio</button> | |
| </div> | |
| <p class="speech-line" data-stage-line aria-live="polite"> | |
| Choose a model, then send a message. | |
| </p> | |
| <div class="audio-meter" data-audio-meter aria-label="Audio output level" hidden> | |
| <div class="audio-meter-track"> | |
| <div class="audio-meter-fill" data-audio-meter-fill></div> | |
| </div> | |
| <span class="audio-meter-label" data-audio-meter-label>silent</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="chat-panel" aria-label="Chat interface"> | |
| <div class="chat-frame"> | |
| <div class="chat-intro"> | |
| <div> | |
| <p class="eyebrow">Conversation</p> | |
| <h2>Talk to Aidoru</h2> | |
| </div> | |
| <p class="chat-note"> | |
| TTFT and TTFA badges are attached to each model reply. | |
| </p> | |
| </div> | |
| <llm-chat></llm-chat> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |