Cette page a été traduite par l'API Cloud Translation.

Comment Policybazaar et JioHotstar utilisent les API Translator et Language Detector pour créer des expériences multilingues

Swetha Gopalakrishnan

Saurabh Rajpal

Publié le : 8 mai 2025

Rendez votre contenu accessible à une audience mondiale grâce à l'API Translator et à l'API Language Detector. L'API Language Detector vous permet de déterminer la langue utilisée dans une entrée, et l'API Translator vous permet de traduire cette langue détectée dans une autre langue. Les deux API s'exécutent côté client avec des modèles d'IA intégrés à Chrome. Elles sont donc rapides, sécurisées et sans frais, car il n'y a pas de frais de serveur.

API	Explication	Web	Extensions	État de Chrome	Intent
API Translator	MDN	Chrome 138	Chrome 138	Afficher	Intention d'expédier
API Language Detector	MDN	Chrome 138	Chrome 138	Afficher	Intention d'expédier

Découvrez comment deux grandes entreprises internationales, Policybazaar et JioHotstar, utilisent ces API intégrées et en tirent parti.

Assistance client multilingue de Policybazaar

Policybazaar est la plus grande plate-forme d'assurance en Inde, avec plus de 97 millions de clients enregistrés. L'Inde possède une incroyable diversité linguistique, avec de nombreuses langues et dialectes parlés dans tout le pays.

Pour répondre à cette diversité linguistique, Policybazaar a implémenté les API Translator et Language Detector de deux manières : en fournissant une assistance en assurance à tout moment et en proposant des articles contenant des informations sur le marché dans la langue de prédilection de ses clients.

Assistance pour les assurances avec Finova AI

L'assurance est un produit intrinsèquement personnel, dont les contrats spécifiques reposent sur des informations sensibles. Les clients de Policybazaar demandent souvent des conseils sur le choix d'un forfait ou sur ce que leur forfait prend en charge. Bien que son personnel parle de nombreuses langues, Policybazaar avait besoin d'une solution qui fonctionne dans tous les fuseaux horaires et en dehors des heures de bureau. Policybazaar a donc créé Finova AI, une assistance d'assurance personnalisée dans la langue de son choix.

Les utilisateurs peuvent discuter avec le chatbot Finova dans leur langue maternelle.

"Les API Language Detector et Translator de Chrome nous ont aidés à rendre notre assistance en matière d'assurance plus fluide en répondant aux divers besoins linguistiques de nos clients. Les utilisateurs peuvent ainsi communiquer dans la langue indienne de leur choix, sans délai notable."

— Rishabh Mehrotra, responsable de la conception de l'unité commerciale d'assurance-vie chez Policybazaar

L'équipe a choisi l'IA côté client, qui est une inférence qui se produit dans un navigateur ou sur l'appareil d'un utilisateur. L'IA côté client offre une latence minimale et un coût inférieur à l'IA hébergée sur un serveur ou sans serveur. Compte tenu du rythme et du volume rapides des messages dans une conversation en temps réel, une solution basée sur un serveur serait coûteuse et prendrait du temps.

L'implémentation de l'IA intégrée de Chrome propose des modèles intégrés au navigateur, de sorte que l'inférence est effectuée sur l'appareil. Il s'agit d'une solution intéressante pour répondre aux exigences principales.

// 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;

Traduction d'articles pour les insights sur le marché

"L'API Translator a été extrêmement facile à intégrer à notre code React existant. Nous avons opté pour cette solution côté client afin de garantir une traduction rapide à nos clients et agents. L'API a pu traduire un article de 1 000 caractères en deux secondes."

— Aman Soni, responsable technique chez Policybazaar

La branche Assurance vie de Policybazaar propose de nombreux articles pour tenir les clients et les agents du service client informés des conditions du marché.

L'hindi étant une langue largement parlée par leurs utilisateurs, ils ont testé l'API Translator pour la traduction à la demande d'articles de l'anglais vers l'hindi.

