Gepubliceerd: 8 mei 2025
Maak je content toegankelijk voor een wereldwijd publiek met de Translator API en de Language Detector API . Met de Language Detector API kun je bepalen welke taal er in een invoer wordt gebruikt en met de Translator API kun je vanuit die gedetecteerde taal naar een andere taal vertalen. Beide API's draaien client-side met AI-modellen die in Chrome zijn ingebouwd , wat betekent dat het snel, veilig en gratis te gebruiken is, omdat er geen serverkosten zijn.
API | Uitlegger | Web | Uitbreidingen | Chrome-status | Intentie |
---|---|---|---|---|---|
Vertaler-API | MDN | Weergave | Intentie tot verzending | ||
Taaldetector API | MDN | Weergave | Intentie tot verzending |
Ontdek hoe twee grote internationale bedrijven, Policybazaar en JioHotstar, gebruikmaken van deze ingebouwde API's en er profijt van hebben.
De meertalige klantenondersteuning van Policybazaar
Policybazaar is het grootste verzekeringsplatform in India, met meer dan 97 miljoen geregistreerde klanten. India kent een ongelooflijke taaldiversiteit , met talloze talen en dialecten die in het hele land worden gesproken.
Om de taaldiversiteit onder hun klanten te ondersteunen, heeft Policybazaar de Translator- en Language Detector-API's op twee manieren geïmplementeerd: door op elk gewenst moment verzekeringsassistentie te bieden en door artikelen met marktinzichten in de voorkeurstaal van hun klanten aan te bieden.
Verzekeringshulp met Finova AI
Verzekeringen zijn een per definitie persoonlijk product, met gevoelige informatie als basis voor specifieke polissen. Klanten van Policybazaar zoeken vaak advies over hoe ze een polis kiezen of wat hun polis ondersteunt. Hoewel ze medewerkers hebben die meerdere talen spreken, had Policybazaar een oplossing nodig die over tijdzones en buiten kantooruren zou werken. Daarom ontwikkelde Policybazaar Finova AI, verzekeringshulp op maat in de voorkeurstaal van de klant.
De taaldetector- en vertaal-API's van Chrome hebben onze verzekeringshulpverlening soepeler gemaakt door in te spelen op de diverse taalbehoeften van onze klanten. Hierdoor kunnen gebruikers in hun favoriete Indische taal communiceren, zonder merkbare vertragingen.
—Rishabh Mehrotra, hoofd van de Design Life Insurance Business Unit bij Policybazaar
Het team koos voor client-side AI, een vorm van inferentie die plaatsvindt in een browser of op het apparaat van een gebruiker. Client-side AI biedt minimale latentie en lagere kosten dan server-hosted of serverloze AI. Gezien de hoge snelheid en het volume van berichten in een realtime conversatie, zou een servergebaseerde oplossing kostbaar en tijdrovend zijn.
Chrome's implementatie van ingebouwde AI biedt modellen die in de browser zijn ingebouwd, zodat de inferentie op het apparaat zelf wordt uitgevoerd. Het is een aantrekkelijke oplossing om aan de primaire vereisten te voldoen.
// 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;
Artikelvertaling voor marktinzichten
De Translator API was zeer eenvoudig te integreren in onze bestaande React-code. We kozen voor deze client-side oplossing om snelle vertalingen voor onze klanten en agenten te garanderen. De API kon een artikel van 1000 tekens binnen twee seconden vertalen.
—Aman Soni, technisch leider bij Policybazaar
De levensverzekeringstak van Policybazaar biedt een schat aan artikelen om klanten en klantenservicemedewerkers op de hoogte te houden van de marktomstandigheden.
Hindi is een taal die veel door hun gebruikers wordt gesproken. Daarom hebben ze de Translator API getest voor on-demand vertalingen van artikelen van het Engels naar het Hindi.
Om vertaling aan hun website toe te voegen, gebruikten ze het volgende script:
// 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;
});
}
Met het model en de API van Chrome hebben klanten vrijwel direct toegang tot vertalingen van artikelen.
JioHotstar biedt dynamische ondertitelvertaling
JioHotstar, een toonaangevend digitaal streamingplatform in India dat een breed aanbod aan films, tv-programma's, sport en originele content in meerdere talen aanbiedt, onderzoekt de Translator API om de vertaling van ondertitels te verbeteren.
JioHotstar richt zich op Indiase gebruikers die graag content in hun eigen taal consumeren. Gezien de breedte van de contentcatalogus die JioHotstar biedt, is het een uitdaging om te voldoen aan de behoeften van alle gebruikers in hun eigen taal en zo hun contentconsumptie te verbeteren.
Met de Translator API wil het platform Engelse ondertitels dynamisch vertalen naar de voorkeurstaal van de gebruiker of op basis van zijn of haar geografische regio. De optie voor dynamische vertaling wordt geboden in het taalkeuzemenu, waar we automatisch ontbrekende originele ondertitels detecteren en deze aanvullen vanuit door Chrome ondersteunde talen. Dit verbetert de gebruikerservaring van ondertitels en maakt de content toegankelijk voor meer gebruikers.
De lijst met beschikbare dynamische talen wordt gegenereerd door de browser te controleren op bestaande taalpakketten, op basis van een hoofdlijst die is afgestemd op de voorkeuren en geografische locatie van elke gebruiker. Wanneer een gebruiker een taal selecteert en het bijbehorende taalpakket al in de browser is gedownload, verschijnt de vertaalde tekst direct. Anders wordt eerst het pakket gedownload en begint de vertaling.
Zodra de gebruiker een taal selecteert en de vertaling ziet, kan hij erop vertrouwen dat het taalpakket succesvol is gedownload. Vanaf dat moment kan alle ondertitelde content in de geselecteerde taal worden bekeken. Dit helpt onzekerheid weg te nemen bij gebruikers die anders zouden aarzelen om content te bekijken, omdat ze niet zeker weten of deze wel in hun voorkeurstaal beschikbaar is.
Het volgende codevoorbeeld initialiseert en stelt de vertaler in.
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;
}
};
}
}
Vervolgens gebruiken ze de Translator API om vertaalde ondertitels te genereren.
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');
Er zijn een aantal extra functies die de uiteindelijke ondertiteling bijwerken.
/* 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))
Beste praktijken
Hoewel deze toepassingen van de Translator- en Language Detector-API's verschillend zijn, zijn er veel gemeenschappelijke best practices:
- Voer kwaliteitsbeoordelingen uit voor vertaalde tekst om te garanderen dat grammatica en context behouden blijven. Overweeg om gebruikers de mogelijkheid te bieden om feedback te geven op de vertaling, indien van toepassing.
- Bied een voortgangsinterface aan, zoals een spinner, loader of voortgangsbalk, om de responsiviteit aan te geven. Zo gebruikte Policybazaar een typindicator voor de chatbot om aan te geven dat deze de invoer van de gebruiker verwerkte.
Conclusies en aanbevelingen
Bouw je iets nieuws met deze API's? Deel het met ons via @ChromiumDev op X of Chromium for Developers op LinkedIn .
Bronnen
- Begin met het gebruiken van ingebouwde API's op Chrome
- Meer informatie over de Language Detector API
- Meer informatie over Translator API
- Bloggers meer mogelijkheden geven: hoe CyberAgent ingebouwde AI inzet om de contentcreatie te verbeteren
Dankbetuigingen
Met dank aan Rishabh Mehrotra en Aman Soni van Policybazaar, Bhuvaneswaran Mohan en Ankeet Maini van JioHotstar, Alexandra Klepper , Thomas Steiner en Kenji Baheux voor hun hulp bij het schrijven en beoordelen van dit artikel.