¡Cómo Soporto Más de 100 Idiomas en Mi App de React...y Tú También Puedes!

Soy Richard Kerrigan y estoy emocionado de estar aquí hoy para mostrarte cómo puedes agregar soporte multilingüe a tus aplicaciones de React. Antes de sumergirnos en el tema de hoy, permíteme hacer algunos anuncios rápidos. Punto número 1. Aunque trabajo en Microsoft, de ninguna manera estoy afiliado al equipo de Azure AI, ni estoy buscando convencerte de adoptar Azure como tu proveedor de servicios en la nube. Como verás al final de esta charla, mi objetivo es demostrar una posible solución para traducir automáticamente el contenido de aplicaciones web de sitios web a otros idiomas y dialectos. Pero absolutamente podrías construir algo similar usando AWS, GCP u otro proveedor de servicios en la nube que ofrezca un servicio de traducción de documentos.

Punto número 2. Ya existen bibliotecas como React, IATN que te permiten traducir contenido estático como tu página de inicio, encabezado, pie de página, etc. a otros idiomas usando las traducciones que proporcionas. Las soluciones que te presentaré hoy son para traducir automáticamente el contenido dinámico, como publicaciones de blog creadas por los creadores de contenido de tu equipo o incluso por los usuarios finales.

Bien, con esos anuncios fuera del camino, vamos a sumergirnos. Primero, establezcamos claramente el problema que estamos tratando de resolver. El problema que estamos tratando de resolver es que la mayoría de los sitios web, aplicaciones web, solo publican contenido en un idioma, lo cual no es conveniente para los usuarios y no es inclusivo para las personas para quienes ese idioma no es su idioma principal. En otras palabras, necesitamos una forma de soportar otros idiomas y dialectos en nuestros sitios web y aplicaciones web, sin afectar negativamente la productividad de nuestro equipo. Ahora, hay varias maneras en que podríamos abordar la solución del problema, dependiendo de los recursos que tengamos disponibles. Pero para el propósito de esta charla, asumamos que no tenemos mucho presupuesto para dedicar a esta función, ni tenemos un equipo que pueda traducir contenido para nosotros. Así que nuestra solución debe ser de bajo costo y requerir interacción humana solo para validar los resultados. Este es un caso de uso fantástico para la IA y la automatización.

Cuando mi equipo comenzó a abordar este problema, por razones obvias, miramos Azure primero. A través de esa investigación, encontré el servicio Azure AI Translator. Este servicio no solo permite la traducción de texto ad-hoc, donde envías texto directamente a través del traductor y devuelve el texto traducido como JSON, sino que también ofrece traducción de documentos, que toma como entrada uno o más archivos de un contenedor de almacenamiento de blobs, los traduce y produce los archivos traducidos en un contenedor de almacenamiento de blobs diferente.

Además, el servicio Azure AI Translator tiene algunas características clave que finalmente nos convencieron de que era la opción adecuada para nuestras necesidades. La primera característica clave que fue importante para nosotros fue el soporte de idiomas. Mi equipo en Microsoft dirige un programa de mejora de habilidades y reciclaje que opera en todo el mundo. Por lo tanto, es importante para nosotros que cualquier solución multilingüe pueda acomodar cualquier idioma o dialecto que queramos soportar. Con más de 100 idiomas y dialectos diferentes soportados, incluso incluyendo Klingon, Azure AI Translator fue definitivamente la elección correcta para nosotros. La siguiente característica clave para nosotros fue el costo. Azure AI Translator tiene un nivel gratuito generoso de hasta 2 millones de caracteres traducidos por mes. Así que dependiendo de la cantidad de contenido en tu sitio y con qué frecuencia traduces tu contenido, es posible que ni siquiera incurras en un costo.

Otra característica importante es la precisión. Azure AI Translator utiliza lo que llaman Traducción Automática Neuronal, o NMT, que, en sus propias palabras, es una mejora sobre los enfoques anteriores de Traducción Automática Estadística, SMT, ya que utiliza muchas más dimensiones para representar tokens, como palabras, morfemas y puntuación, del texto fuente y objetivo. Además, explican que usando el enfoque NMT, la traducción tomará en contexto la oración completa, en lugar de solo una ventana deslizante de pocas palabras que usa SMT y producirá traducciones más fluidas y con apariencia de traducción humana. Para nosotros, esto significa traducciones más contextualmente precisas, lo que significa menos ajustes, si es que se necesitan.

