mARTin-B78
f871486635
- Settings: flat section layout with consistent 32px padding, groups with inline title+subtitle, clean accordion details with chevron, focus rings - Replace all remaining emoji (⏰ ⭐ 💾 🌙 ☀️ ⚠ ✓ ↓ ★) with MDI icons - s-studio.html: globe emoji → mdi-earth, star filter → mdi-star-outline Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
330 lines
19 KiB
HTML
330 lines
19 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-play"></span></span>
|
|
<div class="section-title">
|
|
<h2>Try It Out</h2>
|
|
<p>Generate speech from text using any backend and voice. Also transcribe audio and re-speak it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TTS Generation Playground -->
|
|
<div class="tab-content" id="tab-generation">
|
|
<div class="card">
|
|
<h2>TTS generation playground</h2>
|
|
<p class="card-subtitle">Pick any reachable TTS backend, fetch its voices, then synthesize text. WAV/NVIDIA clone backends preserve reference identity; instruction-control backends follow style better.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Generate speech</h2>
|
|
<p class="card-subtitle">Select a backend, fetch its voice list, then synthesize any text with optional style instruction.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Backend</label>
|
|
<select id="tts-backend-select"><option value="">Checking backends...</option></select>
|
|
</div>
|
|
<div class="backend-help" id="tts-backend-help" aria-live="polite">
|
|
<strong>Checking available TTS backends...</strong>
|
|
</div>
|
|
<div class="field">
|
|
<label>Backend voice</label>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn-secondary" id="fetch-tts-voices-btn">Fetch voices</button>
|
|
<select id="tts-voice-select"><option value="">— select after fetch —</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Playback</label>
|
|
<select id="preview-playback-mode">
|
|
<option value="settings">Settings default</option>
|
|
<option value="streaming">Streaming only</option>
|
|
<option value="auto">Stream with fallback</option>
|
|
<option value="buffered">Buffered WAV</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p class="note" style="margin-top:-4px;margin-bottom:10px">After changing active voices, restart the TTS container so the engine reads the updated voice folder.</p>
|
|
<div class="preview-match-panel" id="preview-match-panel" hidden>
|
|
<div class="preview-match-meta">
|
|
<div class="preview-match-title" id="preview-match-title">Reference voice</div>
|
|
<div class="preview-match-detail" id="preview-match-detail"></div>
|
|
<div class="preview-match-warning" id="preview-match-warning"></div>
|
|
<div class="preview-match-actions">
|
|
<button class="btn-secondary" id="preview-ref-play" type="button">Play reference WAV</button>
|
|
<button class="btn-secondary" id="preview-ref-use-text" type="button">Use reference text</button>
|
|
<button class="btn-primary" id="preview-ref-synth" type="button">Synthesize reference text</button>
|
|
</div>
|
|
</div>
|
|
<div class="preview-match-meta">
|
|
<div class="preview-match-transcript" id="preview-match-transcript">No reference text saved for this voice.</div>
|
|
<audio id="preview-ref-audio" controls></audio>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Target Text (text to synthesize)</label>
|
|
<textarea id="preview-text-area" placeholder="Enter the text you want to synthesize…">Hello! This is a voice preview from TTS Voice Creator - Clone and Design.</textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label>Style Instruction <span style="font-weight:400">(optional)</span></label>
|
|
<input type="text" id="preview-style-instruction" placeholder="Optional style/emotion instruction, e.g. speak slowly and calmly, excited tone">
|
|
<span class="note">This is sent as <code>instruct</code>. Voice Clone/Base and Streaming are fastest; CustomVoice and Voice Design are style-aware.</span>
|
|
</div>
|
|
<div class="btn-row">
|
|
<label class="chunk-toggle-label" title="Split long text at sentence boundaries and stitch chunks together">
|
|
<input type="checkbox" id="preview-chunked-toggle">
|
|
<span>Chunked generation</span>
|
|
<span class="note" style="margin-left:2px">(long text)</span>
|
|
</label>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" id="preview-btn"><span class="mdi mdi-play"></span> Generate & play</button>
|
|
<button class="btn-secondary" id="save-preview-mp3-btn" disabled><span class="mdi mdi-download"></span> Save MP3</button>
|
|
<button class="btn-secondary" id="save-preview-btn" disabled><span class="mdi mdi-download"></span> Save WAV</button>
|
|
<button class="btn-secondary" id="add-to-playlist-btn" disabled><span class="mdi mdi-plus"></span> Playlist</button>
|
|
</div>
|
|
<audio id="preview-audio" controls style="display:none"></audio>
|
|
<div id="preview-chunk-progress" class="chunk-progress" hidden></div>
|
|
</div>
|
|
|
|
<!-- Audio Effects -->
|
|
<div class="card" id="effects-card">
|
|
<h2>Audio effects</h2>
|
|
<p class="card-subtitle">Apply post-processing to the last generated audio. Non-destructive — re-generate to reset.</p>
|
|
<div class="effects-preset-row">
|
|
<label class="field-label-sm">Preset</label>
|
|
<select id="effects-preset">
|
|
<option value="">— Custom —</option>
|
|
<option value="studio">Studio Reverb</option>
|
|
<option value="broadcast">Broadcast (compressed)</option>
|
|
<option value="telephone">Telephone</option>
|
|
<option value="warm">Warm & Intimate</option>
|
|
<option value="radio">Radio Voice</option>
|
|
</select>
|
|
<button class="btn-secondary btn-sm" id="effects-reset-btn">Reset</button>
|
|
</div>
|
|
<div class="effects-grid">
|
|
<div class="fx-row">
|
|
<label class="fx-toggle"><input type="checkbox" id="fx-reverb-on"> Reverb</label>
|
|
<div class="fx-sliders" id="fx-reverb-params">
|
|
<label>Room <input type="range" id="fx-reverb-room" min="0" max="1" step="0.01" value="0.35"><span id="fx-reverb-room-val">0.35</span></label>
|
|
<label>Wet <input type="range" id="fx-reverb-wet" min="0" max="1" step="0.01" value="0.25"><span id="fx-reverb-wet-val">0.25</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="fx-row">
|
|
<label class="fx-toggle"><input type="checkbox" id="fx-compressor-on"> Compressor</label>
|
|
<div class="fx-sliders" id="fx-compressor-params">
|
|
<label>Threshold <input type="range" id="fx-comp-thresh" min="-60" max="0" step="1" value="-20"><span id="fx-comp-thresh-val">-20 dB</span></label>
|
|
<label>Ratio <input type="range" id="fx-comp-ratio" min="1" max="20" step="0.5" value="4"><span id="fx-comp-ratio-val">4:1</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="fx-row">
|
|
<label class="fx-toggle"><input type="checkbox" id="fx-chorus-on"> Chorus</label>
|
|
<div class="fx-sliders" id="fx-chorus-params">
|
|
<label>Rate <input type="range" id="fx-chorus-rate" min="0.1" max="5" step="0.1" value="1"><span id="fx-chorus-rate-val">1.0 Hz</span></label>
|
|
<label>Mix <input type="range" id="fx-chorus-mix" min="0" max="1" step="0.01" value="0.5"><span id="fx-chorus-mix-val">0.50</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="fx-row">
|
|
<label class="fx-toggle"><input type="checkbox" id="fx-pitch-on"> Pitch shift</label>
|
|
<div class="fx-sliders" id="fx-pitch-params">
|
|
<label>Semitones <input type="range" id="fx-pitch-semi" min="-12" max="12" step="0.5" value="0"><span id="fx-pitch-semi-val">0 st</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:12px">
|
|
<button class="btn-primary" id="effects-apply-btn" disabled>Apply effects</button>
|
|
<span class="note" id="effects-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generation History -->
|
|
<div class="card" id="history-card">
|
|
<h2>Generation history</h2>
|
|
<p class="card-subtitle">Last 20 generations this session. Audio is preserved in memory until you reload.</p>
|
|
<div id="history-list" class="history-list">
|
|
<div class="history-empty">No generations yet.</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:8px">
|
|
<button class="btn-secondary btn-sm" id="history-clear-btn">Clear history</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist -->
|
|
<div class="card" id="playlist-card">
|
|
<h2>Playlist</h2>
|
|
<p class="card-subtitle">Queue clips from history. Reorder by dragging, then export as one merged WAV.</p>
|
|
<div id="playlist-list" class="playlist-list">
|
|
<div class="history-empty">No clips in playlist. Use <strong>+ Playlist</strong> after generating.</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:12px">
|
|
<button class="btn-primary" id="playlist-export-btn" disabled><span class="mdi mdi-download"></span> Export merged WAV</button>
|
|
<button class="btn-secondary btn-sm" id="playlist-clear-btn">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tab-generation -->
|
|
|
|
<!-- STT -> TTS -->
|
|
<div class="tab-content" id="tab-stt-tts">
|
|
<div class="card">
|
|
<h2>STT <span class="mdi mdi-arrow-right"></span> TTS workspace</h2>
|
|
<p class="card-subtitle">Upload speech audio, transcribe it with the configured STT endpoint, then synthesize the resulting text with any available TTS backend.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Source speech</h2>
|
|
<p class="card-subtitle">Record from your microphone or upload an audio file, then transcribe it.</p>
|
|
<div class="settings-grid">
|
|
<div class="s-field">
|
|
<label>Speech recognition</label>
|
|
<div style="display:flex;gap:8px">
|
|
<select id="stt-tts-stt-backend"><option value="configured">Configured Whisper/STT</option></select>
|
|
<button class="btn-secondary" id="stt-tts-refresh-stt-btn" type="button">Refresh</button>
|
|
</div>
|
|
<div class="s-hint" id="stt-tts-stt-help">Uses Settings → Whisper/STT URL by default.</div>
|
|
</div>
|
|
<div class="s-field">
|
|
<label>Speech audio</label>
|
|
<div class="btn-row" style="gap:8px;align-items:center">
|
|
<input type="file" id="stt-tts-file" accept="audio/*,video/*">
|
|
<button class="btn-secondary" id="stt-tts-rec-start" type="button" title="Record from microphone"><span class="mdi mdi-microphone-variant"></span> Record</button>
|
|
<button class="btn-secondary" id="stt-tts-rec-stop" type="button" disabled>Stop</button>
|
|
<span class="mic-timer" id="stt-tts-rec-time">0:00</span>
|
|
</div>
|
|
<span class="s-hint">Record or upload speech audio, then transcribe it with the selected recognition engine.</span>
|
|
</div>
|
|
<div class="s-field">
|
|
<label>Source preview</label>
|
|
<audio id="stt-tts-source-audio" controls style="display:none;width:100%"></audio>
|
|
<span class="s-hint" id="stt-tts-source-status">No source audio loaded.</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-secondary" id="stt-tts-transcribe-btn" disabled>Transcribe</button>
|
|
<button class="btn-secondary" id="stt-tts-copy-preview-btn" disabled>Copy to TTS playground</button>
|
|
</div>
|
|
<div class="field">
|
|
<label>Transcribed text</label>
|
|
<textarea id="stt-tts-text" placeholder="Transcribed text appears here. Edit before synthesis if needed."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LLM Refinement card -->
|
|
<div class="card" id="refine-card">
|
|
<h2>Refine with LLM</h2>
|
|
<p class="card-subtitle">Clean up the transcription using a local language model — remove fillers, fix repetitions, and normalise punctuation.</p>
|
|
<div class="refine-config">
|
|
<div class="field" style="flex:1;min-width:180px">
|
|
<label>LLM URL</label>
|
|
<input type="text" id="refine-llm-url" placeholder="http://localhost:11434/v1" spellcheck="false">
|
|
<span class="note">OpenAI-compatible endpoint (Ollama, LM Studio, vLLM…)</span>
|
|
</div>
|
|
<div class="field" style="flex:0 0 160px">
|
|
<label>Model <span style="font-weight:400">(optional)</span></label>
|
|
<input type="text" id="refine-model" placeholder="auto-detect">
|
|
</div>
|
|
</div>
|
|
<div class="refine-toggles">
|
|
<label class="refine-toggle"><input type="checkbox" id="refine-fillers" checked> Remove fillers</label>
|
|
<label class="refine-toggle"><input type="checkbox" id="refine-repetitions" checked> Fix repetitions</label>
|
|
<label class="refine-toggle"><input type="checkbox" id="refine-corrections" checked> Remove corrections</label>
|
|
<label class="refine-toggle"><input type="checkbox" id="refine-punctuation" checked> Fix punctuation</label>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:12px">
|
|
<button class="btn-primary" id="refine-btn" disabled><span class="mdi mdi-auto-fix"></span> Refine transcription</button>
|
|
<button class="btn-secondary" id="refine-restore-btn" disabled>Restore original</button>
|
|
<span class="note" id="refine-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Synthesize transcription</h2>
|
|
<p class="card-subtitle">Choose a TTS backend and voice, then generate audio from the transcribed text.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Backend</label>
|
|
<select id="stt-tts-backend-select"><option value="">Checking backends...</option></select>
|
|
</div>
|
|
<div class="backend-help" id="stt-tts-backend-help" aria-live="polite">
|
|
<strong>Checking available TTS backends...</strong>
|
|
</div>
|
|
<div class="field">
|
|
<label>Backend voice</label>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn-secondary" id="stt-tts-fetch-voices-btn">Fetch voices</button>
|
|
<select id="stt-tts-voice-select"><option value="">-- select after fetch --</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Playback</label>
|
|
<select id="stt-tts-playback-mode">
|
|
<option value="settings">Settings default</option>
|
|
<option value="streaming">Streaming only</option>
|
|
<option value="auto">Stream with fallback</option>
|
|
<option value="buffered">Buffered WAV</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Style Instruction <span style="font-weight:400">(optional)</span></label>
|
|
<input type="text" id="stt-tts-style-instruction" placeholder="Optional style/emotion instruction">
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" id="stt-tts-generate-btn">Generate & play</button>
|
|
<button class="btn-secondary" id="stt-tts-save-mp3-btn" disabled>Save MP3</button>
|
|
<button class="btn-secondary" id="stt-tts-save-wav-btn" disabled>Save WAV</button>
|
|
</div>
|
|
<audio id="stt-tts-output-audio" controls style="display:none"></audio>
|
|
</div>
|
|
</div><!-- /tab-stt-tts -->
|
|
|
|
<!-- Performance benchmarking -->
|
|
<div class="tab-content" id="tab-performance">
|
|
<div class="card">
|
|
<h2>Performance benchmark</h2>
|
|
<p class="card-subtitle">Measure synthesis latency and real-time factor for any backend and voice.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Backend</label>
|
|
<select id="perf-backend-select"><option value="">Checking backends...</option></select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Voice</label>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn-secondary" id="perf-fetch-voices-btn">Fetch voices</button>
|
|
<select id="perf-voice-select"><option value="">— select after fetch —</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Runs</label>
|
|
<select id="perf-runs">
|
|
<option value="1">1 run</option>
|
|
<option value="3" selected>3 runs</option>
|
|
<option value="5">5 runs</option>
|
|
<option value="10">10 runs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Sample text</label>
|
|
<textarea id="perf-text" rows="3">Hello, how are you today? Please read this sample clearly for a fair voice benchmark.</textarea>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" id="perf-run-btn"><span class="mdi mdi-play"></span> Run benchmark</button>
|
|
<button class="btn-secondary" id="perf-clear-btn">Clear results</button>
|
|
</div>
|
|
<div id="perf-progress" class="note" style="display:none"></div>
|
|
</div>
|
|
<div class="card" id="perf-results-card" style="display:none">
|
|
<h2>Results</h2>
|
|
<p class="card-subtitle">Latency per run. RTF = synthesis time / audio duration (lower is better).</p>
|
|
<div class="perf-summary" id="perf-summary"></div>
|
|
<div class="perf-table-wrap">
|
|
<table class="perf-table" id="perf-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th><th>Backend</th><th>Voice</th>
|
|
<th>Latency (ms)</th><th>Audio (s)</th><th>RTF</th><th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="perf-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div><!-- /tab-performance -->
|