Added caching

decoder_worker.js

@@ -7,8 +7,33 @@ importScripts('https://cdn.jsdelivr.net/npm/[email protected]/dist/ort.min.
 // Configure ONNX Runtime to find WASM files from CDN
 ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/';
 
-// Helper to fetch model with progress reporting
+const MODEL_CACHE_NAME = 'moonshine-models-v1';
+
+// Helper to fetch model with progress reporting and caching
 async function fetchModelWithProgress(url, modelName) {
+    // Try to get from cache first
+    try {
+        const cache = await caches.open(MODEL_CACHE_NAME);
+        const cachedResponse = await cache.match(url);
+
+        if (cachedResponse) {
+            const buffer = await cachedResponse.arrayBuffer();
+            self.postMessage({
+                type: 'progress',
+                model: modelName,
+                loaded: buffer.byteLength,
+                total: buffer.byteLength,
+                done: true,
+                cached: true
+            });
+            console.log(`${modelName} loaded from cache`);
+            return buffer;
+        }
+    } catch (e) {
+        console.warn('Cache API not available:', e.message);
+    }
+
+    // Fetch from network
     const response = await fetch(url);
     if (!response.ok) {
         throw new Error(`Failed to fetch ${modelName}: ${response.status}`);
@@ -27,6 +52,13 @@ async function fetchModelWithProgress(url, modelName) {
             total: buffer.byteLength,
             done: true
         });
+        // Cache the response
+        try {
+            const cache = await caches.open(MODEL_CACHE_NAME);
+            await cache.put(url, new Response(buffer.slice(0)));
+        } catch (e) {
+            console.warn('Failed to cache model:', e.message);
+        }
         return buffer;
     }
 
@@ -66,6 +98,15 @@ async function fetchModelWithProgress(url, modelName) {
         offset += chunk.length;
     }
 
+    // Cache the result
+    try {
+        const cache = await caches.open(MODEL_CACHE_NAME);
+        await cache.put(url, new Response(result.slice(0)));
+        console.log(`${modelName} cached`);
+    } catch (e) {
+        console.warn('Failed to cache model:', e.message);
+    }
+
     return result.buffer;
 }
 

encoder_worker.js

@@ -7,8 +7,33 @@ importScripts('https://cdn.jsdelivr.net/npm/[email protected]/dist/ort.min.
 // Configure ONNX Runtime to find WASM files from CDN
 ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/';
 
-// Helper to fetch model with progress reporting
+const MODEL_CACHE_NAME = 'moonshine-models-v1';
+
+// Helper to fetch model with progress reporting and caching
 async function fetchModelWithProgress(url, modelName) {
+    // Try to get from cache first
+    try {
+        const cache = await caches.open(MODEL_CACHE_NAME);
+        const cachedResponse = await cache.match(url);
+
+        if (cachedResponse) {
+            const buffer = await cachedResponse.arrayBuffer();
+            self.postMessage({
+                type: 'progress',
+                model: modelName,
+                loaded: buffer.byteLength,
+                total: buffer.byteLength,
+                done: true,
+                cached: true
+            });
+            console.log(`${modelName} loaded from cache`);
+            return buffer;
+        }
+    } catch (e) {
+        console.warn('Cache API not available:', e.message);
+    }
+
+    // Fetch from network
     const response = await fetch(url);
     if (!response.ok) {
         throw new Error(`Failed to fetch ${modelName}: ${response.status}`);
@@ -27,6 +52,13 @@ async function fetchModelWithProgress(url, modelName) {
             total: buffer.byteLength,
             done: true
         });
+        // Cache the response
+        try {
+            const cache = await caches.open(MODEL_CACHE_NAME);
+            await cache.put(url, new Response(buffer.slice(0)));
+        } catch (e) {
+            console.warn('Failed to cache model:', e.message);
+        }
         return buffer;
     }
 
@@ -66,6 +98,15 @@ async function fetchModelWithProgress(url, modelName) {
         offset += chunk.length;
     }
 
+    // Cache the result
+    try {
+        const cache = await caches.open(MODEL_CACHE_NAME);
+        await cache.put(url, new Response(result.slice(0)));
+        console.log(`${modelName} cached`);
+    } catch (e) {
+        console.warn('Failed to cache model:', e.message);
+    }
+
     return result.buffer;
 }
 

streaming_asr.js

@@ -314,7 +314,7 @@ class PipelinedStreamingASR {
                         // Progress update from worker
                         break;
                     case 'progress':
-                        onProgress?.(e.data.model, { loaded: e.data.loaded, total: e.data.total });
+                        onProgress?.(e.data.model, { loaded: e.data.loaded, total: e.data.total, cached: e.data.cached });
                         break;
                     case 'model_done':
                         onModelDone?.(e.data.model);
@@ -368,7 +368,7 @@ class PipelinedStreamingASR {
                     case 'status':
                         break;
                     case 'progress':
-                        onProgress?.(e.data.model, { loaded: e.data.loaded, total: e.data.total });
+                        onProgress?.(e.data.model, { loaded: e.data.loaded, total: e.data.total, cached: e.data.cached });
                         break;
                     case 'model_done':
                         onModelDone?.(e.data.model);
@@ -888,10 +888,15 @@ class ASRDemoUI {
 
         // Update details with current model and byte progress
         if (currentModel && currentProgress.total > 0) {
-            const loadedMB = (currentProgress.loaded / (1024 * 1024)).toFixed(1);
-            const totalMB = (currentProgress.total / (1024 * 1024)).toFixed(1);
-            const percent = Math.round((currentProgress.loaded / currentProgress.total) * 100);
-            this.loadingDetails.textContent = `${currentModel}: ${loadedMB} / ${totalMB} MB (${percent}%)`;
+            if (currentProgress.cached) {
+                const sizeMB = (currentProgress.total / (1024 * 1024)).toFixed(1);
+                this.loadingDetails.textContent = `${currentModel}: ${sizeMB} MB (cached)`;
+            } else {
+                const loadedMB = (currentProgress.loaded / (1024 * 1024)).toFixed(1);
+                const totalMB = (currentProgress.total / (1024 * 1024)).toFixed(1);
+                const percent = Math.round((currentProgress.loaded / currentProgress.total) * 100);
+                this.loadingDetails.textContent = `${currentModel}: ${loadedMB} / ${totalMB} MB (${percent}%)`;
+            }
         } else if (currentModel) {
             this.loadingDetails.textContent = `Loading ${currentModel}...`;
         }