Esto es lo que hace posible para nosotros integrar traducciones en nuestro flujo de trabajo CICD. La última característica clave para nosotros es la capacidad de usar glosarios personalizados para ajustar el proceso de traducción, lo cual es útil para omitir la traducción de terminología específica de la industria y o texto relacionado con la marca, así como para asegurar que ciertas palabras o frases se traduzcan de una manera que retenga el significado original. No todo es color de rosa, sin embargo, así que también quería tomar un momento para señalar algunas de las limitaciones de Azure AI Translator. Aunque el servicio puede manejar muchos tipos de archivos diferentes, actualmente no puede manejar MVX o JSX TSX, por lo que tu contenido necesitará ser obtenido por separado de estos archivos para ser traducido. Otra limitación es que todas las respuestas de traducción se devuelven como texto horizontal, de izquierda a derecha, o de derecha a izquierda, por lo que es posible que necesites agregar lógica de renderizado si deseas mostrar contenido en un formato vertical para los idiomas aplicables.

Finalmente, como con cualquier implementación de AI, aún querrás validar los resultados antes de desplegarlos en el extranjero, y puede que encuentres que se necesiten ajustes adicionales, lo que también requeriría un nuevo despliegue y revalidación.

Bien, suficiente charla sobre Azure AI Translator. Vamos a ver cómo vamos a diseñar este flujo de trabajo. Dependiendo de cómo se almacene el contenido, hay esencialmente tres opciones para traducirlo. Escenario 1, tu contenido se almacena como JSON. Como puedes ver en este fragmento de JSON, tenemos un array de publicaciones, que son objetos que contienen los diversos datos que nuestro frontend necesitaría para renderizar cada publicación. Si tu contenido se almacena así, probablemente querrás traducir el contenido durante el tiempo de ejecución usando la API de Azure Translator, probablemente usando un componente de servidor de React o una API personalizada separada que almacenaría en caché el contenido traducido para reducir la frecuencia con la que se ejecuta el servicio de traducción, lo que en última instancia mantendrá tus costos bajos. Aquí tienes un ejemplo de cómo puedes lograr esto. Como puedes ver, estamos tomando solo las piezas de datos que necesitan ser traducidas, a saber, el título, el extracto y el contenido, y enviando cada pieza a través del traductor. Luego, una vez que tenemos todo el contenido traducido, lo enviamos como respuesta. Este ejemplo podría añadirse a un componente de servidor de React o a una ruta de API existente que envía el contenido a la aplicación React.

Escenarios 2 y 3, tu contenido se almacena como archivos HTML o Markdown separados. En cualquiera de estos casos, en lugar de ejecutar la traducción en tiempo de ejecución, podemos realmente incorporar el proceso de traducción en nuestro flujo de trabajo CICD. Primero, necesitaremos subir los archivos a traducir a un contenedor de Azure Blob Storage. Luego, necesitaremos crear y activar una aplicación Azure Function, o similar, que orquestará el proceso de traducción, incluyendo especificar los idiomas de entrada y salida y los contenedores de Azure Blob Storage correspondientes. Una vez que la aplicación Function haya completado, necesitaremos descargar los archivos traducidos del contenedor de salida de Azure Blob Storage, y añadirlos a los archivos de código fuente de la aplicación. Ahora, finalmente, estamos listos para desplegar nuestra aplicación React. Querrás asegurarte de desplegar la aplicación en un entorno de prueba primero, para que puedas validar el resultado de la traducción antes de desplegar en Prompt.

Bien, suficiente charla sobre el concepto. Veamos algo de código. Primero, recorramos cómo se ve la solución para contenido JSON traducido en tiempo de ejecución. Así que, aquí, si miramos la ruta de la API para mi aplicación Next.js, verás que hay esta función de traducción, tal como vimos antes en las diapositivas. Y si nos adentramos en esa función de traducción, verás que es esencialmente solo una llamada API post que va a Microsoft Translator. Y lo que estamos haciendo es tomar la configuración regional que se solicitó. Así que, podrías pensar en esto como la ruta siendo el dominio del sitio web, y luego barra en-us, o es-es para español, o similar a eso. Y así, estamos tomando solo la primera parte de eso, así que el en o el es, para entender a qué idioma están tratando de traducir. Y luego, estamos juntando eso con el endpoint de la API, y especificamos eso como el idioma de destino. Y luego, aquí, estamos enviando esta solicitud post a nuestro servicio de traducción, y estamos enviando el texto en forma JSON. Y luego, una vez que la traducción regresa, entonces estamos profundizando en ese JSON y tomando solo la traducción de texto de él, y enviándola como respuesta. Así que esa es la solución para traducir JSON.

