pushing more stuff

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1 @@
+index.html,1708484286164,dd62ab59fd7d158d4cdf478f10a609a1d01c2f1a6952a4eb71ecad82786829de

.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,5 @@
+index.html,1708485655272,495a445674a2413caed6caa5a93a462bf2c7a5e624d6200967e8c0fd6239a2bf
+assets/index-bYbS0vAz.css,1708485655263,0cd57e518fbfc44706849cfeebaa06b9ff3d994d52a851c3cc14fce7f3691802
+vite.svg,1708485655107,d3bbbc44b3ea71906a72bf2ec1a4716903e2e3d9f85a5007205a65d1f12e2923
+assets/index-D7uBYrc6.js,1708485655264,6d41e5f5d8e5a3efb6014c0b7439a846df87635ee3f80fe67317cfa27282d2bc
+assets/worker-1hc7Hdd2.js,1708485655272,92d86bcbcc4b73884f6ae50f6682615489062a640e1c2265bcb0e3cd17d004fb

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "soren-react-translator"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SOREN_REACT_TRANSLATOR }}'
+          channelId: live
+          projectId: soren-react-translator

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SOREN_REACT_TRANSLATOR }}'
+          projectId: soren-react-translator

.gitignore

@@ -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?

build/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
+
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/10.8.0/firebase-app-compat.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/10.8.0/firebase-auth-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-database-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-firestore-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-functions-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-messaging-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-storage-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-analytics-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-remote-config-compat.js"></script>
+    <script defer src="/__/firebase/10.8.0/firebase-performance-compat.js"></script>
+    <!-- 
+      initialize the SDK after all desired features are loaded, set useEmulator to false
+      to avoid connecting the SDK to running emulators.
+    -->
+    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loadEl = document.querySelector('#load');
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.firestore().doc('/foo/bar').get().then(() => { });
+        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        // firebase.analytics(); // call to activate
+        // firebase.analytics().logEvent('tutorial_completed');
+        // firebase.performance(); // call to activate
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
+        try {
+          let app = firebase.app();
+          let features = [
+            'auth', 
+            'database', 
+            'firestore',
+            'functions',
+            'messaging', 
+            'storage', 
+            'analytics', 
+            'remoteConfig',
+            'performance',
+          ].filter(feature => typeof app[feature] === 'function');
+          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
+  </body>
+</html>

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-translator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xenova/transformers": "^2.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.1.0"
+  }
+}

src/App.css

@@ -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;
+}

src/App.jsx

@@ -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

src/components/LanguageSelector.jsx

@@ -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>
+  )
+}

src/components/Progress.jsx

@@ -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>
+  );
+}

src/index.css

@@ -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;
+}

src/main.jsx

@@ -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>,
+)

src/worker.js

@@ -0,0 +1,55 @@
+
+import { pipeline, env } from "@xenova/transformers";
+
+// Disable local models
+env.allowLocalModels = false;
+
+/**
+ * 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,
+    });
+});

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})