Veröffentlicht am 8. Mai 2025
Mit der Translator API und der Language Detector API können Sie Ihre Inhalte für ein globales Publikum zugänglich machen. Mit der Language Detector API können Sie ermitteln, welche Sprache in einer Eingabe verwendet wird, und mit der Translator API können Sie die erkannte Sprache in eine andere Sprache übersetzen. Beide APIs werden clientseitig mit in Chrome integrierten KI-Modellen ausgeführt. Das bedeutet, dass sie schnell, sicher und kostenlos sind, da keine Serverkosten anfallen.
| API | Erklärung | Web | Erweiterungen | Chrome-Status | Absicht |
|---|---|---|---|---|---|
| Translator API | MDN | Ansicht | Intent to Ship | ||
| Language Detector API | MDN | Ansicht | Intent to Ship |
Erfahren Sie, wie zwei große internationale Unternehmen, Policybazaar und JioHotstar, diese integrierten APIs nutzen und davon profitieren.
Mehrsprachiger Kundensupport von PolicyBazaar
Policybazaar ist die größte Versicherungsplattform in Indien mit über 97 Millionen registrierten Kunden. Indien hat eine unglaubliche sprachliche Vielfalt, mit zahlreichen Sprachen und Dialekten, die im ganzen Land gesprochen werden.
Um die sprachliche Vielfalt ihrer Kunden zu unterstützen, hat Policybazaar die Translator- und Language Detector-APIs auf zwei Arten implementiert: Sie bieten jederzeit Unterstützung bei Versicherungsfragen und Artikel mit Marktinformationen in der bevorzugten Sprache ihrer Kunden an.
Versicherungsunterstützung mit Finova AI
Versicherungen sind von Natur aus persönliche Produkte, bei denen sensible Informationen die Grundlage für bestimmte Richtlinien bilden. Die Kunden von Policybazaar benötigen oft Unterstützung bei der Auswahl eines Tarifs oder bei der Frage, was in ihrem Tarif enthalten ist. Policybazaar hat zwar Mitarbeiter, die viele Sprachen sprechen, benötigte aber eine Lösung, die über Zeitzonen hinweg und nach Feierabend funktioniert. Policybazaar hat daher Finova AI entwickelt, um Kunden in ihrer bevorzugten Sprache maßgeschneiderte Unterstützung bei Versicherungsfragen zu bieten.
„Die Language Detector- und Translator-APIs von Chrome haben dazu beigetragen, unseren Versicherungssupport reibungsloser zu gestalten, indem wir auf die unterschiedlichen sprachlichen Anforderungen unserer Kunden eingehen. So können Nutzer in ihrer bevorzugten indischen Sprache kommunizieren, ohne dass es zu spürbaren Verzögerungen kommt.“
– Rishabh Mehrotra, Head of Design Life Insurance Business Unit bei Policybazaar
Das Team entschied sich für clientseitige KI, bei der die Inferenz in einem Browser oder auf dem Gerät eines Nutzers erfolgt. Clientseitige KI bietet eine minimale Latenz und geringere Kosten als serverbasierte oder serverlose KI. Angesichts der Geschwindigkeit und des Umfangs von Nachrichten in einer Echtzeitunterhaltung wäre eine serverbasierte Lösung kostspielig und zeitaufwendig.
Bei der Implementierung von integrierter KI in Chrome werden Modelle im Browser erstellt, sodass die Inferenz auf dem Gerät erfolgt. Es ist eine überzeugende Lösung, um die primären Anforderungen zu erfüllen.
// 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;
Artikelübersetzung für Market Insights
„Die Translator API ließ sich extrem einfach in unseren vorhandenen React-Code einbinden. Wir haben uns für diese clientseitige Lösung entschieden, um eine schnelle Übersetzung für unsere Kunden und Kundenservicemitarbeiter zu gewährleisten. Die API konnte einen Artikel mit 1.000 Zeichen innerhalb von zwei Sekunden übersetzen.“
– Aman Soni, Tech Lead bei Policybazaar
Der Geschäftsbereich „Lebensversicherung“ von Policybazaar bietet eine Vielzahl von Artikeln, um Kunden und Kundenservicemitarbeiter über die Marktbedingungen auf dem Laufenden zu halten.
Hindi ist eine Sprache, die von vielen ihrer Nutzer gesprochen wird. Daher testeten sie die Translator API für die On-Demand-Übersetzung von Artikeln aus dem Englischen ins Hindi.
Um ihrer Website Übersetzungen hinzuzufügen, haben sie das folgende Script verwendet:
// 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;
});
}
Mit dem von Chrome bereitgestellten Modell und der API können Kunden Artikel nahezu sofort übersetzen lassen.
JioHotstar bietet dynamische Untertitelübersetzung
JioHotstar ist eine führende digitale Streamingplattform in Indien, die eine große Auswahl an Filmen, TV-Sendungen, Sport und Originalinhalten in mehreren Sprachen anbietet. Das Unternehmen nutzt die Translator API, um die Übersetzung von Untertiteln zu verbessern.
JioHotstar richtet sich an indische Nutzer, die Inhalte in ihrer regionalen Sprache bevorzugen. Angesichts des umfangreichen Inhaltskatalogs von JioHotstar ist es eine Herausforderung, den regionalen Sprachbedürfnissen aller Nutzer gerecht zu werden und so den Konsum von Inhalten zu verbessern.
Mit der Translator API sollen englische Untertitel dynamisch in die bevorzugte Sprache des Nutzers oder in die Sprache seiner geografischen Region übersetzt werden. Die Option für die dynamische Übersetzung wird im Menü für die Sprachauswahl angeboten. Dort erkennen wir automatisch fehlende Originaluntertitel und ergänzen sie mit den von Chrome unterstützten Sprachen. Dies verbessert die Nutzerfreundlichkeit von Untertiteln und macht die Inhalte für mehr Nutzer zugänglich.
Die Liste der verfügbaren dynamischen Sprachen wird generiert, indem der Browser anhand einer Hauptliste, die auf die Einstellungen und den geografischen Standort des jeweiligen Nutzers zugeschnitten ist, nach vorhandenen Sprachpaketen durchsucht wird. Wenn ein Nutzer eine Sprache auswählt und das entsprechende Sprachpaket bereits im Browser heruntergeladen wurde, wird der übersetzte Text sofort angezeigt. Andernfalls wird das Paket zuerst heruntergeladen und dann mit der Übersetzung begonnen.
Wenn der Nutzer eine Sprache auswählt und die Übersetzung erfolgt, kann er davon ausgehen, dass das Sprachpaket erfolgreich heruntergeladen wurde. Ab diesem Zeitpunkt können alle Inhalte mit Untertiteln in der ausgewählten Sprache angesehen werden. So können Nutzer, die sich sonst vielleicht nicht trauen, Inhalte aufzurufen, weil sie nicht sicher sind, ob diese in ihrer bevorzugten Sprache verfügbar sind, beruhigt sein.
Im folgenden Codebeispiel wird der Übersetzer initialisiert und eingerichtet.
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;
}
};
}
}
Anschließend verwenden sie die Translator API, um übersetzte Untertitel zu generieren.
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');
Es gibt einige zusätzliche Funktionen, die die endgültig gerenderten Untertitel aktualisieren.
/* 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))
Best Practices
Obwohl sich diese Verwendungszwecke der Translator API und der Language Detector API unterscheiden, gibt es viele gemeinsame Best Practices:
- Führen Sie Qualitätsprüfungen für übersetzten Text durch, um sicherzustellen, dass Grammatik und Kontext beibehalten werden. Erwägen Sie, Nutzern die Möglichkeit zu geben, Feedback zur Übersetzung zu geben, falls dies angemessen ist.
- Stellen Sie eine Fortschrittsanzeige wie einen Spinner, ein Ladesymbol oder eine Fortschrittsanzeige bereit, um die Reaktionsfähigkeit zu signalisieren. Policybazaar hat beispielsweise eine Tippanzeige für den Chatbot verwendet, um zu zeigen, dass die Eingabe des Nutzers verarbeitet wird.
Schlussfolgerungen und Empfehlungen
Entwickeln Sie etwas Neues mit diesen APIs? Teilen Sie uns Ihre Meinung auf @ChromiumDev auf X oder Chromium for Developers auf LinkedIn mit.
Ressourcen
- Integrierte APIs in Chrome verwenden
- Weitere Informationen zur Language Detector API
- Weitere Informationen zur Translator API
- Blogger unterstützen: Wie CyberAgent integrierte KI zur Verbesserung der Content-Erstellung eingesetzt hat
Danksagungen
Vielen Dank an Rishabh Mehrotra und Aman Soni von Policybazaar, Bhuvaneswaran Mohan und Ankeet Maini von JioHotstar, Alexandra Klepper, Thomas Steiner und Kenji Baheux für die Unterstützung beim Schreiben und Überprüfen dieses Artikels.