A continuación, veamos cómo traduciríamos archivos HTML desde dentro de un pipeline CICD. Entonces, cambiaré a mi rama de Markdown. Lo siento, mi rama de HTML. Entonces, mirando esta misma ruta de API, lo principal que verás es que ya no estamos haciendo ningún trabajo de traducción dentro de la API. Puedes ver que estamos analizando el encabezado y extrayendo los datos de allí. Pero eso es todo. Ahora, en su lugar, lo que hemos hecho es mover eso a nuestro flujo de trabajo de GitHub Actions.

Entonces, si lo abro, y empiezo desde arriba, lo que estamos haciendo es pasar por aquí, y primero, estamos creando todos los recursos en Azure. Si miramos en la plantilla para eso, verás que tenemos la aplicación web estática para el sitio de Next.js. La aplicación dentro está vinculada a ella, para que podamos recopilar telemetría. Y luego tenemos nuestra aplicación de función que va a realizar el proceso de traducción.

Y luego tenemos nuestro servicio de traducción. {{^}}Y luego tenemos nuestra cuenta de almacenamiento, que contiene un contenedor de archivos de entrada y un contenedor de funciones de salida.

Entonces, volvamos a nuestro flujo de trabajo de GitHub. Entonces, después de aprovisionar todos estos recursos, construimos nuestra aplicación de función dentro del flujo de trabajo. Y luego, una vez que está construida, la desplegamos.

No. No. Y luego, después de que esto se despliega, realizamos el proceso de traducción. No. Y si miramos nuestra función real, aquí es donde esencialmente ocurre toda la magia. No. No. Entonces, aquí estamos configurando todo. Esto no es realmente diferente de lo que harías cualquier vez que interactúas con blob storage.

No. Y aquí abajo es donde empieza a ponerse más interesante. Entonces, estamos especificando el endpoint de traducción contra el que vamos a trabajar. Y una cosa a destacar es que el endpoint de traducción, cuando estás haciendo traducción de documentos, es muy diferente del endpoint de traducción que vas a usar solo para texto, como JSON. Y así, debes asegurarte de no usar el mismo dominio para cada uno de ellos.

Y así, aquí estamos especificando nuestro glosario que nos permite ajustar nuestras traducciones.

Y luego, estamos revisando cada uno de los archivos blob que están en nuestra entrada. Y aquí es donde configuramos cómo hacemos la traducción, cuando vamos a ejecutar. Entonces, estamos diciendo que queremos traducir al español, y que estamos proporcionando un glosario que está en formato CSV, y que estamos haciendo traducción de archivos. {{^}}Y luego, enviamos nuestra solicitud. Y luego, enviamos esos datos allí. Y luego, una vez que está hecho, entonces, seguimos adelante y creamos el nuevo blob dentro de nuestra ubicación de salida.

Sí. Sí. Sí. Y luego, solo estamos verificando para asegurarnos de que todo se haya hecho, hasta que podamos cerrar esto. Y esto es necesario porque queremos que nuestro flujo de trabajo de GitHub espere hasta que todas las traducciones se hayan hecho, antes de que continúe con el siguiente paso. Porque, en el siguiente paso... No. No. Después de ejecutar la traducción, luego estamos subiendo ese artefacto, y luego descargándolo en la siguiente etapa, y estamos tomando ese artefacto, y lo estamos subiendo como nuestra aplicación NextJS. Y así, es realmente importante que todas las traducciones se hagan primero, porque de lo contrario, podrías terminar en una situación donde, por ejemplo, tienes la mitad de tu contenido traducido, y vas a desplegarlo. Y así, entonces, cuando alguien cambia a ese idioma, ve la mitad de tu contenido, y luego, obtienen errores para la otra mitad, porque el archivo no se encuentra.

No. Entonces, honestamente, cuando configuré esto por primera vez, se sintió como magia, porque esencialmente solo estás enviando una solicitud al traductor, y luego mágicamente obtienes este archivo traducido y todo está bien. Y solo tienes que hacer un pequeño ajuste. Bien.

