Fix progress bar display and correct model size to 2.5GB

- Convert parakeet.js progress format to UI-expected format
- Send initiate/progress/done messages for progress bars
- Track seen files to avoid duplicate initiate messages
- Update model size from 2.1GB to 2.5GB (encoder is 2.3GB alone)
- Progress bars now show download status correctly

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/worker-CY2tAIOW.js

@@ -0,0 +1 @@
+async function f(t,a={}){const{getParakeetModel:e}=await import("./hub-BlMT648A.js"),{ParakeetModel:s}=await import("./parakeet-xcg-VHSn.js"),{MODELS:r}=await import("./models-Dq2DCePq.js"),o=r[t]?.repoId||t,n=await e(o,a);return s.fromUrls({...n.urls,filenames:n.filenames,preprocessorBackend:n.preprocessorBackend,...a})}let i=null,m=!1;async function w(t="parakeet-tdt-0.6b-v3",a={}){if(m)return{status:"loading",message:"Model is already loading..."};if(i)return{status:"ready",message:"Model already loaded"};try{m=!0;const e=a.device==="webgpu"?"webgpu-hybrid":"wasm";self.postMessage({status:"loading",message:`Downloading Parakeet ${t}... (~2.1GB, this may take 1-2 minutes)`}),console.log(`[Worker] Loading model with backend: ${e}`);const s=e==="wasm"?{encoderQuant:"int8",decoderQuant:"int8",preprocessor:"nemo128"}:{encoderQuant:"fp32",decoderQuant:"int8",preprocessor:"nemo128"},r=new Set;i=await f(t,{backend:e,...s,progress:u=>{const{loaded:g,total:c,file:l}=u,p=c>0?Math.round(g/c*100):0;r.has(l)||(r.add(l),self.postMessage({status:"initiate",file:l,progress:0,total:c})),self.postMessage({status:"progress",file:l,progress:p,total:c,loaded:g}),g>=c&&self.postMessage({status:"done",file:l})}});const n=i.session?.executionProviders?.[0]||e;console.log(`[Worker] Model loaded. Requested: ${e}, Actual provider: ${n}`),self.postMessage({status:"loading",message:"Model downloaded, warming up..."});const d=new Float32Array(16e3);return await i.transcribe(d,16e3),self.postMessage({status:"ready",message:`Parakeet ${t} loaded successfully!`,device:e,modelVersion:t}),{status:"ready",device:e}}catch(e){return console.error("Failed to load model:",e),self.postMessage({status:"error",message:`Failed to load model: ${e.message}`,error:e.toString()}),{status:"error",error:e.toString()}}finally{m=!1}}async function h(t,a=null){if(!i)throw new Error("Model not loaded. Call load() first.");try{const e=performance.now(),s=await i.transcribe(t,16e3,{returnTimestamps:!0,returnConfidences:!0,temperature:1}),o=(performance.now()-e)/1e3,n=t.length/16e3,d=n/o,u=k(s.words||[]);return{text:s.utterance_text||"",sentences:u,words:s.words||[],chunks:s.words||[],metadata:{latency:o,audioDuration:n,rtf:d,language:a,confidence:s.confidence_scores,metrics:s.metrics}}}catch(e){throw console.error("Transcription error:",e),e}}function k(t){if(!t||t.length===0)return[];const a=[];let e=[],s=t[0].start_time||0;for(let r=0;r<t.length;r++){const o=t[r];e.push(o.text),(/[.!?]$/.test(o.text)||r===t.length-1)&&(a.push({text:e.join(" ").trim(),start:s,end:o.end_time||o.start_time||0}),r<t.length-1&&(e=[],s=t[r+1].start_time||o.end_time||0))}return a}self.onmessage=async t=>{const{type:a,data:e}=t.data;try{switch(a){case"load":await w(e?.modelVersion,e?.options||{});break;case"transcribe":const s=await h(e.audio,e.language);self.postMessage({status:"transcription",result:s});break;case"ping":self.postMessage({status:"pong"});break;default:self.postMessage({status:"error",message:`Unknown message type: ${a}`})}}catch(s){self.postMessage({status:"error",message:s.message,error:s.toString()})}};

assets/worker-D2CeqmVH.js

