react-ai-translator
A React component for local, secure, on-demand translations powered by the Xenova/nllb-200-distilled-600M model. This package utilizes the WebGPU capabilities of the device on which the app runs, ensuring data privacy and enabling you to translate text without sending data to third-party APIs.
Note: This is especially suitable when security is a concern and parts of the data are user-provided, which might not be captured in your i18n translation files.
Table of Contents
Demo
Check out a live demo here: https://ai-translation-demo-three.vercel.app/
The example code used for this demo is available in this repository: joelshejar/ai-translation-demo
Features
- Secure & Local: Utilizes your device’s GPU, keeping all data local.
- No External API Calls: Perfect for sensitive data scenarios.
- Real-Time Translations: On-demand translations for dynamic user content.
- Easy Integration: Simple to install and use within any React project.
- Extensible: Future-proof design to swap in different translation models based on your needs.
Installation
Install the package via npm (or yarn):
npm install react-ai-translator
Usage
Wrap your application (or a section of it) in the TranslatorProvider to initialize the translation model.
Use the useTranslator hook or Translator component to translate text wherever needed.
Below is a minimal example. For more detailed usage, see the Example section.
import { useEffect, useRef, useState } from 'react'
import LanguageSelector from './components/LanguageSelector';
import { useTranslation } from '@joelshejar/react-ai-translator';
import './App.css'
function App() {
// 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('');
const { translate, translatedText, loading, progress, modelLoading } = useTranslation();
useEffect(()=>{
translate(input,
sourceLanguage,
targetLanguage)
},[])
return (
<div>
<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>
<div style={{width:'50%'}}>{translatedText}</div>
</div>
</div>
<button disabled={modelLoading||loading} onClick={()=>translate(input,
sourceLanguage,
targetLanguage)}>Translate</button>
</div>
)
}
export default App
How It Works
-
Local Model
This library makes use of Xenova/nllb-200-distilled-600M, a distilled version of Meta AI’s No Language Left Behind model.
-
WebGPU Execution
By leveraging your device’s GPU, the heavy lifting of translation is done locally, avoiding external calls.
-
Security
No user data leaves your environment, making it ideal for handling private or sensitive content.
Requirements
- React: ^16.8.0 or newer (hooks are used).
- Node: ^14 or newer.
- WebGPU Support: Ensure your browser or environment supports the WebGPU API.
- Model Size: The
nllb-200-distilled-600M model is relatively large; ensure sufficient memory & GPU resources.
Roadmap
Some upcoming goals and improvements we’re exploring:
-
Static Text Discovery
Automatically scan a repo to find all static texts and consolidate them for easy translation management.
-
Caching Mechanism
Implement efficient caching for translated texts to minimize repeated computations.
-
Dynamic Model Selection
Allow usage of different translation models based on user needs (e.g., smaller vs. larger model for specific languages).
-
Bundle Optimization
Investigate ways to reduce package size and loading times.
-
Language Detection
Automatic source language detection for more streamlined usage.
Contributing
Contributions, issues, and feature requests are welcome!
- Fork the repository.
- Create a new branch for your feature or fix.
- Commit and push your changes. (please use pnpm commit)
- Submit a pull request.
We’ll review your submission and work together to make react-ai-translator better.
Acknowledgments
We took the base setup for this starter package from TimMikeladze/typescript-react-package-starter.
License
This project is licensed under the MIT License.
Feel free to use, modify, and distribute this library in both commercial and private projects.
