From 20b1f2c54a0ad8d7649bb982af45c36b6d2d7767 Mon Sep 17 00:00:00 2001
From: Kresna <kresna@usetada.com>
Date: Sat, 1 Aug 2026 13:40:42 +0700
Subject: [PATCH] fix(voice-to-text): cache the model + pause preview during
 transcribe

Two issues from testing:
- Every Transcribe click re-initialized the Whisper pipeline (re-reading weights,
  re-running the load progress, blocking the thread). Cache the built transcriber
  by model id and reuse it; the download progress now only shows on first load.
- The audio preview kept playing when pressing stop because ONNX inference blocks
  the main thread and freezes the native controls. Pause the preview
  programmatically when transcribe (or a new recording) starts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/islands/media/VoiceToText.tsx |  9 ++++++---
 src/tools/media/stt.engine.ts     | 20 ++++++++++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/islands/media/VoiceToText.tsx b/src/islands/media/VoiceToText.tsx
index 8ea89aa..6cb0f2e 100644
--- a/src/islands/media/VoiceToText.tsx
+++ b/src/islands/media/VoiceToText.tsx
@@ -38,6 +38,7 @@ export default function VoiceToText() {
   const [subFormat, setSubFormat] = useState<'srt' | 'vtt'>('srt');
   const [error, setError] = useState('');
   const urlRef = useRef('');
+  const audioRef = useRef<HTMLAudioElement>(null);
 
   // Pick up a finished recording as the working audio.
   useEffect(() => {
@@ -66,6 +67,7 @@ export default function VoiceToText() {
     if (recorder.recording) {
       recorder.stop();
     } else {
+      audioRef.current?.pause();
       setSegments(null);
       setError('');
       recorder.start();
@@ -74,14 +76,15 @@ export default function VoiceToText() {
 
   const transcribe = async () => {
     if (!audioBlob) return;
+    audioRef.current?.pause(); // don't leave the preview playing while inference blocks the thread
     setError('');
     setSegments(null);
     setTranscribing(true);
-    setModelProgress(0);
+    setModelProgress(null); // only shows once real download progress fires (first load)
     try {
       const audio = await decodeToMono16k(audioBlob);
       const engine = await createTranscriber(model, r => setModelProgress(r));
-      setModelProgress(null); // model ready — now inference (indeterminate)
+      setModelProgress(null); // model ready (or cached) — now inference (indeterminate)
       const segs = await engine.transcribe(audio);
       setSegments(segs);
       setEditedText(segmentsToText(segs));
@@ -135,7 +138,7 @@ export default function VoiceToText() {
       {recorder.error && <Alert variant="error">{recorder.error.message}</Alert>}
 
       {audioUrl && (
-        <audio controls src={audioUrl} className="w-full" />
+        <audio ref={audioRef} controls src={audioUrl} className="w-full" />
       )}
 
       {/* Model + run */}
diff --git a/src/tools/media/stt.engine.ts b/src/tools/media/stt.engine.ts
index 2fe0461..5101445 100644
--- a/src/tools/media/stt.engine.ts
+++ b/src/tools/media/stt.engine.ts
@@ -28,18 +28,31 @@ async function webgpuAvailable(): Promise<boolean> {
   }
 }
 
+// Cache the built pipeline so repeated transcriptions with the same model reuse
+// it — otherwise every run re-initializes the ONNX session (re-reading weights,
+// re-running the load progress, blocking the main thread).
+let cached: { model: SttModelId; transcriber: Transcriber } | null = null;
+
+/** Drop the cached transcriber (e.g. for tests). */
+export function resetTranscriber(): void {
+  cached = null;
+}
+
 /**
  * Create the on-device speech-to-text engine. This is the ONLY file that touches
  * transformers.js — keep it thin so the SDK stays swappable. WebGPU is used when
  * available, otherwise a quantized WASM model keeps the download smaller.
  *
  * Audio never leaves the browser; only the model weights are fetched (from the HF
- * CDN) the first time a model is used, then cached by the browser.
+ * CDN) the first time a model is used, then cached by the browser. The built
+ * pipeline is cached in-memory so subsequent runs skip re-initialization.
  */
 export async function createTranscriber(
   model: SttModelId,
   onProgress?: (ratio: number) => void,
 ): Promise<Transcriber> {
+  if (cached && cached.model === model) return cached.transcriber;
+
   const { pipeline } = await import('@huggingface/transformers');
   const backend: SttBackend = (await webgpuAvailable()) ? 'webgpu' : 'wasm';
 
@@ -57,7 +70,7 @@ export async function createTranscriber(
     },
   });
 
-  return {
+  const transcriber: Transcriber = {
     backend,
     async transcribe(audio: Float32Array): Promise<TranscriptSegment[]> {
       const out = (await pipe(audio, {
@@ -77,4 +90,7 @@ export async function createTranscriber(
       return [{ start: 0, end: 0, text: out.text ?? '' }];
     },
   };
+
+  cached = { model, transcriber };
+  return transcriber;
 }