Translation with built-in AI

Thomas Steiner
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

Published: November 13, 2024

Use the Translator API in Chrome to translate text in the browser, using local AI models.

Your website may already offer website content in multiple languages, to make it accessible to a global audience. With the Translator API, users can contribute in their first language. For example, users can participate in support chats in their first language, and your site can translate it into the language your support agents use, before it leaves the user's device. This creates a smooth, fast, and inclusive experience for all users.

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.

Availability

While the selected target language is always known, in some situations the source language may be unknown, for example, with user-generated content. In 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.

Feature detection

To determine if the Translator API is supported, run the following feature detection snippet.

if ('translation' in self && 'createTranslator' in self.translation) {
  // 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. These packs are paired with the asynchronous canTranslate() function, which lets you determine if a language pair is supported.

The canTranslate() function requires an options parameter with two fields:

  • 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.

await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});
// 'readily'

The canTranslate() 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 download progress using the downloadprogress event:

translator.ondownloadprogress = progressEvent => {
  updateDownloadProgressBar(progressEvent.loaded, progressEvent.total);
};

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.translation.createTranslator({
  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 canTranslate() 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)

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.

Participate and share feedback

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.