├── app.vue
├── tsconfig.json
├── nuxt.config.ts
├── .gitignore
├── pages
    └── index.vue
├── package.json
├── README.md
└── workers
    └── translate.ts


/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <NuxtPage />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 |   compatibilityDate: '2024-11-01',
4 |   devtools: { enabled: true },
5 |   modules: ['nuxt-workers']
6 | })


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const input = ref()
 3 | const message = ref()
 4 | 
 5 | async function runTranslate() {
 6 |     const res = await translate('Hello')
 7 |     message.value = res
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |     {{ message }}
13 |     <input type="text" v-model="input" />
14 |     <button @click="runTranslate">Translate</button>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-workers-transformersjs",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@xenova/transformers": "^2.17.2",
14 |     "nuxt": "^3.15.4",
15 |     "nuxt-workers": "0.1.0",
16 |     "vue": "latest",
17 |     "vue-router": "latest"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Nuxt Workers](https://github.com/danielroe/nuxt-workers) + [Transformers.js](https://huggingface.co/docs/transformers.js/en/index)
 2 | 
 3 | Here's a basic demo using these two tools. Transformers.js is typically used within a web worker for several important performance reasons:
 4 | 
 5 | - Main thread protection
 6 | - Computation isolation
 7 | - Memory management
 8 | - Parallelization
 9 | 
10 | This is a barebones demo showing Transformers.js working within a Nuxt application alongside Daniel Roe's worker module.
11 | 
12 | This code is deployed here - https://nuxt-workers-transformersjs.vercel.app/
13 | 
14 | **Note:** The model [Xenova/nllb-200-distilled-600M](https://huggingface.co/Xenova/nllb-200-distilled-600M) will begin installing on page load. It will take a bit of time depending on your internet speed.
15 | 


--------------------------------------------------------------------------------
/workers/translate.ts:
--------------------------------------------------------------------------------
 1 | import { pipeline, TranslationPipeline } from '@xenova/transformers'
 2 | 
 3 | class TranslationSingleton {
 4 |     private static instance: TranslationSingleton
 5 |     private pipelinePromise: Promise<TranslationPipeline> | null = null
 6 | 
 7 |     private constructor() {}
 8 | 
 9 |     public static getInstance(): TranslationSingleton {
10 |         if (!TranslationSingleton.instance) {
11 |             TranslationSingleton.instance = new TranslationSingleton()
12 |         }
13 |         return TranslationSingleton.instance
14 |     }
15 | 
16 |     public async getTranslator(): Promise<TranslationPipeline> {
17 |         if (!this.pipelinePromise) {
18 |             this.pipelinePromise = pipeline(
19 |                 'translation',
20 |                 'Xenova/nllb-200-distilled-600M'
21 |             ) as Promise<TranslationPipeline>
22 |         }
23 |         return this.pipelinePromise
24 |     }
25 | }
26 | 
27 | export async function translate(input: string) {
28 |     const singleton = TranslationSingleton.getInstance()
29 |     const translator = await singleton.getTranslator()
30 | 
31 |     const translation = await translator(input, {
32 |         tgt_lang: 'spa_Latn',
33 |         src_lang: 'eng_Latn',
34 |     })
35 | 
36 |     return translation
37 | }
38 | 


--------------------------------------------------------------------------------