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

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() . Функция Translator 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);
}

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

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

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

Демо

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

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

По умолчанию 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 из-за сложности создания ответственного документа для каждого работника с целью проверки статуса политики разрешений.

Поделитесь отзывом

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

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