webassembly009 transformers.js 网页端侧推理 whisper-web transcriber & ...

worker.js

• 模型的团体推理结构仍与webassembly009 transformers.js 网页端侧推理 NLLB翻译模型类似。
  

worker.js 模型工厂类

1. /* eslint-disable camelcase */
2. import { pipeline, env } from "@xenova/transformers"; // 导入必要的模块
4. // 禁用本地模型，确保仅使用在线资源
5. env.allowLocalModels = false;
7. // 定义模型工厂类
8. class PipelineFactory {
9.     static task = null; // 静态变量：任务类型
10.     static model = null; // 静态变量：模型名称
11.     static quantized = null; // 静态变量：是否量化模型
12.     static instance = null; // 静态变量：模型实例
14.     constructor(tokenizer, model, quantized) {
15.         this.tokenizer = tokenizer;
16.         this.model = model;
17.         this.quantized = quantized;
18.     }
20.     // 获取单例模式的模型实例
21.     static async getInstance(progress_callback = null) {
22.         if (this.instance === null) {
23.             // pipeline函数：默认情况下，模型将从 Hugging Face Hub 下载并存储在 浏览器缓存 中，有关更多信息，请参见https://hugging-face.cn/docs/transformers.js/custom_usage。
24.             this.instance = pipeline(this.task, this.model, {
25.                 quantized: this.quantized,
26.                 progress_callback,
28.                 // 对于中型模型，为了防止内存溢出，加载`no_attentions`版本
29.                 revision: this.model.includes("/whisper-medium") ? "no_attentions" : "main"
30.             });
31.         }
32.         return this.instance;
33.     }
34. }
36. // 自动语音识别管道工厂类，继承自PipelineFactory
37. class AutomaticSpeechRecognitionPipelineFactory extends PipelineFactory {
38.     static task = "automatic-speech-recognition"; // 任务类型为自动语音识别
39.     static model = null;
40.     static quantized = null;
41. }

复制代码

处置处罚来自主线程的消息

1. // 监听消息事件，处理来自主线程的消息
2. self.addEventListener("message", async (event) => {
3.     const message = event.data;
5.     // 根据接收到的消息数据执行转录操作
6.     let transcript = await transcribe(
7.         message.audio,
8.         message.model,
9.         message.multilingual,
10.         message.quantized,
11.         message.subtask,
12.         message.language,
13.     );
14.     if (transcript === null) return;
16.     // 将转录结果发送回主线程
17.     self.postMessage({
18.         status: "complete",
19.         task: "automatic-speech-recognition",
20.         data: transcript,
21.     });
22. });

复制代码

调用worker

1. // 转录函数，根据提供的音频和其他参数进行转录
2. const transcribe = async (
3.     audio,
4.     model,
5.     multilingual,
6.     quantized,
7.     subtask,
8.     language,
9. ) => {
10.     const isDistilWhisper = model.startsWith("distil-whisper/"); // 判断是否是特定模型
12.     let modelName = model;
13.     if (!isDistilWhisper && !multilingual) {
14.         modelName += ".en"; // 如果不是多语言模型，则附加.en后缀
15.     }
17.     const p = AutomaticSpeechRecognitionPipelineFactory;
18.     if (p.model !== modelName || p.quantized !== quantized) {
19.         // 若模型或量化设置改变，则重新初始化
20.         p.model = modelName;
21.         p.quantized = quantized;
23.         if (p.instance !== null) {
24.             (await p.getInstance()).dispose();
25.             p.instance = null;
26.         }
27.     }
29.     // 加载转录器模型
30.     let transcriber = await p.getInstance((data) => {
31.         self.postMessage(data); // 发送进度更新
32.     });
34.     const time_precision =
35.         transcriber.processor.feature_extractor.config.chunk_length /
36.         transcriber.model.config.max_source_positions;
38.     // 初始化待处理块列表
39.     let chunks_to_process = [
40.         {
41.             tokens: [],
42.             finalised: false,
43.         },
44.     ];
46.     function chunk_callback(chunk) {
47.         let last = chunks_to_process[chunks_to_process.length - 1];
49.         // 更新最后一个块的信息，并在必要时创建新的块
50.         Object.assign(last, chunk);
51.         last.finalised = true;
52.         if (!chunk.is_last) {
53.             chunks_to_process.push({
54.                 tokens: [],
55.                 finalised: false,
56.             });
57.         }
58.     }
60.     // 回调函数，用于合并文本块
61.     function callback_function(item) {
62.         let last = chunks_to_process[chunks_to_process.length - 1];
63.         last.tokens = [...item[0].output_token_ids]; // 更新最后块的token信息
65.         // 解码并合并文本块
66.         let data = transcriber.tokenizer._decode_asr(chunks_to_process, {
67.             time_precision: time_precision,
68.             return_timestamps: true,
69.             force_full_sequences: false,
70.         });
72.         // 发送更新状态给主线程
73.         self.postMessage({
74.             status: "update",
75.             task: "automatic-speech-recognition",
76.             data: data,
77.         });
78.     }
80.     // 执行实际的转录过程
81.     let output = await transcriber(audio, {
82.         top_k: 0, do_sample: false, // 使用贪婪搜索策略
83.         chunk_length_s: isDistilWhisper ? 20 : 30, stride_length_s: isDistilWhisper ? 3 : 5, // 设置滑动窗口长度
84.         language: language, task: subtask, // 设置语言和子任务
85.         return_timestamps: true, force_full_sequences: false, // 返回时间戳
86.         callback_function: callback_function, // 每个生成步骤后的回调
87.         chunk_callback: chunk_callback, // 处理完每个块后的回调
88.     }).catch((error) => {
89.         // 错误处理
90.         self.postMessage({
91.             status: "error",
92.             task: "automatic-speech-recognition",
93.             data: error,
94.         });
95.         return null;
96.     });
98.     return output;
99. };

