Traductions Ruby on Rails avec une IA de qualité humaine

Exemple Rails i18n : démonstration d’une application Rails traduisible

Pour montrer comment l’internationalisation (i18n) et la traduction de Ruby on Rails fonctionnent en pratique, nous avons créé une petite application de démonstration Rails. L’application affiche l’heure actuelle du serveur avec un bouton d’actualisation et comprend un simple sélecteur de langue. Chaque étape ci-dessous a une référence de commit afin que vous puissiez suivre les modifications du code.

Tout d’abord, dans config/application.rb, indiquez à Rails les langues que l’application doit prendre en charge et définissez des paramètres régionaux par défaut.

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

Ensuite, ajoutez les paramètres régionaux à l’URL afin que chaque langue ait son propre chemin, comme /en/time ou /es/time.

scope "/:locale" do
 get '/time', to: 'home#index', as: :time_display
end

scope "/:locale" do
  get '/time', to: 'home#index', as: :time_display
end

Enfin, dans app/controllers/application_controller.rb, assurez-vous que Rails charge les bons paramètres régionaux à partir de l’URL et les inclut dans tous les liens.

class ApplicationController < ActionController::Base
 around_action :switch_locale

 def switch_locale(&action)
 locale = params[:locale] || I18n.default_locale
 I18n.with_locale(locale, &action)
 end

 def default_url_options
 { locale: I18n.locale }
 end
end

class ApplicationController < ActionController::Base
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

Maintenant que l’application prend en charge plusieurs paramètres régionaux, donnez aux utilisateurs un moyen de basculer entre eux.

Rails inclut déjà les paramètres régionaux actuels dans toutes les URL générées (en raison de la méthode default_url_options dans ApplicationController). Cela signifie que vous pouvez créer une interface utilisateur simple qui met uniquement à jour le paramètre de paramètres régionaux tout en maintenant l’utilisateur sur la même page.

Dans notre application de démonstration, le sélecteur de langue est ajouté dans app/views/layouts/application.html.erb et stylisé dans app/assets/stylesheets/application.css.

<nav>
  <%= link_to "English", url_for(locale: :en) %> |
  <%= link_to "Español", url_for(locale: :es) %> |
  <%= link_to "Deutsch", url_for(locale: :de) %>
</nav>

<nav>
  <%= link_to "English",  url_for(locale: :en) %> |
  <%= link_to "Español",  url_for(locale: :es) %> |
  <%= link_to "Deutsch",  url_for(locale: :de) %>
</nav>

Avant de pouvoir traduire votre application, tout le texte visible par l’utilisateur doit se trouver dans les fichiers Rails i18n au lieu d’être codé en dur. Cela signifie :

• Faites de même pour tout texte JavaScript visible (comme les alertes ou les info-bulles)
• Remplacez le texte dans les vues et les contrôleurs par des clés de traduction
• Ajoutez ces clés et leurs valeurs de langue par défaut à config/locales/en.yml

Partie a. Remplacez le texte dans les vues et les contrôleurs

Rails utilise l’assistant intégré I18n.t (ou simplement t) pour rechercher des chaînes dans vos fichiers de traduction.

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

Le texte codé en dur n’apparaîtra pas dans votre fichier YAML, ce qui signifie qu’il ne pourra pas être traduit ultérieurement.

Ajoutez ces clés dans config/locales/en.yml :

en:
 hello: "Hello"
 current_time: "Current time: %{time}"
 refresh: "Refresh"

en:
  hello: "Hello"
  current_time: "Current time: %{time}"
  refresh: "Refresh"

Partie b. Ajoutez des chaînes JavaScript à YAML

Rails n’extrait pas automatiquement le texte des fichiers JavaScript. Si vous avez des chaînes affichées aux utilisateurs dans le navigateur, comme des alertes, des info-bulles ou des messages de confirmation, vous devrez également les placer dans votre fichier YAML de langue source.

Par exemple, pour traduire une fenêtre contextuelle de confirmation en JavaScript, ajoutez la chaîne à config/locales/en.yml :

