README.md

Translator App built with Transformers.js + Tamagui + Next.js

🔦 About

This Translator app built with 🤗 Transformers.js + Tamagui + Next.js

Please check out the demo site or Vercel app.

Included models

• NLLB200 distilled 600M converted to ONNX model
• VinAI translate En2Vi v2 converted to ONNX model
• VinAI translate Vi2En v2 converted to ONNX model
• VietAI EnVi t5-translation converted to ONNX model

📦 Included packages

• 🤗 Transformers.js
• Tamagui 🪄
• Next.js

🗂 Folder layout

The main apps are:

• src all the components and screens

🏁 Start the app

1. Clone the repo and install dependencies with bun:

git clone https://github.com/huuquyet/translator-tamagui.git
cd translator-tamagui
bun install

2. Run the development server:

bun dev

Firefox users need to change the dom.workers.modules.enabled setting in about:config to true to enable Web Workers. Check out this issue for more details.

3. Open the link (e.g., http://localhost:3000/) in your browser.

🆕 Add new dependencies

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it :

bun add zustand

Update new dependencies

Pure JS dependencies

bun update --latest

You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.

Deploying to Vercel

• Install vercel cli (optional): npm i -g vercel
• Login to vercel: bunx vercel login
• Build command to be bunx vercel build (add --prod if wanna build production version)
• Build command: leave default setting
• Output dir: leave default setting
• Deploy to vercel: bunx vercel --prebuilt (add --prod if wanna deploy to production)