复制代码

useWorker.ts

• 代码利用React Hook useState来确保Web Worker仅被创建一次，并提供了一个自定义Hook useWorker，用于简化在React组件中利用Web Worker的过程。
  

1. import { useState } from "react";
3. export interface MessageEventHandler {
4.     (event: MessageEvent): void;
5. }
7. export function useWorker(messageEventHandler: MessageEventHandler): Worker {
8.     // Create new worker once and never again
9.     const [worker] = useState(() => createWorker(messageEventHandler));
10.     return worker;
11. }
13. function createWorker(messageEventHandler: MessageEventHandler): Worker {
14.     const worker = new Worker(new URL("../worker.js", import.meta.url), {
15.         type: "module",
16.     });
17.     // Listen for messages from the Web Worker
18.     worker.addEventListener("message", messageEventHandler);
19.     return worker;
20. }

复制代码

• useWorker 用来处置处罚与 Web Worker 的交互，Web Worker 的职责是处置处罚耗时的音频转录工作，避免壅闭主线程。通过监听来自 Worker 的消息，更新转录状态。
  
  
  
  • “progress”：更新文件加载进度，修改 progressItems 状态。
    
  • “update”：更新部分转录文本，将数据更新到 transcript。
    
  • “complete”：转录完成，更新 transcript，并标记为不忙碌。
    
  • “initiate”：开始加载模型文件，添加进度项。
    
  • “ready”：模型加载完毕。
    
  • “error”：错误处置处罚，提示用户。
    
  • “done”：模型文件加载完成，移除进度项。
    
  
  

useTranscriber.ts

• 代码实现了一个自定义的 React 钩子 useTranscriber，用于处置处罚音频转录过程，结合 Web Worker 和后台模型进行推理。
  

定义的接口

• ProgressItem：用于表示文件加载的进度信息。包含文件名、加载的字节数、总字节数、进度百分比和状态。
  
• TranscriberUpdateData：表示部分转录更新数据，包含已经转录的文本和时间戳的 chunks。
  
• TranscriberCompleteData：表示完备转录数据，包含最终的转录文本和时间戳的 chunks。
  
• TranscriberData：表示转录的数据，包罗是否忙碌、转录的文本以及文本的时间戳 chunks。
  
• Transcriber：是 useTranscriber 钩子的返回范例，定义了用于控制转录和管理其状态的各种函数和状态。
  

