Client-side Translator API with a model built into Chrome (from version 131).
Possible use case: customer support chat which allows for users to type in their
first language and receive real-time translation for the support agent. github.com/webmachinelearning/translation-api
Use the Translator API
The Translator API has two important methods:
canTranslate(): Checks if a translation model for your language pair is ready. Returns"readily"if the model is already available on device,"after-download"if the browser first needs to download the model, and"no"if translation is not possible.createTranslator(): This sets up yourTranslatorobject asynchronously. If the model needs downloading, it'll wait until it's ready.
The Translator object has just one method:
translate(): Feed it the source text, and it outputs the translated version.
As this is experimental and Chrome-specific for now, be sure to wrap all your code in feature detection.
const supportsOnDevice = 'model' in window && 'createTranslator' in model;
if (!supportsOnDevice) {
return;
}
const parameters = { sourceLanguage: 'en', targetLanguage: 'pt' };
const modelState = await model.canTranslate(parameters);
if (modelState === 'no') {
return;
}
const onDeviceTranslator = await model.createTranslator(parameters);
const result = await onDeviceTranslator.translate(input);
if (!result) {
throw new Error('Failed to translate');
}
return result;
The model needs time to become available to the user. You can approach this in two ways:
- Wait to enable your translation-powered UI elements once the model is ready.
- Start with server-side AI for translation, then switch to client-side once the model has downloaded.
Sign up for the Translator API origin trial to enable your translation features for all users on your origin, on Chrome. Opening an Issue on the Explainer.
Use the Translator API in Chrome to translate text in the browser, using local AI models.
Translation of content on the web has typically required using a cloud service. First, the source content is uploaded to a server, which runs the translation to a target language, then the resulting text is downloaded and returned to the user. By running translation on the client, you save the time required by server trips and the cost of hosting the translation service.
Get started
Join the Translator API origin trial, running in Chrome beginning with version 131 (Chrome and derivative branches like Dev, Canary).
While you always know the target language for translations, you may not always know the source language, such as in user-generated content. For such cases, the Translator API proposal includes both the Translator API and the Language Detector API, also available in an origin trial. Sign up for both origin trials to use these APIs together.
Sign up for the origin trial
To start using the Translator API, follow these steps:
- Acknowledge Google's Generative AI Prohibited Uses Policy.
- Go to the Translator API origin trial.
- Click Register and fill out the form.
- In the Web origin field, provide your
origin
or extension ID,
chrome-extension://YOUR_EXTENSION_ID.
- In the Web origin field, provide your
origin
or extension ID,
- To submit, click Register.
- Copy the token provided, and add it to every web page on your origin or
file for your Extension, on which you want the trial to be enabled.
- If you're building an Extension, follow the Extensions origin trial instructions
- Start using the Translator API.
Learn more about how to get started with origin trials.
Add support to localhost
To access the Translator API on localhost during the origin trial, you must
update Chrome to the latest
version. Then, follow these steps:
- Go to
chrome://flags/#translation-api. - Select Enabled.
- To try more language pairs, select Enabled without language pack limit.
- Click Relaunch or restart Chrome.
Use the Translator API
To determine if the Translator API is supported, run the following feature detection snippet.
if ('ai' in self && 'translator' in self.ai) {
// The Translator API is supported.
}
Check language pair support
Translation is managed with language packs, downloaded on demand. A language pack is like a dictionary for a given language.
sourceLanguage: The current language for the text.targetLanguage: The final language the text should be translated into.
Use BCP 47 language short codes as
strings. For example, 'es' for Spanish or 'fr' for French.
const translatorCapabilities = await self.ai.translator.capabilities();
translatorCapabilities.languagePairAvailable('es', 'fr');
// 'readily'
The languagePairAvailable() function can return any of the following results:
no: It's not possible for this browser to translate as requested.readily: The browser can translate as requested.after-download: The browser can perform the translation, but only after it downloads the relevant model or language packs.
You can listen for model download progress using the downloadprogress event:
const translator = await self.ai.translator.create({
sourceLanguage: 'es',
targetLanguage: 'fr',
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
});
},
});
If the download fails, then downloadprogress events stop being emitted and the ready
promise is rejected.
Create and run the translator
To create a translator, call the asynchronous translation.createTranslator()
function. Like canTranslate(), it requires an options parameter with two
fields, one for the sourceLanguage and one for the targetLanguage.
// Create a translator that translates from English to French.
const translator = await self.ai.translator.create({
sourceLanguage: 'en',
targetLanguage: 'fr',
});
Once you have a translator, call the asynchronous translate() function to
translate your text.
await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"
Limitations in the origin trial
The following limitations apply during the origin trial.
Supported language pairs
At this time, up to three language packs can be downloaded for translation.
We're committed to expand the range of supported languages in future releases,
while maintaining high standards for user privacy. You can confirm if the
language pair you need is supported with the
languagePairAvailable() function.
It's possible that certain, less frequently used language pairs may be used for fingerprinting. For example, it's more common to translate between English and Spanish than between less common languages, such as Gaelic and Catalan. A less common language pair could be considered a data point for user identification.
During the origin trial, we're limiting the potential translatable language pairs to protect user privacy. Language pairs must meet the following criteria:
- Both the source and the destination language are set as preferred languages in Chrome.
- Or, one of he languages is set as a preferred language in Chrome, and the
other is among the following
popular languages:
- English (
en) - Mandarin Chinese (
zh; simplified) or Taiwanese Mandarin (zh-Hant; traditional) - Japanese (
ja) - Portuguese (
pt) - Russian (
ru) - Spanish (
es) - Turkish (
tr) - Hindi (
hi) - Vietnamese (
vi) - Bengali (
bn)
- English (
Bypass language restrictions for local testing
For local prototyping, you can bypass these checks by running Chrome with the
command line option --disable-features=TranslationAPIAcceptLanguagesCheck.
Alternatively, set chrome://flags/#translation-api to
Enable without language pack limit.
Visit chrome://on-device-translation-internals/ to manually install and
uninstall language packs.
Sequential translations
Translations are processed sequentially. If you send large amounts of text to be translated, subsequent translations are blocked until the earlier ones complete.
For the best responsiveness of your translation requests, chunk them together and consider displaying a loading interface, such as a spinner, to convey that a translation is ongoing.
Web worker availability
During the origin trial, the Translator API is only supported from the main thread. We intend to support it in web workers once the API is widely available.
Demo
You can see the Translator API, used in combination with the Language Detector API, in the Translator and Language Detector API playground.
Standardization effort
We're working to standardize the Translator API, to ensure cross-browser compatibility.
Our API proposal received community support and has moved to the W3C Web Incubator Community Group for further discussion. The Chrome team requested feedback from the W3C Technical Architecture Group and asked Mozilla and WebKit for their standards positions.
Start testing the Translator API now by joining the origin trial and share your feedback. Your input can directly impact how we build and implement future versions of this API, and all built-in AI APIs.
Install Translation Detection API on Chrome
- Go to chrome://flags/#language-detection-api.
- Select Enabled
- Go to chrome://flags/#translation-api.
- Select Enabled without language pack limit to try more language pairs.
- Click Relaunch or restart Chrome.
- Open a new tab, go to chrome://components.
- Find Chrome TranslateKit
- Click "Check for update" button to download the language model. The version number should update.
- (Optional) Open a new tab, go to chrome://on-device-translation-internals/
- (Optional) Install language pairs.
Posts