Entonces, finalmente, veamos cómo haríamos este mismo pipeline de traducción, pero para contenido markdown en su lugar. No. Bien. Entonces, el pipeline se mantiene exactamente igual. No hay diferencia aquí. Todavía estamos subiendo los archivos, activando la traducción, y luego obteniendo los archivos de salida y desplegando nuestra app. Así que no necesitamos entrar en eso de nuevo. Y si miramos nuestro contenido traducido, aquí es donde es un poco diferente. Entonces... Hey. Aquí, si bajo... No. No. No. Todo esto es lo mismo. Nada ha cambiado aún. No. No. No. Sí. Así que déjame comparar esto rápidamente. Déjame volver a mi HTML. Puedes ver cómo se ve eso primero. No.

No. {{^}}No. Sí. Entonces, aquí está la gran diferencia. Con HTML, porque todos los metadatos de cada una de estas publicaciones se almacenan en el encabezado del archivo. Entonces, si miramos uno de estos archivos, ves que tenemos nuestro título aquí, nuestro nombre, tenemos nuestro título aquí, nuestro extracto, y luego al final tenemos todo nuestro contenido. Y queremos traducir esto. Bueno, por defecto, cuando envías un archivo HTML, no va a traducir el encabezado. Entonces, en su lugar, eso tiene que ser parte de nuestro proceso. Así que, dentro de nuestra función, ves aquí que estamos analizando el documento, y esto es después de que se haya realizado la traducción. Entonces, estamos tomando el archivo traducido y lo estamos analizando y luego lo que estamos haciendo es que estamos revisando el encabezado para obtener todas las metatags y luego estamos buscando específicamente el título y el extracto. Y una vez que lo encontramos, lo enviamos a través de nuestra función de traducción para traducirlo al idioma de destino. Y después de que todo eso esté hecho, entonces estamos reensamblando nuestro encabezado, incluyendo esos metadatos traducidos, y luego estamos reemplazando el archivo traducido con el nuevo archivo traducido que también tiene el encabezado traducido.

Entonces, si volvemos a nuestra versión de Markdown, aquí es donde es bastante diferente, porque aquí, después de hacer la traducción inicial, verás que no tenemos un segundo paso de necesidad de traducir el encabezado. Sin embargo, lo que sí tenemos es que tenemos que traducir, todavía tenemos que traducir los metadatos por separado. Y esto es en realidad un problema que encontré con Azure AI Translator, donde intenta traducir el front matter. Entonces, si miramos una de estas publicaciones, toda esta sección, si no estás familiarizado, toda esta sección es metadatos en nuestro archivo Markdown. Y entonces, intenta traducirlo, pero me he encontrado con varios problemas. Así que, me he encontrado con problemas donde este punto se mueve fuera de la cita, lo que evitará que este archivo se cargue. Y también, me he encontrado con problemas donde intenta traducir algunas de las claves en los objetos, y luego también, intenta traducir algunas de las palabras en la URL, como el propio path. Y entonces, esto obviamente causa que todo se rompa. Y entonces, en nuestra función de traducción, es una configuración interesante. Así que, tenemos que traducir no los archivos de destino, así que como los archivos traducidos, front matter, porque en realidad no se puede analizar en este momento debido a algunos de los problemas. Entonces, lo que realmente tenemos que hacer es analizar y luego traducir los metadatos de los archivos originales y luego poner esos metadatos traducidos con el contenido de los archivos traducidos para que coincidan. Y entonces, eso es lo que estás viendo aquí, donde estamos reemplazando o usando regex para encontrar el front matter, y lo estamos reemplazando con los metadatos traducidos de los archivos de entrada. Y luego, después de eso, estamos subiendo. Y así es como todo funciona.

Entonces, ahora, si saltamos a GitHub, podemos ver realmente el flujo de trabajo de GitHub actions ejecutándose. Y así, aquí está la versión HTML. Y así, ves, primero, aprovisionamos los recursos de Azure.

Luego construimos nuestra aplicación de función. Luego la desplegamos. Luego ejecutamos nuestro proceso de traducción. Y luego, con esos archivos traducidos, los desplegamos. Y de manera similar, ahora, podemos entrar y ejecutar esto sobre nuestra rama de markdown. Debería comenzar aquí en un segundo.

No.

No. No. No. No.

No. {{^}}No. {{^}}No. {{^}}No. No. Okay. Y así, ahora, está asegurándose de que haya un grupo de recursos en Azure para esto.

No. No. No. No. No. No. No. No. No. Ahí vamos. No. No. Ahora, va a desplegar nuestra plantilla ARM que contiene todos los diversos recursos que vimos anteriormente.

