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>
86 lines
4.1 KiB
HTML
86 lines
4.1 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-speedometer"></span></span>
|
|
<div class="section-title">
|
|
<h2>Benchmark</h2>
|
|
<p>Measure synthesis latency and real-time factor. Track trends across backends and voices over time.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Run benchmark -->
|
|
<div class="card">
|
|
<h2>Run benchmark</h2>
|
|
<p class="card-subtitle">Pick a backend and voice, set run count, then measure synthesis latency and real-time factor (RTF). RTF < 1.0 means the backend generates faster than real-time.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Backend</label>
|
|
<select id="perf-backend-select"><option value="">Checking backends…</option></select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Voice</label>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn-secondary" id="perf-fetch-voices-btn" type="button">Fetch voices</button>
|
|
<select id="perf-voice-select"><option value="">— select after fetch —</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Runs</label>
|
|
<select id="perf-runs">
|
|
<option value="1">1 run</option>
|
|
<option value="3" selected>3 runs</option>
|
|
<option value="5">5 runs</option>
|
|
<option value="10">10 runs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Sample text</label>
|
|
<textarea id="perf-text" rows="3">Hello, how are you today? Please read this sample clearly for a fair voice benchmark.</textarea>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" id="perf-run-btn" type="button"><span class="mdi mdi-play"></span> Run benchmark</button>
|
|
<button class="btn-secondary" id="perf-clear-btn" type="button">Clear results</button>
|
|
</div>
|
|
<div id="perf-progress" class="note" style="display:none"></div>
|
|
</div>
|
|
|
|
<!-- Current results -->
|
|
<div class="card" id="perf-results-card" style="display:none">
|
|
<h2>Results <span id="perf-results-label" class="s-label-note"></span></h2>
|
|
<p class="card-subtitle">Latency per run. RTF = synthesis time ÷ audio duration (lower is better, <1.0 is real-time capable).</p>
|
|
<div class="perf-summary" id="perf-summary"></div>
|
|
<div class="perf-trend-row" id="perf-trend-row" style="display:none">
|
|
<span class="perf-trend-label">vs. previous session:</span>
|
|
<span id="perf-trend-badge" class="perf-trend-badge"></span>
|
|
<span class="perf-sparkline-wrap" title="RTF history for this backend/voice (oldest → newest)">
|
|
<svg id="perf-sparkline" class="perf-sparkline" viewBox="0 0 120 32"></svg>
|
|
</span>
|
|
</div>
|
|
<div class="perf-table-wrap">
|
|
<table class="perf-table" id="perf-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th><th>Backend</th><th>Voice</th>
|
|
<th>Latency (ms)</th><th>Audio (s)</th><th>RTF</th><th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="perf-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History -->
|
|
<div class="card" id="perf-history-card">
|
|
<h2>History</h2>
|
|
<p class="card-subtitle">Last 50 benchmark sessions saved in your browser. Each row is one run session — click the backend/voice to pre-fill the form above.</p>
|
|
<div class="bench-history-toolbar">
|
|
<label class="bench-history-filter">
|
|
<input type="checkbox" id="perf-history-filter-current">
|
|
Show current backend & voice only
|
|
</label>
|
|
<button class="btn-secondary btn-sm" id="perf-history-clear-btn" type="button">Clear history</button>
|
|
</div>
|
|
<div id="perf-history-list" class="perf-history-list">
|
|
<div class="perf-history-empty">No benchmark history yet. Run a benchmark above to start tracking.</div>
|
|
</div>
|
|
</div>
|