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

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. Con la API de Translator, los usuarios pueden escribir en su idioma principal. Por ejemplo, los usuarios pueden participar en chats de asistencia en su idioma principal, y tu sitio puede traducir sus mensajes al idioma principal de tus agentes de asistencia antes de que el mensaje salga 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 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. Cuando el contenido es efímero y no justifica guardarlo en una base de datos, la traducción del cliente ahorra tiempo y costos en comparación con un servicio de traducción alojado.

Comenzar

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 experto entrenado para generar traducciones de alta calidad. La API está integrada en Chrome, y el modelo se descarga 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, escucha el progreso de la descarga para informar al usuario sobre su progreso, ya que puede tardar.

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 cortos 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 ventanas de nivel superior y para 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 host site 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>

La API de Translator no está disponible en los Web Workers debido a la complejidad de establecer un documento responsable para cada trabajador, con el objetivo de verificar el estado de la Política de permisos.

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.