Add hardware WebGPU validation card

README.md

@@ -28,6 +28,7 @@ Known testing notes:
 - The app automatically falls back to WASM if hardware WebGPU is unavailable.
 - Initial load can be large because STT, LLM, TTS, and voice embeddings are all browser-side assets.
 - For validation evidence, run **Run benchmark suite**, **Run 3 real-mic series**, then **Download JSON**.
+- The Latency panel shows separate real-mic and hardware-WebGPU validation cards.
 - The exported `hostMetadata.hfSpaceCommit` identifies the exact static Space revision served to the browser.
 - Hosted smoke validation passed on May 28, 2026: TTS, identity, and loopback rows completed with zero benchmark-phase network requests, zero benchmark errors, and zero server-inference suspects.
 - The latest local validation also passed UI smoke, client-side/no-server smoke, synthetic loopback stability, and first-TTS-chunk safety. The remaining external gates are real human microphone rows and a hardware WebGPU row from a browser that exposes a real GPU adapter.

app.js

@@ -41,6 +41,10 @@ const elements = {
   micValidationStatus: $("micValidationStatus"),
   micValidationDetail: $("micValidationDetail"),
   micValidationProgressBar: $("micValidationProgressBar"),
+  gpuValidationCard: $("gpuValidationCard"),
+  gpuValidationStatus: $("gpuValidationStatus"),
+  gpuValidationDetail: $("gpuValidationDetail"),
+  gpuValidationProgressBar: $("gpuValidationProgressBar"),
   vadCloseLatency: $("vadCloseLatency"),
   asrLatency: $("asrLatency"),
   firstTokenLatency: $("firstTokenLatency"),
@@ -350,6 +354,7 @@ function updateRuntimeStatus() {
   elements.runtimeStatus.dataset.state = mode;
   elements.runtimeDeviceStatus.textContent = status;
   elements.runtimeDeviceDetail.textContent = detail;
+  updateGpuValidationStatus();
 }
 
 function formatMs(value) {
@@ -538,6 +543,42 @@ function updateMicValidationStatus() {
   elements.micValidationStatus.textContent = status;
   elements.micValidationDetail.textContent = detail;
   elements.micValidationProgressBar.style.width = `${Math.round(Math.max(0, Math.min(1, progress)) * 100)}%`;
+  updateGpuValidationStatus();
+}
+
+function updateGpuValidationStatus() {
+  if (!elements.gpuValidationCard) return;
+  const evidence = evidenceSummaryForRows(state.benchmarkResults).hardwareWebgpu;
+  const hardwareRows = evidence.hardwareRows ?? 0;
+  let mode = "idle";
+  let status = "Checking adapter";
+  let detail = "Adapter probe pending.";
+  let progress = 0;
+
+  if (hardwareRows > 0) {
+    mode = "ready";
+    status = `${hardwareRows} hardware WebGPU row${hardwareRows === 1 ? "" : "s"}`;
+    detail = evidence.adapters[0]?.label ?? "Hardware adapter recorded in benchmark rows.";
+    progress = 1;
+  } else if (state.webgpuAvailable === false) {
+    mode = "warn";
+    status = "No WebGPU adapter";
+    detail = "Hardware WebGPU is not exposed in this browser.";
+  } else if (state.webgpuAvailable === true && state.webgpuSoftwareAdapter) {
+    mode = "warn";
+    status = "Software WebGPU only";
+    detail = `Software adapter: ${formatGpuAdapter(state.webgpuAdapterInfo)}`;
+  } else if (state.webgpuAvailable === true) {
+    mode = "warn";
+    status = "Hardware WebGPU available";
+    detail = `${formatGpuAdapter(state.webgpuAdapterInfo)}. Run a WebGPU stack to capture a row.`;
+    progress = 0.5;
+  }
+
+  elements.gpuValidationCard.dataset.state = mode;
+  elements.gpuValidationStatus.textContent = status;
+  elements.gpuValidationDetail.textContent = detail;
+  elements.gpuValidationProgressBar.style.width = `${Math.round(Math.max(0, Math.min(1, progress)) * 100)}%`;
 }
 
 function resetTurnState() {

index.html

@@ -176,6 +176,14 @@
                 <span id="micValidationProgressBar"></span>
               </div>
             </div>
+            <div id="gpuValidationCard" class="mic-validation" data-state="idle" aria-live="polite">
+              <span>Hardware WebGPU validation</span>
+              <strong id="gpuValidationStatus">Checking adapter</strong>
+              <small id="gpuValidationDetail">Adapter probe pending.</small>
+              <div class="mic-progress" aria-hidden="true">
+                <span id="gpuValidationProgressBar"></span>
+              </div>
+            </div>
             <button id="suiteButton" type="button" disabled>Run benchmark suite</button>
             <button id="benchmarkButton" type="button" disabled>Run identity benchmark</button>
             <button id="chatBenchmarkButton" type="button" disabled>Run chat benchmark</button>