Traducción del cliente con IA

Maud Nalpas

Kenji Baheux

Alexandra Klepper

Publicado el 16 de mayo de 2024. Última actualización el 13 de noviembre de 2024

Explicativa	Web	Extensiones	Estado de Chrome	Intención
MDN	Chrome 138	Chrome 138	Ver	Intención de envío

Expandir tu empresa a los mercados internacionales puede ser costoso. Es probable que más mercados impliquen más idiomas para admitir, y más idiomas pueden generar desafíos con las funciones y los flujos interactivos, como el chat de asistencia posventa. Si tu empresa solo tiene agentes de asistencia que hablan inglés, es posible que los hablantes no nativos tengan dificultades para explicar exactamente qué problema encontraron.

¿Cómo podemos usar la IA para mejorar la experiencia de los hablantes de varios idiomas, minimizar el riesgo y confirmar si vale la pena invertir en agentes de asistencia que hablen idiomas adicionales?

Algunos usuarios intentan superar la barrera del idioma con la función de traducción de páginas integrada en el navegador o con herramientas de terceros. Sin embargo, la experiencia del usuario es inferior a la media con funciones interactivas, como nuestro chat de asistencia posventa.

En el caso de las herramientas de chat con traducción integrada, es importante minimizar las demoras. Si procesas el idioma en el dispositivo, puedes traducir en tiempo real, incluso antes de que el usuario envíe el mensaje.

Dicho esto, la transparencia es fundamental cuando se cierra una brecha de idioma con herramientas automatizadas. Recuerda que, antes de que comience la conversación, debes dejar en claro que implementaste herramientas de IA que permiten esta traducción. Esto establece expectativas y ayuda a evitar momentos incómodos si la traducción no es perfecta. Incluye un vínculo a tu política con más información.

Estamos trabajando en una API de Translator del cliente con un modelo integrado en Chrome.

Chat de demostración

Creamos un chat de atención al cliente que permite a los usuarios escribir en su idioma principal y recibir traducción en tiempo real para el agente de asistencia.

Usa la API de Translator

Para determinar si se admite la API de Translator, ejecuta el siguiente fragmento de detección de funciones.

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

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.

Determina la disponibilidad del modelo y escucha 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 la función asíncrona translate() para traducir el texto.

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

Próximos pasos

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

Puedes registrarte en el Programa de versión preliminar para probar esta API y otras con prototipos locales.