Data di pubblicazione: 8 maggio 2025
Rendi i tuoi contenuti accessibili a un pubblico globale con l'API Translator e l'API Language Detector. Con l'API Language Detector puoi determinare la lingua utilizzata in un input e con l'API Translator puoi tradurre dalla lingua rilevata a un'altra lingua. Entrambe le API vengono eseguite lato client con modelli di AI integrati in Chrome, il che significa che sono veloci, sicure e senza costi da usare, in quanto non ci sono costi del server.
| API | Spiegazione | Web | Estensioni | Stato di Chrome | Intenzione |
|---|---|---|---|---|---|
| API Translator | MDN | Visualizza | Intenzione di spedizione | ||
| API Language Detector | MDN | Visualizza | Intenzione di spedizione |
Scopri come due grandi aziende internazionali, Policybazaar e JioHotstar, utilizzano e traggono vantaggio da queste API integrate.
Assistenza clienti multilingue di Policybazaar
Policybazaar è la più grande piattaforma assicurativa in India, con oltre 97 milioni di clienti registrati. L'India ha un'incredibile diversità linguistica, con numerose lingue e dialetti parlati in tutto il paese.
Per supportare questa diversità linguistica tra i suoi clienti, Policybazaar ha implementato le API Translator e Language Detector in due modi: fornendo assistenza assicurativa in qualsiasi momento e offrendo articoli con approfondimenti di mercato nella lingua preferita dei clienti.
Assistenza assicurativa con Finova AI
L'assicurazione è un prodotto intrinsecamente personale, con informazioni sensibili alla base di polizze specifiche. I clienti di Policybazaar spesso cercano indicazioni su come scegliere un piano o su cosa supporta il loro piano. Sebbene il personale parli molte lingue, Policybazaar aveva bisogno di una soluzione che funzionasse in tutti i fusi orari e al di fuori dell'orario di lavoro. Per questo motivo, Policybazaar ha creato Finova AI, un'assistenza assicurativa personalizzata nella lingua preferita del cliente.
"Le API Language Detector e Translator di Chrome hanno contribuito a rendere la nostra assistenza assicurativa più semplice, soddisfacendo le diverse esigenze linguistiche dei nostri clienti. Di conseguenza, gli utenti possono comunicare nella loro lingua indiana preferita, senza ritardi evidenti".
— Rishabh Mehrotra, Head of Design Life Insurance Business Unit di Policybazaar
Il team ha scelto l'AI lato client, ovvero l'inferenza che si verifica in un browser o sul dispositivo di un utente. L'AI lato client offre una latenza minima e un costo inferiore rispetto all'AI serverless o ospitata sul server. Dato il ritmo e il volume rapidi dei messaggi in una conversazione in tempo reale, una soluzione basata su server sarebbe costosa e richiederebbe molto tempo.
L'implementazione dell'AI integrata di Chrome offre modelli integrati nel browser, quindi l'inferenza viene eseguita sul dispositivo. È una soluzione convincente per soddisfare i requisiti principali.
// 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;
Traduzione di articoli per Market Insights
"L'API Translator è stata estremamente facile da integrare nel nostro codice React esistente. Abbiamo optato per questa soluzione lato client per garantire una traduzione rapida per i nostri clienti e agenti. L'API è stata in grado di tradurre un articolo di 1000 caratteri in due secondi."
—Aman Soni, Tech Lead di Policybazaar
La verticale aziendale di assicurazioni sulla vita di Policybazaar fornisce una vasta gamma di articoli per tenere informati i clienti e gli agenti dell'assistenza clienti sulle condizioni di mercato.
L'hindi è una lingua ampiamente parlata tra i suoi utenti, quindi ha testato l'API Translator per la traduzione on demand di articoli dall'inglese all'hindi.
Per aggiungere la traduzione al proprio sito web, ha utilizzato il seguente 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;
});
}
Con il modello e l'API forniti da Chrome, i clienti possono accedere alla traduzione quasi istantanea degli articoli.
JioHotstar offre la traduzione dinamica dei sottotitoli
JioHotstar, una delle principali piattaforme di streaming digitale in India che offre un'ampia gamma di film, programmi TV, sport e contenuti originali in più lingue, sta esplorando l'API Translator per migliorare la traduzione dei sottotitoli.
JioHotstar si rivolge agli utenti indiani che preferiscono consumare contenuti nella loro lingua regionale. Data l'ampiezza del catalogo di contenuti disponibile con JioHotstar, è difficile soddisfare le esigenze linguistiche regionali di tutti gli utenti, migliorando così il loro consumo di contenuti.
Con l'API Translator, la piattaforma mira a tradurre dinamicamente i sottotitoli in inglese nella lingua preferita dell'utente o in base alla sua regione geografica. L'opzione per la traduzione dinamica è disponibile nel menu di selezione della lingua, in cui rileviamo automaticamente i sottotitoli originali mancanti e li integriamo dalle lingue supportate da Chrome. In questo modo, l'esperienza utente dei sottotitoli codificati migliora e i contenuti diventano accessibili a un maggior numero di utenti.
L'elenco delle lingue dinamiche disponibili viene generato controllando la presenza di language pack nel browser, in base a un elenco principale personalizzato in base alle preferenze e alla posizione geografica di ogni utente. Quando un utente seleziona una lingua e il pacchetto della lingua corrispondente è già stato scaricato nel browser, il testo tradotto viene visualizzato immediatamente. In caso contrario, il pacchetto viene scaricato prima e poi inizia la traduzione.
Una volta selezionata una lingua e visualizzata la traduzione, l'utente può avere la certezza che il language pack è stato scaricato correttamente. Da quel momento in poi, tutti i contenuti con sottotitoli codificati potranno essere visualizzati nella lingua selezionata. In questo modo si elimina l'incertezza per gli utenti che altrimenti esiterebbero a sfogliare i contenuti, non sapendo se sarebbero disponibili nella loro lingua preferita.
Il seguente esempio di codice inizializza e configura il traduttore.
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;
}
};
}
}
Poi, utilizzano l'API Translator per generare i sottotitoli tradotti.
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');
Esistono alcune funzioni aggiuntive che aggiornano i sottotitoli codificati finali.
/* 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 practice
Sebbene questi utilizzi delle API Translator e Language Detector siano diversi, esistono molte best practice comuni:
- Esegui valutazioni della qualità del testo tradotto per assicurarti che la grammatica e il contesto siano preservati. Valuta la possibilità di fornire agli utenti un'opzione per fornire feedback sulla traduzione, se opportuno.
- Fornisci un'interfaccia utente di avanzamento, ad esempio un indicatore di caricamento o una barra di avanzamento, per indicare la reattività. Ad esempio, Policybazaar ha utilizzato un indicatore di digitazione per il chatbot per mostrare che stava elaborando l'input dell'utente.
Conclusioni e suggerimenti
Stai creando qualcosa di nuovo con queste API? Condividilo con noi su @ChromiumDev su X o Chromium for Developers su LinkedIn.
Risorse
- Iniziare a utilizzare le API integrate in Chrome
- Scopri di più sull'API Language Detector
- Scopri di più sull'API Translator
- Dare potere ai blogger: come CyberAgent ha implementato l'AI integrata per migliorare la creazione di contenuti
Ringraziamenti
Grazie a Rishabh Mehrotra e Aman Soni di Policybazaar, Bhuvaneswaran Mohan e Ankeet Maini di JioHotstar, Alexandra Klepper, Thomas Steiner e Kenji Baheux per aver contribuito alla stesura e alla revisione di questo articolo.