HTML

Traduction IA pour les fichiers HTML avec Lingo.dev CLI

Qu'est-ce que HTML ?

HTML (HyperText Markup Language) est le langage de balisage standard pour créer des pages web et des applications web. Il utilise des balises pour structurer le contenu et définir des éléments comme les titres, les paragraphes, les liens, les images et les formulaires.

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev CLI est une CLI gratuite et open-source pour traduire des applications et du contenu avec l'IA. Elle est conçue pour remplacer les logiciels traditionnels de gestion de traduction tout en s'intégrant aux pipelines existants.

Pour en savoir plus, consultez Vue d'ensemble.

À propos de ce guide

Ce guide explique comment traduire des fichiers HTML avec Lingo.dev CLI.

Vous apprendrez comment :

  • Créer un projet à partir de zéro
  • Configurer un pipeline de traduction
  • Générer des traductions avec l'IA

Prérequis

Pour utiliser Lingo.dev CLI, assurez-vous que Node.js v18+ est installé :

❯ node -v
v22.17.0

Étape 1. Configurer un projet

Dans le répertoire de votre projet, créez un fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Ce fichier définit le comportement du pipeline de traduction, y compris les langues entre lesquelles traduire et où se trouve le contenu localisable dans le système de fichiers.

Pour en savoir plus sur les propriétés disponibles, consultez i18n.json.

Étape 2. Configurer la locale source

La locale source est la langue et la région d'origine dans lesquelles votre contenu a été rédigé. Pour configurer la locale source, définissez la propriété locale.source dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

La locale source doit être fournie sous forme de balise de langue BCP 47.

Pour la liste complète des codes de locale pris en charge par Lingo.dev CLI, consultez Codes de locale pris en charge.

Étape 3. Configurer les locales cibles

Les locales cibles sont les langues et régions vers lesquelles vous souhaitez traduire votre contenu. Pour configurer les locales cibles, définissez la propriété locale.targets dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Étape 4. Créer le contenu source

Si ce n'est pas déjà fait, créez un ou plusieurs fichiers HTML contenant le contenu à traduire. Ces fichiers doivent être situés dans un chemin qui inclut la locale source quelque part dans le chemin (par exemple, comme nom de répertoire tel que en/ ou comme partie du nom de fichier comme messages.en.html).

Pour les fichiers HTML, le contenu traduisible comprend :

  • Le contenu textuel des éléments HTML
  • Les valeurs d'attributs incluant :
    • Les attributs alt (descriptions d'images)
    • Les attributs title (infobulles)
    • Les attributs placeholder (indices de saisie)
    • Les attributs value (valeurs des boutons et champs de saisie)
    • Les attributs content des balises meta
  • L'attribut lang est automatiquement mis à jour pour correspondre à la locale cible

Les balises script, les balises style et les attributs non traduisibles sont préservés.

Par exemple :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
  </body>
</html>

Étape 5. Créer un bucket

  1. Dans le fichier i18n.json, ajoutez un objet "html" à l'objet buckets :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {}
  }
}

  2. Dans l'objet "html", définissez un tableau d'un ou plusieurs motifs include :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

    Ces motifs définissent quels fichiers traduire.

    Les motifs eux-mêmes :

    • doivent contenir [locale] comme placeholder pour la locale configurée
    • peuvent pointer vers des chemins de fichiers (par exemple, "[locale]/config.html")
    • peuvent utiliser des astérisques comme caractères génériques (par exemple, "[locale]/*.html")

    Les motifs glob récursifs (par exemple, **/*.html) ne sont pas pris en charge.

Étape 6. Configurer un LLM

Lingo.dev CLI utilise des grands modèles de langage (LLMs) pour traduire du contenu avec l'IA. Pour utiliser l'un de ces modèles, vous avez besoin d'une clé API d'un fournisseur pris en charge.

Pour démarrer le plus rapidement possible, nous recommandons d'utiliser Lingo.dev Engine — notre propre plateforme hébergée qui offre 10 000 jetons d'utilisation mensuelle gratuite :

  1. Inscrivez-vous pour un compte Lingo.dev.

  2. Exécutez la commande suivante :

    npx lingo.dev@latest login

    Cela ouvrira votre navigateur par défaut et vous demandera de vous authentifier.

  3. Suivez les instructions.

Étape 7. Générer les traductions

Dans le répertoire qui contient le fichier i18n.json, exécutez la commande suivante :

npx lingo.dev@latest run

Cette commande :

  1. Lit le fichier i18n.json.
  2. Trouve les fichiers qui doivent être traduits.
  3. Extrait le contenu traduisible des fichiers.
  4. Utilise le LLM configuré pour traduire le contenu extrait.
  5. Écrit le contenu traduit dans le système de fichiers.

La première fois que les traductions sont générées, un fichier i18n.lock est créé. Ce fichier garde une trace du contenu qui a été traduit, évitant ainsi des retraductions inutiles lors des exécutions ultérieures.

Exemple

en/example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
    <input type="text" placeholder="Enter text here" />
    <a href="#" title="Click for more">Learn more</a>
  </body>
</html>

es/example.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>MyApp - Hola Mundo</title>
    <meta name="description" content="Una aplicación de demostración simple" />
  </head>
  <body>
    <h1>Bienvenido a MyApp</h1>
    <p>¡Hola, mundo! Esta es una demostración simple con <strong>texto en negrita</strong>.</p>
    <img src="example.jpg" alt="Imagen de ejemplo" />
    <input type="text" placeholder="Ingresa texto aquí" />
    <a href="#" title="Haz clic para más">Saber más</a>
  </body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

i18n.lock

version: 1
checksums:
  ab95e8c959a889717f02a05af5c5b1e6:
    head/0/0: 7d39787547365ee4194f29f3f54e5c05
    head/1#content: 49f8864eb0e53903f04532bf33e1e4fa
    head/2#content: c2a1da93efb7e744d100df705e5fcbfd
    head/3#content: d94b318cb327f61f1aea44a6cb1fdcad
    body/0/0: d1c3a9f35e377554a4ccaa467ca26614
    body/1/0: e19afd1952881bdf10063f9478980147
    body/1/1/0: 7cd9256312384858ecba6c29d3c2e550
    body/1/2: ce8b9bb44f031705708a70e068bb73c8
    body/1/3/0: 037d114f19b882f08994712b8d9c1e37
    body/1/4: f05f450fffcb17520c441ab9789f40ce
    body/2/0/0/0: 57d373bcffe2d376cbf9919da30ca30b
    body/3#alt: 68f95fca639f8bf72a4796b6734b02d5
    body/4#alt: cb7d920c3bbcade1c8e0307093f58573
    body/5#placeholder: a05ce3b4578f55e41bd2ad4964f966b4
    body/6#placeholder: a4554ed67c02872e302b0042724f859d
    body/7#title: c903c6985a40ce02d65c90229de35a4e
    body/7/0: e598091d132f890c37a6d4ed94f6d794
    body/8#title: d656021ba5f485fa1a82f8aac6ecc5de
    body/8/0: 1c6856488bd34ad87fcacce2d8e66a0b
    body/9/0: 862964e6cd73cdffdcac622406c6bac9