Add benchmark JSON download

README.md

@@ -18,6 +18,8 @@ Static browser demo for client-side voice interaction:
 
 Open the Space, click **Load models**, then **Start mic**. The first load downloads model assets into the browser cache; after that, inference runs in the tab with no server inference.
 
+After benchmark or real-mic runs, use **Download JSON** to save the `{ summary, results }` evidence file locally.
+
 Known testing notes:
 
 - Use Chrome or another browser with WebGPU/WASM support and microphone permission enabled.

app.js

@@ -13,6 +13,7 @@ const elements = {
   micBenchmarkButton: $("micBenchmarkButton"),
   micSeriesButton: $("micSeriesButton"),
   copyResultsButton: $("copyResultsButton"),
+  downloadResultsButton: $("downloadResultsButton"),
   clearResultsButton: $("clearResultsButton"),
   clearLogButton: $("clearLogButton"),
   deviceSelect: $("deviceSelect"),
@@ -1524,6 +1525,7 @@ function parseMetricMs(text) {
 function renderBenchmarkResults() {
   elements.resultsBody.replaceChildren();
   elements.copyResultsButton.disabled = state.benchmarkResults.length === 0;
+  elements.downloadResultsButton.disabled = state.benchmarkResults.length === 0;
   elements.clearResultsButton.disabled = state.benchmarkResults.length === 0;
   renderBenchmarkSummary();
   if (state.benchmarkResults.length === 0) {
@@ -1630,6 +1632,27 @@ function exportBenchmarkSummary() {
   };
 }
 
+function benchmarkExportPayload() {
+  return {
+    summary: exportBenchmarkSummary(),
+    results: [...state.benchmarkResults],
+  };
+}
+
+function downloadBenchmarkJson() {
+  const payload = JSON.stringify(benchmarkExportPayload(), null, 2);
+  const blob = new Blob([`${payload}\n`], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `browser-speak-benchmarks-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+  logEvent("Benchmark JSON download started.");
+}
+
 function benchmarkSummariesByStack() {
   const grouped = new Map();
   for (const result of state.benchmarkResults) {
@@ -2452,10 +2475,7 @@ function installAutomationApi() {
     version: 1,
     state: automationSnapshot,
     exportResults() {
-      return {
-        summary: exportBenchmarkSummary(),
-        results: [...state.benchmarkResults],
-      };
+      return benchmarkExportPayload();
     },
     webgpuInfo: automationWebGpuInfo,
     setRuntimeOptions(options = {}) {
@@ -2534,14 +2554,7 @@ elements.bargeInButton.addEventListener("click", runBargeInBenchmark);
 elements.micBenchmarkButton.addEventListener("click", runMicBenchmark);
 elements.micSeriesButton.addEventListener("click", runMicSeriesBenchmark);
 elements.copyResultsButton.addEventListener("click", () => {
-  const payload = JSON.stringify(
-    {
-      summary: exportBenchmarkSummary(),
-      results: state.benchmarkResults,
-    },
-    null,
-    2,
-  );
+  const payload = JSON.stringify(benchmarkExportPayload(), null, 2);
   const write = navigator.clipboard?.writeText(payload);
   if (write) {
     write.then(() => logEvent("Benchmark JSON copied.")).catch(() => logEvent(payload));
@@ -2549,6 +2562,7 @@ elements.copyResultsButton.addEventListener("click", () => {
     logEvent(payload);
   }
 });
+elements.downloadResultsButton.addEventListener("click", downloadBenchmarkJson);
 elements.clearResultsButton.addEventListener("click", () => {
   cancelMicSeries();
   clearBenchmarkTimeout();

index.html

@@ -200,6 +200,7 @@
           <h2>Benchmarks</h2>
           <div class="mini-actions">
             <button id="copyResultsButton" type="button" disabled>Copy JSON</button>
+            <button id="downloadResultsButton" type="button" disabled>Download JSON</button>
             <button id="clearResultsButton" type="button" disabled>Clear</button>
           </div>
         </div>

styles.css

@@ -451,6 +451,7 @@ h2 {
 
 .mini-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 }