Upload 3 files

app.js

@@ -1357,6 +1357,39 @@ async function fetchWithProgress(url, onProgress) {
   return new Blob(chunks);
 }
 
+const MODEL_CACHE_NAME = "nanomaestro-cache-v1";
+
+// Fetch with browser Cache Storage API fallback
+async function fetchWithCache(url, onProgress, isJson = false) {
+  if (!('caches' in window)) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status} fetching ${url}`);
+    return isJson ? response.json() : response.blob();
+  }
+
+  const cache = await caches.open(MODEL_CACHE_NAME);
+  const cachedResponse = await cache.match(url);
+
+  if (cachedResponse) {
+    console.log(`Loaded from browser cache: ${url}`);
+    if (onProgress) onProgress(1, 1);
+    return isJson ? cachedResponse.json() : cachedResponse.blob();
+  }
+
+  console.log(`Cache miss. Downloading remotely: ${url}`);
+  if (isJson) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status} fetching ${url}`);
+    await cache.put(url, response.clone());
+    return response.json();
+  } else {
+    const blob = await fetchWithProgress(url, onProgress);
+    const responseToCache = new Response(blob);
+    await cache.put(url, responseToCache);
+    return blob;
+  }
+}
+
 // Initializer Flow
 async function init() {
   const loadingOverlay = document.querySelector("#loadingOverlay");
@@ -1376,11 +1409,7 @@ async function init() {
     
     // Step 1. Load Vocabulary
     updateProgress(5, "Downloading vocabulary metadata...");
-    const vocabResponse = await fetch("https://huggingface.co/utkucoban/NanoMaestro-Realtime/resolve/main/NanoMaestro-Realtime/NM2.4%20ONNX%20int8/vocab.json");
-    if (!vocabResponse.ok) {
-      throw new Error(`Failed to load vocabulary json: ${vocabResponse.statusText}`);
-    }
-    const vocab = await vocabResponse.json();
+    const vocab = await fetchWithCache("https://huggingface.co/utkucoban/NanoMaestro-Realtime/resolve/main/NanoMaestro-Realtime/NM2.4%20ONNX%20int8/vocab.json", null, true);
     stoi = vocab.stoi;
     itos = Object.fromEntries(Object.entries(vocab.itos).map(([key, value]) => [Number(key), value]));
     vocabSize = vocab.vocab_size;
@@ -1388,13 +1417,13 @@ async function init() {
     
     // Step 2. Download ONNX Model
     updateProgress(15, "Downloading AI model...");
-    const modelBlob = await fetchWithProgress("https://huggingface.co/utkucoban/NanoMaestro-Realtime/resolve/main/NanoMaestro-Realtime/NM2.4%20ONNX%20int8/model_int8.onnx", (loaded, total) => {
+    const modelBlob = await fetchWithCache("https://huggingface.co/utkucoban/NanoMaestro-Realtime/resolve/main/NanoMaestro-Realtime/NM2.4%20ONNX%20int8/model_int8.onnx", (loaded, total) => {
       // Map 0-100% of download to 15-80% progress indicator
       const pct = 15 + (loaded / total) * 65;
       const loadedMB = (loaded / (1024 * 1024)).toFixed(1);
       const totalMB = (total / (1024 * 1024)).toFixed(1);
       updateProgress(pct, `Downloading AI model (${loadedMB}MB / ${totalMB}MB)...`);
-    });
+    }, false);
     
     // Step 3. Initialize inference session
     updateProgress(82, "Initializing neural network engine...");