Policybazaar propose une traduction rapide et fluide entre l'anglais et l'hindi.

Pour ajouter la traduction à leur site Web, ils ont utilisé le script suivant :

// 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;
  });
}

Grâce au modèle et à l'API fournis par Chrome, les clients peuvent accéder à la traduction quasi instantanée des articles.

JioHotstar propose la traduction dynamique des sous-titres

JioHotstar, l'une des principales plates-formes de streaming numérique en Inde, qui propose un large éventail de films, de séries TV, de contenus sportifs et originaux dans plusieurs langues, explore l'API Translator pour améliorer la traduction des sous-titres.

JioHotstar s'adresse aux utilisateurs indiens qui préfèrent consommer des contenus dans leur langue régionale. Étant donné l'étendue du catalogue de contenus disponible sur JioHotstar, il est difficile de répondre aux besoins linguistiques régionaux de tous les utilisateurs et d'améliorer ainsi leur consommation de contenus.

Grâce à l'API Translator, la plate-forme vise à traduire dynamiquement les sous-titres en anglais dans la langue de l'utilisateur ou en fonction de sa région géographique. L'option de traduction dynamique est proposée dans le menu de sélection de la langue, où nous détectons automatiquement les sous-titres originaux manquants et les complétons à partir des langues compatibles avec Chrome. Cela améliore l'expérience utilisateur des sous-titres et rend le contenu accessible à un plus grand nombre d'utilisateurs.

La liste des langues dynamiques disponibles est générée en vérifiant si des modules linguistiques existent dans le navigateur, en fonction d'une liste principale adaptée aux préférences et à la situation géographique de chaque utilisateur. Lorsqu'un utilisateur sélectionne une langue et que le module linguistique correspondant est déjà téléchargé dans le navigateur, le texte traduit s'affiche immédiatement. Sinon, le pack est d'abord téléchargé, puis la traduction commence.

Une fois que l'utilisateur a sélectionné une langue et que la traduction s'affiche, il peut être sûr que le module linguistique a été téléchargé avec succès. À partir de ce moment, tous les contenus sous-titrés peuvent être visionnés dans la langue sélectionnée. Cela permet d'éliminer l'incertitude pour les utilisateurs qui pourraient hésiter à parcourir du contenu, car ils ne savent pas s'il sera disponible dans leur langue préférée.

L'exemple de code suivant initialise et configure le traducteur.

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;
      }
    };
  }
}

Ils utilisent ensuite l'API Translator pour générer des sous-titres traduits.

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');

Il existe quelques fonctions supplémentaires qui mettent à jour les sous-titres rendus finaux.

/* 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))

Bonnes pratiques

Bien que ces utilisations des API Translator et Language Detector soient différentes, de nombreuses bonnes pratiques sont communes :

Évaluez la qualité du texte traduit pour vous assurer que la grammaire et le contexte sont préservés. Envisagez de proposer aux utilisateurs de donner leur avis sur la traduction, le cas échéant.
Fournissez une UI de progression, telle qu'un indicateur de chargement, un chargeur ou une barre de progression, pour indiquer la réactivité. Par exemple, Policybazaar a utilisé un indicateur de saisie pour le chatbot afin de montrer qu'il traitait la saisie de l'utilisateur.

Conclusions et recommandations

Vous créez quelque chose avec ces API ? Partagez-le avec nous sur @ChromiumDev sur X ou sur Chromium for Developers sur LinkedIn.

Ressources

Remerciements

Merci à Rishabh Mehrotra et Aman Soni de Policybazaar, Bhuvaneswaran Mohan et Ankeet Maini de JioHotstar, Alexandra Klepper, Thomas Steiner et Kenji Baheux pour leur aide dans la rédaction et la relecture de cet article.

Comment Policybazaar et JioHotstar utilisent les API Translator et Language Detector pour créer des expériences multilingues Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.