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

应用页面

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

App.jsx

import {
    useEffect, useRef, useState } from 'react';
import LanguageSelector from './components/LanguageSelector'; // 语言选择器组件
import Progress from './components/Progress'; // 进度条组件

import './App.css'; // 应用样式

function App() {
   

  // 状态管理
  const [ready, setReady] = useState(null); // 模型准备状态
  const [disabled, setDisabled] = useState(false); // 翻译按钮是否禁用
  const [progressItems, setProgressItems] = useState([]); // 进度条
  // 输入输出状态管理
  const [input, setInput] = useState('I love walking my dog.'); // 输入文本
  const [sourceLanguage, setSourceLanguage] = useState('eng_Latn'); // 源语言
  const [targetLanguage, setTargetLanguage] = useState('fra_Latn'); // 目标语言
  const [output, setOutput] = useState(''); // 输出文本


  // 创建一个对worker对象的引用
  const worker = useRef(null);
  // 使用`useEffect`钩子在组件挂载时设置worker
  useEffect(() => {
   
    if (!worker.current) {
   
      // 如果worker不存在，则创建一个新的Worker实例
      worker.current = new Worker(new URL('./worker.js'