Offline readiness indicator and Prepare all audio

src/main.js

@@ -19,6 +19,8 @@ const el = {
   exportBtn: $('btn-export'), engineInfo: $('engine-info'), clearCacheBtn: $('btn-clear-cache'),
   modelBar: $('model-bar'), modelText: $('model-text'), modelProgress: $('model-progress'),
   shareNote: $('share-note'), audio: $('audio'),
+  net: $('net'), readyTitle: $('ready-title'), readyNote: $('ready-note'),
+  rApp: $('r-app'), rModel: $('r-model'), rVoice: $('r-voice'), prepare: $('btn-prepare'),
 };
 
 // ---------- persisted settings ----------
@@ -36,7 +38,7 @@ const state = {
   playing: false,
   voice: saved.voice || '',
   rate: saved.rate || 1,
-  gen: { abort: null, running: false, wake: null, exportAll: false },
+  gen: { abort: null, running: false, wake: null, prepareAll: false },
   waiters: [],      // resolved whenever a chunk finishes generating
   voiceMeta: new Map(),
 };
@@ -132,6 +134,54 @@ function wavBlob(int16Parts) {
   return new Blob([buf], { type: 'audio/wav' });
 }
 
+// ---------- offline readiness ----------
+const ready = { app: false, model: false, voice: false, modelBusy: true, downloadedNow: false, persisted: false };
+
+function voiceLabel() {
+  return state.voice ? `Voice (${state.voice})` : 'Voice (default)';
+}
+
+async function checkVoiceCached() {
+  if (!state.voice) { ready.voice = ready.model; return renderReadiness(); }
+  const meta = state.voiceMeta.get(state.voice);
+  try {
+    const c = await caches.open(VOICE_CACHE);
+    ready.voice = !!(meta && await c.match(VOICE_BASE + meta.filename));
+  } catch { ready.voice = false; }
+  renderReadiness();
+}
+
+function renderReadiness() {
+  const set = (li, ok, busy) => { li.classList.toggle('yes', ok); li.classList.toggle('busy', !ok && !!busy); };
+  set(el.rApp, ready.app);
+  set(el.rModel, ready.model, ready.modelBusy);
+  el.rVoice.textContent = voiceLabel();
+  set(el.rVoice, ready.voice);
+  const all = ready.app && ready.model && ready.voice;
+  const online = navigator.onLine;
+
+  el.net.className = 'pill ' + (!online ? 'off' : all ? 'ok' : '');
+  el.net.textContent = !online ? '✈ Offline' : all ? '✓ Offline-ready' : '';
+
+  if (all) {
+    el.readyTitle.textContent = online ? 'Ready to work offline' : 'Offline — running entirely on this device';
+    el.readyNote.textContent = online
+      ? 'The app, speech model and voice are saved on this device. You can turn on airplane mode or switch off Wi‑Fi and keep listening. Your text never leaves the phone.'
+      : 'No network needed: speech is being generated on this device.';
+  } else if (!online) {
+    el.readyTitle.textContent = 'Offline, but not everything is saved yet';
+    el.readyNote.textContent = 'Connect once so the missing parts can download. After that it works without a connection.';
+  } else {
+    el.readyTitle.textContent = ready.modelBusy ? 'Saving everything for offline use…' : 'Almost ready for offline use';
+    el.readyNote.textContent = !ready.voice && ready.model && state.voice
+      ? `The ${state.voice} voice downloads the first time it speaks (a few hundred KB).`
+      : 'One-time download (about 65 MB). Your text is never uploaded.';
+  }
+}
+
+addEventListener('online', renderReadiness);
+addEventListener('offline', renderReadiness);
+
 // ---------- model ----------
 function setModelStatus(text, frac) {
   el.modelText.textContent = text;
@@ -145,6 +195,7 @@ async function loadModel() {
       lang: 'en',
       device: saved.device || 'cpu',
       onProgress: ({ file, loaded, total, cached }) => {
+        if (!cached) ready.downloadedNow = true;
         files[file] = { loaded, total: total || loaded };
         const all = Object.values(files);
         const L = all.reduce((a, f) => a + f.loaded, 0);
@@ -157,9 +208,13 @@ async function loadModel() {
     el.engineInfo.textContent = `Engine: ${t.device.toUpperCase()}${t.device === 'cpu' ? `, ${t.threads} thread${t.threads > 1 ? 's' : ''}` : ''}. ${t.device === 'cpu' ? t.threadsReason : t.deviceReason}`;
     if (state.voice) await ensureVoice(state.voice).catch(() => { state.voice = ''; el.voice.value = ''; });
     el.modelBar.classList.add('ready');
+    ready.model = true; ready.modelBusy = false;
+    try { ready.persisted = await navigator.storage?.persist?.(); } catch { /* optional */ }
+    checkVoiceCached();
     kickGen();
   } catch (e) {
     console.error(e);
+    ready.modelBusy = false; renderReadiness();
     setModelStatus(`Could not load the speech model: ${e.message || e}`, 0);
   }
 }
@@ -202,6 +257,7 @@ async function loadVoiceList() {
   } catch (e) {
     console.warn('voice list unavailable', e);
   }
+  if (ready.model) checkVoiceCached();
 }
 
 let voicesReady = Promise.resolve();
@@ -212,6 +268,7 @@ async function ensureVoice(name) {
   if (!meta) throw new Error('unknown voice');
   const bytes = await cachedFetch(VOICE_BASE + meta.filename);
   await state.tts.addVoice(name, bytes);
+  checkVoiceCached();
 }
 
 // ---------- generation loop ----------
@@ -222,9 +279,9 @@ function notifyChunkReady() {
 function waitForChunk() { return new Promise((r) => state.waiters.push(r)); }
 
 function nextToGenerate() {
-  const end = state.gen.exportAll ? state.chunks.length : Math.min(state.chunks.length, state.idx + LOOKAHEAD);
+  const end = state.gen.prepareAll ? state.chunks.length : Math.min(state.chunks.length, state.idx + LOOKAHEAD);
   for (let i = state.idx; i < end; i++) if (!state.chunks[i].pcm) return i;
-  if (state.gen.exportAll) for (let i = 0; i < state.idx; i++) if (!state.chunks[i].pcm) return i;
+  if (state.gen.prepareAll) for (let i = 0; i < state.idx; i++) if (!state.chunks[i].pcm) return i;
   return -1;
 }
 
@@ -267,6 +324,7 @@ async function genLoop() {
         for (const p of parts) { all.set(p, o); o += p.length; }
         chunk.pcm = toInt16(all);
         notifyChunkReady();
+        updatePrepareButton();
       } catch (e) {
         if (ctrl.signal.aborted) continue;
         console.error('synthesis failed', e);
@@ -306,7 +364,7 @@ function highlight(scroll = true) {
   const now = el.reader.querySelector('.c.now');
   if (scroll && now) {
     const r = now.getBoundingClientRect();
-    if (r.top < 70 || r.bottom > innerHeight - 170) now.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    if (r.top < 70 || r.bottom > innerHeight - 220) now.scrollIntoView({ block: 'center', behavior: 'smooth' });
   }
   store({ idx: state.idx });
   updateMediaSession();
@@ -410,6 +468,7 @@ function startReading(text, idx = 0, autoplay = true) {
   el.player.classList.remove('hidden');
   el.edit.classList.remove('hidden');
   render();
+  updatePrepareButton();
   restartGen();
   if (autoplay) play();
   else setStatus(`Tap play to resume — ${state.idx + 1} of ${state.chunks.length}`);
@@ -480,21 +539,55 @@ el.voice.addEventListener('change', async () => {
   store({ voice: state.voice });
   // Throw away audio made with the old voice and regenerate from here.
   state.chunks.forEach((c, i) => { if (i !== state.idx || !state.playing) c.pcm = null; });
+  updatePrepareButton();
+  checkVoiceCached();
   if (state.tts) ensureVoice(state.voice).catch((e) => console.warn(e));
   restartGen();
 });
-el.exportBtn.addEventListener('click', async () => {
-  if (!state.chunks.length) { el.engineInfo.textContent = 'Press Listen first, then export.'; return; }
-  el.exportBtn.disabled = true;
-  state.gen.exportAll = true;
+function fmtDur(samples) {
+  const s = Math.round(samples / SR);
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+function updatePrepareButton() {
+  const n = state.chunks.length;
+  const done = state.chunks.filter((c) => c.pcm).length;
+  const b = el.prepare;
+  b.classList.toggle('done', n > 0 && done === n);
+  if (n && done === n) {
+    const samples = state.chunks.reduce((a, c) => a + c.pcm.length, 0);
+    b.textContent = `✓ All audio ready (${fmtDur(samples)})`;
+    b.disabled = true;
+  } else if (state.gen.prepareAll) {
+    b.textContent = `Preparing… ${done} of ${n}`;
+    b.disabled = true;
+  } else {
+    b.textContent = 'Prepare all audio';
+    b.disabled = false;
+  }
+}
+
+/** Generate every chunk now (e.g. before going offline, or to avoid pauses on a slow phone). */
+async function prepareAll(onTick) {
+  state.gen.prepareAll = true;
   kickGen();
   for (;;) {
-    const done = state.chunks.filter((c) => c.pcm).length;
-    el.exportBtn.textContent = `Preparing WAV… ${done}/${state.chunks.length}`;
-    if (done === state.chunks.length) break;
+    updatePrepareButton();
+    onTick?.();
+    if (state.chunks.every((c) => c.pcm)) break;
     await waitForChunk();
   }
-  state.gen.exportAll = false;
+  state.gen.prepareAll = false;
+  updatePrepareButton();
+}
+el.prepare.addEventListener('click', () => prepareAll());
+
+el.exportBtn.addEventListener('click', async () => {
+  if (!state.chunks.length) { el.engineInfo.textContent = 'Press Listen first, then export.'; return; }
+  el.exportBtn.disabled = true;
+  await prepareAll(() => {
+    el.exportBtn.textContent = `Preparing WAV… ${state.chunks.filter((c) => c.pcm).length}/${state.chunks.length}`;
+  });
   const blob = wavBlob(state.chunks.map((c) => c.pcm));
   const a = document.createElement('a');
   a.href = URL.createObjectURL(blob);
@@ -539,6 +632,10 @@ if (share) {
   startReading(saved.text, saved.idx || 0, false);
 }
 
+renderReadiness();
 if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js').catch((e) => console.warn('sw', e));
+  navigator.serviceWorker.ready.then(() => { ready.app = true; renderReadiness(); });
+} else {
+  ready.app = true;
 }