en:
 confirm: "Are you sure?"

en:
  confirm: "Are you sure?"

Plus tard, cela sera exporté avec vos traductions Ruby afin que les vues et JavaScript utilisent les mêmes clés.

À ce stade, votre fichier en.yml contient tout le texte qui apparaît dans votre application. Ce fichier est la version de base que Private Translation Cloud utilisera pour créer des traductions dans d’autres langues.

Maintenant que tout le texte de votre application est stocké dans config/locales/en.yml, vous pouvez vous connecter à votre compte PTC et générer des traductions.

• PTC s’est connecté à notre référentiel et a automatiquement détecté le fichier anglais
• Il a créé des versions traduites comme fr.yml et de.yml
• Il a ouvert une demande d’extraction avec les nouveaux fichiers dans le même dossier

Chaque fichier traduit conserve les mêmes clés et la même structure que la version anglaise, vous pouvez donc les fusionner en toute sécurité dans votre projet.

Vos fichiers .yml traduits fonctionnent automatiquement dans les vues Rails. Mais JavaScript ne peut pas lire YAML — il a besoin de JSON.

Pour rendre vos traductions disponibles en JavaScript, utilisez la gem i18n-js pour convertir YAML en un fichier JSON que le navigateur peut lire :

1. Ajoutez la gem i18n-js à votre Gemfile et exécutez bundle install.
2. Après l’installation, exécutez i18n init pour générer la configuration par défaut.
3. Mettez à jour votre configuration pour définir le fichier sur public/locales.json. Cela prépare votre application à stocker les traductions dans un fichier JSON auquel JavaScript peut accéder.

Maintenant, exécutez la commande i18n export. Cette commande lit vos fichiers .yml et écrit les clés traduites dans public/locales.json.

Avec locales.json en place, vous pouvez charger des traductions dans votre code JavaScript et afficher le texte correct en fonction de la langue active.

Rails 7 inclut Importmap, ce qui facilite la gestion des dépendances JavaScript sans bundlers.

1. Épinglez les bibliothèques dans config/importmap.rb :

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

2. Créez un fichier dans app/javascript/load_locale.js et ajoutez un script de chargement pour récupérer le fichier JSON :

export async function loadLocale() {
 const response = await fetch('/locales.json');
 const data = await response.json();
 return data;
}

export async function loadLocale() {
  const response = await fetch('/locales.json');
  const data = await response.json();
  return data;
}

Maintenant, votre JavaScript peut récupérer les traductions et les afficher comme les vues Rails.

À ce stade, Rails exporte les traductions vers locales.json et votre JavaScript peut les charger. La dernière étape consiste à s’assurer que JavaScript utilise les mêmes paramètres régionaux que les vues Rails.

1. Transmettez les paramètres régionaux actuels au frontend en les ajoutant à la balise <body> :

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

2. Importez i18n-js et la fonction de chargement dans votre JavaScript :

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

3. Lorsque la page se charge, récupérez les traductions et définissez les paramètres régionaux :

document.addEventListener('turbo:load', async () => {
 const translations = await loadLocale()
 const i18n = new I18n(translations)

 // use the current locale from the body tag
 i18n.locale = document.body.dataset['locale']

 // Example: confirmation dialog
 if (confirm(i18n.t('confirm'))) {
 // user clicked OK
 }
})

document.addEventListener('turbo:load', async () => {
  const translations = await loadLocale()
  const i18n = new I18n(translations)

  // use the current locale from the body tag
  i18n.locale = document.body.dataset['locale']

  // Example: confirmation dialog
  if (confirm(i18n.t('confirm'))) {
    // user clicked OK
  }
})

Maintenant, votre JavaScript affichera les messages dans la langue sélectionnée, tout comme vos vues Rails.

Avec cela, l’application de démonstration est entièrement multilingue : les vues Rails et JavaScript affichent la bonne langue, et Private Translation Cloud maintient les traductions à jour.