webassembly009 transformers.js 网页端侧推理 NLLB翻译模型

应用页面

• 运行代码：npm i , npm run dev
  
  
  
  

App.jsx

1. import { useEffect, useRef, useState } from 'react';
2. import LanguageSelector from './components/LanguageSelector'; // 语言选择器组件
3. import Progress from './components/Progress'; // 进度条组件
5. import './App.css'; // 应用样式
7. function App() {
9.   // 状态管理
10.   const [ready, setReady] = useState(null); // 模型准备状态
11.   const [disabled, setDisabled] = useState(false); // 翻译按钮是否禁用
12.   const [progressItems, setProgressItems] = useState([]); // 进度条
13.   // 输入输出状态管理
14.   const [input, setInput] = useState('I love walking my dog.'); // 输入文本
15.   const [sourceLanguage, setSourceLanguage] = useState('eng_Latn'); // 源语言
16.   const [targetLanguage, setTargetLanguage] = useState('fra_Latn'); // 目标语言
17.   const [output, setOutput] = useState(''); // 输出文本
20.   // 创建一个对worker对象的引用
21.   const worker = useRef(null);
22.   // 使用`useEffect`钩子在组件挂载时设置worker
23.   useEffect(() => {
24.     if (!worker.current) {
25.       // 如果worker不存在，则创建一个新的Worker实例
26.       worker.current = new Worker(new URL('./worker.js', import.meta.url), {
27.         type: 'module' // 指定worker脚本类型为ES模块
28.       });
29.     }
31.     // 给worker添加消息事件监听器
32.     worker.current.addEventListener('message', onMessageReceived);
33.    
34.     // 定义从worker接收消息后的回调处理函数
35.     const onMessageReceived = (e) => {
36.       switch (e.data.status) {
37.         case 'initiate':     // 开始加载模型文件时，更新状态并添加进度项
38.           setReady(false);
39.           setProgressItems(prev => [...prev, e.data]);
40.           break;
41.         case 'progress':    // 更新模型文件加载进度
42.           setProgressItems(prev => prev.map(item => item.file === e.data.file ? { ...item, progress: e.data.progress } : item));
43.           break;
44.         case 'done':        // 模型文件加载完成，从进度列表中移除该项目
45.           setProgressItems(prev => prev.filter(item => item.file !== e.data.file));
46.           break;
47.         case 'ready':       // 工作线程准备好接受消息
48.           setReady(true);
49.           break;
50.         case 'update':      // 更新输出文本
51.           setOutput(e.data.output);
52.           break;
53.         case 'complete':    // 翻译完成，启用“翻译”按钮
54.           setDisabled(false);
55.           break;
56.       }
57.     };
59.     // 返回一个清理函数，在组件卸载时移除事件监听器
60.     return () => worker.current.removeEventListener('message', onMessageReceived);
61.   });
63.   // 翻译函数
64.   const translate = () => {
65.     setDisabled(true); // 禁用翻译按钮
66.     worker.current.postMessage({ // 发送消息给worker开始翻译
67.       text: input,
68.       src_lang: sourceLanguage,
69.       tgt_lang: targetLanguage,
70.     });
71.   }
74.   // 渲染UI
75.   return (
76.     <>
77.       <h1>Transformers.js</h1>
78.       <h2>ML-powered multilingual translation in React!</h2>
80.       {/* UI布局，关键在于调用translate函数 */}
81.       <div className='container'>
82.         <div className='language-container'>
83.           <LanguageSelector type={"Source"} defaultLanguage={"eng_Latn"} onChange={x => setSourceLanguage(x.target.value)} />
84.           <LanguageSelector type={"Target"} defaultLanguage={"fra_Latn"} onChange={x => setTargetLanguage(x.target.value)} />
85.         </div>
86.         <div className='textbox-container'>
87.           <textarea value={input} rows={3} onChange={e => setInput(e.target.value)}></textarea>
88.           <textarea value={output} rows={3} readOnly></textarea>
89.         </div>
90.       </div>
92.       <button disabled={disabled} onClick={translate}>Translate</button>
94.       <div className='progress-bars-container'>
95.         {ready === false && <label>Loading models... (only run once)</label>}
96.         {progressItems.map(data => (
97.           <div key={data.file}>
98.             <Progress text={data.file} percentage={data.progress} />
99.           </div>
100.         ))}
101.       </div>
102.     </>
103.   );
104. }
106. export default App; // 导出默认组件

复制代码

worker.js

• 代码定义了一个使用单例模式的MyTranslationPipeline，并通过Web Worker监听主线程的消息来实行翻译任务（Worker线程消息通报）：
  

1. import { pipeline } from '@xenova/transformers'; // 导入pipeline函数用于加载模型
4. // 使用单例模式确保仅加载一次翻译管道实例。由于加载管道是一个昂贵的操作，我们不希望每次翻译句子时都重新加载。
5. class MyTranslationPipeline {
6.     static task = 'translation'; // 任务类型
7.     static model = 'Xenova/nllb-200-distilled-600M'; // 模型名称
8.     static instance = null; // 静态变量：存储单例实例
10.     /**
11.      * 获取或创建一个翻译管道的实例。
12.      * @param progress_callback - 进度回调函数，用于追踪模型加载进度。@returns {Promise<*>} - 返回已加载的翻译管道实例。
13.      */
14.     static async getInstance(progress_callback = null) {
15.         if (this.instance === null) { // 如果尚未创建实例，则加载新的翻译管道并保存
16.             // 1. pipeline函数transformers.js模型加载：默认情况下，模型将从 Hugging Face Hub 下载并存储在 浏览器缓存 中，有关更多信息，请参见https://hugging-face.cn/docs/transformers.js/custom_usage。
17.             this.instance = await pipeline(this.task, this.model, { progress_callback });
18.         }
19.         return this.instance; // 返回实例
20.     }
21. }
23. // 监听来自主线程的消息事件
24. self.addEventListener('message', async (event) => {
25.     // 获取翻译管道实例，首次调用时将加载管道并保存以备将来使用
26.     let translator = await MyTranslationPipeline.getInstance(x => {
27.         // 添加进度回调函数，以便跟踪模型加载进度
28.         self.postMessage(x);
29.     });
31.     // 2. transformers.js模型执行实际的翻译操作
32.     let output = await translator(event.data.text, {
33.         tgt_lang: event.data.tgt_lang, // 目标语言
34.         src_lang: event.data.src_lang, // 源语言
36.         // 允许部分输出，并通过回调函数发送更新
37.         callback_function: x => {
38.             self.postMessage({
39.                 status: 'update', // 状态更新
40.                 output: translator.tokenizer.decode(x[0].output_token_ids, { skip_special_tokens: true }) // 解码输出文本
41.             });
42.         }
43.     });
45.     // 将翻译结果发送回主线程
46.     self.postMessage({
47.         status: 'complete', // 完成状态
48.         output: output, // 最终的翻译输出
49.     });
50. });

复制代码

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