mARTin-B78
631ca16290
- New light UI: fixed 220px sidebar, single scrolling page, 8 named sections - Static files split by concern: style.css, app.js, loader.js, nav.js - Each page section is its own partial in static/sections/s-*.html - loader.js fetches all section partials in parallel, then loads app.js and nav.js - All original functionality, element IDs, and API endpoints preserved Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
158 lines
8.8 KiB
HTML
158 lines
8.8 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon">▶</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="note">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>
|
|
<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">
|
|
<button class="btn-primary" id="preview-btn">▶ Generate & play</button>
|
|
<button class="btn-secondary" id="save-preview-mp3-btn" disabled>↓ Save MP3</button>
|
|
<button class="btn-secondary" id="save-preview-btn" disabled>↓ Save WAV</button>
|
|
</div>
|
|
<audio id="preview-audio" controls style="display:none"></audio>
|
|
</div>
|
|
</div><!-- /tab-generation -->
|
|
|
|
<!-- STT -> TTS -->
|
|
<div class="tab-content" id="tab-stt-tts">
|
|
<div class="card">
|
|
<h2>STT → TTS workspace</h2>
|
|
<p class="note">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>
|
|
<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>
|
|
<span class="s-hint" id="stt-tts-stt-help">Uses Settings → Whisper/STT URL by default.</span>
|
|
</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">🎤 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>
|
|
<div class="card">
|
|
<h2>Synthesize transcription</h2>
|
|
<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 -->
|