Перевод со встроенным ИИ

Thomas Steiner

Alexandra Klepper

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

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

Возможно, ваш сайт уже предлагает контент на нескольких языках. С помощью API переводчика пользователи могут писать на своем родном языке. Например, пользователи могут участвовать в чатах поддержки на своем родном языке, и ваш сайт сможет перевести их сообщение на родной язык ваших агентов поддержки, прежде чем сообщение покинет устройство пользователя. Это обеспечивает удобный, быстрый и инклюзивный пользовательский опыт для всех.

Перевод веб-контента обычно требует использования облачного сервиса. Сначала исходный контент загружается на сервер, который выполняет перевод на целевой язык, затем полученный текст загружается и возвращается пользователю. Когда контент является временным и не требует сохранения в базе данных, перевод на стороне клиента экономит время и средства по сравнению с использованием облачного сервиса перевода.

Начать

API для определения языка и перевода работают в Chrome на настольных компьютерах. На мобильных устройствах эти API не работают.

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

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

While you always know the target language for translations, you may not always know the source language. In such cases, you can use the Language Detector API .

Загрузка модели

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

Чтобы определить, готова ли модель к использованию, вызовите асинхронную функцию Translator.availability() . Если ответ на вызов availability() указывает на downloadable , отслеживайте ход загрузки, чтобы информировать пользователя о её выполнении, поскольку это может занять некоторое время.

Проверить поддержку языковых пар

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 Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

Listen for model download progress with the downloadprogress event:

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

If the download fails, then downloadprogress events stop and the ready promise is rejected.

Создайте и запустите переводчик.

Для создания переводчика проверьте активацию пользователя и вызовите асинхронную функцию create() . Функция create() для переводчика требует параметр options с двумя полями: одним для sourceLanguage и одним для targetLanguage .

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: '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 longer texts, you can also use the streaming version of the API and call translateStreaming() .

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

Последовательные переводы

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 response to your requests, chunk them together and add a loading interface , such as a spinner, to convey that translation is ongoing.

Поддерживаемые языки

The following languages are supported by Chrome's implementation of the Translator API.

Демо

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

Политика разрешений, iframe и веб-воркеры

По умолчанию API переводчика доступен только окнам верхнего уровня и iframe-элементам того же источника. Доступ к API можно делегировать iframe-элементам другого источника с помощью атрибута allow="" в политике разрешений :

<!--
  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 Workers, due to the complexity of establishing a responsible document for each worker, in order to check the Permissions Policy status.

Поделитесь своим мнением

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

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