Se usó la API de Cloud Translation para traducir esta página.

Cómo Policybazaar y JioHotstar usan las APIs de Translator y Language Detector para crear experiencias multilingües

Swetha Gopalakrishnan

Saurabh Rajpal

Publicado el 8 de mayo de 2025

Haz que tu contenido sea accesible para un público global con la API de Translator y la API de Language Detector. Con la API de Language Detector, puedes determinar qué idioma se usa en una entrada y, con la API de Translator, puedes traducir de ese idioma detectado a otro idioma. Ambas APIs se ejecutan del lado del cliente con modelos de IA integrados en Chrome, lo que significa que son rápidas, seguras y gratuitas, ya que no hay costos de servidor.

API	Explicación	Web	Extensiones	Estado de Chrome	Intent
API de Translator	MDN	Chrome 138	Chrome 138	Ver	Intención de enviar
API de Language Detector	MDN	Chrome 138	Chrome 138	Ver	Intención de enviar

Descubre cómo dos grandes empresas internacionales, Policybazaar y JioHotstar, usan estas APIs integradas y se benefician de ellas.

Asistencia al cliente multilingüe de Policybazaar

Policybazaar es la plataforma de seguros más grande de la India, con más de 97 millones de clientes registrados. India tiene una increíble diversidad lingüística, con numerosos idiomas y dialectos que se hablan en todo el país.

Para respaldar esta diversidad lingüística entre sus clientes, Policybazaar implementó las APIs de Translator y Language Detector de dos maneras: brindando asistencia sobre seguros en cualquier momento y ofreciendo artículos con estadísticas del mercado en el idioma preferido de sus clientes.

Asistencia de seguros con la IA de Finova

Los seguros son productos inherentemente personales, con información sensible como base de las políticas específicas. Los clientes de Policybazaar suelen buscar orientación sobre cómo elegir un plan o qué cubre su plan. Si bien tienen personal que habla muchos idiomas, Policybazaar necesitaba una solución que funcionara en todas las zonas horarias y fuera del horario de atención. Por lo tanto, Policybazaar creó Finova AI, un asistente de seguros personalizado en el idioma preferido del cliente.

Los usuarios pueden chatear con el chatbot de Finova en su idioma principal.

"Las APIs de Language Detector y Translator de Chrome nos ayudaron a que nuestra asistencia de seguros sea más fluida, ya que satisfacen las diversas necesidades de idioma de nuestros clientes. Como resultado, los usuarios pueden comunicarse en su idioma índico preferido sin demoras notables".

—Rishabh Mehrotra, jefe de la unidad de negocios de seguros de vida de diseño en Policybazaar

El equipo eligió la IA del cliente, que es la inferencia que se produce en un navegador o en el dispositivo de un usuario. La IA del cliente ofrece una latencia mínima y un costo más bajo que la IA alojada en el servidor o sin servidor. Dada la velocidad y el volumen de mensajes en una conversación en tiempo real, una solución basada en el servidor sería costosa y llevaría mucho tiempo.

La implementación de la IA integrada de Chrome ofrece modelos integrados en el navegador, por lo que la inferencia se realiza en el dispositivo. Es una solución atractiva para cumplir con los requisitos 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;

Traducción de artículos para obtener estadísticas de mercado

"La API de Translator fue muy fácil de integrar en nuestro código de React existente. Optamos por esta solución del cliente para garantizar una traducción rápida para nuestros clientes y agentes. La API pudo traducir un artículo de 1,000 caracteres en dos segundos".

—Aman Soni, líder técnico de Policybazaar

La vertical de seguros de vida de Policybazaar proporciona una gran cantidad de artículos para mantener informados a los clientes y a los agentes de asistencia al cliente sobre las condiciones del mercado.

El hindi es un idioma que hablan muchos de sus usuarios, por lo que probaron la API de Translator para traducir artículos del inglés al hindi a pedido.

Policybazaar proporciona una traducción rápida y fluida entre el inglés y el hindi.

Para agregar la traducción a su sitio web, usaron la siguiente secuencia de comandos:

// 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 el modelo y la API que ofrece Chrome, los clientes pueden acceder a la traducción casi instantánea de artículos.

JioHotstar ofrece traducción dinámica de subtítulos

JioHotstar, una plataforma de transmisión digital líder en la India que ofrece una amplia variedad de películas, programas de TV, deportes y contenido original en varios idiomas, está explorando la API de Translator para mejorar la traducción de subtítulos.

JioHotstar se dirige a los usuarios de la India que prefieren consumir contenido en su idioma regional. Dado el amplio catálogo de contenido disponible en JioHotstar, es un desafío satisfacer las necesidades de idiomas regionales de todos los usuarios y, así, mejorar su consumo de contenido.

Con la API de Translator, la plataforma tiene como objetivo traducir de forma dinámica los subtítulos en inglés al idioma preferido del usuario o según su región geográfica. La opción de traducción dinámica se ofrece en el menú de selección de idiomas, en el que detectamos automáticamente los subtítulos originales faltantes y los aumentamos a partir de los idiomas compatibles con Chrome. Esto mejora la experiencia del usuario con los subtítulos y hace que el contenido sea accesible para más usuarios.

La lista de idiomas dinámicos disponibles se genera verificando si el navegador tiene paquetes de idiomas existentes, en función de una lista principal adaptada a las preferencias y la ubicación geográfica de cada usuario. Cuando un usuario selecciona un idioma y el paquete de idioma correspondiente ya se descargó en el navegador, el texto traducido aparece de inmediato. De lo contrario, primero se descarga el paquete y, luego, comienza la traducción.

Una vez que el usuario selecciona un idioma y ve que se está realizando la traducción, puede tener la certeza de que el paquete de idioma se descargó correctamente. A partir de ese momento, todo el contenido con subtítulos se podrá ver en el idioma seleccionado. Esto ayuda a eliminar la incertidumbre de los usuarios que, de otro modo, dudarían en explorar el contenido, ya que no sabrían si estaría disponible en su idioma preferido.

En el siguiente ejemplo de código, se inicializa y configura el traductor.

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

Luego, usan la API de Translator para generar subtítulos traducidos.

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

Hay algunas funciones adicionales que actualizan los subtítulos renderizados finales.

/* 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ácticas recomendadas

Si bien estos usos de las APIs de Translator y Language Detector son diferentes, existen muchas prácticas recomendadas comunes:

Realiza evaluaciones de calidad del texto traducido para garantizar que se conserven la gramática y el contexto. Considera ofrecer a los usuarios la opción de enviar comentarios sobre la traducción, si corresponde.
Proporciona una IU de progreso, como un spinner, un cargador o una barra de progreso, para indicar la capacidad de respuesta. Por ejemplo, Policybazaar usó un indicador de escritura para que el chatbot mostrara que estaba procesando la entrada del usuario.

Conclusiones y recomendaciones

¿Estás creando algo nuevo con estas APIs? Compártelo con nosotros en @ChromiumDev en X o en Chromium for Developers en LinkedIn.

Recursos

Agradecimientos

Agradecemos a Rishabh Mehrotra y Aman Soni de Policybazaar, Bhuvaneswaran Mohan y Ankeet Maini de JioHotstar, Alexandra Klepper, Thomas Steiner y Kenji Baheux por ayudar a escribir y revisar este artículo.

Cómo Policybazaar y JioHotstar usan las APIs de Translator y Language Detector para crear experiencias multilingües Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.