Traducción con IA integrada

Thomas Steiner

Alexandra Klepper

Fecha de publicación: 13 de noviembre de 2024; última actualización: 20 de mayo de 2025

Explicación	Web	Extensiones	Estado de Chrome	Intent
MDN	Chrome 138	Chrome 138	Ver	Intención de enviar

Usa la API de Translator en Chrome para traducir texto con los modelos de IA que se proporcionan en el navegador.

Es posible que tu sitio web ya ofrezca contenido en varios idiomas para que sea accesible para un público global. Con la API de Translator, los usuarios pueden contribuir en su idioma principal. Por ejemplo, los usuarios pueden participar en chats de asistencia en su idioma principal, y tu sitio puede traducirlos al idioma que usan tus agentes de asistencia antes de que salgan del dispositivo del usuario. Esto crea una experiencia fluida, rápida y accesible para todos los usuarios.

Por lo general, la traducción de contenido en la Web requiere el uso de un servicio en la nube. Primero, el contenido de origen se sube a un servidor que ejecuta la traducción a un idioma de destino. Luego, se descarga el texto resultante y se devuelve al usuario. Si ejecutas la traducción en el cliente, ahorras el tiempo que requieren los viajes al servidor y el costo de alojar el servicio de traducción.

Comenzar

La API de Translator está disponible a partir de Chrome 138 estable. Primero, ejecuta la detección de funciones para ver si el navegador admite la API de Translator.

if ('Translator' in self) {
  // The Translator API is supported.
}

Si bien siempre conoces el idioma de destino de las traducciones, es posible que no siempre conozcas el idioma de origen. En esos casos, puedes usar la API de Language Detector.

Cómo verificar la compatibilidad de los pares de idiomas

La traducción se administra con paquetes de idiomas que se descargan a pedido. Un paquete de idioma es como un diccionario para un idioma determinado.

• sourceLanguage: Es el idioma actual del texto.
• targetLanguage: Es el idioma final al que se debe traducir el texto.

Usa códigos abreviados de idioma BCP 47 como cadenas. Por ejemplo, 'es' para español o 'fr' para francés.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

La función availability() devuelve una promesa con los siguientes valores:

• "unavailable": La implementación no admite la traducción ni la detección de idiomas de los idiomas proporcionados.
• "downloadable": La implementación admite la traducción o la detección de idiomas de los idiomas determinados, pero se requiere una descarga para continuar. Es posible que la descarga sea el modelo del navegador.
• "downloading": La implementación admite la traducción o la detección de idiomas de los idiomas determinados. El navegador está finalizando una descarga en curso como parte de la creación del objeto asociado.
• "available": La implementación admite la traducción o la detección de idiomas de los idiomas determinados, y ya se completaron todas las descargas necesarias.

Detecta el progreso de la descarga del modelo con el evento downloadprogress:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Si falla la descarga, se detienen los eventos downloadprogress y se rechaza la promesa ready.

Crea y ejecuta el traductor

Para crear un traductor, llama a la función asíncrona create(). Requiere un parámetro de opciones con dos campos, uno para sourceLanguage y otro para targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Una vez que tengas un traductor, llama a translate() asíncrono.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Como alternativa, si necesitas trabajar con textos más largos, también puedes usar la versión de transmisión de la API y llamar a translateStreaming().

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Traducciones secuenciales

Las traducciones se procesan de forma secuencial. Si envías grandes cantidades de texto para traducir, las traducciones posteriores se bloquearán hasta que se completen las anteriores.

Para obtener la mejor respuesta a tus solicitudes, agrúpalas y agrega una interfaz de carga, como un spinner, para indicar que la traducción está en curso.

Demostración

Puedes ver la API de Translator, que se usa en combinación con la API de Language Detector, en el playground de la API de Translator y Language Detector.

Esfuerzo de estandarización

Estamos trabajando para estandarizar la API de Translator y garantizar la compatibilidad entre navegadores.

Nuestra propuesta de API recibió el apoyo de la comunidad y se trasladó al W3C Web Incubator Community Group para su análisis. El equipo de Chrome solicitó comentarios al Grupo de Arquitectura Técnica del W3C y les pidió a Mozilla y WebKit sus posturas sobre los estándares.

Para participar en el esfuerzo de estándares, únete al Web Incubator Community Group.

Enviar comentarios

Queremos ver lo que creas con la API de Language Detector. Comparte tus sitios web y aplicaciones web con nosotros en X, YouTube y LinkedIn.

Para enviar comentarios sobre la implementación de Chrome, informa un error o envía una solicitud de función.