Cache verified model files across browser visits

README.md

@@ -23,10 +23,12 @@ saved.
 
 The model URLs and checksums are pinned in [`model-config.json`](model-config.json).
 The browser downloads Tiny's runtime configuration and ONNX files, then PnC's
-files, directly from their Hugging Face model repos. The small third-party
-Silero VAD file is bundled with the Space for browser access. Microphone access
-requires a secure origin and the browser's permission prompt, shown after the
-app's introductory mic dialog. Browser support remains a preview while
+files, directly from their Hugging Face model repos. Verified model files are
+kept in browser storage for later visits when storage is available; every load
+still verifies their checksums and initializes the WebAssembly runtime. The
+small third-party Silero VAD file is bundled with the Space for browser access.
+Microphone access requires a secure origin and the browser's permission prompt,
+shown after the app's introductory mic dialog. Browser support remains a preview while
 physical-device and mobile checks are completed.
 
 The browser and Python CLI pin the same PnC v2 int8 artifact. The Python
@@ -78,4 +80,5 @@ node tests/browser_live_chunking.mjs
 node tests/browser_pnc_sentence_casing.mjs
 node tests/browser_space_signed_assets.mjs
 node tests/browser_tiny_runtime_config.mjs
+node tests/browser_model_cache.mjs
 ```

app.js

@@ -91,8 +91,8 @@ const state = {
   level: 0,
 };
 
-const worker = new Worker(signedAsset("worker.js?v=20260927-1"));
-const pncWorker = new Worker(signedAsset("pnc-worker.js?v=20260927-1"));
+const worker = new Worker(signedAsset("worker.js?v=20260927-2"));
+const pncWorker = new Worker(signedAsset("pnc-worker.js?v=20260927-2"));
 
 function setStatus(text, detail = "", kind = "loading") {
   elements.statusText.textContent = text;
@@ -611,13 +611,13 @@ worker.onmessage = (event) => {
   const message = event.data || {};
   if (message.type === "model-progress") {
     const percent = Math.round(message.overall * 100);
-    setStatus("Henter lokal model", `${percent}% · ${message.file}`);
+    setStatus(message.cached ? "Indlæser gemt model" : "Indlæser lokal model", `${percent}% · ${message.file}`);
     setProgress(message.overall);
   } else if (message.type === "ready") {
     state.ready = true;
     elements.recordButton.disabled = false;
     elements.recordLabel.textContent = "Klik for at tale";
-    setStatus("Klar", `${formatBytes(message.bytes)} hentet`, "ready");
+    setStatus("Klar", `${formatBytes(message.bytes)} verificeret`, "ready");
     setProgress(1, true);
     ensurePunctuation();
   } else if (message.type === "live-result") {
@@ -665,7 +665,7 @@ worker.onmessage = (event) => {
 pncWorker.onmessage = (event) => {
   const message = event.data || {};
   if (message.type === "pnc-progress") {
-    elements.pncStatus.textContent = `Henter lokalt · ${Math.round(message.overall * 100)}%`;
+    elements.pncStatus.textContent = `${message.cached ? "Indlæser gemt model" : "Indlæser lokalt"} · ${Math.round(message.overall * 100)}%`;
   } else if (message.type === "pnc-ready") {
     state.pncReady = true;
     elements.pncStatus.textContent = `Klar · ${formatBytes(message.bytes)}`;

index.html

@@ -195,6 +195,6 @@
       </form>
     </dialog>
 
-    <script src="app.js?v=20260927-1" type="module"></script>
+    <script src="app.js?v=20260927-2" type="module"></script>
   </body>
 </html>

pnc-worker.js

@@ -32,39 +32,51 @@ async function sha256(bytes) {
 }
 
 async function fetchVerified(file, completedBytes, totalBytes) {
-  const response = await fetch(signedAsset(file.url), {cache: "force-cache"});
-  if (!response.ok || !response.body) {
-    throw new Error(`Kunne ikke hente ${file.path} (${response.status})`);
-  }
-  const reader = response.body.getReader();
-  const chunks = [];
-  let loaded = 0;
-  while (true) {
-    const {done, value} = await reader.read();
-    if (done) break;
-    chunks.push(value);
-    loaded += value.byteLength;
-    self.postMessage({
-      type: "pnc-progress",
-      file: file.path,
-      loaded,
-      fileBytes: file.bytes,
-      overall: Math.min(1, (completedBytes + loaded) / totalBytes),
-    });
-  }
-  const bytes = new Uint8Array(loaded);
-  let offset = 0;
-  for (const chunk of chunks) {
-    bytes.set(chunk, offset);
-    offset += chunk.byteLength;
-  }
-  if (loaded !== file.bytes) {
-    throw new Error(`${file.path} har forkert størrelse (${loaded} bytes)`);
-  }
-  if (await sha256(bytes) !== file.sha256) {
-    throw new Error(`${file.path} fejlede SHA-256-kontrol`);
+  const url = signedAsset(file.url);
+  let cache = null;
+  try { cache = await self.caches?.open("ekko-browser-models-v1"); } catch { /* Storage is optional. */ }
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    let cached = null;
+    if (!attempt && cache) {
+      try { cached = await cache.match(url); } catch { /* Use the network. */ }
+    }
+    const response = cached || await fetch(url, {cache: attempt ? "reload" : "force-cache"});
+    if (!response.ok || !response.body) {
+      throw new Error(`Kunne ikke hente ${file.path} (${response.status})`);
+    }
+    const reader = response.body.getReader();
+    const bytes = new Uint8Array(file.bytes);
+    let loaded = 0;
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) break;
+      if (loaded + value.byteLength > bytes.length) {
+        await reader.cancel();
+        loaded = bytes.length + 1;
+        break;
+      }
+      bytes.set(value, loaded);
+      loaded += value.byteLength;
+      self.postMessage({
+        type: "pnc-progress",
+        cached: Boolean(cached),
+        file: file.path,
+        loaded,
+        fileBytes: file.bytes,
+        overall: Math.min(1, (completedBytes + loaded) / totalBytes),
+      });
+    }
+    if (loaded === file.bytes && await sha256(bytes) === file.sha256) {
+      if (!cached && cache) {
+        try { await cache.put(url, new Response(bytes)); } catch { /* Keep using the verified bytes. */ }
+      }
+      return bytes;
+    }
+    if (cached) {
+      try { await cache.delete(url); } catch { /* Retry without this entry. */ }
+    }
+    if (attempt) throw new Error(`${file.path} fejlede størrelses- eller SHA-256-kontrol`);
   }
-  return bytes;
 }
 
 async function initialize(configUrl) {

worker.js

@@ -143,40 +143,51 @@ async function sha256(bytes) {
 }
 
 async function fetchVerified(file, completedBytes, totalBytes) {
-  const response = await fetch(signedAsset(file.url), {cache: "force-cache"});
-  if (!response.ok || !response.body) {
-    throw new Error(`Kunne ikke hente ${file.path} (${response.status})`);
-  }
-  const reader = response.body.getReader();
-  const chunks = [];
-  let loaded = 0;
-  while (true) {
-    const {done, value} = await reader.read();
-    if (done) break;
-    chunks.push(value);
-    loaded += value.byteLength;
-    self.postMessage({
-      type: "model-progress",
-      file: file.path,
-      loaded,
-      fileBytes: file.bytes,
-      overall: Math.min(1, (completedBytes + loaded) / totalBytes),
-    });
-  }
-  const bytes = new Uint8Array(loaded);
-  let offset = 0;
-  for (const chunk of chunks) {
-    bytes.set(chunk, offset);
-    offset += chunk.byteLength;
-  }
-  if (loaded !== file.bytes) {
-    throw new Error(`${file.path} har forkert størrelse (${loaded} bytes)`);
-  }
-  const digest = await sha256(bytes);
-  if (digest !== file.sha256) {
-    throw new Error(`${file.path} fejlede SHA-256-kontrol`);
+  const url = signedAsset(file.url);
+  let cache = null;
+  try { cache = await self.caches?.open("ekko-browser-models-v1"); } catch { /* Storage is optional. */ }
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    let cached = null;
+    if (!attempt && cache) {
+      try { cached = await cache.match(url); } catch { /* Use the network. */ }
+    }
+    const response = cached || await fetch(url, {cache: attempt ? "reload" : "force-cache"});
+    if (!response.ok || !response.body) {
+      throw new Error(`Kunne ikke hente ${file.path} (${response.status})`);
+    }
+    const reader = response.body.getReader();
+    const bytes = new Uint8Array(file.bytes);
+    let loaded = 0;
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) break;
+      if (loaded + value.byteLength > bytes.length) {
+        await reader.cancel();
+        loaded = bytes.length + 1;
+        break;
+      }
+      bytes.set(value, loaded);
+      loaded += value.byteLength;
+      self.postMessage({
+        type: "model-progress",
+        cached: Boolean(cached),
+        file: file.path,
+        loaded,
+        fileBytes: file.bytes,
+        overall: Math.min(1, (completedBytes + loaded) / totalBytes),
+      });
+    }
+    if (loaded === file.bytes && await sha256(bytes) === file.sha256) {
+      if (!cached && cache) {
+        try { await cache.put(url, new Response(bytes)); } catch { /* Keep using the verified bytes. */ }
+      }
+      return bytes;
+    }
+    if (cached) {
+      try { await cache.delete(url); } catch { /* Retry without this entry. */ }
+    }
+    if (attempt) throw new Error(`${file.path} fejlede størrelses- eller SHA-256-kontrol`);
   }
-  return bytes;
 }
 
 function createRecognizer(runtimeConfig) {