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 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 lengua materna. Por ejemplo, los usuarios pueden participar en chats de asistencia en su lengua materna, y tu sitio puede traducir su mensaje a la lengua materna de tus agentes de asistencia antes de que el mensaje salga del dispositivo del usuario. Esto crea una experiencia fluida, rápida y inclusiva 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, el texto resultante se descarga 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

Las APIs de Language Detector y Translator funcionan en Chrome en computadoras de escritorio. Estas APIs no funcionan en dispositivos móviles.

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 un tiempo.

Verifica la compatibilidad con pares de idiomas

La traducción se administra con paquetes de idiomas que se descargan a pedido. Un paquete de idiomas 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'

Escucha el progreso de 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 bloquean 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.

Idiomas admitidos

La implementación de Chrome de la API de Translator admite los siguientes idiomas.

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, iframes y Web Workers

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

<!--
  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 Web Workers debido a la complejidad de establecer un documento responsable para cada trabajador, para verificar el estado con respecto a las políticas 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, presenta un informe de errores o una solicitud de función.