mARTin-B78
e434f10d9b
Batch card pre-populates from active My Voices (checked by default) with an option to reload from the backend. Select all / deselect all buttons. Runs each selected voice N times sequentially with a live progress bar and stop button. Results table updates after every voice and sorts by avg RTF fastest-first; each row shows a trend badge (faster/slower/stable) vs the previous session for that voice. All runs are saved to History. renderPerfHistory hoisted to module level so both single-voice and batch IIFEs can refresh the History card after saving new entries. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
143 lines
7.1 KiB
HTML
143 lines
7.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>
|
|
|
|
<!-- Batch benchmark -->
|
|
<div class="card">
|
|
<h2>Batch benchmark</h2>
|
|
<p class="card-subtitle">Benchmark multiple voices in one run. Pre-populated from your active My Voices — or reload from the backend. Results are sorted fastest first and saved to History.</p>
|
|
<div class="btn-row" style="align-items:flex-end;flex-wrap:wrap;gap:10px">
|
|
<div class="field">
|
|
<label>Backend</label>
|
|
<select id="batch-backend-select"><option value="">Checking backends…</option></select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Runs per voice</label>
|
|
<select id="batch-runs">
|
|
<option value="1" selected>1 run</option>
|
|
<option value="3">3 runs</option>
|
|
<option value="5">5 runs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p class="note" style="margin:4px 0 8px">Uses the sample text from the single-voice form above.</p>
|
|
<div class="batch-voice-toolbar">
|
|
<button class="btn-secondary btn-sm" id="batch-load-voices-btn" type="button"><span class="mdi mdi-reload"></span> Reload from backend</button>
|
|
<button class="btn-secondary btn-sm" id="batch-select-all-btn" type="button">Select all</button>
|
|
<button class="btn-secondary btn-sm" id="batch-select-none-btn" type="button">Deselect all</button>
|
|
<span id="batch-selected-count" class="note"></span>
|
|
</div>
|
|
<div id="batch-voice-list" class="batch-voice-list"></div>
|
|
<div class="btn-row" style="margin-top:12px">
|
|
<button class="btn-primary" id="batch-run-btn" type="button" disabled><span class="mdi mdi-play"></span> Run batch</button>
|
|
<button class="btn-secondary" id="batch-stop-btn" type="button" disabled><span class="mdi mdi-stop"></span> Stop</button>
|
|
</div>
|
|
<div id="batch-progress" class="batch-progress" style="display:none">
|
|
<div class="batch-progress-head">
|
|
<span id="batch-progress-label">Benchmarking…</span>
|
|
<span id="batch-progress-count"></span>
|
|
</div>
|
|
<div class="batch-progress-track" role="progressbar">
|
|
<div id="batch-progress-bar" class="batch-progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batch results -->
|
|
<div class="card" id="batch-results-card" style="display:none">
|
|
<h2>Batch results <span id="batch-results-label" class="s-label-note"></span></h2>
|
|
<p class="card-subtitle">Sorted fastest RTF first. Green = real-time capable (<1.0). Trend compares to the previous session for each voice.</p>
|
|
<div class="perf-table-wrap">
|
|
<table class="perf-table" id="batch-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Voice</th><th>Avg latency</th><th>Best</th><th>Audio (s)</th><th>Avg RTF</th><th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="batch-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>
|