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

Thomas Steiner

Alexandra Klepper

Опубликовано: 13 ноября 2024 г., Последнее обновление: 20 мая 2025 г.

Используйте API переводчика в Chrome для перевода текста с помощью моделей искусственного интеллекта, предоставляемых браузером.

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

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

Начать

Запустите проверку функциональности, чтобы узнать, поддерживает ли браузер API переводчика.

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

Хотя целевой язык для перевода всегда известен, исходный язык может быть неизвестен. В таких случаях можно использовать API определения языка .

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

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

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

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

Перевод осуществляется с помощью языковых пакетов, загружаемых по запросу. Языковой пакет — это как словарь для данного языка.

• sourceLanguage : Текущий язык текста.
• targetLanguage : Конечный язык, на который должен быть переведен текст.

Используйте короткие коды языков BCP 47 в виде строк. Например, 'es' для испанского или 'fr' для французского.

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

Отслеживайте ход загрузки модели с помощью события downloadprogress :

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

Если загрузка не удалась, события downloadprogress прекращаются, и обещание ready отклоняется.

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

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

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

После того, как у вас появится переводчик, вызовите асинхронную функцию translate() .

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

В качестве альтернативы, если вам необходимо работать с более длинными текстами, вы также можете использовать потоковую версию API и вызвать translateStreaming() .

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

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

Переводы обрабатываются последовательно. Если вы отправляете на перевод большие объемы текста, последующие переводы блокируются до завершения предыдущих.

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

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

В Chrome API переводчика поддерживаются следующие языки.

Демо

Вы можете увидеть API переводчика, используемый в сочетании с API определения языка, в интерактивной среде API переводчика и определения языка .

Политика разрешений, 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>

API переводчика недоступен в Web Workers из-за сложности создания ответственного документа для каждого Worker, необходимого для проверки статуса политики разрешений.

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

Мы хотим увидеть, что вы создаёте. Делитесь с нами своими веб-сайтами и веб-приложениями на X , YouTube и LinkedIn .

Чтобы оставить отзыв о реализации Chrome, отправьте сообщение об ошибке или запрос на добавление новой функции .