1. import { useCallback, useMemo, useState } from "react"; // 导入 React 钩子函数
2. import { useWorker } from "./useWorker"; // 导入自定义的 Web Worker 钩子
3. import Constants from "../utils/Constants"; // 导入常量配置
5. // 定义进度项接口，表示文件加载的进度
6. interface ProgressItem {
7.     file: string; // 文件名
8.     loaded: number; // 已加载字节数
9.     progress: number; // 加载进度百分比
10.     total: number; // 总字节数
11.     name: string; // 文件名
12.     status: string; // 当前状态（如正在加载等）
13. }
15. // 定义转录更新数据接口，表示部分转录的更新数据
16. interface TranscriberUpdateData {
17.     data: [
18.         string, // 当前转录的文本
19.         { chunks: { text: string; timestamp: [number, number | null] }[] } // 文本分块和时间戳
20.     ];
21.     text: string; // 当前转录的完整文本
22. }
24. // 定义转录完成数据接口，表示转录完成时的完整数据
25. interface TranscriberCompleteData {
26.     data: {
27.         text: string; // 完整转录的文本
28.         chunks: { text: string; timestamp: [number, number | null] }[]; // 分块的文本和时间戳
29.     };
30. }
32. // 定义转录数据接口，表示转录的状态和结果
33. export interface TranscriberData {
34.     isBusy: boolean; // 是否正在转录
35.     text: string; // 当前转录的文本
36.     chunks: { text: string; timestamp: [number, number | null] }[]; // 分块的文本和时间戳
37. }
39. // 定义转录器接口，提供一系列 API 用于控制转录过程
40. export interface Transcriber {
41.     onInputChange: () => void; // 输入变化时重置转录状态
42.     isBusy: boolean; // 是否正在转录
43.     isModelLoading: boolean; // 是否加载模型
44.     progressItems: ProgressItem[]; // 文件加载的进度
45.     start: (audioData: AudioBuffer | undefined) => void; // 启动转录
46.     output?: TranscriberData; // 转录的结果
47.     model: string; // 当前使用的模型
48.     setModel: (model: string) => void; // 设置使用的模型
49.     multilingual: boolean; // 是否启用多语言支持
50.     setMultilingual: (model: boolean) => void; // 设置是否启用多语言
51.     quantized: boolean; // 是否使用量化模型
52.     setQuantized: (model: boolean) => void; // 设置是否启用量化
53.     subtask: string; // 子任务（如语音识别等）
54.     setSubtask: (subtask: string) => void; // 设置子任务
55.     language?: string; // 语言设置
56.     setLanguage: (language: string) => void; // 设置语言
57. }

复制代码

状态 useTranscriber 钩子

• 该钩子封装了转录逻辑。
  
• postRequest 用于发送音频数据到 Web Worker 进行转录。它担当一个 AudioBuffer 对象，检查其是否为立体声（2 个声道），并将其合并为单声道。如果音频数据是单声道，则直接利用第一声道数据。然后，它将数据发送到 Web Worker，并通报须要的配置选项（如模型、是否利用多语言、量化选项、子任务等）。
  