@@ -0,0 +1 @@
+async function f(t,a={}){const{getParakeetModel:e}=await import("./hub-BlMT648A.js"),{ParakeetModel:s}=await import("./parakeet-xcg-VHSn.js"),{MODELS:r}=await import("./models-Dq2DCePq.js"),o=r[t]?.repoId||t,n=await e(o,a);return s.fromUrls({...n.urls,filenames:n.filenames,preprocessorBackend:n.preprocessorBackend,...a})}let i=null,m=!1;async function w(t="parakeet-tdt-0.6b-v3",a={}){if(m)return{status:"loading",message:"Model is already loading..."};if(i)return{status:"ready",message:"Model already loaded"};try{m=!0;const e=a.device==="webgpu"?"webgpu-hybrid":"wasm";self.postMessage({status:"loading",message:`Downloading Parakeet ${t}... (~2.5GB, this may take 1-2 minutes)`}),console.log(`[Worker] Loading model with backend: ${e}`);const s=e==="wasm"?{encoderQuant:"int8",decoderQuant:"int8",preprocessor:"nemo128"}:{encoderQuant:"fp32",decoderQuant:"int8",preprocessor:"nemo128"},r=new Set;i=await f(t,{backend:e,...s,progress:u=>{const{loaded:g,total:c,file:l}=u,p=c>0?Math.round(g/c*100):0;r.has(l)||(r.add(l),self.postMessage({status:"initiate",file:l,progress:0,total:c})),self.postMessage({status:"progress",file:l,progress:p,total:c,loaded:g}),g>=c&&self.postMessage({status:"done",file:l})}});const n=i.session?.executionProviders?.[0]||e;console.log(`[Worker] Model loaded. Requested: ${e}, Actual provider: ${n}`),self.postMessage({status:"loading",message:"Model downloaded, warming up..."});const d=new Float32Array(16e3);return await i.transcribe(d,16e3),self.postMessage({status:"ready",message:`Parakeet ${t} loaded successfully!`,device:e,modelVersion:t}),{status:"ready",device:e}}catch(e){return console.error("Failed to load model:",e),self.postMessage({status:"error",message:`Failed to load model: ${e.message}`,error:e.toString()}),{status:"error",error:e.toString()}}finally{m=!1}}async function h(t,a=null){if(!i)throw new Error("Model not loaded. Call load() first.");try{const e=performance.now(),s=await i.transcribe(t,16e3,{returnTimestamps:!0,returnConfidences:!0,temperature:1}),o=(performance.now()-e)/1e3,n=t.length/16e3,d=n/o,u=k(s.words||[]);return{text:s.utterance_text||"",sentences:u,words:s.words||[],chunks:s.words||[],metadata:{latency:o,audioDuration:n,rtf:d,language:a,confidence:s.confidence_scores,metrics:s.metrics}}}catch(e){throw console.error("Transcription error:",e),e}}function k(t){if(!t||t.length===0)return[];const a=[];let e=[],s=t[0].start_time||0;for(let r=0;r<t.length;r++){const o=t[r];e.push(o.text),(/[.!?]$/.test(o.text)||r===t.length-1)&&(a.push({text:e.join(" ").trim(),start:s,end:o.end_time||o.start_time||0}),r<t.length-1&&(e=[],s=t[r+1].start_time||o.end_time||0))}return a}self.onmessage=async t=>{const{type:a,data:e}=t.data;try{switch(a){case"load":await w(e?.modelVersion,e?.options||{});break;case"transcribe":const s=await h(e.audio,e.language);self.postMessage({status:"transcription",result:s});break;case"ping":self.postMessage({status:"pong"});break;default:self.postMessage({status:"error",message:`Unknown message type: ${a}`})}}catch(s){self.postMessage({status:"error",message:s.message,error:s.toString()})}};

assets/worker-y2BU5_Lc.js

@@ -0,0 +1 @@
+async function u(t,r={}){const{getParakeetModel:e}=await import("./hub-BlMT648A.js"),{ParakeetModel:s}=await import("./parakeet-xcg-VHSn.js"),{MODELS:o}=await import("./models-Dq2DCePq.js"),a=o[t]?.repoId||t,n=await e(a,r);return s.fromUrls({...n.urls,filenames:n.filenames,preprocessorBackend:n.preprocessorBackend,...r})}let c=null,l=!1;async function g(t="parakeet-tdt-0.6b-v3",r={}){if(l)return{status:"loading",message:"Model is already loading..."};if(c)return{status:"ready",message:"Model already loaded"};try{l=!0;const e=r.device==="webgpu"?"webgpu-hybrid":"wasm";self.postMessage({status:"loading",message:`Downloading Parakeet ${t}... (~2.1GB, this may take 1-2 minutes)`}),console.log(`[Worker] Loading model with backend: ${e}`),c=await u(t,{backend:e,...e==="wasm"?{encoderQuant:"int8",decoderQuant:"int8",preprocessor:"nemo128"}:{encoderQuant:"fp32",decoderQuant:"int8",preprocessor:"nemo128"},progress:i=>{console.log("[Worker] Progress callback received:",i),self.postMessage(i)}});const a=c.session?.executionProviders?.[0]||e;console.log(`[Worker] Model loaded. Requested: ${e}, Actual provider: ${a}`),self.postMessage({status:"loading",message:"Model downloaded, warming up..."});const n=new Float32Array(16e3);return await c.transcribe(n,16e3),self.postMessage({status:"ready",message:`Parakeet ${t} loaded successfully!`,device:e,modelVersion:t}),{status:"ready",device:e}}catch(e){return console.error("Failed to load model:",e),self.postMessage({status:"error",message:`Failed to load model: ${e.message}`,error:e.toString()}),{status:"error",error:e.toString()}}finally{l=!1}}async function m(t,r=null){if(!c)throw new Error("Model not loaded. Call load() first.");try{const e=performance.now(),s=await c.transcribe(t,16e3,{returnTimestamps:!0,returnConfidences:!0,temperature:1}),a=(performance.now()-e)/1e3,n=t.length/16e3,i=n/a,d=p(s.words||[]);return{text:s.utterance_text||"",sentences:d,words:s.words||[],chunks:s.words||[],metadata:{latency:a,audioDuration:n,rtf:i,language:r,confidence:s.confidence_scores,metrics:s.metrics}}}catch(e){throw console.error("Transcription error:",e),e}}function p(t){if(!t||t.length===0)return[];const r=[];let e=[],s=t[0].start_time||0;for(let o=0;o<t.length;o++){const a=t[o];e.push(a.text),(/[.!?]$/.test(a.text)||o===t.length-1)&&(r.push({text:e.join(" ").trim(),start:s,end:a.end_time||a.start_time||0}),o<t.length-1&&(e=[],s=t[o+1].start_time||a.end_time||0))}return r}self.onmessage=async t=>{const{type:r,data:e}=t.data;try{switch(r){case"load":await g(e?.modelVersion,e?.options||{});break;case"transcribe":const s=await m(e.audio,e.language);self.postMessage({status:"transcription",result:s});break;case"ping":self.postMessage({status:"pong"});break;default:self.postMessage({status:"error",message:`Unknown message type: ${r}`})}}catch(s){self.postMessage({status:"error",message:s.message,error:s.toString()})}};

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time speech recognition with Parakeet STT and WebGPU acceleration. Progressive transcription demo." />
     <title>Parakeet STT Progressive Transcription | WebGPU Demo</title>
