File size: 3,052 Bytes
4a5024e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import { useRef, useState, useCallback, type ReactNode } from "react";
import {
pipeline,
TextStreamer,
type AutomaticSpeechRecognitionPipeline,
type AutomaticSpeechRecognitionOutput,
} from "@huggingface/transformers";
import {
TranscriberContext,
type TranscriberState,
} from "./transcriberContext.ts";
const MODEL_ID = "onnx-community/cohere-transcribe-03-2026-ONNX";
export function TranscriberProvider({ children }: { children: ReactNode }) {
const [status, setStatus] = useState<TranscriberState["status"]>("idle");
const [error, setError] = useState<string | null>(null);
const [progress, setProgress] = useState(0);
const [statusText, setStatusText] = useState("Initializing...");
const pipelineRef = useRef<AutomaticSpeechRecognitionPipeline | null>(null);
const loadingRef = useRef<Promise<void> | null>(null);
const load = useCallback(async () => {
if (pipelineRef.current) return;
if (loadingRef.current) return loadingRef.current;
const loadPromise = (async () => {
setStatus("loading");
setProgress(0);
setStatusText("Downloading model...");
try {
const transcriber = await pipeline(
"automatic-speech-recognition",
MODEL_ID,
{
dtype: "q4",
device: "webgpu",
progress_callback: (info: {
status: string;
progress?: number;
}) => {
if (info.status === "progress_total") {
const pct = Math.round(info.progress ?? 0);
setProgress(pct);
setStatusText(`Loading model... ${pct}%`);
}
},
},
);
pipelineRef.current = transcriber;
setProgress(100);
setStatusText("Ready");
setStatus("ready");
} catch (err) {
console.error("Failed to load transcription model:", err);
const message =
err instanceof Error ? err.message : "Failed to load model";
setStatus("error");
setError(message);
setStatusText(message);
}
})();
loadingRef.current = loadPromise;
return loadPromise;
}, []);
const transcribe = useCallback(
async (
audio: Float32Array,
language?: string,
onToken?: (token: string) => void,
) => {
if (!pipelineRef.current) {
throw new Error("Model not loaded");
}
const streamer = onToken
? new TextStreamer(pipelineRef.current.tokenizer, {
skip_prompt: true,
skip_special_tokens: true,
callback_function: onToken,
})
: undefined;
const result = (await pipelineRef.current(audio, {
max_new_tokens: 1024,
language,
streamer,
})) as AutomaticSpeechRecognitionOutput;
return result.text;
},
[],
);
return (
<TranscriberContext.Provider
value={{ status, error, progress, statusText, load, transcribe }}
>
{children}
</TranscriberContext.Provider>
);
}
|