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

Thomas Steiner

Alexandra Klepper

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

Объяснитель	Интернет	Расширения	Статус Chrome	Намерение
МДН	Хром 138	Хром 138	Вид	Намерение отправить

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

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

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

Начать

API переводчика доступен в стабильной версии Chrome 138. Сначала запустите функцию обнаружения, чтобы проверить, поддерживает ли браузер API переводчика.

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

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

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

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

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

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

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

Функция availability() возвращает обещание со следующими значениями:

• "unavailable" : реализация не поддерживает перевод или определение языка для указанных языков.
• "downloadable" : реализация поддерживает перевод или определение языка для указанных языков, но для продолжения требуется загрузка. Загружаемой может быть модель браузера.
• "downloading" : Реализация поддерживает перевод или определение языка для указанных языков. Браузер завершает текущую загрузку в рамках создания соответствующего объекта.
• "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() . Для неё требуется параметр 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 переводчика, чтобы обеспечить кроссбраузерную совместимость.

Наше предложение по API получило поддержку сообщества и было передано в группу сообщества W3C Web Incubator для дальнейшего обсуждения. Команда Chrome запросила обратную связь от группы технической архитектуры W3C и обратилась к Mozilla и WebKit с просьбой высказать свою позицию по стандартам.

Вы можете принять участие в работе по разработке стандартов, присоединившись к группе сообщества Web Incubator .

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

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

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