mARTin-B78
a4128788d6
- Sidebar collapses to a 56px icon rail; hovering flies the full menu out as an overlay (icons + titles/nested items). Language picker moved to Settings. - Unify settings collapsibles to the app's standard card-collapse style: Conversation, Read Aloud (drag-&-drop now inside), Try It Out, Casting panel. - Read Aloud: reordered (settings → toolbar → document → transport/synth) and the document fits the viewport height so controls below stay visible; remove the redundant My Books card (lives in Library → Books). - Conversation: stacked full-width config, fills viewport height; fix intermittent webm decode in hands-free mode (recorder restarts cleanly, in-browser WAV encode); barge-in via Live agent. - Fix casting feed overflow that pushed the sidebar off-screen. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
129 lines
7.8 KiB
HTML
129 lines
7.8 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-forum-outline"></span></span>
|
|
<div class="section-title">
|
|
<h2>Conversation Playground</h2>
|
|
<p>Talk to an AI voice agent. Full STT → LLM → TTS pipeline with real-time streaming and latency stats.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config bar -->
|
|
<div class="conv-config-bar card" style="padding:14px">
|
|
<h2><span class="mdi mdi-tune-variant"></span> Engines & prompt</h2>
|
|
<div class="engine-setup-row" style="margin-bottom:8px">
|
|
<div class="engine-setup-col">
|
|
<label class="engine-setup-label"><span class="mdi mdi-microphone"></span> Speech to Text <a href="#" class="engine-setup-link" onclick="navTo('s-llms'); navEnginesCat('stt'); return false;" title="Configure Speech to Text settings"><span class="mdi mdi-cog-outline"></span></a></label>
|
|
<div class="engine-setup-controls">
|
|
<select id="conv-stt-select" aria-label="Speech-to-text engine"><option value="configured">Checking...</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="engine-setup-col" style="flex:1.5">
|
|
<label class="engine-setup-label"><span class="mdi mdi-brain"></span> Language Model <a href="#" class="engine-setup-link" onclick="navTo('s-llms'); navEnginesCat('llm'); return false;" title="Configure Language Model settings"><span class="mdi mdi-cog-outline"></span></a></label>
|
|
<div class="engine-setup-controls">
|
|
<input id="conv-llm-url" class="conv-url-inp" type="text" placeholder="http://localhost:11434/v1" spellcheck="false">
|
|
<button class="btn-secondary" id="conv-llm-fetch-btn" title="Fetch models"><span class="mdi mdi-refresh"></span></button>
|
|
<select id="conv-llm-model-select" aria-label="Language model"><option value="">— fetch models —</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="engine-setup-col" style="flex:1.5; border-right:none; padding-right:0">
|
|
<label class="engine-setup-label"><span class="mdi mdi-account-voice"></span> Text to Speech <a href="#" class="engine-setup-link" onclick="navTo('s-llms'); navEnginesCat('tts'); return false;" title="Configure Text to Speech settings"><span class="mdi mdi-cog-outline"></span></a></label>
|
|
<div class="engine-setup-controls">
|
|
<select id="conv-tts-backend-select" aria-label="TTS backend"><option value="">Checking...</option></select>
|
|
<button class="btn-secondary" id="conv-tts-fetch-btn" title="Fetch voices"><span class="mdi mdi-refresh"></span></button>
|
|
<select id="conv-tts-voice-select" aria-label="Voice"><option value="">— fetch voices —</option></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conv-prompt-row" style="display:flex; gap:12px; align-items:flex-start">
|
|
<div style="flex:1">
|
|
<label class="conv-cfg-label"><span class="mdi mdi-text-box-outline"></span> System prompt</label>
|
|
<textarea id="conv-system-prompt" aria-label="System prompt" class="conv-system-textarea" rows="1" spellcheck="false">You are a helpful voice assistant. Keep replies short and conversational.</textarea>
|
|
</div>
|
|
<div style="align-self:flex-end">
|
|
<button class="btn-secondary" id="conv-clear-btn" title="Clear conversation"><span class="mdi mdi-delete-outline"></span> Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main area: chat + stats -->
|
|
<div class="conv-main">
|
|
|
|
<!-- Chat window -->
|
|
<div class="conv-chat-panel">
|
|
<div class="conv-chat-window" id="conv-chat-window">
|
|
<div class="conv-chat-welcome">
|
|
<span class="mdi mdi-forum-outline" style="font-size:32px;opacity:.25"></span>
|
|
<p>Type a message or press the microphone button below to start.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input bar: text field + send + mic -->
|
|
<div class="conv-input-bar">
|
|
<div class="conv-mic-status" id="conv-mic-status">Ready</div>
|
|
<div class="conv-level-wrap" id="conv-level-wrap"><div class="conv-level-fill" id="conv-level-fill"></div></div>
|
|
<div class="conv-text-row">
|
|
<input id="conv-text-input" class="conv-text-inp"
|
|
type="text" placeholder="Type a message and press Enter or →"
|
|
spellcheck="false" autocomplete="off">
|
|
<button class="conv-send-btn" id="conv-send-btn" title="Send text (Enter)">
|
|
<span class="mdi mdi-send"></span>
|
|
</button>
|
|
<div class="conv-divider" title="or use microphone"></div>
|
|
<button class="conv-mic-btn" id="conv-mic-btn" title="Click to record via microphone">
|
|
<span class="mdi mdi-microphone" id="conv-mic-icon"></span>
|
|
</button>
|
|
<div class="conv-mic-timer" id="conv-mic-timer"></div>
|
|
<label class="conv-vad-label" title="Auto-stop recording when silence is detected">
|
|
<input type="checkbox" id="conv-vad-toggle" checked>
|
|
<span>Auto-stop</span>
|
|
</label>
|
|
<label class="conv-vad-label" title="Automatically restart microphone after the agent finishes speaking">
|
|
<input type="checkbox" id="conv-handsfree-toggle" checked>
|
|
<span>Hands-free</span>
|
|
</label>
|
|
<label class="conv-vad-label" title="Lower silence and interruption delays for live voice-agent turn-taking">
|
|
<input type="checkbox" id="conv-live-agent-toggle" checked>
|
|
<span>Live agent</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats panel -->
|
|
<div class="conv-stats-panel">
|
|
<div class="conv-stats-head">Latency</div>
|
|
|
|
<div class="conv-pipeline">
|
|
<div class="conv-pipe-step" id="cps-stt">
|
|
<div class="conv-pipe-label"><span class="mdi mdi-microphone-outline"></span> STT</div>
|
|
<div class="conv-pipe-bar"><div class="conv-pipe-fill" id="cpf-stt"></div></div>
|
|
<div class="conv-pipe-val" id="cpv-stt">—</div>
|
|
</div>
|
|
<div class="conv-pipe-step" id="cps-ttft">
|
|
<div class="conv-pipe-label"><span class="mdi mdi-timer-outline"></span> LLM first token</div>
|
|
<div class="conv-pipe-bar"><div class="conv-pipe-fill" id="cpf-ttft"></div></div>
|
|
<div class="conv-pipe-val" id="cpv-ttft">—</div>
|
|
</div>
|
|
<div class="conv-pipe-step" id="cps-llm">
|
|
<div class="conv-pipe-label"><span class="mdi mdi-brain"></span> LLM total</div>
|
|
<div class="conv-pipe-bar"><div class="conv-pipe-fill" id="cpf-llm"></div></div>
|
|
<div class="conv-pipe-val" id="cpv-llm">—</div>
|
|
</div>
|
|
<div class="conv-pipe-step" id="cps-tts">
|
|
<div class="conv-pipe-label"><span class="mdi mdi-account-voice"></span> TTS</div>
|
|
<div class="conv-pipe-bar"><div class="conv-pipe-fill" id="cpf-tts"></div></div>
|
|
<div class="conv-pipe-val" id="cpv-tts">—</div>
|
|
</div>
|
|
<div class="conv-pipe-step conv-pipe-total" id="cps-total">
|
|
<div class="conv-pipe-label"><span class="mdi mdi-timer-check-outline"></span> Total</div>
|
|
<div class="conv-pipe-bar"><div class="conv-pipe-fill" id="cpf-total" style="background:var(--accent)"></div></div>
|
|
<div class="conv-pipe-val" id="cpv-total">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="conv-stats-head" style="margin-top:14px">Turn history</div>
|
|
<div class="conv-turn-history" id="conv-turn-history">
|
|
<div class="conv-history-empty">No turns yet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|