Data publikacji: 8 maja 2025 r.
Udostępniaj swoje treści odbiorcom na całym świecie za pomocą interfejsu Translator API i interfejsu Language Detector API. Interfejs Language Detector API pozwala określić, w jakim języku jest wprowadzany tekst, a interfejs Translator API umożliwia tłumaczenie z wykrytego języka na inny język. Oba interfejsy API działają po stronie klienta z modelami AI wbudowanymi w Chrome, co oznacza, że są szybkie, bezpieczne i bezpłatne, ponieważ nie generują kosztów serwera.
| Interfejs API | Wyjaśnienie | Sieć | Rozszerzenia | Stan Chrome | Intencja |
|---|---|---|---|---|---|
| Translator API | MDN | Wyświetl | Zamiar wysłania | ||
| Language Detector API | MDN | Wyświetl | Zamiar wysłania |
Dowiedz się, jak 2 duże międzynarodowe firmy, Policybazaar i JioHotstar, korzystają z tych wbudowanych interfejsów API i jakie korzyści z nich czerpią.
Wielojęzyczna obsługa klienta Policybazaar
Policybazaar to największa platforma ubezpieczeniowa w Indiach, która ma ponad 97 milionów zarejestrowanych klientów. Indie charakteryzują się niesamowitą różnorodnością językową. W całym kraju mówi się w wielu językach i dialektach.
Aby wspierać tę różnorodność językową wśród klientów, firma Policybazaar wdrożyła interfejsy API Tłumacza i wykrywania języka na 2 sposoby: zapewniając pomoc w zakresie ubezpieczeń w dowolnym momencie oraz oferując artykuły z informacjami o rynku w preferowanym języku klienta.
Pomoc w zakresie ubezpieczeń dzięki Finova AI
Ubezpieczenie jest produktem z natury osobistym, a informacje wrażliwe stanowią podstawę konkretnych polis. Klienci Policybazaar często potrzebują wskazówek dotyczących wyboru planu lub tego, co on obejmuje. Firma Policybazaar zatrudnia pracowników, którzy mówią w wielu językach, ale potrzebowała rozwiązania, które działałoby w różnych strefach czasowych i po godzinach pracy. Dlatego firma Policybazaar stworzyła Finova AI, czyli dostosowaną pomoc w zakresie ubezpieczeń w preferowanym języku klienta.
„Interfejsy API wykrywania języka i tłumaczenia w Chrome pomogły nam usprawnić obsługę ubezpieczeń, ponieważ uwzględniają różnorodne potrzeby językowe naszych klientów. Dzięki temu użytkownicy mogą komunikować się w wybranym języku indyjskim bez zauważalnych opóźnień”.
– Rishabh Mehrotra, dyrektor ds. projektowania w jednostce biznesowej ubezpieczeń na życie w firmie Policybazaar
Zespół wybrał AI po stronie klienta, czyli wnioskowanie, które odbywa się w przeglądarce lub na urządzeniu użytkownika. AI po stronie klienta zapewnia minimalne opóźnienia i niższe koszty niż AI hostowana na serwerze lub bezserwerowa. Ze względu na szybkie tempo i dużą liczbę wiadomości w rozmowie w czasie rzeczywistym rozwiązanie oparte na serwerze byłoby kosztowne i czasochłonne.
Wbudowane funkcje AI w Chrome korzystają z modeli wbudowanych w przeglądarkę, więc wnioskowanie odbywa się na urządzeniu. To atrakcyjne rozwiązanie, które spełnia podstawowe wymagania.
// 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;
Tłumaczenie artykułów na potrzeby statystyk rynkowych
„Interfejs Translator API można było bardzo łatwo zintegrować z dotychczasowym kodem React. Wybraliśmy to rozwiązanie po stronie klienta, aby zapewnić szybkie tłumaczenie naszym klientom i pracownikom obsługi. Interfejs API przetłumaczył artykuł o długości 1000 znaków w ciągu 2 sekund”.
– Aman Soni, Tech Lead w Policybazaar
Pion ubezpieczeń na życie w Policybazaar udostępnia wiele artykułów, które informują klientów i pracowników obsługi klienta o warunkach rynkowych.
Język hindi jest powszechnie używany przez ich użytkowników, dlatego przetestowali interfejs Translator API do tłumaczenia na żądanie artykułów z języka angielskiego na hindi.
Aby dodać tłumaczenie do swojej witryny, użył tego skryptu:
// 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;
});
}
Dzięki modelowi i interfejsowi API dostarczanym przez Chrome klienci mogą niemal natychmiast tłumaczyć artykuły.
JioHotstar oferuje dynamiczne tłumaczenie napisów
JioHotstar, wiodąca platforma do przesyłania strumieniowego w Indiach, która oferuje szeroki wybór filmów, programów telewizyjnych, wydarzeń sportowych i treści oryginalnych w wielu językach, testuje interfejs Translator API, aby ulepszyć tłumaczenie napisów.
JioHotstar jest przeznaczony dla użytkowników z Indii, którzy wolą oglądać treści w swoim języku regionalnym. Ze względu na szeroki katalog treści dostępnych w JioHotstar trudno jest zaspokoić potrzeby wszystkich użytkowników w zakresie języków regionalnych, a tym samym poprawić ich konsumpcję treści.
Dzięki interfejsowi Translator API platforma ma dynamicznie tłumaczyć napisy w języku angielskim na preferowany język użytkownika lub na podstawie jego regionu geograficznego. Opcja dynamicznego tłumaczenia jest dostępna w menu wyboru języka, w którym automatycznie wykrywamy brakujące oryginalne napisy i uzupełniamy je w językach obsługiwanych przez Chrome. Poprawia to komfort korzystania z napisów i sprawia, że treści są dostępne dla większej liczby użytkowników.
Lista dostępnych języków dynamicznych jest generowana przez sprawdzenie przeglądarki pod kątem istniejących pakietów językowych na podstawie głównej listy dostosowanej do preferencji i lokalizacji geograficznej każdego użytkownika. Gdy użytkownik wybierze język, a odpowiedni pakiet językowy jest już pobrany w przeglądarce, przetłumaczony tekst pojawi się natychmiast. W przeciwnym razie pakiet zostanie najpierw pobrany, a potem rozpocznie się tłumaczenie.
Gdy użytkownik wybierze język i zobaczy, że tłumaczenie działa, będzie mieć pewność, że pakiet językowy został pobrany. Od tego momentu wszystkie treści z napisami będą wyświetlane w wybranym języku. Pomaga to wyeliminować niepewność użytkowników, którzy w przeciwnym razie mogliby się wahać, czy przeglądać treści, nie wiedząc, czy będą one dostępne w ich preferowanym języku.
Poniższy przykładowy kod inicjuje i konfiguruje translator.
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;
}
};
}
}
Następnie za pomocą interfejsu Translator API generują przetłumaczone napisy.
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');
Istnieje kilka dodatkowych funkcji, które aktualizują ostatecznie wyrenderowane napisy.
/* 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))
Sprawdzone metody
Chociaż te zastosowania interfejsów Translator API i Language Detector API są różne, istnieje wiele wspólnych sprawdzonych metod:
- Przeprowadzaj ocenę jakości przetłumaczonego tekstu, aby upewnić się, że zachowana jest gramatyka i kontekst. W razie potrzeby rozważ udostępnienie użytkownikom opcji przesyłania opinii na temat tłumaczenia.
- Wyświetlaj interfejs postępu, np. spinner, wczytywanie lub pasek postępu, aby wskazać, że aplikacja odpowiada. Na przykład firma Policybazaar użyła wskaźnika pisania w przypadku chatbota, aby pokazać, że przetwarza on dane wejściowe użytkownika.
Wnioski i rekomendacje
Czy tworzysz coś nowego za pomocą tych interfejsów API? Podziel się nim z nami na @ChromiumDev na X lub Chromium for Developers na LinkedIn.
Zasoby
- Rozpoczynanie korzystania z wbudowanych interfejsów API w Chrome
- Więcej informacji o interfejsie Language Detector API
- Więcej informacji o interfejsie Translator API
- Wspieranie blogerów: jak CyberAgent wdrożył wbudowaną AI, aby ulepszyć tworzenie treści
Podziękowania
Dziękujemy Rishabhowi Mehrotrze i Amanowi Soniemu z Policybazaar, Bhuvaneswaranowi Mohanowi i Ankeetowi Mainiemu z JioHotstar, Alexandrze Klepper, Thomasowi Steinerowi i Kenjiemu Baheux za pomoc w napisaniu i sprawdzeniu tego artykułu.