1. // 自定义 React 钩子 `useTranscriber` 用于管理转录过程，返回值类型是 Transcriber
2. export function useTranscriber(): Transcriber {
3.     const [transcript, setTranscript] = useState<TranscriberData | undefined>(undefined); // 存储转录结果
4.     const [isBusy, setIsBusy] = useState(false); // 转录是否正在进行
5.     const [isModelLoading, setIsModelLoading] = useState(false); // 是否正在加载模型
7.     const [progressItems, setProgressItems] = useState<ProgressItem[]>([]); // 存储加载进度项

复制代码

• useWorker 用来处置处罚与 Web Worker 的交互
  

1.     // 使用 Web Worker 进行后台转录任务
2.     const webWorker = useWorker((event) => {
3.         const message = event.data; // 获取消息数据
4.         // 根据消息的不同状态更新相应的状态
5.         switch (message.status) {
6.             case "progress":
7.                 // 如果是文件加载进度更新
8.                 setProgressItems((prev) =>
9.                     prev.map((item) => {
10.                         if (item.file === message.file) {
11.                             return { ...item, progress: message.progress }; // 更新进度
12.                         }
13.                         return item; // 其他进度项不变
14.                     }),
15.                 );
16.                 break;
17.             case "update":
18.                 // 如果是转录的部分更新
19.                 const updateMessage = message as TranscriberUpdateData;
20.                 setTranscript({
21.                     isBusy: true,
22.                     text: updateMessage.data[0],
23.                     chunks: updateMessage.data[1].chunks,
24.                 });
25.                 break;
26.             case "complete":
27.                 // 如果是转录完成
28.                 const completeMessage = message as TranscriberCompleteData;
29.                 setTranscript({
30.                     isBusy: false,
31.                     text: completeMessage.data.text,
32.                     chunks: completeMessage.data.chunks,
33.                 });
34.                 setIsBusy(false); // 标记不再忙碌
35.                 break;
36.             case "initiate":
37.                 // 如果是开始加载模型文件
38.                 setIsModelLoading(true);
39.                 setProgressItems((prev) => [...prev, message]); // 添加进度项
40.                 break;
41.             case "ready":
42.                 setIsModelLoading(false); // 模型加载完成
43.                 break;
44.             case "error":
45.                 setIsBusy(false); // 发生错误，转录结束
46.                 alert(
47.                     `${message.data.message} This is most likely because you are using Safari on an M1/M2 Mac. Please try again from Chrome, Firefox, or Edge.\n\nIf this is not the case, please file a bug report.`,
48.                 );
49.                 break;
50.             case "done":
51.                 // 如果模型加载完成，移除进度项
52.                 setProgressItems((prev) =>
53.                     prev.filter((item) => item.file !== message.file),
54.                 );
55.                 break;
56.             default:
57.                 // 默认处理其他消息
58.                 break;
59.         }
60.     });

复制代码

1.     // 初始化模型相关状态
2.     const [model, setModel] = useState<string>(Constants.DEFAULT_MODEL); // 当前使用的模型
3.     const [subtask, setSubtask] = useState<string>(Constants.DEFAULT_SUBTASK); // 当前子任务
4.     const [quantized, setQuantized] = useState<boolean>(Constants.DEFAULT_QUANTIZED); // 是否使用量化模型
5.     const [multilingual, setMultilingual] = useState<boolean>(Constants.DEFAULT_MULTILINGUAL); // 是否启用多语言支持
6.     const [language, setLanguage] = useState<string>(Constants.DEFAULT_LANGUAGE); // 当前语言设置
8.     // 当输入变化时，重置转录状态
9.     const onInputChange = useCallback(() => {
10.         setTranscript(undefined); // 清空当前转录数据
11.     }, []);
13.     // 发送音频数据到 Web Worker 进行处理
14.     const postRequest = useCallback(
15.         async (audioData: AudioBuffer | undefined) => {
16.             if (audioData) {
17.                 setTranscript(undefined); // 清空当前转录
18.                 setIsBusy(true); // 设置转录为忙碌状态
20.                 let audio;
21.                 if (audioData.numberOfChannels === 2) {
22.                     // 如果是立体声，合并两个声道为单声道
23.                     const SCALING_FACTOR = Math.sqrt(2);
25.                     let left = audioData.getChannelData(0); // 获取左声道数据
26.                     let right = audioData.getChannelData(1); // 获取右声道数据
28.                     audio = new Float32Array(left.length); // 创建新的单声道数据
29.                     for (let i = 0; i < audioData.length; ++i) {
30.                         audio[i] = SCALING_FACTOR * (left[i] + right[i]) / 2; // 合并并标准化数据
31.                     }
32.                 } else {
33.                     // 如果是单声道音频，直接使用第一个声道
34.                     audio = audioData.getChannelData(0);
35.                 }
37.                 // 向 Web Worker 发送消息，开始处理音频数据
38.                 webWorker.postMessage({
39.                     audio,
40.                     model,
41.                     multilingual,
42.                     quantized,
43.                     subtask: multilingual ? subtask : null, // 如果是多语言，传递子任务
44.                     language: multilingual && language !== "auto" ? language : null, // 语言设置（如果启用了多语言）
45.                 });
46.             }
47.         },
48.         [webWorker, model, multilingual, quantized, subtask, language],
49.     );
51.     // 返回转录器对象，暴露相关 API
52.     const transcriber = useMemo(() => {
53.         return {
54.             onInputChange,
55.             isBusy,
56.             isModelLoading,
57.             progressItems,
58.             start: postRequest,
59.             output: transcript, // 转录结果
60.             model,
61.             setModel,
62.             multilingual,
63.             setMultilingual,
64.             quantized,
65.             setQuantized,
66.             subtask,
67.             setSubtask,
68.             language,
69.             setLanguage,
70.         };
71.     }, [
72.         isBusy,
73.         isModelLoading,
74.         progressItems,
75.         postRequest,
76.         transcript,
77.         model,
78.         multilingual,
79.         quantized,
80.         subtask,
81.         language,
82.     ]);
84.     return transcriber; // 返回转录器对象
85. }

复制代码

CG

• useMemo 和 useCallback 优化
  
  
  
  • useMemo：用于确保 transcriber 对象在依赖项（如 isBusy、model 等）变化时进行重新盘算，从而避免不须要的重新渲染。
    
  • useCallback：用于优化 onInputChange 和 postRequest 方法的重渲染性能，确保它们只在依赖项变化时重新创建。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告