| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Audio8 ASR</title> |
| <link rel="stylesheet" href="/static/styles.css" /> |
| </head> |
| <body> |
| <main class="shell"> |
| <section class="workspace"> |
| <header class="topbar"> |
| <div> |
| <h1>Audio8 ASR</h1> |
| <p id="health">loading runtime...</p> |
| </div> |
| <div class="runtime-pill" id="recordStatus">Ready</div> |
| </header> |
|
|
| <div class="toolbar"> |
| <button id="recordBtn" class="primary" type="button">Record</button> |
| <button id="stopBtn" type="button" disabled>Stop</button> |
| <label> |
| <span>Max Tokens</span> |
| <input id="maxTokens" type="number" min="8" max="512" value="128" /> |
| </label> |
| </div> |
|
|
| <div class="controls"> |
| <div class="hotword-panel"> |
| <label> |
| <span>Hotwords</span> |
| <input id="hotwords" placeholder="Enter hotwords, separated by commas" /> |
| </label> |
| <div class="hotword-options"> |
| <span>Hotword strength</span> |
| <div class="segments compact" id="hotwordStrengthSegments"> |
| <button type="button" data-hotword-strength="normal">Normal</button> |
| <button type="button" data-hotword-strength="strong">Strong</button> |
| </div> |
| <strong class="risk-note">Strong may force incorrect hotwords, hallucinate, or repeat text.</strong> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="precision-row"> |
| <span>Decoder</span> |
| <div class="segments" id="precisionSegments"> |
| <button type="button" data-precision="fp32">FP32</button> |
| <button type="button" data-precision="int8">INT8</button> |
| <button type="button" data-precision="int4">INT4</button> |
| </div> |
| <span class="precision-note" id="precisionNote">--</span> |
| </div> |
|
|
| <div class="precision-row"> |
| <span>Audio tower</span> |
| <div class="segments" id="audioPrecisionSegments"> |
| <button type="button" data-audio-precision="fp32">FP32</button> |
| <button type="button" data-audio-precision="int8">INT8</button> |
| </div> |
| <span class="precision-note" id="audioPrecisionNote">--</span> |
| </div> |
|
|
| <div class="upload-row"> |
| <input id="fileInput" type="file" accept="audio/*" /> |
| <button id="uploadBtn" type="button">Transcribe</button> |
| </div> |
|
|
| <audio id="preview" controls></audio> |
|
|
| <section class="result-surface"> |
| <div class="result-head"> |
| <h2>Transcript</h2> |
| <span id="latency">--</span> |
| </div> |
| <div class="transcript" id="transcript">Transcript will appear here.</div> |
| </section> |
|
|
| <details class="raw-box"> |
| <summary>Raw response</summary> |
| <pre id="raw"></pre> |
| </details> |
| </section> |
|
|
| <aside class="monitor"> |
| <section class="panel"> |
| <div class="panel-head"> |
| <h2>Runtime</h2> |
| <span id="metricStamp">--</span> |
| </div> |
| <div class="kv-list"> |
| <div><span>Backend</span><strong id="backend">--</strong></div> |
| <div><span>Precision</span><strong id="precision">--</strong></div> |
| <div><span>Process RSS</span><strong id="rss">--</strong></div> |
| <div><span>Peak RSS</span><strong id="peakRss">--</strong></div> |
| <div><span>Request Peak</span><strong id="requestPeak">--</strong></div> |
| <div><span>System Memory</span><strong id="sysmem">--</strong></div> |
| </div> |
| </section> |
|
|
| <section class="panel"> |
| <div class="panel-head"> |
| <h2>GPU Memory</h2> |
| <span id="gpuSummary">--</span> |
| </div> |
| <div class="gpu-list" id="gpuList"></div> |
| </section> |
|
|
| <section class="panel"> |
| <div class="panel-head"> |
| <h2>Providers</h2> |
| </div> |
| <pre id="metricsRaw"></pre> |
| </section> |
| </aside> |
| </main> |
|
|
| <script src="/static/app.js?v=hf-staging-error-handling-v1"></script> |
| </body> |
| </html> |
|
|
