static/index.html

<!doctype html>
<html lang="zh-CN">
  <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>