mARTin-B78
0b3109cbf4
Loader: - Post-init modules (engines, ai-backends, generation, conversation) now load AFTER the skeleton is removed instead of before. The UI is visible ~500 ms sooner on average; those four modules load while the user is already browsing Voices / Clone / Design. - Removed the sttReady event approach that was triggering a duplicate /api/stt-backends call; init.js already populates all STT selects once on startup. Skeleton: - Replaced the card-grid placeholder with a two-column workbench skeleton (voice list rows on the left + inspector placeholder on the right) that matches the real My Voices layout. Connect Apps: - MCP Server, /speak REST endpoint, and Global hotkey daemon sections moved from Settings → About to Connect Apps, where they belong. - About page now has GitHub + Releases links instead. Clone section: - Added a hint note beneath the sample-text textarea reminding the user to replace the placeholder name (Sam / Alex / Marco …) with their own. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
138 lines
9.9 KiB
HTML
138 lines
9.9 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-api"></span></span>
|
|
<div class="section-title">
|
|
<h2>Connect Your Apps</h2>
|
|
<p>Copy ready-made configuration snippets for SillyTavern, Open WebUI, Home Assistant, MCP agents, and more.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-integrations">
|
|
|
|
<!-- ── MCP Server ─────────────────────────────────────────────── -->
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-connection"></span> MCP Server</h2>
|
|
<p class="card-subtitle">Expose voice tools to Claude Code, Cursor, and other MCP-aware agents via Streamable HTTP (JSON-RPC 2.0). Tools: <code>speak</code>, <code>transcribe</code>, <code>list_captures</code>, <code>list_profiles</code>.</p>
|
|
<div class="settings-grid compact">
|
|
<div class="s-field">
|
|
<label>HTTP transport URL</label>
|
|
<code class="s-code-block" id="s-mcp-url">http://localhost:7890/mcp</code>
|
|
</div>
|
|
<div class="s-field">
|
|
<label>Claude Code one-liner</label>
|
|
<code class="s-code-block">claude mcp add voice-creator --transport http --url http://localhost:7890/mcp --header "X-Voice-Creator-Client-Id: claude-code"</code>
|
|
</div>
|
|
<div class="s-field">
|
|
<label>Any HTTP MCP client (JSON)</label>
|
|
<pre class="s-code-block" style="white-space:pre-wrap">{"mcpServers":{"voice-creator":{"url":"http://localhost:7890/mcp","headers":{"X-Voice-Creator-Client-Id":"my-agent"}}}}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── /speak REST endpoint ───────────────────────────────────── -->
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-bullhorn-outline"></span> /speak REST endpoint</h2>
|
|
<p class="card-subtitle">Generate audio from any app or script without routing rules.</p>
|
|
<div class="settings-grid compact">
|
|
<div class="s-field">
|
|
<label>Generate speech (example)</label>
|
|
<pre class="s-code-block" style="white-space:pre-wrap">curl -X POST http://localhost:7890/speak \
|
|
-H "Content-Type: application/json" \
|
|
-H "X-Voice-Creator-Client-Id: my-script" \
|
|
-d '{"text":"Hello world","voice":"EN_F_Anna"}' \
|
|
--output speech.wav</pre>
|
|
</div>
|
|
<div class="s-field">
|
|
<label>Per-client voice binding</label>
|
|
<pre class="s-code-block" style="white-space:pre-wrap">curl -X PUT http://localhost:7890/speak/bindings/my-script \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"voice":"EN_F_Anna"}'</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Global hotkey daemon ───────────────────────────────────── -->
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-keyboard-outline"></span> Global hotkey daemon</h2>
|
|
<p class="card-subtitle">Push-to-talk transcription that types the result into any focused window on the host machine.</p>
|
|
<div class="settings-grid compact">
|
|
<div class="s-field">
|
|
<label>Install & run (host machine)</label>
|
|
<pre class="s-code-block" style="white-space:pre-wrap">pip install pynput sounddevice soundfile pyperclip requests
|
|
python hotkey_daemon.py --server http://localhost:7890</pre>
|
|
<span class="s-hint">Hold <kbd>Ctrl+Shift+Space</kbd> to record, release to transcribe and type. Linux: install <code>xdotool</code> for direct key injection.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── App integrations ───────────────────────────────────────── -->
|
|
<div class="card">
|
|
<h2>Use voices in other apps</h2>
|
|
<p class="card-subtitle">The editor creates and manages the voice files. External apps should connect to the Creator proxy or a reachable TTS backend, then use one of the active voice names.</p>
|
|
<div class="integration-toolbar">
|
|
<button class="btn-primary" id="show-api-btn" type="button">show api</button>
|
|
<button class="btn-secondary" id="integration-refresh-btn">Refresh examples</button>
|
|
<button class="btn-secondary" id="copy-active-voices-btn-integrations">Copy active voices</button>
|
|
<span id="integration-url-label" class="note"></span>
|
|
</div>
|
|
</div>
|
|
<div class="integration-grid">
|
|
<div class="integration-card" data-favicon="https://www.google.com/s2/favicons?domain=sillytavern.app&sz=16">
|
|
<h3>SillyTavern</h3>
|
|
<p>Use an OpenAI-compatible TTS provider. Paste one active voice into the voice field, or paste the comma-separated list where SillyTavern accepts custom voices.</p>
|
|
<pre><code id="snippet-sillytavern"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-sillytavern">Copy SillyTavern sample</button>
|
|
</div>
|
|
<div class="integration-card" data-favicon="https://www.google.com/s2/favicons?domain=openwebui.com&sz=16">
|
|
<h3>Open WebUI</h3>
|
|
<p>Enable TTS in Open WebUI under <strong>Settings → Audio</strong>. Set API base URL to this app's proxy and pick any active voice name. STT also works via the same proxy.</p>
|
|
<pre><code id="snippet-open-webui"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-open-webui">Copy Open WebUI config</button>
|
|
</div>
|
|
<div class="integration-card" data-favicon="https://www.google.com/s2/favicons?domain=home-assistant.io&sz=16">
|
|
<h3>Home Assistant</h3>
|
|
<p>Use this as a REST example for automations or scripts that call the TTS backend. Save the returned audio somewhere Home Assistant can play from.</p>
|
|
<pre><code id="snippet-home-assistant"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-home-assistant">Copy Home Assistant sample</button>
|
|
</div>
|
|
<div class="integration-card" data-icon="mdi mdi-console-line">
|
|
<h3>Generic curl test</h3>
|
|
<p>Quick terminal test for the voice list and speech endpoint after restarting the TTS container.</p>
|
|
<pre><code id="snippet-curl"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-curl">Copy curl sample</button>
|
|
</div>
|
|
<div class="integration-card" data-icon="mdi mdi-palette-outline">
|
|
<h3>VoiceDesign virtual voices</h3>
|
|
<p>Use saved Voice Design prompt presets without exporting WAVs. Point the external app at this creator app as an OpenAI-compatible TTS proxy and select a <code>vd_...</code> voice.</p>
|
|
<pre><code id="snippet-voice-design-proxy"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-voice-design-proxy">Copy virtual voice sample</button>
|
|
</div>
|
|
<div class="integration-card integration-card-wide" data-favicon="https://www.google.com/s2/favicons?domain=anthropic.com&sz=16">
|
|
<h3><span class="mdi mdi-robot-outline"></span> MCP — Native built-in server</h3>
|
|
<p>The app ships a built-in MCP server at <code>/mcp</code> (JSON-RPC 2.0, Streamable HTTP). No external script or extra packages needed. Tools: <strong>speak</strong>, <strong>transcribe</strong>, <strong>list_captures</strong>, <strong>list_profiles</strong>.</p>
|
|
<pre><code id="snippet-mcp-claude-cmd"></code></pre>
|
|
<div class="btn-row" style="gap:8px;flex-wrap:wrap">
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-mcp-claude-cmd">Copy Claude Code one-liner</button>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-mcp-claude-config">Copy JSON config</button>
|
|
</div>
|
|
<pre style="margin-top:10px"><code id="snippet-mcp-claude-config"></code></pre>
|
|
</div>
|
|
<div class="integration-card" data-icon="mdi mdi-bullhorn-outline">
|
|
<h3><span class="mdi mdi-bullhorn-outline"></span> /speak — direct REST</h3>
|
|
<p>POST text to <code>/speak</code> from any script, agent, or app. Voice resolves from explicit param → per-client binding → default voice. Optional persona LLM rewrite.</p>
|
|
<pre><code id="snippet-speak"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-speak">Copy /speak example</button>
|
|
</div>
|
|
<div class="integration-card" data-icon="mdi mdi-waveform">
|
|
<h3>Streaming TTS</h3>
|
|
<p>Use this when the target app can play audio progressively. For routed streaming, keep response format WAV and avoid before/after route sounds, otherwise the proxy must buffer before playback.</p>
|
|
<pre><code id="snippet-streaming-howto"></code></pre>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-streaming-howto">Copy streaming how-to</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Important after voice changes</h2>
|
|
<p class="card-subtitle">After enabling, hiding, adding, renaming, cropping, or normalising voices, restart the Qwen3-TTS container so its engine scans the updated <code>active_voices</code> folder. Then refresh the model or voice list in the target app.</p>
|
|
<p class="note">Virtual VoiceDesign voices are different: they use saved prompt presets through this app's proxy and do not need a WAV export or TTS-container rescan. They do need the <code>faster-qwen3-tts-voicedesign</code> container reachable from Settings.</p>
|
|
</div>
|
|
</div><!-- /tab-integrations -->
|