On-device translation with AI

Discover the experimental Translate API to empower global customer support.

Maud Nalpas

Kenji Baheux

Alexandra Klepper

Expanding your business into international markets can be expensive. More markets likely means more languages to support, and more languages can lead to challenges with interactive features and flows, such as after-sale support chat. If your company only has English-speaking support agents, non-native speakers may find it difficult to explain exactly what problem they've encountered.

How can we use AI to improve the experience for speakers of multiple languages, while minimizing risk and confirming if it's worth investing in support agents who speak additional languages?

Some users try to overcome the language barrier with their browser's built-in page translation feature or third-party tools. But the user experience is sub-par with interactive features, like our after-sale support chat.

For chat tools with integrated translation, it's important to minimize delays. By processing language on device, you can translate in real-time, before the user even submits the message.

That said, transparency is critical when bridging a language gap with automated tools. Remember, before the conversation starts, make it clear you've implemented AI tools which allow for this translation. This sets expectations and helps avoid awkward moments if the translation isn't perfect. Link out to a policy with more information.

We're working on an experimental Translate API with a model built into Chrome.

Demo chat

We've built a customer support chat which allows for users to type in their first language and receive real-time translation for the support agent.

Use the Translate API

Chrome exposes the Translate API with a window.model object. This object 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 your Translator object 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 a cloud-based model for translation, then switch to on-device once the model has downloaded.

Next steps

We want to hear from you. Share your feedback about this approach by opening an Issue on the Explainer and tell us what use cases most interest you. You can sign up for the early preview program to test this technology with local prototypes.

Your contribution can help us make AI a powerful and practical tool for everyone.