Topics

Un día, el presidente me dio una orden: "Hagamos que nuestro sitio web sea multilingüe. ¡Parece que existe una API llamada Google Cloud Translation que puede traducir automáticamente durante la compilación!"

Nuestro sitio web es estático (SSG) y está desarrollado con Astro. Decidí implementarlo mientras investigaba la API de Google Cloud Translation.

Preparación: Habilitar la clave API y crear una cuenta de servicio

Habilitación de la API de traducción en la nube

Consola de Google CloudEn "API y servicios", seleccione "API de traducción en la nube".Permitir

Creación de una cuenta de servicio y una clave

Para utilizar la API, cree una cuenta de servicio y descargue una clave JSON.

Esta clave JSON contiene su clave privada, así que tenga mucho cuidado de no revelarla.

Otorgar derechos de acceso a la cuenta de servicio.

Vaya a IAM y agregue la dirección de correo electrónico de la cuenta de servicio como principal y el rol como "Usuario de API de Cloud Translation".

Cómo generar páginas multilingües

Lo primero que intenté fue copiar el archivo Astro, llamar a la API de traducción en el momento y generar automáticamente archivos Astro multilingües.

Aunque se generó la página, encontramos varios problemas, como errores de código, incompatibilidad con componentes importados y problemas cuando se escribieron etiquetas dentro de atributos, por lo que cambiamos nuestro enfoque.

Finalmente, opté por un proceso de poscompilación simple que realiza la traducción del HTML estático generado después de la compilación.

La configuración del idioma está vinculada al archivo de configuración i18n de Astro

Para administrar la estructura multilingüe del sitio, utilicé el archivo de configuración Astro i18n (LOCALES_SETTING) se utilizó como "archivo de configuración" para el script de traducción.

Si deseas agregar un idioma, simplemente agrégalo aquí.

export const LOCALES_SETTING: LocaleSetting = {
  ja: {
    label: '日本語',
    lang: 'ja',
    oglocale: 'ja_JP',
    path: 'ja',
  },
  en: {
    label: 'English',
    lang: 'en',
    oglocale: 'en_US',
    path: 'en',
  },
  de: {
    label: 'Deutsch',
    lang: 'de',
    oglocale: 'de_DE',
    path: 'de',
  },
  es: {
    label: 'Español',
    lang: 'es',
    oglocale: 'es_ES',
    path: 'es',
  },
  cn: {
    label: '简体中文',
    lang: 'zh-CN',
    oglocale: 'zh_CN',
    path: 'zh-cn',
  },
  tw: {
    label: '繁體中文',
    lang: 'zh-TW',
    oglocale: 'zh_TW',
    path: 'zh-tw',
  },
};

Implementación del cambio de idioma

El menú desplegable de selección de idioma también se genera a partir del archivo de configuración i18n mencionado anteriormente. Dado que la etiqueta se convierte en el nombre del elemento seleccionado, no queremos traducirlo. Por lo tanto, hemos añadido código para sobrescribirlo con el valor de la etiqueta. (Parece que `translate="no"` no funciona con la API de Cloud Translation).

Por cierto, me dijeron que "añadiera una bandera nacional al menú desplegable" e intenté hacerlo, pero parece que poner una bandera nacional en el selector de idioma es una contradicción. Por ejemplo, si un usuario austriaco habla alemán, podría confundirse al ver la bandera alemana, lo que demuestra que el país y el idioma no siempre coinciden. Ahora que lo mencionas, es cierto. Podría convertirse en un tema delicado en algunos casos.

Caché para minimizar el uso de API.

En este punto, el mecanismo para generar texto multilingüe está casi completo. Sin embargo, el problema es el costo.

A través de prueba y error y compilaciones repetidas, las tarifas de uso de la API superaron rápidamente los 10.000 yenes.

Por lo tanto, durante el proceso de compilación, la combinación de japonés y traducción procesada por la API se utiliza como caché.translate-cache.jsonLos datos se guardarán en un archivo y la siguiente compilación usará este JSON. Se modificó la especificación para que solo se llamen los datos faltantes mediante la API y los resultados se agreguen al JSON.

Se guardará así.

{
  "en:UIデザイン": "UI Design",
  "en:私たちについて": "About Us",
  "en:サービス": "Service",
  ...
}

¡Esto reduce significativamente los costos! Dependiendo de la frecuencia de actualización, los costos operativos serán de solo unos cientos de yenes al mes.

Notas operativas

Al agregar artículos mediante un CMS y compilarlos mediante un gancho de implementación, el servidor solo puede acceder a los archivos de caché antiguos en Git. Por lo tanto, decidimos implementar estrictamente una regla de compilación local al agregar contenido y enviar los archivos de caché actualizados a Git.

Control de traducciones incorrectas

Después de todo, está traducido por máquina y hay algunas traducciones extrañas aquí y allá.
Se detectaron inconsistencias notables en la ortografía de los nombres propios, como por ejemplo que el nombre de la empresa "Liberogic" a veces se escribía como "Liberogic" o "Liberogic", y que la notación del estado corporativo (Inc., Ltd., etc.) no estaba estandarizada.

La API de Cloud Translation cuenta con una función de glosario, pero solo sirve como apoyo para la traducción automática y no permite un control completo y detallado. Además de cargar un archivo CSV, es necesario ejecutar un comando cada vez para recrear los recursos, lo que puede resultar difícil para el personal de operaciones que no esté familiarizado con la web.

Integración de hojas de cálculo para un control confiable

Por lo tanto, compilamos los idiomas y los errores tipográficos en una hoja de cálculo, recuperamos esta hoja de cálculo en formato CSV durante la compilación y realizamos un proceso de reemplazo de texto para que la notación pudiera sobrescribirse y corregirse.

Esto significa que los administradores pueden controlar las traducciones hasta cierto punto simplemente actualizando una hoja de cálculo, sin tener que tocar ningún código.

resumen

Tras varias pruebas, logré crear un sistema más práctico de lo que esperaba usando la API de Google Cloud Translation para traducción automática. Para un soporte multilingüe sencillo y rentable, ¡creo que es perfectamente adecuado!

(El CEO dice que quiere hacer compatible el idioma RTL con el árabe, pero eso sería una tarea enorme).