Esta página foi traduzida pela API Cloud Translation.

Como a Policybazaar e a JioHotstar usam as APIs Translator e Language Detector para criar experiências multilíngues

Swetha Gopalakrishnan

Saurabh Rajpal

Publicado em: 8 de maio de 2025

Disponibilize seu conteúdo para um público global com a API Translator e a API Language Detector. Com a API Language Detector, é possível determinar qual idioma é usado em uma entrada. Já com a API Translator, é possível traduzir do idioma detectado para outro. As duas APIs são executadas no lado do cliente com modelos de IA integrados ao Chrome. Isso significa que elas são rápidas, seguras e sem custo financeiro, já que não há custos de servidor.

API	Explicação	Web	Extensões	Status do Chrome	Intenção
API Translator	MDN	Chrome 138	Chrome 138	Ver	Intenção de envio
API Language Detector	MDN	Chrome 138	Chrome 138	Ver	Intenção de envio

Saiba como duas grandes empresas internacionais, Policybazaar e JioHotstar, estão usando e se beneficiando dessas APIs integradas.

Assistência ao cliente multilíngue da Policybazaar

A Policybazaar é a maior plataforma de seguros da Índia, com mais de 97 milhões de clientes registrados. A Índia tem uma diversidade linguística incrível, com vários idiomas e dialetos falados em todo o país.

Para oferecer suporte a essa diversidade linguística entre os clientes, a Policybazaar implementou as APIs Translator e Language Detector de duas maneiras: oferecendo assistência de seguros a qualquer momento e artigos com insights de mercado no idioma preferido do cliente.

Assistência de seguro com a IA da Finova

O seguro é um produto inerentemente pessoal, com informações sensíveis como base de políticas específicas. Os clientes da Policybazaar geralmente buscam orientação sobre como escolher um plano ou o que ele oferece. Embora a empresa tenha uma equipe que fala vários idiomas, a Policybazaar precisava de uma solução que funcionasse em todos os fusos horários e após o expediente. Por isso, a Policybazaar criou a Finova AI, uma assistência de seguros personalizada no idioma preferido do cliente.

Os usuários podem conversar com o chatbot da Finova no idioma deles.

"As APIs Language Detector e Translator do Chrome ajudaram a tornar nossa assistência de seguros mais integrada, atendendo às diversas necessidades de idioma dos nossos clientes. Como resultado, os usuários podem se comunicar no idioma indiano preferido sem atrasos perceptíveis".

—Rishabh Mehrotra, diretor da unidade de negócios de seguros de vida de design da Policybazaar

A equipe escolheu a IA do lado do cliente, que é a inferência que ocorre em um navegador ou no dispositivo de um usuário. A IA do lado do cliente oferece latência mínima e um custo menor do que a IA hospedada ou sem servidor. Devido ao ritmo e ao volume rápidos de mensagens em uma conversa em tempo real, uma solução baseada em servidor seria cara e demorada.

A implementação da IA integrada do Chrome oferece modelos criados no navegador, para que a inferência seja realizada no dispositivo. É uma solução interessante para atender aos requisitos principais.

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

Tradução de artigos para insights de mercado

"A API Translator foi extremamente fácil de integrar ao nosso código React atual. Optamos por essa solução do lado do cliente para garantir uma tradução rápida para nossos clientes e agentes. A API conseguiu traduzir um artigo de 1.000 caracteres em dois segundos".

—Aman Soni, líder de tecnologia na Policybazaar

A vertical de negócios de seguros de vida da Policybazaar oferece vários artigos para manter os clientes e os agentes de suporte ao cliente informados sobre as condições do mercado.

O hindi é um idioma muito falado entre os usuários, então eles testaram a API Translator para tradução sob demanda de artigos do inglês para o hindi.

A Policybazaar oferece tradução rápida e perfeita entre inglês e hindi.

Para adicionar a tradução ao site, eles usaram o seguinte 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;
  });
}

Com o modelo e a API fornecidos pelo Chrome, os clientes podem acessar a tradução quase instantânea de artigos.

O JioHotstar oferece tradução dinâmica de legendas

A JioHotstar, uma plataforma de streaming digital líder na Índia que oferece uma ampla variedade de filmes, programas de TV, esportes e conteúdo original em vários idiomas, está testando a API Translator para melhorar a tradução de legendas.

O JioHotstar atende usuários indianos que preferem consumir conteúdo no idioma regional. Devido à amplitude do catálogo de conteúdo disponível com o JioHotstar, é difícil atender às necessidades de idioma regional de todos os usuários, melhorando assim o consumo de conteúdo.

Com a API Translator, a plataforma pretende traduzir dinamicamente legendas em inglês para o idioma preferido do usuário ou com base na região geográfica dele. A opção de tradução dinâmica é oferecida no menu de seleção de idioma, em que detectamos automaticamente legendas originais ausentes e as aumentamos com base nos idiomas compatíveis com o Chrome. Isso melhora a experiência do usuário com legendas e torna o conteúdo acessível a mais pessoas.

A lista de idiomas dinâmicos disponíveis é gerada verificando o navegador em busca de pacotes de idiomas existentes, com base em uma lista principal adaptada às preferências e à localização geográfica de cada usuário. Quando um usuário seleciona um idioma e o pacote correspondente já está baixado no navegador, o texto traduzido aparece imediatamente. Caso contrário, o pacote será baixado primeiro e, em seguida, a tradução vai começar.

Depois que o usuário selecionar um idioma e ver a tradução, ele pode ter certeza de que o pacote de idiomas foi baixado. A partir desse momento, todo o conteúdo com legendas descritivas poderá ser visto no idioma selecionado. Isso ajuda a eliminar a incerteza dos usuários que podem hesitar em navegar pelo conteúdo por não saber se ele está disponível no idioma de preferência.

O exemplo de código a seguir inicializa e configura o tradutor.

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

Em seguida, eles usam a API Translator para gerar legendas traduzidas.

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

Há algumas funções adicionais que atualizam as legendas finais renderizadas.

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

Práticas recomendadas

Embora esses usos das APIs Translator e Language Detector sejam diferentes, há muitas práticas recomendadas em comum:

Faça avaliações de qualidade do texto traduzido para garantir que a gramática e o contexto sejam preservados. Considere oferecer aos usuários a opção de dar feedback sobre a tradução, se for o caso.
Forneça uma interface de progresso, como um spinner, um carregador ou uma barra de progresso, para indicar capacidade de resposta. Por exemplo, a Policybazaar usou um indicador de digitação para o chatbot mostrar que estava processando a entrada do usuário.

Conclusões e recomendações

Você está criando algo novo com essas APIs? Compartilhe com a gente em @ChromiumDev no X ou Chromium para desenvolvedores no LinkedIn.

Recursos

Agradecimentos

Agradecemos a Rishabh Mehrotra e Aman Soni da Policybazaar, Bhuvaneswaran Mohan e Ankeet Maini da JioHotstar, Alexandra Klepper, Thomas Steiner e Kenji Baheux por ajudarem a escrever e revisar este artigo.

Como a Policybazaar e a JioHotstar usam as APIs Translator e Language Detector para criar experiências multilíngues Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.