mARTin-B78
dc47aa0431
- New s-performance section: dedicated Benchmark nav entry with run form, per-session results table, RTF trend badge (faster/slower/stable), SVG sparkline chart, and a History card backed by localStorage (last 50 sessions) - Performance tab removed from Try It Out; element IDs unchanged so JS works - renderIntegrationSnippets: adds Python MCP server + Claude Code .mcp.json config snippets to the Connect Apps page (integration-card-wide styling) - Save handler: persists all Captures settings fields (stt_language, stt_preferred_backend, auto_refine, refine_model, refine_* toggles, captures_default_voice) alongside existing settings - CSS: integration-card-wide accent border, benchmark history rows, trend badges, sparkline wrapper, bench-history-toolbar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
74 lines
5.3 KiB
HTML
74 lines
5.3 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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<h3><span class="mdi mdi-robot-outline"></span> MCP — AI agents</h3>
|
|
<p>Expose TTS and STT as tools for Claude Code, Cursor, or any MCP-compatible agent. Copy the Python MCP server below, install it with <code>pip install mcp httpx</code>, then point your agent config at it.</p>
|
|
<pre><code id="snippet-mcp-server"></code></pre>
|
|
<div class="btn-row" style="gap:8px;flex-wrap:wrap">
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-mcp-server">Copy MCP server</button>
|
|
<button class="btn-secondary copy-snippet" data-snippet="snippet-mcp-claude-config">Copy Claude Code config</button>
|
|
</div>
|
|
<pre style="margin-top:10px"><code id="snippet-mcp-claude-config"></code></pre>
|
|
</div>
|
|
<div class="integration-card">
|
|
<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 -->
|