mARTin-B78/tts-voice-creator-clone-and-design-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
90cc7b7eb1
tts-voice-creator-clone-and.../static/sections/s-clone.html
mARTin-B78 90cc7b7eb1 AI Backends: local service connect/disconnect, Docker container management, 0.0.0.0 probe fix 
- Add initLlmsSection() IIFE to app.js: copy buttons, API key persistence with eye toggle
  and saved badge, local service URL persistence, Connect/Disconnect toggle with server-side
  probe via /api/probe-url (avoids CORS), card turns green on success / red on failure
- Substitute 0.0.0.0 → host.docker.internal before probing (0.0.0.0 not routable from Docker)
- Add /api/local-containers, /api/probe-url, start/stop/restart endpoints to server.py
- Rewrite AI Backends section into Local / Online API categories with Docker stack grid,
  local service cards (LLM/STT/TTS) with icons and editable URL inputs, online cloud API cards
- Add bind mounts for static/ and server.py so changes take effect without image rebuild
- Add dc-grid, llm-local-grid CSS with uniform minmax(310px,1fr) card layout
- Fix VOICE_HOST_DIR default via .env so voice folders survive container recreation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-26 22:35:42 +02:00

118 lines
6.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="section-head">
<span class="section-icon">&#127908;</span>
<div class="section-title">
<h2>Clone a Voice</h2>
<p>Upload or record 3-20 seconds of audio, trim it, then save it as a reusable voice clone.</p>
</div>
</div>
<!-- Step 1: Load audio -->
<div class="tab-content" id="tab-source">
<div class="card">
<h2>Step 1 &mdash; Load audio</h2>
<p class="card-subtitle">Drop a file, paste a URL, or record directly from your microphone.</p>
<div id="drop-zone">
<strong>Drop an audio / video file here</strong>
<span>WAV &middot; MP3 &middot; OGG &middot; FLAC &middot; M4A &middot; MP4 &middot; MKV &middot; WEBM</span>
<span style="margin-top:10px;font-size:12px;color:var(--subtext)">or click to browse</span>
<input type="file" id="file-input" accept="audio/*,video/*">
</div>
</div>
<div class="card">
<h2>YouTube / URL</h2>
<p class="card-subtitle">Download audio from a direct link or YouTube video.</p>
<div class="url-row">
<input type="text" id="yt-url" placeholder="https://www.youtube.com/watch?v=...">
<button class="btn-primary" id="yt-btn">Download</button>
</div>
<div id="yt-progress"></div>
</div>
<div class="card">
<h2>Microphone</h2>
<p class="card-subtitle">Record a fresh sample with live input level monitoring.</p>
<div class="btn-row">
<button class="btn-red" id="rec-start-btn">&#9679; Record</button>
<button class="btn-secondary" id="rec-stop-btn" disabled>&#9632; Stop</button>
<div id="rec-indicator"><div id="rec-dot"></div><span id="rec-time">0:00</span></div>
</div>
</div>
<div class="card" id="waveform-card" style="display:none">
<h2>Step 2 &mdash; Trim selection</h2>
<p class="card-subtitle">Select the best 3–20 s of clean speech from the waveform.</p>
<div id="waveform-wrap"><div id="waveform"></div></div>
<div class="time-row">
<label>Start (s) <input type="number" id="trim-start" value="0" min="0" step="0.1"></label>
<label>End (s) &nbsp;<input type="number" id="trim-end" value="0" min="0" step="0.1"></label>
<span id="trim-duration" class="dur-ok">0.0 s</span>
</div>
<div class="btn-row">
<button class="btn-primary" id="trim-btn">Confirm trim &rarr; Name &amp; Save</button>
<button class="btn-secondary" id="auto-trim-btn">Auto trim</button>
<button class="btn-secondary" id="play-btn">&#9654; Play</button>
<button class="btn-secondary" id="play-selection-btn">&#9654; Play selection</button>
</div>
</div>
</div><!-- /tab-source -->
<!-- Step 3: Name and save -->
<div class="tab-content" id="tab-save">
<div class="card">
<h2>Step 3 &mdash; Name the voice</h2>
<p class="card-subtitle">Assign a unique ID, language, and gender — e.g. <code>EN_F_Anna</code>.</p>
<div class="voice-id-row">
<input type="text" id="voice-id-input" placeholder="e.g. EN_F_Anna or MyCustomVoice" spellcheck="false">
</div>
<div id="voice-id-hint" class="note" style="min-height:1.2em"></div>
<details class="helper">
<summary>Build from parts &nbsp;(LANG &middot; GENDER &middot; Name helper)</summary>
<div class="helper-body">
<div class="field">
<label>Language</label>
<select id="lang-select">
<option>EN</option><option>DE</option><option>ZH</option><option>FR</option>
<option>ES</option><option>JA</option><option>KO</option><option>IT</option>
<option>PT</option><option>RU</option><option>AR</option><option>PL</option>
<option>NL</option><option>SV</option><option>TR</option><option>HI</option>
</select>
</div>
<div class="field">
<label>Gender</label>
<select id="gender-select">
<option value="F">F &mdash; Female</option>
<option value="M">M &mdash; Male</option>
<option value="N">N &mdash; Neutral</option>
</select>
</div>
<div class="field" style="flex:1;min-width:120px">
<label>Name (no spaces)</label>
<input type="text" id="name-input" placeholder="Anna">
</div>
<button class="btn-secondary" id="helper-apply-btn" style="align-self:flex-end">Apply &rarr;</button>
</div>
</details>
</div>
<div class="card">
<h2>Transcript (reference text)</h2>
<p class="card-subtitle">The spoken text that matches this audio — type it or auto-transcribe.</p>
<div class="btn-row">
<button class="btn-secondary" id="transcribe-btn">&#128172; Auto-transcribe</button>
<span id="transcribe-status" style="font-size:13px;color:var(--subtext)"></span>
</div>
<textarea id="transcript-area" placeholder="Type or auto-transcribe the spoken text&hellip;"></textarea>
</div>
<div class="card">
<h2>Audio preview</h2>
<p class="card-subtitle">Play back the trimmed audio before saving to the library.</p>
<audio id="trim-audio" controls style="display:none"></audio>
<p id="no-audio-hint" class="note">No audio loaded yet. Load a file above (Step 1) or use Voice Design below.</p>
</div>
<div class="card">
<h2>Step 4 &mdash; Save to library</h2>
<p class="card-subtitle">Write the cloned voice to your active voices folder.</p>
<div class="btn-row">
<button class="btn-green" id="save-btn">&#128190; Save to Voice Library</button>
</div>
<div id="save-result" class="note" style="display:none"></div>
</div>
</div><!-- /tab-save -->
Reference in New Issue View Git Blame Copy Permalink