-    <script type="module" crossorigin src="/assets/index-B8OCqX1p.js"></script>
+    <script type="module" crossorigin src="/assets/index-D32DZD7n.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-4ud1a0so.css">
   </head>
   <body>

source/src/App.jsx

@@ -140,7 +140,7 @@ function App() {
   };
 
   const clearCache = async () => {
-    if (!confirm('Clear cached model files (~2.1GB)? You will need to re-download the model.')) {
+    if (!confirm('Clear cached model files (~2.5GB)? You will need to re-download the model.')) {
       return;
     }
 
@@ -386,7 +386,7 @@ function App() {
             Real-time speech recognition with smart progressive streaming • WebGPU accelerated
           </p>
           <p className="text-gray-500 text-xs mt-2">
-            💾 Model files (~2.1GB) are cached locally for faster loading on future visits
+            💾 Model files (~2.5GB) are cached locally for faster loading on future visits
           </p>
         </div>
       </header>
@@ -441,7 +441,7 @@ function App() {
                     onClick={loadModel}
                     className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl"
                   >
-                    Load Model (~2.1GB)
+                    Load Model (~2.5GB)
                   </button>
                   <button
                     onClick={clearCache}
@@ -560,7 +560,7 @@ function App() {
               browser using WebGPU acceleration. No data is sent to servers.
             </p>
             <p className="text-xs">
-              Model: Parakeet TDT 0.6B v3 (ONNX via parakeet.js) • 25 languages supported • ~2.1GB download (cached locally)
+              Model: Parakeet TDT 0.6B v3 (ONNX via parakeet.js) • 25 languages supported • ~2.5GB download (cached locally)
             </p>
           </div>
         </div>

source/src/worker.js

@@ -31,7 +31,7 @@ async function loadModel(modelVersion = 'parakeet-tdt-0.6b-v3', options = {}) {
 
     self.postMessage({
       status: 'loading',
-      message: `Downloading Parakeet ${modelVersion}... (~2.1GB, this may take 1-2 minutes)`,
+      message: `Downloading Parakeet ${modelVersion}... (~2.5GB, this may take 1-2 minutes)`,
     });
 
     // Load model using parakeet.js fromHub helper
@@ -44,8 +44,40 @@ async function loadModel(modelVersion = 'parakeet-tdt-0.6b-v3', options = {}) {
       : { encoderQuant: 'fp32', decoderQuant: 'int8', preprocessor: 'nemo128' };  // WebGPU-hybrid: FP32 encoder + INT8 decoder
 
     // Progress callback to forward download progress
+    // parakeet.js sends: {loaded, total, file}
+    // Convert to format expected by UI: {status, file, progress, total}
+    const seenFiles = new Set();
     const progressCallback = (progressData) => {
-      self.postMessage(progressData);
+      const { loaded, total, file } = progressData;
+      const progress = total > 0 ? Math.round((loaded / total) * 100) : 0;
+
+      // Send initiate message for new files
+      if (!seenFiles.has(file)) {
+        seenFiles.add(file);
+        self.postMessage({
+          status: 'initiate',
+          file,
+          progress: 0,
+          total
+        });
+      }
+
+      // Send progress update
+      self.postMessage({
+        status: 'progress',
+        file,
+        progress,
+        total,
+        loaded
+      });
+
+      // Send done message when complete
+      if (loaded >= total) {
+        self.postMessage({
+          status: 'done',
+          file
+        });
+      }
     };
 
     model = await fromHub(modelVersion, {