No. No. Solo para recapitular lo que hemos discutido, el problema que estamos tratando de resolver, que es el hecho de que muchos sitios web y aplicaciones web no ofrecen su contenido en idiomas adicionales. No. Discutimos los beneficios y características clave de Azure AI Translator. Pero también reconocimos que soluciones similares podrían construirse con otros servicios de traducción de proveedores de servicios en la nube. Finalmente, vimos las tres diferentes versiones de la misma aplicación mostrando cómo traducir contenido JSON, HTML y markdown sin requerir que ningún miembro de su equipo aprenda un nuevo idioma. No. Al ser esta una sesión remota pregrabada, no puedo decirlo, pero sinceramente espero que estén tan entusiasmados con esta solución como yo. Si desean explorar estas soluciones con más profundidad, aquí está el enlace y el código QR al repositorio en GitHub, así como enlaces a un par de recursos para aprender más sobre Azure AI Translator.

No. Ahora volvamos a nuestro flujo de trabajo y veamos cómo está yendo.

Bien. Genial. Así que ha desplegado nuestros recursos de Azure. Ha construido nuestra función. Y ahora está en el proceso de desplegar eso.

No. Esta es la parte que realmente queremos ver, porque aquí es donde está traduciendo nuestros archivos markdown.

No. No. No. Bien. Así que en este punto, está descargando los archivos de Blob Storage. Y ahora ha activado la traducción, y solo está esperando que el servicio de traducción diga que todos los trabajos han sido terminados.

No. Y esta es una parte realmente importante, porque no queremos terminar sin que todos nuestros archivos estén traducidos cuando vayamos a desplegar a continuación.

No. No. No. No. Increíble. Y como pueden ver aquí, incluso especifica cuántos archivos han sido traducidos.

No. Y ahora está tomando esos archivos traducidos, poniéndolos de nuevo con el resto de nuestro código del repositorio.

No. No. Y ahora estamos desplegando.

No. No.

Y solo una palabra rápida sobre, como, infraestructura como código. Así que tengo esto configurado, de esa manera garantiza que todos los recursos estarán allí. No necesariamente tienes que tener esa parte. Si quieres tener, como, un flujo de trabajo de GitHub Actions separado que despliegue tu aplicación de función separado de la aplicación Next.js, podrías hacerlo totalmente. Elegí hacerlo de esta manera porque la aplicación de función es una dependencia de esta aplicación Next.js, y quiero asegurarme de que exista y esté configurada correctamente antes de intentar ejecutar traducciones contra ella. Pero esa es solo mi preferencia personal.

No. Muy bien. Así que lo ha desplegado, y ahora solo está esperando que el servicio de aplicación web estática responda diciendo que la aplicación web estática está realmente lista para ser vista. Y esto toma alrededor de dos minutos.

Y luego, una vez que esto esté hecho, podremos ver la aplicación completada. No. No. Bien. Así que tomó un poco más de tiempo de lo esperado, pero nuestra aplicación web se desplegó. Así que vamos a abrirla y echarle un vistazo. Muy bien. Aquí vamos. Así que tenemos nuestro blog, y tenemos diferentes publicaciones aquí. Y para cada publicación, aquí es donde entra el título de los metadatos, y luego este es el extracto de los metadatos. Ahora tenemos otras publicaciones aquí abajo, y si abrimos una de estas publicaciones, tenemos nuestro título nuevamente, y luego tenemos nuestro markdown real siendo analizado en HTML para ser renderizado en el cliente. Y puedes ver que tenemos diferentes formatos. Así que, como, tenemos encabezados. Tenemos un enlace justo aquí. Tenemos algo de texto en negrita. Tenemos una lista desordenada.

Y si volvemos y cambiamos idiomas.

No. No. No. Ahora vemos que el título ha sido traducido. El extracto ha sido traducido. Es para todos estos. No. Y luego si abrimos una de estas publicaciones. No. No. Ves que se ha mantenido el formato original. Así que, por ejemplo, nuestros encabezados todavía están ahí. Nuestro enlace sigue funcionando como se esperaba. No. El texto sigue siendo el mismo. Lista desordenada. Todo se renderiza exactamente igual. No. No. No. Así que dejaré esto por un segundo. No. No. No. No. No. No. No. No.

Así que también, me encantaría escuchar sobre cualquier solución multilingüe que construyas basada en los conceptos que cubrimos hoy. Así que por favor siéntete libre de conectarte conmigo en LinkedIn o X. Gracias a todos por asistir. Y espero que disfruten el resto de su conferencia. Cuídense.