Опубликовано: 8 мая 2025 г.
Сделайте свой контент доступным для глобальной аудитории с помощью API переводчика и API определения языка . С помощью API определения языка вы можете определить, какой язык используется во входных данных, а с помощью API переводчика — перевести с определенного языка на другой. Оба API работают на стороне клиента с использованием встроенных в Chrome моделей искусственного интеллекта , что означает их быстроту, безопасность и бесплатность, поскольку не требуют затрат на сервер.
| API | Объяснитель | Интернет | Расширения | Статус Chrome | Намерение |
|---|---|---|---|---|---|
| API переводчика | МДН |  Хром 138 | Хром 138 | Вид | Намерение отправить |
| API детектора языка | МДН | Хром 138 | Хром 138 | Вид | Намерение отправить |
Узнайте, как две крупные международные компании, Policybazaar и JioHotstar, используют и извлекают выгоду из этих встроенных API.
Многоязычная служба поддержки клиентов Policybazaar
Policybazaar — крупнейшая страховая платформа в Индии с более чем 97 миллионами зарегистрированных клиентов. Индия отличается невероятным языковым разнообразием : по всей стране говорят на множестве языков и диалектов.
Чтобы поддержать языковое разнообразие среди своих клиентов, Policybazaar реализовал API-интерфейсы Translator и Language Detector двумя способами: предоставляя помощь по вопросам страхования в любое время и предлагая статьи с аналитикой рынка на предпочитаемом клиентом языке.
Помощь в страховании с Finova AI
Страхование — это по своей сути личный продукт, в основе которого лежит конфиденциальная информация. Клиенты Policybazaar часто обращаются за советом о том, как выбрать план или что он включает. Несмотря на то, что сотрудники Policybazaar говорят на многих языках, компании требовалось решение, которое работало бы в разных часовых поясах и в нерабочее время. Поэтому Policybazaar разработала Finova AI — систему помощи со страховыми вопросами на предпочитаемом клиентом языке.
API-интерфейсы Chrome для определения языка и переводчика помогли нам сделать помощь в страховании более удобной, учитывая разнообразные языковые потребности наших клиентов. Благодаря этому пользователи могут общаться на предпочитаемом ими индийском языке без заметных задержек.
— Ришаб Мехротра, руководитель отдела страхования жизни в Policybazaar
Команда выбрала клиентский ИИ, то есть ИИ, вывод которого происходит в браузере или на устройстве пользователя. Клиентский ИИ обеспечивает минимальную задержку и более низкую стоимость, чем серверный или бессерверный ИИ. Учитывая высокую скорость и объём сообщений в режиме реального времени, серверное решение было бы дорогостоящим и трудоёмким.
Реализация встроенного ИИ в Chrome предлагает модели, встроенные в браузер, поэтому вывод выполняется на устройстве. Это убедительное решение для удовлетворения основных требований.
// Language Detector and Translator APIs implemented with React
import { useRef } from "react";
const useService = () => {
const languageModel = useRef(null);
const translatorCapabilitiesModel = useRef(null);
const loadAllModels = async () => {
if (window?.LanguageDetector) {
languageModel.current = await window.LanguageDetector.create().catch(() => null);
}
}
// Detect what language the customer is writing
const detectLanguage = async (message) => {
if (!languageModel.current) return "";
try {
const [result] = await languageModel.current.detect(message);
const { detectedLanguage, confidence } = result || {};
return confidence * 100 > 50 ? detectedLanguage : "";
} catch (err) {
console.error(err);
return "";
}
};
// Translate messages to and from the detected language and English
const translateMessage = async (message, detectedLanguage, targetLanguage = 'en') => {
try {
const modelAvailability = await window.Translator.availability({ sourceLanguage: detectedLanguage, targetLanguage });
if (!['available', 'downloadable'].includes(modelAvailability)) {
return message;
}
const translator = await window.Translator.create({ sourceLanguage: detectedLanguage, targetLanguage });
const translatedMessage = await translator.translate(message);
return translatedMessage;
} catch (error) {
return message;
}
}
return { detectLanguage, translateMessage, loadAllModels };
}
export default useService;
Перевод статьи для понимания рынка
«API переводчика было невероятно легко интегрировать в наш существующий код React. Мы выбрали это клиентское решение, чтобы обеспечить быстрый перевод для наших клиентов и агентов. API смог перевести статью объёмом 1000 символов за две секунды».
— Аман Сони, технический руководитель Policybazaar
Раздел страхования жизни Policybazaar предлагает большой выбор статей, информирующих клиентов и агентов службы поддержки клиентов о состоянии рынка.
Хинди — язык, на котором широко говорят пользователи, поэтому они запустили пилотный проект Translator API для перевода статей с английского на хинди по запросу.
Чтобы добавить перевод на свой сайт, они использовали следующий скрипт:
// Initialize the translator, setting source and target languages
var translator = null;
var translatorAvailable = false;
var languageOptionsData = { name: "Hindi", code: "hi" };
var IGNORED_TEXT_NODES = ['RSI', 'NAV'];
function checkForLanguageOptions() {
if (window.Translator) {
translatorAvailable = true;
return window.Translator.create({
sourceLanguage: 'en',
targetLanguage: languageOptionsData.code
}).then(function (createdTranslator) {
translator = createdTranslator;
});
} else {
translatorAvailable = false;
return Promise.resolve();
}
}
/**
* Translate the article content using the Translator API.
* @param {HTMLElement} container - element that holds the article content.
* @return {Promise<string>} A promise that resolves to the container's innerHTML after translation.
*/
function translateArticle(container) {
if (!translatorAvailable) { return Promise.resolve(''); }
var textNodes = getAllTextNodes(container);
var promiseChain = Promise.resolve();
textNodes.forEach(function (element) {
if (IGNORED_TEXT_NODES.indexOf(element.nodeValue) !== -1) return;
var message = element.nodeValue;
promiseChain = promiseChain.then(function () {
return translator.translate(message).then(function (translated) {
element.nodeValue = translated;
}).catch(function (error) {
console.error('Translation error:', error);
});
});
});
return promiseChain.then(function () {
return container.innerHTML;
});
}
Благодаря модели и API, предоставляемым Chrome, клиенты могут получить доступ к практически мгновенному переводу статей.
JioHotstar предлагает динамический перевод субтитров
JioHotstar, ведущая цифровая стриминговая платформа в Индии, предлагающая широкий выбор фильмов, телешоу, спортивных состязаний и оригинального контента на нескольких языках, изучает возможности Translator API для улучшения перевода субтитров.
JioHotstar ориентирован на индийских пользователей, которые предпочитают контент на родном языке. Учитывая широту каталога контента, доступного в JioHotstar, удовлетворить потребности всех пользователей на родном языке, тем самым улучшая их потребление, — непростая задача.
С помощью API переводчика платформа динамически переводит английские субтитры на предпочитаемый пользователем язык или в зависимости от его географического региона. Функция динамического перевода доступна в меню выбора языка, где мы автоматически обнаруживаем отсутствующие оригинальные субтитры и дополняем их языками, поддерживаемыми Chrome. Это улучшает пользовательский опыт использования субтитров и делает контент доступным для большего числа пользователей.
Список доступных динамических языков формируется путём проверки браузера на наличие языковых пакетов на основе общего списка, составленного с учётом предпочтений и географического положения каждого пользователя. Когда пользователь выбирает язык, а соответствующий языковой пакет уже загружен в браузер, переведённый текст отображается немедленно. В противном случае сначала загружается пакет, а затем начинается перевод.
Как только пользователь выбирает язык и видит, что происходит перевод, он может быть уверен, что языковой пакет успешно загружен. С этого момента любой контент с субтитрами можно просматривать на выбранном языке. Это помогает устранить неопределенность для пользователей, которые в противном случае не решались бы просматривать контент, не зная, доступен ли он на предпочитаемом ими языке.
Следующий пример кода инициализирует и настраивает транслятор.
class SubTitleTranslator {
// Cache translator instances based on source-target language pair, so that we don't create this often for multiple contents
#translatorMap = {};
// Get or create a translator for the language pair
async #createTranslator(sourceLanguage, targetLanguage) {
const key = `${sourceLanguage}-${targetLanguage}`;
const translator = this.#translatorMap[key];
// Check if a translator already exists for a language pair in the map
if (translator) {
return translator;
}
// Check if translation is available
const isAvailable =
(await Translator.availability({ sourceLanguage, targetLanguage })) ===
"available";
if (isAvailable) {
// If available, create a new translator and cache it
this.#translatorMap[key] = await Translator.create({
sourceLanguage,
targetLanguage,
});
return this.#translatorMap[key];
}
return null;
}
// Translate text
async #translateText(text, sourceLanguage, targetLanguage) {
const translator = await this.#createTranslator(
sourceLanguage,
targetLanguage
);
// Returns the given input text if translator is unavailable
if (!translator) {
return text;
}
return await translator.translate(text);
}
// Public method to get a reusable translation function for a specific language pair.
getTranslatorFor(sourceLanguage, targetLanguage) {
return async (text) => {
try {
return this.#translateText(text, sourceLanguage, targetLanguage);
} catch {
return text;
}
};
}
}
Затем они используют API переводчика для генерации переведенных субтитров.
const translatorFactory = new SubTitleTranslator();
/* Accept English input and translate to Tamil.*/
const translateToTamil = translatorFactory.getTranslatorFor('en','ta');
/* Accept English text as input and translate it to Japanese. */
const translateToJapanese = translatorFactory.getTranslatorFor('en','ja');
/* Accept English input and returns English, as `JTA` is not a valid language code. */
const translateToUnknownLanguage = translatorFactory.getTranslatorFor('en','jta');
Есть несколько дополнительных функций, которые обновляют финальные отрисованные субтитры.
/* updateSubtitle is the internal function that updates the rendered subtitle. */
translateToTamil('hi').then(result => updateSubtitle(result))
translateToJapanese('hi').then(result => updateSubtitle(result))
translateToUnknownLanguage('hi').then(result => updateSubtitle(result))
Лучшие практики
Хотя применение API переводчика и определителя языка различается, существует множество общих рекомендаций:
- Проводите оценку качества переведённого текста, чтобы убедиться в сохранении грамматики и контекста. Рассмотрите возможность предоставить пользователям возможность оставлять отзывы о переводе, если это необходимо.
- Предоставьте пользовательский интерфейс для отображения хода выполнения, например, индикатор загрузки, индикатор выполнения или индикатор скорости отклика. Например, Policybazaar использовал индикатор ввода текста, чтобы чат-бот показывал, что обрабатывает данные пользователя.
Выводы и рекомендации
Создаёте что-то новое с помощью этих API? Поделитесь этим с нами на @ChromiumDev в X или на Chromium for Developers в LinkedIn .
Ресурсы
- Начните использовать встроенные API в Chrome
- Узнайте больше об API детектора языка
- Узнайте больше об API переводчика
- Расширение возможностей блогеров: как CyberAgent применил встроенный ИИ для улучшения процесса создания контента
Благодарности
Благодарим Ришаба Мехротру и Амана Сони из Policybazaar, Бхуванесварана Мохана и Анкита Майни из JioHotstar, Александру Клеппер , Томаса Штайнера и Кенджи Бахе за помощь в написании и рецензировании этой статьи.