791 lines
28 KiB
TypeScript
791 lines
28 KiB
TypeScript
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";
|
|
import { ModelPicker } from "./components/ModelPicker";
|
|
import { StorageManager } from "./components/StorageManager";
|
|
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";
|
|
import { registerServiceWorker } from "./pwa/register";
|
|
import {
|
|
AUTO_LANGUAGE,
|
|
DEFAULT_DEVICE_PREFERENCE,
|
|
DEFAULT_MODEL_ID,
|
|
DEFAULT_TASK,
|
|
MODELS,
|
|
getModel,
|
|
} from "./lib/models";
|
|
import {
|
|
applyLoadProgress,
|
|
initialLoadProgress,
|
|
isWorkerToUiMessage,
|
|
type DevicePreference,
|
|
type InferenceDevice,
|
|
type TranscriptChunk,
|
|
type UiToWorkerMessage,
|
|
type WhisperTask,
|
|
} from "./worker/protocol";
|
|
|
|
interface TranscriptResult {
|
|
text: string;
|
|
chunks: TranscriptChunk[];
|
|
}
|
|
|
|
const MODEL_IDS = MODELS.map((model) => model.id);
|
|
|
|
export function App() {
|
|
const workerRef = useRef<Worker | null>(null);
|
|
|
|
// Live-mode session (M7, D-016). The mic and transcriber live outside React
|
|
// state; only display text goes through setState. Segment passes are
|
|
// correlated with worker responses via requestId.
|
|
const liveRef = useRef<{ mic: MicCapture; transcriber: LiveTranscriber | null } | null>(
|
|
null,
|
|
);
|
|
const liveWsRef = useRef<WebSocket | null>(null);
|
|
const pendingLive = useRef(
|
|
new Map<
|
|
string,
|
|
{
|
|
resolve: (result: LiveTranscribeResult) => void;
|
|
reject: (error: Error) => void;
|
|
}
|
|
>(),
|
|
);
|
|
const nextLiveRequest = useRef(0);
|
|
|
|
// File-flow run counter (D-018). Cancel bumps it, so a decode that was in
|
|
// flight when the user cancelled finds itself stale and never posts its
|
|
// 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);
|
|
|
|
const [liveStatus, setLiveStatus] = useState<LiveStatus>("idle");
|
|
const [liveCommitted, setLiveCommitted] = useState("");
|
|
const [liveTentative, setLiveTentative] = useState("");
|
|
|
|
const [modelId, setModelId] = useState(DEFAULT_MODEL_ID);
|
|
const [devicePreference, setDevicePreference] = useState<DevicePreference>(
|
|
DEFAULT_DEVICE_PREFERENCE,
|
|
);
|
|
const [activeDevice, setActiveDevice] = useState<InferenceDevice | null>(null);
|
|
const [language, setLanguage] = useState(AUTO_LANGUAGE);
|
|
const [task, setTask] = useState<WhisperTask>(DEFAULT_TASK);
|
|
const [downloaded, setDownloaded] = useState<ReadonlySet<string>>(new Set());
|
|
|
|
// PWA state (M3, D-007): is a service worker controlling this page (app
|
|
// shell available offline), and is an updated version waiting?
|
|
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, () => {});
|
|
}
|
|
|
|
// Terminate the worker when the app unmounts (also keeps HMR tidy).
|
|
useEffect(() => {
|
|
refreshDownloaded();
|
|
// Registration is idempotent, so the StrictMode double-invoke is fine.
|
|
registerServiceWorker({
|
|
onControlled: () => setSwControlled(true),
|
|
onUpdateReady: (apply) => setApplyUpdate(() => apply),
|
|
});
|
|
return () => {
|
|
void liveRef.current?.mic.stop().catch(() => {});
|
|
liveRef.current = null;
|
|
liveWsRef.current?.close();
|
|
liveWsRef.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);
|
|
if (pending) pendingLive.current.delete(requestId);
|
|
return pending;
|
|
}
|
|
|
|
function ensureWorker(): Worker {
|
|
if (workerRef.current) return workerRef.current;
|
|
// Inference always runs in a dedicated Web Worker (D-003), never on the
|
|
// main thread (Architecture.md §5). The worker script is bundled by the
|
|
// server at startup and served at a stable URL (see src/index.ts) because
|
|
// Bun's bundler does not follow `new Worker(new URL(...))` graphs yet.
|
|
const worker = new Worker("inference.worker.js", { type: "module" });
|
|
worker.addEventListener("message", (event: MessageEvent<unknown>) => {
|
|
const message = event.data;
|
|
if (!isWorkerToUiMessage(message)) return;
|
|
switch (message.type) {
|
|
case "load-progress":
|
|
setLoadProgress((state) => applyLoadProgress(state, message));
|
|
if (message.status === "ready") {
|
|
// Surface the backend the worker actually selected (D-004) and
|
|
// refresh the downloaded badges now that weights are cached.
|
|
setActiveDevice(message.device);
|
|
refreshDownloaded();
|
|
}
|
|
break;
|
|
case "partial":
|
|
// Live segment passes (requestId set) resolve wholesale via
|
|
// "result"; their token stream is not rendered incrementally.
|
|
if (message.requestId === undefined) {
|
|
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;
|
|
}
|
|
case "error": {
|
|
const pending = takeLiveRequest(message.requestId);
|
|
if (pending) {
|
|
pending.reject(new Error(message.message));
|
|
} 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;
|
|
}
|
|
}
|
|
});
|
|
worker.addEventListener("error", (event) => {
|
|
const failure = new Error(
|
|
event.message || "The inference worker crashed unexpectedly.",
|
|
);
|
|
// Unblock any live passes so a live session can drain and stop.
|
|
for (const pending of pendingLive.current.values()) pending.reject(failure);
|
|
pendingLive.current.clear();
|
|
setError(failure.message);
|
|
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;
|
|
}
|
|
|
|
function postToWorker(worker: Worker, message: UiToWorkerMessage, transfer?: Transferable[]) {
|
|
worker.postMessage(message, transfer ?? []);
|
|
}
|
|
|
|
/**
|
|
* Post a load request and reset per-load UI state so the progress panel
|
|
* restarts cleanly on model/device switches. Idempotent in the worker for
|
|
* an unchanged model+device; a change disposes the old pipeline first.
|
|
*/
|
|
function startLoad(nextModelId: string, preference: DevicePreference): Worker {
|
|
const worker = ensureWorker();
|
|
setLoadProgress(initialLoadProgress);
|
|
setLoadStarted(true);
|
|
setError(null);
|
|
postToWorker(worker, { type: "load", modelId: nextModelId, device: preference });
|
|
return worker;
|
|
}
|
|
|
|
function handleModelSelect(nextModelId: string) {
|
|
if (busy || liveStatus !== "idle" || nextModelId === modelId) return;
|
|
setModelId(nextModelId);
|
|
setActiveDevice(null);
|
|
setPartialText("");
|
|
setTranscribeProgress(null);
|
|
setResult(null);
|
|
// Selection never downloads (D-020): the load starts when a transcription
|
|
// needs it (file drop / live start on the browser engine) or when the
|
|
// user explicitly clicks Download. Reset the load state so the next load
|
|
// reports fresh progress for this model.
|
|
setLoadStarted(false);
|
|
setLoadProgress(initialLoadProgress);
|
|
}
|
|
|
|
function handleDevicePreference(preference: DevicePreference) {
|
|
if (busy || liveStatus !== "idle" || preference === devicePreference) return;
|
|
setDevicePreference(preference);
|
|
setActiveDevice(null);
|
|
// No eager reload (D-020) — the next load picks up the new preference.
|
|
setLoadStarted(false);
|
|
setLoadProgress(initialLoadProgress);
|
|
}
|
|
|
|
/** Explicit model download (D-020) — pre-caches weights for offline use. */
|
|
function handleDownloadModel() {
|
|
if (busy || liveStatus !== "idle" || loadStarted) return;
|
|
startLoad(modelId, devicePreference);
|
|
}
|
|
|
|
/**
|
|
* 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). 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
|
|
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.
|
|
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);
|
|
}
|
|
|
|
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);
|
|
|
|
let engine: Engine;
|
|
if (useServer) {
|
|
engine = serverEngineRef.current ??= new ServerEngine();
|
|
} else {
|
|
// 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 {
|
|
audio = await decodeAudioFile(file);
|
|
} catch (decodeError) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Live microphone transcription (M7, D-016)
|
|
// -------------------------------------------------------------------------
|
|
|
|
/** One inference pass over a live segment, correlated via requestId. */
|
|
function transcribeLiveSegment(
|
|
worker: Worker,
|
|
audio: Float32Array,
|
|
options: { language?: string; task?: WhisperTask },
|
|
): Promise<LiveTranscribeResult> {
|
|
const requestId = `live-${++nextLiveRequest.current}`;
|
|
return new Promise((resolve, reject) => {
|
|
pendingLive.current.set(requestId, { resolve, reject });
|
|
// The controller hands over ownership, so the buffer can transfer.
|
|
postToWorker(worker, { type: "transcribe", audio, requestId, ...options }, [
|
|
audio.buffer as ArrayBuffer,
|
|
]);
|
|
});
|
|
}
|
|
|
|
async function startLive() {
|
|
if (busy || liveStatus !== "idle") return;
|
|
setError(null);
|
|
setResult(null);
|
|
setPartialText("");
|
|
setFileName(null);
|
|
setLiveCommitted("");
|
|
setLiveTentative("");
|
|
setLiveStatus("starting");
|
|
|
|
const useServer =
|
|
engineChoice === "server" &&
|
|
auth.user !== null &&
|
|
serverStatus?.available === true;
|
|
|
|
const options = (getModel(modelId)?.multilingual ?? false) ? { language, task } : {};
|
|
|
|
if (useServer) {
|
|
const wsUrl = new URL(`/api/transcribe/live?model=${modelId}`, window.location.href);
|
|
wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
|
|
if (options.language) wsUrl.searchParams.set("language", options.language);
|
|
if (options.task) wsUrl.searchParams.set("task", options.task);
|
|
|
|
const ws = new WebSocket(wsUrl);
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === "update") {
|
|
setLiveCommitted(data.update.committedText);
|
|
setLiveTentative(data.update.tentativeText);
|
|
if (data.update.error) setError(data.update.error);
|
|
} else if (data.type === "result") {
|
|
setResult(data.result);
|
|
setLiveCommitted("");
|
|
setLiveTentative("");
|
|
setLiveStatus("idle");
|
|
liveWsRef.current = null;
|
|
liveRef.current = null;
|
|
} else if (data.type === "error") {
|
|
setError(data.error);
|
|
setLiveStatus("idle");
|
|
liveWsRef.current = null;
|
|
liveRef.current = null;
|
|
}
|
|
};
|
|
|
|
ws.onerror = () => {
|
|
setError("WebSocket connection error.");
|
|
setLiveStatus("idle");
|
|
liveWsRef.current = null;
|
|
liveRef.current = null;
|
|
};
|
|
|
|
ws.onopen = async () => {
|
|
try {
|
|
const mic = await startMicCapture((chunk) => {
|
|
if (ws.readyState === WebSocket.OPEN) {
|
|
ws.send(chunk.buffer);
|
|
}
|
|
});
|
|
liveWsRef.current = ws;
|
|
liveRef.current = { mic, transcriber: null };
|
|
setLiveStatus("listening");
|
|
} catch (micError) {
|
|
ws.close();
|
|
setLiveStatus("idle");
|
|
setError(
|
|
micError instanceof DOMException && micError.name === "NotAllowedError"
|
|
? "Microphone access was denied. Allow it in your browser's site settings and try again."
|
|
: micError instanceof Error
|
|
? micError.message
|
|
: String(micError),
|
|
);
|
|
}
|
|
};
|
|
return;
|
|
}
|
|
|
|
// Idempotent model load, like the file flow — a pending download runs
|
|
// while the mic opens; segment passes queue in the worker until ready.
|
|
const worker = ensureWorker();
|
|
if (!loadStarted) {
|
|
startLoad(modelId, devicePreference);
|
|
} else {
|
|
postToWorker(worker, { type: "load", modelId, device: devicePreference });
|
|
}
|
|
|
|
const transcriber = new LiveTranscriber({
|
|
...LIVE_TUNING,
|
|
transcribe: (audio) => transcribeLiveSegment(worker, audio, options),
|
|
onUpdate: (update) => {
|
|
setLiveCommitted(update.committedText);
|
|
setLiveTentative(update.tentativeText);
|
|
if (update.error) setError(update.error);
|
|
},
|
|
});
|
|
|
|
try {
|
|
const mic = await startMicCapture((chunk) => transcriber.push(chunk));
|
|
liveRef.current = { mic, transcriber };
|
|
setLiveStatus("listening");
|
|
} catch (micError) {
|
|
setLiveStatus("idle");
|
|
setError(
|
|
micError instanceof DOMException && micError.name === "NotAllowedError"
|
|
? "Microphone access was denied. Allow it in your browser's site settings and try again."
|
|
: micError instanceof Error
|
|
? micError.message
|
|
: String(micError),
|
|
);
|
|
}
|
|
}
|
|
|
|
async function stopLive() {
|
|
const session = liveRef.current;
|
|
if (!session || liveStatus !== "listening") return;
|
|
setLiveStatus("stopping");
|
|
// Stop feeding audio first, then drain the remaining segment passes.
|
|
await session.mic.stop();
|
|
|
|
if (liveWsRef.current) {
|
|
liveWsRef.current.send(JSON.stringify({ type: "stop" }));
|
|
} else {
|
|
try {
|
|
const final = await session.transcriber!.stop();
|
|
setResult(final);
|
|
setLiveCommitted("");
|
|
setLiveTentative("");
|
|
} finally {
|
|
liveRef.current = null;
|
|
setLiveStatus("idle");
|
|
}
|
|
}
|
|
}
|
|
|
|
const model = getModel(modelId);
|
|
const modelReady = loadProgress.ready;
|
|
const showModelProgress = loadStarted && !modelReady && !error;
|
|
// 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;
|
|
|
|
const availableModels = serverSelected
|
|
? MODELS.filter((m) => m.fasterWhisperModel === "large-v3-turbo" || m.fasterWhisperModel === "medium.en")
|
|
: MODELS;
|
|
|
|
useEffect(() => {
|
|
if (serverSelected) {
|
|
const allowed = ["onnx-community/whisper-large-v3-turbo", "onnx-community/whisper-medium.en_timestamped"];
|
|
if (!allowed.includes(modelId) && !busy && liveStatus === "idle") {
|
|
setModelId("onnx-community/whisper-large-v3-turbo");
|
|
setActiveDevice(null);
|
|
setPartialText("");
|
|
setTranscribeProgress(null);
|
|
setResult(null);
|
|
setLoadStarted(false);
|
|
setLoadProgress(initialLoadProgress);
|
|
}
|
|
}
|
|
}, [serverSelected, modelId, busy, liveStatus]);
|
|
|
|
return (
|
|
<main className="app">
|
|
<header className="app-header">
|
|
<div>
|
|
<h1>AU Whisper Web</h1>
|
|
<p className="tagline">
|
|
Speech-to-text that runs entirely in your browser. Your audio never
|
|
leaves this device.
|
|
</p>
|
|
</div>
|
|
{/* Session UI (M4). Anonymous-first: logged out, this is only an
|
|
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 auth={auth} />
|
|
</header>
|
|
|
|
<ModelPicker
|
|
models={availableModels}
|
|
selectedId={modelId}
|
|
onSelect={handleModelSelect}
|
|
devicePreference={devicePreference}
|
|
onDevicePreferenceChange={handleDevicePreference}
|
|
activeDevice={activeDevice}
|
|
downloaded={downloaded}
|
|
offlineReady={swControlled}
|
|
disabled={busy || liveActive}
|
|
onDownloadSelected={handleDownloadModel}
|
|
downloading={loadStarted && !modelReady}
|
|
serverEngine={serverSelected}
|
|
/>
|
|
|
|
{model?.multilingual && (
|
|
<TranscriptionOptions
|
|
language={language}
|
|
onLanguageChange={setLanguage}
|
|
task={task}
|
|
onTaskChange={setTask}
|
|
disabled={busy || liveActive}
|
|
/>
|
|
)}
|
|
|
|
{/* 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
|
|
status={liveStatus}
|
|
onStart={() => void startLive()}
|
|
onStop={() => void stopLive()}
|
|
disabled={busy}
|
|
/>
|
|
|
|
{fileName && (
|
|
<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>
|
|
)}
|
|
|
|
{error && (
|
|
<p className="error" role="alert">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
{showModelProgress && (
|
|
<ModelLoadProgress modelId={modelId} progress={loadProgress} />
|
|
)}
|
|
|
|
<TranscriptView
|
|
partialText={liveActive ? liveCommitted : partialText}
|
|
tentativeText={liveActive ? liveTentative : ""}
|
|
result={result}
|
|
transcribing={liveActive || transcribing}
|
|
progress={liveActive ? null : transcribeProgress}
|
|
exportName={fileName}
|
|
placeholder={
|
|
liveActive ? "Listening for the first words…" : "Processing audio…"
|
|
}
|
|
activeLabel={
|
|
liveStatus === "stopping"
|
|
? "Finishing up…"
|
|
: liveActive
|
|
? "Listening…"
|
|
: undefined
|
|
}
|
|
/>
|
|
|
|
{applyUpdate && (
|
|
<div className="update-toast" role="status">
|
|
<span>A new version of Whisper Web is available.</span>
|
|
<button type="button" onClick={applyUpdate}>
|
|
Reload
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="update-toast-dismiss"
|
|
onClick={() => setApplyUpdate(null)}
|
|
>
|
|
Later
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Storage management (M6): cached models with per-model delete. */}
|
|
<StorageManager
|
|
downloaded={downloaded}
|
|
disabled={busy || liveActive}
|
|
onChanged={refreshDownloaded}
|
|
/>
|
|
|
|
<footer className="app-footer">
|
|
<p>
|
|
Model: <code>{modelId}</code> · Engine:{" "}
|
|
{serverSelected
|
|
? "server (faster-whisper) — audio streams 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>
|
|
);
|
|
}
|
|
|
|
export default App;
|