cache: Cache API primary + OPFS fallback, add storage diagnostics

main.js

@@ -123,9 +123,10 @@ function setStatus(msg) {
   pill.className = "status-pill " + t;
 }
 
-// --- OPFS model cache -----------------------------------------------------------
-// OPFS (Origin Private File System) is not evicted under storage pressure and has
-// no per-entry size limit, unlike the Cache API. Large model weights live here.
+// --- Browser model cache --------------------------------------------------------
+// Primary: Cache API (same backend transformers.js uses, proven in HF Spaces).
+// Fallback: OPFS, used when the Cache API is unavailable or rejects a write.
+const CACHE_NAME = "datause-models";
 const CACHE_DIR = "datause-models";
 
 function hashKey(str) {
@@ -137,27 +138,57 @@ function hashKey(str) {
   return (h >>> 0).toString(16).padStart(8, "0");
 }
 
-async function getCacheDir() {
+// Cache API backend ----------------------------------------------------------
+async function readCacheApi(key) {
+  if (typeof caches === "undefined") return null;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    const resp = await cache.match(key);
+    if (!resp) return null;
+    return await resp.arrayBuffer();
+  } catch (e) {
+    log(`cache read failed (Cache API): ${e?.name || e}`, "warn");
+    return null;
+  }
+}
+
+async function writeCacheApi(key, buffer) {
+  if (typeof caches === "undefined") return false;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    await cache.put(key, new Response(buffer));
+    return true;
+  } catch (e) {
+    log(`cache write failed (Cache API): ${e?.name || e}`, "warn");
+    return false;
+  }
+}
+
+// OPFS backend ---------------------------------------------------------------
+async function opfsCacheDir() {
   const root = await navigator.storage.getDirectory();
   return root.getDirectoryHandle(CACHE_DIR, { create: true });
 }
 
-async function cacheGet(key) {
+async function readOpfs(key) {
+  if (!navigator.storage?.getDirectory) return null;
   try {
-    if (!navigator.storage?.getDirectory) return null;
-    const dir = await getCacheDir();
+    const dir = await opfsCacheDir();
     const name = hashKey(key);
     await dir.getFileHandle(name + ".ok"); // marker proves a complete prior write
     const handle = await dir.getFileHandle(name);
     const file = await handle.getFile();
     return await file.arrayBuffer();
-  } catch { return null; }
+  } catch (e) {
+    log(`cache read failed (OPFS): ${e?.name || e}`, "warn");
+    return null;
+  }
 }
 
-async function cacheSet(key, buffer) {
+async function writeOpfs(key, buffer) {
+  if (!navigator.storage?.getDirectory) return false;
   try {
-    if (!navigator.storage?.getDirectory) return;
-    const dir = await getCacheDir();
+    const dir = await opfsCacheDir();
     const name = hashKey(key);
     try { await dir.removeEntry(name + ".ok"); } catch { /* not present yet */ }
     const handle = await dir.getFileHandle(name, { create: true });
@@ -165,7 +196,23 @@ async function cacheSet(key, buffer) {
     await writable.write(buffer);
     await writable.close();
     await dir.getFileHandle(name + ".ok", { create: true });
-  } catch { /* storage full or interrupted — fall back to re-download next time */ }
+    return true;
+  } catch (e) {
+    log(`cache write failed (OPFS): ${e?.name || e}`, "warn");
+    return false;
+  }
+}
+
+// Unified entry points -------------------------------------------------------
+async function cacheGet(key) {
+  const viaCacheApi = await readCacheApi(key);
+  if (viaCacheApi) return viaCacheApi;
+  return readOpfs(key);
+}
+
+async function cacheSet(key, buffer) {
+  const ok = await writeCacheApi(key, buffer);
+  if (!ok) await writeOpfs(key, buffer);
 }
 
 // --- download with progress + cache -------------------------------------------
@@ -201,8 +248,7 @@ async function loadFile(url, label) {
   log(`downloaded ${label} (${(received / 1e6).toFixed(1)} MB)`, "ok");
   showProgress(1, label);
   cacheSet(url, buffer.buffer)
-    .then(() => log(`cached ${label}`, "ok"))
-    .catch(() => log(`cache skipped for ${label} (quota?)`, "warn")); // never block on OPFS write
+    .then(() => log(`cached ${label}`, "ok"));
   return buffer.buffer;
 }
 
@@ -568,6 +614,12 @@ async function init() {
       .then((ok) => log(`persistent storage ${ok ? "granted" : "not granted"}`, ok ? "ok" : "warn"))
       .catch(() => {});
   }
+  log(`env: caches=${typeof caches !== "undefined"} opfs=${!!navigator.storage?.getDirectory} embedded=${window.self !== window.top}`, "ok");
+  if (navigator.storage?.estimate) {
+    navigator.storage.estimate()
+      .then(({ usage, quota }) => log(`storage: ${(usage / 1e6).toFixed(1)} MB used / ${(quota / 1e6).toFixed(1)} MB quota`, "ok"))
+      .catch(() => {});
+  }
   setStatus("Requesting WebGPU adapter…");
   const adapter = await navigator.gpu.requestAdapter();
   if (!adapter) { setStatus("WebGPU adapter not found"); log("WebGPU adapter not found", "warn"); return null; }