Add cancel + progress UI, EngineToggle, and Docker deployment

src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import "./index.css";
 
 import { AuthForms } from "./components/AuthForms";
+import { EngineToggle } from "./components/EngineToggle";
 import { FileDropzone } from "./components/FileDropzone";
 import { LiveControls, type LiveStatus } from "./components/LiveControls";
 import { ModelLoadProgress } from "./components/ModelLoadProgress";
@@ -9,6 +10,17 @@ import { ModelPicker } from "./components/ModelPicker";
 import { TranscriptView } from "./components/TranscriptView";
 import { TranscriptionOptions } from "./components/TranscriptionOptions";
 import { decodeAudioFile } from "./lib/audio";
+import {
+  BrowserEngine,
+  ServerEngine,
+  fetchServerEngineStatus,
+  loadEngineChoice,
+  saveEngineChoice,
+  type Engine,
+  type EngineKind,
+  type ServerEngineStatus,
+} from "./lib/engine";
+import { useAuth } from "./lib/useAuth";
 import { LIVE_TUNING, LiveTranscriber, type LiveTranscribeResult } from "./lib/live";
 import { startMicCapture, type MicCapture } from "./lib/mic";
 import { getDownloadedModels } from "./lib/modelCache";
@@ -64,11 +76,25 @@ export function App() {
   // audio to the (fresh) worker. Decoding itself cannot be aborted.
   const fileRun = useRef(0);
 
+  // Engine plumbing (M5, D-010). The BrowserEngine is bound to the worker's
+  // lifetime (recreated together on cancel); the ServerEngine is stateless
+  // and lives for the app. A server run's fetch is cancelled via abortRef.
+  const browserEngineRef = useRef<BrowserEngine | null>(null);
+  const serverEngineRef = useRef<ServerEngine | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
   const [busy, setBusy] = useState(false);
+  // Which engine the current file run uses; null while idle. Server runs
+  // don't need the browser model, so parts of the UI key off this.
+  const [runEngine, setRunEngine] = useState<EngineKind | null>(null);
   const [decoding, setDecoding] = useState(false);
   const [loadStarted, setLoadStarted] = useState(false);
   const [loadProgress, setLoadProgress] = useState(initialLoadProgress);
   const [partialText, setPartialText] = useState("");
+  const [transcribeProgress, setTranscribeProgress] = useState<{
+    processedSeconds: number;
+    totalSeconds: number;
+  } | null>(null);
   const [result, setResult] = useState<TranscriptResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [fileName, setFileName] = useState<string | null>(null);
@@ -91,6 +117,15 @@ export function App() {
   const [swControlled, setSwControlled] = useState(false);
   const [applyUpdate, setApplyUpdate] = useState<(() => void) | null>(null);
 
+  // Session + engine choice (M4/M5). One useAuth for the whole app — the
+  // header forms and the EngineToggle must agree on the session. The choice
+  // persists across reloads; it only takes effect while signed in AND the
+  // deployment reports the server engine available (anonymous-first: logged
+  // out, everything runs on-device exactly as before).
+  const auth = useAuth();
+  const [engineChoice, setEngineChoice] = useState<EngineKind>(() => loadEngineChoice());
+  const [serverStatus, setServerStatus] = useState<ServerEngineStatus | null>(null);
+
   function refreshDownloaded() {
     // Downloaded badges (D-005): query Cache Storage for cached weights.
     getDownloadedModels(MODEL_IDS).then(setDownloaded, () => {});
@@ -109,9 +144,28 @@ export function App() {
       liveRef.current = null;
       workerRef.current?.terminate();
       workerRef.current = null;
+      browserEngineRef.current = null;
+      abortRef.current?.abort();
+      abortRef.current = null;
     };
   }, []);
 
+  // Probe server-engine availability once a session exists (the endpoint is
+  // auth-guarded, so probing while anonymous is pointless). Never rejects.
+  useEffect(() => {
+    if (!auth.user) {
+      setServerStatus(null);
+      return;
+    }
+    let cancelled = false;
+    fetchServerEngineStatus().then((status) => {
+      if (!cancelled) setServerStatus(status);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth.user]);
+
   function takeLiveRequest(requestId: string | undefined) {
     if (requestId === undefined) return undefined;
     const pending = pendingLive.current.get(requestId);
@@ -146,13 +200,24 @@ export function App() {
             setPartialText((text) => text + message.text);
           }
           break;
+        case "transcribe-progress":
+          // File flow only — live passes never carry progress (D-016).
+          if (message.requestId === undefined) {
+            setTranscribeProgress({
+              processedSeconds: message.processedSeconds,
+              totalSeconds: message.totalSeconds,
+            });
+          }
+          break;
         case "result": {
           const pending = takeLiveRequest(message.requestId);
           if (pending) {
             pending.resolve({ text: message.text, chunks: message.chunks });
           } else if (message.requestId === undefined) {
             setResult({ text: message.text, chunks: message.chunks });
+            setTranscribeProgress(null);
             setBusy(false);
+            setRunEngine(null);
           }
           break;
         }
@@ -160,9 +225,13 @@ export function App() {
           const pending = takeLiveRequest(message.requestId);
           if (pending) {
             pending.reject(new Error(message.message));
-          } else {
+          } else if (message.requestId === undefined) {
+            // Load-stage failures and legacy id-less passes. Engine-routed
+            // file passes carry an id and surface through the engine promise.
             setError(message.message);
+            setTranscribeProgress(null);
             setBusy(false);
+            setRunEngine(null);
           }
           break;
         }
@@ -179,6 +248,9 @@ export function App() {
       setBusy(false);
     });
     workerRef.current = worker;
+    // The BrowserEngine shares this worker and only sees its own request ids
+    // (engine-*), so it coexists with the live loop's live-* ids above.
+    browserEngineRef.current = new BrowserEngine(worker);
     return worker;
   }
 
@@ -205,6 +277,7 @@ export function App() {
     setModelId(nextModelId);
     setActiveDevice(null);
     setPartialText("");
+    setTranscribeProgress(null);
     setResult(null);
     startLoad(nextModelId, devicePreference);
   }
@@ -219,78 +292,146 @@ export function App() {
   }
 
   /**
-   * Cancel the in-flight file transcription (D-018). Transformers.js has no
-   * abort API for a running `asr()` call — and on the WASM backend the pass
+   * Cancel the in-flight file transcription (D-018). Browser runs: no abort
+   * API exists for a running `asr()` call — and on the WASM backend the pass
    * blocks the worker's event loop, so even a "cancel" message would sit
    * unread until the pass finished. Terminating the worker is the only
    * reliable preemption; it also aborts an in-flight model download. The next
    * run spawns a fresh worker and reloads the pipeline — cheap, because the
-   * weights stay in the browser Cache API (D-005).
+   * weights stay in the browser Cache API (D-005). Server runs: abort the
+   * `/api/transcribe` fetch (the server cancels the sidecar pass, D-011) and
+   * leave the worker — and its loaded pipeline — untouched.
    */
   function cancelTranscription() {
     if (!busy) return;
     fileRun.current++; // any decode still running is now stale
-    workerRef.current?.terminate();
-    workerRef.current = null;
+    const cancelled = new Error("Transcription cancelled.");
+    if (runEngine === "server") {
+      abortRef.current?.abort();
+      abortRef.current = null;
+    } else {
+      browserEngineRef.current?.failAll(cancelled);
+      browserEngineRef.current = null;
+      workerRef.current?.terminate();
+      workerRef.current = null;
+      // The worker (and any pipeline / partial download) is gone — reset the
+      // load state so the next transcription reloads from a clean slate.
+      setLoadStarted(false);
+      setLoadProgress(initialLoadProgress);
+      setActiveDevice(null);
+    }
     // The file flow never has live passes pending, but if anything is in the
     // map (defensive), unblock it so nothing awaits a dead worker forever.
-    const cancelled = new Error("Transcription cancelled.");
     for (const pending of pendingLive.current.values()) pending.reject(cancelled);
     pendingLive.current.clear();
     setBusy(false);
+    setRunEngine(null);
     setPartialText("");
+    setTranscribeProgress(null);
     setResult(null);
     setFileName(null);
     setError(null);
-    // The worker (and any pipeline / partial download) is gone — reset the
-    // load state so the next transcription reloads from a clean slate.
-    setLoadStarted(false);
-    setLoadProgress(initialLoadProgress);
-    setActiveDevice(null);
   }
 
   async function handleFile(file: File) {
     if (busy || liveStatus !== "idle") return;
     const run = ++fileRun.current;
+    // The toggle's choice only takes effect with a session and an available
+    // server engine (D-010); everything else runs on-device as always.
+    const useServer =
+      engineChoice === "server" &&
+      auth.user !== null &&
+      serverStatus?.available === true;
     setBusy(true);
+    setRunEngine(useServer ? "server" : "browser");
     setError(null);
     setPartialText("");
+    setTranscribeProgress(null);
     setResult(null);
     setFileName(file.name);
 
-    // Kick off the (idempotent) model load immediately so the download runs
-    // while we decode the audio locally.
-    const worker = ensureWorker();
-    if (!loadStarted) {
-      startLoad(modelId, devicePreference);
+    let engine: Engine;
+    if (useServer) {
+      engine = serverEngineRef.current ??= new ServerEngine();
     } else {
-      postToWorker(worker, { type: "load", modelId, device: devicePreference });
+      // Kick off the (idempotent) model load immediately so the download runs
+      // while we decode the audio locally. Server runs skip this — they don't
+      // need the browser pipeline.
+      ensureWorker();
+      if (!loadStarted) {
+        startLoad(modelId, devicePreference);
+      } else {
+        postToWorker(workerRef.current!, {
+          type: "load",
+          modelId,
+          device: devicePreference,
+        });
+      }
+      engine = browserEngineRef.current!;
     }
 
     const multilingual = getModel(modelId)?.multilingual ?? false;
 
+    // Decoded entirely on-device via Web Audio (D-012); for browser runs the
+    // audio never touches the network (Architecture.md §5) — server runs
+    // upload the decoded PCM, which is the point of the toggle.
     setDecoding(true);
+    let audio: Float32Array;
     try {
-      // Decoded entirely on-device via Web Audio (D-012); the audio never
-      // touches the network (Architecture.md §5).
-      const audio = await decodeAudioFile(file);
-      if (fileRun.current !== run) return; // cancelled while decoding (D-018)
-      // Transfer the buffer to the worker — zero copy. Language/task only
-      // apply to multilingual models; `.en` variants take neither.
-      postToWorker(
-        worker,
-        multilingual
-          ? { type: "transcribe", audio, language, task }
-          : { type: "transcribe", audio },
-        [audio.buffer as ArrayBuffer],
-      );
+      audio = await decodeAudioFile(file);
     } catch (decodeError) {
-      if (fileRun.current !== run) return; // this run was already cancelled
-      setError(decodeError instanceof Error ? decodeError.message : String(decodeError));
-      setBusy(false);
+      if (fileRun.current === run) {
+        setError(
+          decodeError instanceof Error ? decodeError.message : String(decodeError),
+        );
+        setBusy(false);
+        setRunEngine(null);
+      }
+      return;
     } finally {
       setDecoding(false);
     }
+    if (fileRun.current !== run) return; // cancelled while decoding (D-018)
+
+    // Server runs cancel by aborting the fetch (D-018 amendment); browser
+    // runs cancel by terminating the worker, which rejects the promise via
+    // BrowserEngine.failAll.
+    const controller = useServer ? new AbortController() : null;
+    abortRef.current = controller;
+    try {
+      const outcome = await engine.transcribe(audio, {
+        // Language/task only apply to multilingual models; `.en` variants
+        // take neither. The browser engine ignores modelId (worker holds it).
+        modelId,
+        ...(multilingual && { language, task }),
+        onPartial: (fragment) => {
+          if (fileRun.current === run) setPartialText((text) => text + fragment);
+        },
+        ...(!useServer && {
+          onProgress: (progress: { processedSeconds: number; totalSeconds: number }) => {
+            if (fileRun.current === run) setTranscribeProgress(progress);
+          },
+        }),
+        ...(controller && { signal: controller.signal }),
+      });
+      if (fileRun.current !== run) return; // cancelled mid-pass
+      setResult(outcome);
+      setTranscribeProgress(null);
+      setBusy(false);
+      setRunEngine(null);
+    } catch (transcribeError) {
+      if (fileRun.current !== run) return; // cancellation rejections are expected
+      setError(
+        transcribeError instanceof Error
+          ? transcribeError.message
+          : String(transcribeError),
+      );
+      setTranscribeProgress(null);
+      setBusy(false);
+      setRunEngine(null);
+    } finally {
+      if (abortRef.current === controller) abortRef.current = null;
+    }
   }
 
   // -------------------------------------------------------------------------
@@ -381,8 +522,13 @@ export function App() {
   const model = getModel(modelId);
   const modelReady = loadProgress.ready;
   const showModelProgress = loadStarted && !modelReady && !error;
-  const transcribing = busy && !decoding && modelReady;
+  // Server runs never load the browser model, so they are "transcribing" the
+  // moment decoding ends.
+  const transcribing = busy && !decoding && (runEngine === "server" || modelReady);
   const liveActive = liveStatus !== "idle";
+  // What the next file run will use (mirrors handleFile's decision).
+  const serverSelected =
+    engineChoice === "server" && auth.user !== null && serverStatus?.available === true;
 
   return (
     <main className="app">
@@ -398,7 +544,7 @@ export function App() {
             unobtrusive "Sign in" button — everything else is unchanged.
             Renders nothing until the /me probe confirms the server has auth
             enabled (runtime flag, D-015). */}
-        <AuthForms />
+        <AuthForms auth={auth} />
       </header>
 
       <ModelPicker
@@ -423,6 +569,20 @@ export function App() {
         />
       )}
 
+      {/* Engine toggle (M5, D-010): signed-in users choose where uploaded
+          files are transcribed. Live mode always stays on-device (D-016). */}
+      {auth.user && (
+        <EngineToggle
+          choice={engineChoice}
+          onChoice={(choice) => {
+            setEngineChoice(choice);
+            saveEngineChoice(choice);
+          }}
+          status={serverStatus}
+          disabled={busy || liveActive}
+        />
+      )}
+
       <FileDropzone onFile={handleFile} disabled={busy || liveActive} />
 
       <LiveControls
@@ -436,6 +596,17 @@ export function App() {
         <p className="file-name">
           File: <strong>{fileName}</strong>
           {decoding && " — decoding audio…"}
+          {busy && (
+            // Cancel the whole run (D-018): decode, pending model download,
+            // or the transcription pass itself.
+            <button
+              type="button"
+              className="cancel-button"
+              onClick={cancelTranscription}
+            >
+              Cancel
+            </button>
+          )}
         </p>
       )}
 
@@ -454,6 +625,10 @@ export function App() {
         tentativeText={liveActive ? liveTentative : ""}
         result={result}
         transcribing={liveActive || transcribing}
+        progress={liveActive ? null : transcribeProgress}
+        placeholder={
+          liveActive ? "Listening for the first words…" : "Processing audio…"
+        }
         activeLabel={
           liveStatus === "stopping"
             ? "Finishing up…"
@@ -482,13 +657,15 @@ export function App() {
       <footer className="app-footer">
         <p>
           Model: <code>{modelId}</code> · Engine:{" "}
-          {activeDevice === "webgpu"
-            ? "WebGPU (on-device)"
-            : activeDevice === "webnn"
-              ? "WebNN (on-device)"
-              : activeDevice === "wasm"
-                ? "WASM (on-device)"
-                : "on-device — backend selected on first load"}
+          {serverSelected
+            ? "server (faster-whisper) — files upload to this deployment"
+            : activeDevice === "webgpu"
+              ? "WebGPU (on-device)"
+              : activeDevice === "webnn"
+                ? "WebNN (on-device)"
+                : activeDevice === "wasm"
+                  ? "WASM (on-device)"
+                  : "on-device — backend selected on first load"}
         </p>
       </footer>
     </main>