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.

Descarga de modelos

La API de Translator usa un modelo entrenado para generar resúmenes de alta calidad. La API está integrada en Chrome, y se descarga un modelo experto la primera vez que un sitio web usa esta API.

Para determinar si el modelo está listo para usarse, llama a la función asíncrona Translator.availability(). Si la respuesta a availability() es downloadable, detecta el progreso de la descarga para informar al usuario sobre su progreso, ya que puede tardar.

const availability = await Translator.availability();

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'

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, verifica la activación del usuario y llama a la función asíncrona create(). La función create() de Translator 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.

Política de permisos, elementos iframe y Web Workers

De forma predeterminada, la API de Translator solo está disponible para las ventanas de nivel superior y sus elementos iframe del mismo origen. Se puede delegar el acceso a la API a iframes de origen cruzado con el atributo allow="" de la Política de permisos:

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

Por el momento, la API de Translator no está disponible en Web Workers debido a la complejidad de establecer un documento responsable para cada trabajador con el fin de verificar el estado de la política de permisos.

Esfuerzo de estandarización

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

El grupo de trabajo de WebML de W3C adoptó la API de Translator y la API de Language Detector. Les pedimos a Mozilla y WebKit que nos informen sobre sus posiciones respecto a los estándares.

Enviar comentarios

Queremos ver lo que estás creando. 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.