Add example react application
This commit is contained in:
Joshua Lochner
parent
7c7a100d61
commit
656015fc6b
|
|
@ -0,0 +1,15 @@
|
|||
module.exports = {
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': 'warn',
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Transformers.js - Sample react application</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "react-translator",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@xenova/transformers": "^2.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.3.4",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.textbox-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.textbox-container>textarea, .language-selector {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.language-selector>select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
background-color: #e9ecef;
|
||||
border: solid 1px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
padding: 0 4px;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
width: 1%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #007bff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.selector-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.progress-bars-container {
|
||||
padding: 8px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
import LanguageSelector from './components/LanguageSelector';
|
||||
import Progress from './components/Progress';
|
||||
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
|
||||
// Model loading
|
||||
const [ready, setReady] = useState(null);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [progressItems, setProgressItems] = useState([]);
|
||||
|
||||
// Inputs and outputs
|
||||
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('');
|
||||
|
||||
// Create a reference to the worker object.
|
||||
const worker = useRef(null);
|
||||
|
||||
// We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
|
||||
useEffect(() => {
|
||||
if (!worker.current) {
|
||||
// Create the worker if it does not yet exist.
|
||||
worker.current = new Worker(new URL('./worker.js', import.meta.url), {
|
||||
type: 'module'
|
||||
});
|
||||
}
|
||||
|
||||
// Create a callback function for messages from the worker thread.
|
||||
const onMessageReceived = (e) => {
|
||||
switch (e.data.status) {
|
||||
case 'initiate':
|
||||
// Model file start load: add a new progress item to the list.
|
||||
setReady(false);
|
||||
setProgressItems(prev => [...prev, e.data]);
|
||||
break;
|
||||
|
||||
case 'progress':
|
||||
// Model file progress: update one of the progress items.
|
||||
setProgressItems(
|
||||
prev => prev.map(item => {
|
||||
if (item.file === e.data.file) {
|
||||
return { ...item, progress: e.data.progress }
|
||||
}
|
||||
return item;
|
||||
})
|
||||
);
|
||||
break;
|
||||
|
||||
case 'done':
|
||||
// Model file loaded: remove the progress item from the list.
|
||||
setProgressItems(
|
||||
prev => prev.filter(item => item.file !== e.data.file)
|
||||
);
|
||||
break;
|
||||
|
||||
case 'ready':
|
||||
// Pipeline ready: the worker is ready to accept messages.
|
||||
setReady(true);
|
||||
break;
|
||||
|
||||
case 'update':
|
||||
// Generation update: update the output text.
|
||||
setOutput(e.data.output);
|
||||
break;
|
||||
|
||||
case 'complete':
|
||||
// Generation complete: re-enable the "Translate" button
|
||||
setDisabled(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Attach the callback function as an event listener.
|
||||
worker.current.addEventListener('message', onMessageReceived);
|
||||
|
||||
// Define a cleanup function for when the component is unmounted.
|
||||
return () => worker.current.removeEventListener('message', onMessageReceived);
|
||||
});
|
||||
|
||||
const translate = () => {
|
||||
setDisabled(true);
|
||||
worker.current.postMessage({
|
||||
text: input,
|
||||
src_lang: sourceLanguage,
|
||||
tgt_lang: targetLanguage,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Transformers.js</h1>
|
||||
<h2>ML-powered multilingual translation in React!</h2>
|
||||
|
||||
<div className='container'>
|
||||
<div className='language-container'>
|
||||
<LanguageSelector type={"Source"} defaultLanguage={"eng_Latn"} onChange={x => setSourceLanguage(x.target.value)} />
|
||||
<LanguageSelector type={"Target"} defaultLanguage={"fra_Latn"} onChange={x => setTargetLanguage(x.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className='textbox-container'>
|
||||
<textarea value={input} rows={3} onChange={e => setInput(e.target.value)}></textarea>
|
||||
<textarea value={output} rows={3} readOnly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button disabled={disabled} onClick={translate}>Translate</button>
|
||||
|
||||
<div className='progress-bars-container'>
|
||||
{ready === false && (
|
||||
<label>Loading models... (only run once)</label>
|
||||
)}
|
||||
{progressItems.map(data => (
|
||||
<div key={data.file}>
|
||||
<Progress text={data.file} percentage={data.progress} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
|
||||
// The full list of languages in FLORES-200 is available here:
|
||||
// https://github.com/facebookresearch/flores/blob/main/flores200/README.md#languages-in-flores-200
|
||||
|
||||
const LANGUAGES = {
|
||||
"Acehnese (Arabic script)": "ace_Arab",
|
||||
"Acehnese (Latin script)": "ace_Latn",
|
||||
"Afrikaans": "afr_Latn",
|
||||
"Akan": "aka_Latn",
|
||||
"Amharic": "amh_Ethi",
|
||||
"Armenian": "hye_Armn",
|
||||
"Assamese": "asm_Beng",
|
||||
"Asturian": "ast_Latn",
|
||||
"Awadhi": "awa_Deva",
|
||||
"Ayacucho Quechua": "quy_Latn",
|
||||
"Balinese": "ban_Latn",
|
||||
"Bambara": "bam_Latn",
|
||||
"Banjar (Arabic script)": "bjn_Arab",
|
||||
"Banjar (Latin script)": "bjn_Latn",
|
||||
"Bashkir": "bak_Cyrl",
|
||||
"Basque": "eus_Latn",
|
||||
"Belarusian": "bel_Cyrl",
|
||||
"Bemba": "bem_Latn",
|
||||
"Bengali": "ben_Beng",
|
||||
"Bhojpuri": "bho_Deva",
|
||||
"Bosnian": "bos_Latn",
|
||||
"Buginese": "bug_Latn",
|
||||
"Bulgarian": "bul_Cyrl",
|
||||
"Burmese": "mya_Mymr",
|
||||
"Catalan": "cat_Latn",
|
||||
"Cebuano": "ceb_Latn",
|
||||
"Central Atlas Tamazight": "tzm_Tfng",
|
||||
"Central Aymara": "ayr_Latn",
|
||||
"Central Kanuri (Arabic script)": "knc_Arab",
|
||||
"Central Kanuri (Latin script)": "knc_Latn",
|
||||
"Central Kurdish": "ckb_Arab",
|
||||
"Chhattisgarhi": "hne_Deva",
|
||||
"Chinese (Simplified)": "zho_Hans",
|
||||
"Chinese (Traditional)": "zho_Hant",
|
||||
"Chokwe": "cjk_Latn",
|
||||
"Crimean Tatar": "crh_Latn",
|
||||
"Croatian": "hrv_Latn",
|
||||
"Czech": "ces_Latn",
|
||||
"Danish": "dan_Latn",
|
||||
"Dari": "prs_Arab",
|
||||
"Dutch": "nld_Latn",
|
||||
"Dyula": "dyu_Latn",
|
||||
"Dzongkha": "dzo_Tibt",
|
||||
"Eastern Panjabi": "pan_Guru",
|
||||
"Eastern Yiddish": "ydd_Hebr",
|
||||
"Egyptian Arabic": "arz_Arab",
|
||||
"English": "eng_Latn",
|
||||
"Esperanto": "epo_Latn",
|
||||
"Estonian": "est_Latn",
|
||||
"Ewe": "ewe_Latn",
|
||||
"Faroese": "fao_Latn",
|
||||
"Fijian": "fij_Latn",
|
||||
"Finnish": "fin_Latn",
|
||||
"Fon": "fon_Latn",
|
||||
"French": "fra_Latn",
|
||||
"Friulian": "fur_Latn",
|
||||
"Galician": "glg_Latn",
|
||||
"Ganda": "lug_Latn",
|
||||
"Georgian": "kat_Geor",
|
||||
"German": "deu_Latn",
|
||||
"Greek": "ell_Grek",
|
||||
"Guarani": "grn_Latn",
|
||||
"Gujarati": "guj_Gujr",
|
||||
"Haitian Creole": "hat_Latn",
|
||||
"Halh Mongolian": "khk_Cyrl",
|
||||
"Hausa": "hau_Latn",
|
||||
"Hebrew": "heb_Hebr",
|
||||
"Hindi": "hin_Deva",
|
||||
"Hungarian": "hun_Latn",
|
||||
"Icelandic": "isl_Latn",
|
||||
"Igbo": "ibo_Latn",
|
||||
"Ilocano": "ilo_Latn",
|
||||
"Indonesian": "ind_Latn",
|
||||
"Irish": "gle_Latn",
|
||||
"Italian": "ita_Latn",
|
||||
"Japanese": "jpn_Jpan",
|
||||
"Javanese": "jav_Latn",
|
||||
"Jingpho": "kac_Latn",
|
||||
"Kabiyè": "kbp_Latn",
|
||||
"Kabuverdianu": "kea_Latn",
|
||||
"Kabyle": "kab_Latn",
|
||||
"Kamba": "kam_Latn",
|
||||
"Kannada": "kan_Knda",
|
||||
"Kashmiri (Arabic script)": "kas_Arab",
|
||||
"Kashmiri (Devanagari script)": "kas_Deva",
|
||||
"Kazakh": "kaz_Cyrl",
|
||||
"Khmer": "khm_Khmr",
|
||||
"Kikongo": "kon_Latn",
|
||||
"Kikuyu": "kik_Latn",
|
||||
"Kimbundu": "kmb_Latn",
|
||||
"Kinyarwanda": "kin_Latn",
|
||||
"Korean": "kor_Hang",
|
||||
"Kyrgyz": "kir_Cyrl",
|
||||
"Lao": "lao_Laoo",
|
||||
"Latgalian": "ltg_Latn",
|
||||
"Ligurian": "lij_Latn",
|
||||
"Limburgish": "lim_Latn",
|
||||
"Lingala": "lin_Latn",
|
||||
"Lithuanian": "lit_Latn",
|
||||
"Lombard": "lmo_Latn",
|
||||
"Luba-Kasai": "lua_Latn",
|
||||
"Luo": "luo_Latn",
|
||||
"Luxembourgish": "ltz_Latn",
|
||||
"Macedonian": "mkd_Cyrl",
|
||||
"Magahi": "mag_Deva",
|
||||
"Maithili": "mai_Deva",
|
||||
"Malayalam": "mal_Mlym",
|
||||
"Maltese": "mlt_Latn",
|
||||
"Maori": "mri_Latn",
|
||||
"Marathi": "mar_Deva",
|
||||
"Meitei (Bengali script)": "mni_Beng",
|
||||
"Mesopotamian Arabic": "acm_Arab",
|
||||
"Minangkabau (Arabic script)": "min_Arab",
|
||||
"Minangkabau (Latin script)": "min_Latn",
|
||||
"Mizo": "lus_Latn",
|
||||
"Modern Standard Arabic (Romanized)": "arb_Latn",
|
||||
"Modern Standard Arabic": "arb_Arab",
|
||||
"Moroccan Arabic": "ary_Arab",
|
||||
"Mossi": "mos_Latn",
|
||||
"Najdi Arabic": "ars_Arab",
|
||||
"Nepali": "npi_Deva",
|
||||
"Nigerian Fulfulde": "fuv_Latn",
|
||||
"North Azerbaijani": "azj_Latn",
|
||||
"North Levantine Arabic": "apc_Arab",
|
||||
"Northern Kurdish": "kmr_Latn",
|
||||
"Northern Sotho": "nso_Latn",
|
||||
"Northern Uzbek": "uzn_Latn",
|
||||
"Norwegian Bokmål": "nob_Latn",
|
||||
"Norwegian Nynorsk": "nno_Latn",
|
||||
"Nuer": "nus_Latn",
|
||||
"Nyanja": "nya_Latn",
|
||||
"Occitan": "oci_Latn",
|
||||
"Odia": "ory_Orya",
|
||||
"Pangasinan": "pag_Latn",
|
||||
"Papiamento": "pap_Latn",
|
||||
"Plateau Malagasy": "plt_Latn",
|
||||
"Polish": "pol_Latn",
|
||||
"Portuguese": "por_Latn",
|
||||
"Romanian": "ron_Latn",
|
||||
"Rundi": "run_Latn",
|
||||
"Russian": "rus_Cyrl",
|
||||
"Samoan": "smo_Latn",
|
||||
"Sango": "sag_Latn",
|
||||
"Sanskrit": "san_Deva",
|
||||
"Santali": "sat_Olck",
|
||||
"Sardinian": "srd_Latn",
|
||||
"Scottish Gaelic": "gla_Latn",
|
||||
"Serbian": "srp_Cyrl",
|
||||
"Shan": "shn_Mymr",
|
||||
"Shona": "sna_Latn",
|
||||
"Sicilian": "scn_Latn",
|
||||
"Silesian": "szl_Latn",
|
||||
"Sindhi": "snd_Arab",
|
||||
"Sinhala": "sin_Sinh",
|
||||
"Slovak": "slk_Latn",
|
||||
"Slovenian": "slv_Latn",
|
||||
"Somali": "som_Latn",
|
||||
"South Azerbaijani": "azb_Arab",
|
||||
"South Levantine Arabic": "ajp_Arab",
|
||||
"Southern Pashto": "pbt_Arab",
|
||||
"Southern Sotho": "sot_Latn",
|
||||
"Southwestern Dinka": "dik_Latn",
|
||||
"Spanish": "spa_Latn",
|
||||
"Standard Latvian": "lvs_Latn",
|
||||
"Standard Malay": "zsm_Latn",
|
||||
"Standard Tibetan": "bod_Tibt",
|
||||
"Sundanese": "sun_Latn",
|
||||
"Swahili": "swh_Latn",
|
||||
"Swati": "ssw_Latn",
|
||||
"Swedish": "swe_Latn",
|
||||
"Tagalog": "tgl_Latn",
|
||||
"Tajik": "tgk_Cyrl",
|
||||
"Tamasheq (Latin script)": "taq_Latn",
|
||||
"Tamasheq (Tifinagh script)": "taq_Tfng",
|
||||
"Tamil": "tam_Taml",
|
||||
"Tatar": "tat_Cyrl",
|
||||
"Ta’izzi-Adeni Arabic": "acq_Arab",
|
||||
"Telugu": "tel_Telu",
|
||||
"Thai": "tha_Thai",
|
||||
"Tigrinya": "tir_Ethi",
|
||||
"Tok Pisin": "tpi_Latn",
|
||||
"Tosk Albanian": "als_Latn",
|
||||
"Tsonga": "tso_Latn",
|
||||
"Tswana": "tsn_Latn",
|
||||
"Tumbuka": "tum_Latn",
|
||||
"Tunisian Arabic": "aeb_Arab",
|
||||
"Turkish": "tur_Latn",
|
||||
"Turkmen": "tuk_Latn",
|
||||
"Twi": "twi_Latn",
|
||||
"Ukrainian": "ukr_Cyrl",
|
||||
"Umbundu": "umb_Latn",
|
||||
"Urdu": "urd_Arab",
|
||||
"Uyghur": "uig_Arab",
|
||||
"Venetian": "vec_Latn",
|
||||
"Vietnamese": "vie_Latn",
|
||||
"Waray": "war_Latn",
|
||||
"Welsh": "cym_Latn",
|
||||
"West Central Oromo": "gaz_Latn",
|
||||
"Western Persian": "pes_Arab",
|
||||
"Wolof": "wol_Latn",
|
||||
"Xhosa": "xho_Latn",
|
||||
"Yoruba": "yor_Latn",
|
||||
"Yue Chinese": "yue_Hant",
|
||||
"Zulu": "zul_Latn",
|
||||
}
|
||||
|
||||
export default function LanguageSelector({ type, onChange, defaultLanguage }) {
|
||||
return (
|
||||
<div className='language-selector'>
|
||||
<label>{type}: </label>
|
||||
<select onChange={onChange} defaultValue={defaultLanguage}>
|
||||
{Object.entries(LANGUAGES).map(([key, value]) => {
|
||||
return <option key={key} value={value}>{key}</option>
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
export default function Progress({ text, percentage }) {
|
||||
percentage = percentage ?? 0;
|
||||
return (
|
||||
<div className="progress-container">
|
||||
<div className='progress-bar' style={{ 'width': `${percentage}%` }}>{text} ({`${percentage.toFixed(2)}%`})</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.6em 1.2em;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
background-color: #f9f9f9;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
select:hover,
|
||||
textarea:hover,
|
||||
button:not([disabled]):hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
select:focus-visible,
|
||||
textarea:focus,
|
||||
textarea:focus-visible,
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
import { pipeline } from '@xenova/transformers';
|
||||
|
||||
/**
|
||||
* This class uses the Singleton pattern to ensure that only one instance of the
|
||||
* pipeline is loaded. This is because loading the pipeline is an expensive
|
||||
* operation and we don't want to do it every time we want to translate a sentence.
|
||||
*/
|
||||
class MyTranslationPipeline {
|
||||
static task = 'translation';
|
||||
static model = 'Xenova/nllb-200-distilled-600M';
|
||||
static instance = null;
|
||||
|
||||
static async getInstance(progress_callback = null) {
|
||||
if (this.instance === null) {
|
||||
this.instance = pipeline(this.task, this.model, { progress_callback });
|
||||
}
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for messages from the main thread
|
||||
self.addEventListener('message', async (event) => {
|
||||
// Retrieve the translation pipeline. When called for the first time,
|
||||
// this will load the pipeline and save it for future use.
|
||||
let translator = await MyTranslationPipeline.getInstance(x => {
|
||||
// We also add a progress callback to the pipeline so that we can
|
||||
// track model loading.
|
||||
self.postMessage(x);
|
||||
});
|
||||
|
||||
// Actually perform the translation
|
||||
let output = await translator(event.data.text, {
|
||||
tgt_lang: event.data.tgt_lang,
|
||||
src_lang: event.data.src_lang,
|
||||
|
||||
// Allows for partial output
|
||||
callback_function: x => {
|
||||
self.postMessage({
|
||||
status: 'update',
|
||||
output: translator.tokenizer.decode(x[0].output_token_ids, { skip_special_tokens: true })
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Send the output back to the main thread
|
||||
self.postMessage({
|
||||
status: 'complete',
|
||||
output: output,
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue