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>
161 lines
8.9 KiB
HTML
161 lines
8.9 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon">✨</span>
|
|
<div class="section-title">
|
|
<h2>Design a Voice</h2>
|
|
<p>Describe a voice in words and let the AI create it. No recording needed.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-design">
|
|
<div class="card">
|
|
<details class="design-samples-details" open>
|
|
<summary>
|
|
<span>Voice Design samples</span>
|
|
<span class="note">Preview a sample or use it to fill the editor below.</span>
|
|
</summary>
|
|
<div class="design-sample-grid design-sample-header">
|
|
<div>Name</div><div>Sex</div><div>Language</div>
|
|
<div>Description</div><div>Sample text</div><div>Actions</div>
|
|
</div>
|
|
<div id="qwen-sample-list" style="display:flex;flex-direction:column;gap:4px"></div>
|
|
</details>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Describe the voice</h2>
|
|
<p class="note">Describe the voice you want. Qwen3-TTS VoiceDesign will synthesise it from the description and sample text.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<select class="lang-select" id="design-gender">
|
|
<option value="N">Neutral</option>
|
|
<option value="F">Female</option>
|
|
<option value="M">Male</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Language</label>
|
|
<select class="lang-select" id="design-language">
|
|
<option value="Auto">Auto-detect</option>
|
|
<option value="English">English</option><option value="Chinese">Chinese</option>
|
|
<option value="Japanese">Japanese</option><option value="Korean">Korean</option>
|
|
<option value="German">German</option><option value="French">French</option>
|
|
<option value="Spanish">Spanish</option><option value="Italian">Italian</option>
|
|
<option value="Portuguese">Portuguese</option><option value="Russian">Russian</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<input type="text" id="design-preset-name" placeholder="Narrator calm">
|
|
</div>
|
|
<button class="btn-secondary" id="design-preset-save">Save Voice Design Preset</button>
|
|
</div>
|
|
<textarea id="design-instruct" placeholder="e.g. A calm, deep male voice with a slight British accent and authoritative tone. Or: Young female, high-pitched, enthusiastic and slightly breathless. Or: Speak in an incredulous tone, with a hint of panic creeping into your voice."></textarea>
|
|
<table class="design-hints">
|
|
<thead><tr><th>Dimension</th><th>Examples</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Gender</td><td>Male, female, neutral</td></tr>
|
|
<tr><td>Age</td><td>Child (5-12), teenager (13-18), young adult (19-35), middle-aged (36-55), elderly (55+)</td></tr>
|
|
<tr><td>Pitch</td><td>High, mid, low, slightly high, slightly low</td></tr>
|
|
<tr><td>Speaking rate</td><td>Fast, moderate, slow, slightly fast, slightly slow</td></tr>
|
|
<tr><td>Emotion</td><td>Cheerful, calm, gentle, serious, lively, composed, soothing</td></tr>
|
|
<tr><td>Characteristics</td><td>Magnetic, crisp, husky, smooth, sweet, rich, powerful</td></tr>
|
|
<tr><td>Use case</td><td>News broadcasting, advertisement voice-over, audiobook, animated character, voice assistant, documentary narration</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Reference transcript & generate</h2>
|
|
<p class="note">This shared reference transcript is used by samples, prompt presets, generation, preview, download, and export to the Voice Clone Library.</p>
|
|
<textarea id="design-sample-text" placeholder="The exact text the generated voice should speak...">Hello! This is a voice design sample. I hope you enjoy listening to me.</textarea>
|
|
<div class="btn-row">
|
|
<button class="btn-teal" id="design-generate-btn" style="align-self:flex-end">✨ Generate voice</button>
|
|
<span id="design-status" style="font-size:13px;color:var(--subtext);align-self:flex-end"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="design-result" style="display:none">
|
|
<h2>Generated voice</h2>
|
|
<audio id="design-audio" controls></audio>
|
|
<hr>
|
|
<h2>Export to Voice Clone Library</h2>
|
|
<div class="d-naming-row">
|
|
<div class="field">
|
|
<label>Language</label>
|
|
<select id="d-lang">
|
|
<option value="EN">EN</option><option value="DE">DE</option><option value="ZH">ZH</option>
|
|
<option value="FR">FR</option><option value="ES">ES</option><option value="JA">JA</option>
|
|
<option value="KO">KO</option><option value="IT">IT</option><option value="PT">PT</option>
|
|
<option value="RU">RU</option><option value="AR">AR</option><option value="PL">PL</option>
|
|
<option value="NL">NL</option><option value="SV">SV</option><option value="TR">TR</option>
|
|
<option value="HI">HI</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<select id="d-gender">
|
|
<option value="F">F — Female</option>
|
|
<option value="M">M — Male</option>
|
|
<option value="N">N — Neutral</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Short name</label>
|
|
<input type="text" id="d-name" placeholder="Anna" style="width:120px">
|
|
</div>
|
|
<div class="field flex1">
|
|
<label>Voice ID (editable)</label>
|
|
<input type="text" id="d-voice-id" placeholder="EN_F_Anna" spellcheck="false">
|
|
</div>
|
|
</div>
|
|
<div class="field" style="margin-top:2px">
|
|
<label>Reference transcript</label>
|
|
<textarea id="d-transcript" placeholder="The spoken text from the sample (auto-filled)…"></textarea>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-secondary" id="design-retry-btn">↻ Regenerate</button>
|
|
<button class="btn-secondary" id="design-download-btn">↓ Download WAV</button>
|
|
<button class="btn-green" id="design-save-btn">💾 Export to Voice Clone Library</button>
|
|
</div>
|
|
<div id="design-save-result" style="display:none">
|
|
<hr>
|
|
<p style="color:var(--green);font-size:14px;margin-bottom:6px">Voice exported to the Voice Clone Library.</p>
|
|
<p class="note" style="margin-bottom:6px">To reload in Qwen3-TTS, restart the TTS container so it scans <code>active_voices</code>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Voice Design prompt library</h2>
|
|
<div class="preset-row">
|
|
<div class="field">
|
|
<label>Preset</label>
|
|
<select id="design-preset-select"><option value="">— preset —</option></select>
|
|
</div>
|
|
<button class="btn-secondary" id="design-preset-load">Load</button>
|
|
<button class="btn-secondary" id="design-preset-delete">Delete</button>
|
|
</div>
|
|
<div class="design-preset-library" id="design-preset-library"></div>
|
|
</div>
|
|
</div><!-- /tab-design -->
|
|
|
|
<!-- CustomVoice subsection -->
|
|
<div class="tab-content" id="tab-custom">
|
|
<div class="card" style="border-color: rgba(37,99,235,.25);">
|
|
<h2>Custom Voice (Qwen style control)</h2>
|
|
<p class="note">CustomVoice uses Qwen's configured premium/custom speakers. It is the best place to test style instructions when you can use one of the CustomVoice timbres.</p>
|
|
<div class="backend-help">
|
|
<strong>Best for style control over configured target timbres.</strong>
|
|
<div class="backend-help-tags">
|
|
<span class="backend-tag warn">model voice</span>
|
|
<span class="backend-tag good">style-aware</span>
|
|
<span class="backend-tag">stream-capable model</span>
|
|
</div>
|
|
<div>It does not automatically reuse arbitrary WAV voices from the Voice Clone library. For your own recurring character, create/fine-tune/configure that voice here, or design/export a WAV and then clone it.</div>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary backend-jump" data-backend="customvoice">Open CustomVoice in Try It Out</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- /tab-custom -->
|