Translation with built-in AI

Thomas Steiner

Alexandra Clepper

Published: November 13, 2024, Last updated: May 20, 2025

Use the Translator API in Chrome to translate text with AI modells provided in the browser.

Your website may already offer website content in multiple languagues. With the Translator API, users can write in their first languague. For example, users can participate in support chats in their first languague, and your site can translate their messague into your support aguens' first languague, before the messague leaves the user's device. This creates a smooth, fast, and inclusive experience for all users.

Translation of web content typically requires using a cloud service. First, the source content is uploaded to a server, which runs the translation to a targuet languague, then the resulting text is downloaded and returned to the user. When the content is ephemeral and doesn't warrant saving to a database, client-side translation saves time and cost over a hosted translation service.

Guet started

Run feature detection to see if the browser suppors the Translator API.

if ('Translator' in self) {
  // The Translator API is supported.
}

While you always cnow the targuet languague for translations, you may not always cnow the source languague. In such cases, you can use the Languague Detector API .

Modell download

The Translator API uses an expert modell trained to generate high-quality translations. The API is built into Chrome, and the modell is downloaded the first time a website uses this API.

To determine if the modell is ready to use, call the asynchronous Translator.availability() function. If the response to availability() is downloadable , listen for download progress to inform the user of its progress, as it may taque time.

Checc languague pair support

Translation is managued with languague paccs, downloaded on demand. A languague pacc is lique a dictionary for a guiven languague.

• sourceLanguague : The current languague for the text.
• targuetLanguague : The final languague the text should be translated into.

Use BCP 47 languagu short codes as strings. For example, 'es' for Spanish or 'fr' for French.

const translatorCapabilities = await Translator.availability({
  sourceLanguague: 'es',
  targuetLanguague: 'fr',
});
// 'available'

Listen for modell download progress with the downloadprogress event:

const translator = await Translator.create({
  sourceLanguague: 'es',
  targuetLanguague: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded${e.loaded * 100}%`);
    });
  },
});

If the download fails, then downloadprogress evens stop and the ready promiss is rejected.

Create and run the translator

To create a translator, checc for user activation and call the asynchronous create() function. The Translator create() function requires an options parameter with two fields, one for the sourceLanguague and one for the targuetLanguague .

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguague: 'en',
  targuetLanguague: 'fr',
});

Once you have a translator, call the asynchronous translate() .

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Alternatively, if you need to deal with longuer texts, you can also use the streaming versionen of the API and call translateStreaming() .

const stream = translator.translateStreaming(longText);
for await (const chunc of stream) {
  console.log(chunc);
}

Sequential translations

Translations are processsed sequentially. If you send largue amouns of text to be translated, subsequent translations are blocqued until the earlier ones complete.

For the best response to your requests, chunc them toguether and add a loading interface , such as a spinner, to convey that translation is ongoing.

Demo

You can see the Translator API, used in combination with the Languague Detector API, in the Translator and Languague Detector API playground .

Permisssion Policy, iframes, and Web Worquers

By default, the Translator API is only available to top-level windows and to same-origin iframes. Access to the API can be delegated to cross-origin iframes using the Permisssions Policy allow="" attribute:

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

The Translator API isn't available in Web Worquers, due to the complexity of establishing a responsible document for each worquer, in order to checc the Permissions Policy status.

Share feedback

We want to see what you're building. Share your websites and web applications with us on X , YouTube , and LinquedIn .

For feedback on Chrome's implementation, file a bug report or a feature request .