Traduction avec IA intégrée

Thomas Steiner

Alexandra Klepper

Publié le 13 novembre 2024, dernière mise à jour le 20 mai 2025

Utilisez l'API Translator dans Chrome pour traduire du texte avec des modèles d'IA fournis dans le navigateur.

Il est possible que le contenu de votre site Web soit déjà disponible dans plusieurs langues. Avec l'API Translator, les utilisateurs peuvent écrire dans leur langue maternelle. Par exemple, ils peuvent participer à des discussions d'assistance dans leur langue maternelle, et votre site peut traduire leur message dans la langue maternelle de vos agents d'assistance avant qu'il ne quitte l'appareil de l'utilisateur. Cela crée une expérience fluide, rapide et inclusive pour tous les utilisateurs.

La traduction de contenu Web nécessite généralement l'utilisation d'un service cloud. Tout d'abord, le contenu source est importé sur un serveur, qui effectue la traduction dans une langue cible. Le texte obtenu est ensuite téléchargé et renvoyé à l'utilisateur. Lorsque le contenu est éphémère et ne nécessite pas d'être enregistré dans une base de données, la traduction côté client permet d'économiser du temps et de l'argent par rapport à un service de traduction hébergé.

Premiers pas

Les API Language Detector et Translator fonctionnent dans Chrome sur ordinateur. Elles ne fonctionnent pas sur les appareils mobiles.

Exécutez la détection de fonctionnalités pour voir si le navigateur est compatible avec l'API Translator.

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

Vous connaissez toujours la langue cible des traductions, mais vous ne connaissez pas toujours la langue source. Dans ce cas, vous pouvez utiliser l' API Language Detector.

Téléchargement de modèles

L'API Translator utilise un modèle expert entraîné pour générer des traductions de haute qualité. L'API est intégrée à Chrome, et le modèle est téléchargé la première fois qu'un site Web l'utilise.

Pour déterminer si le modèle est prêt à être utilisé, appelez la fonction asynchrone Translator.availability(). Si la réponse à availability() est downloadable, écoutez la progression du téléchargement pour informer l'utilisateur de son état, car cela peut prendre du temps.

Vérifier la compatibilité des combinaisons linguistiques

La traduction est gérée à l'aide de modules linguistiques, téléchargés à la demande. Un module linguistique est comme un dictionnaire pour une langue donnée.

• sourceLanguage : langue actuelle du texte.
• targetLanguage : langue finale dans laquelle le texte doit être traduit.

Utilisez des codes courts de langue BCP 47 comme chaînes. Par exemple, 'es' pour l'espagnol ou 'fr' pour le français.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

Écoutez la progression du téléchargement du modèle avec l'événement downloadprogress :

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Si le téléchargement échoue, les événements downloadprogress s'arrêtent et la promesse ready est rejetée.

Créer et exécuter le traducteur

Pour créer un traducteur, vérifiez l'activation de l'utilisateur et appelez la fonction asynchrone create() function. La fonction create() du traducteur nécessite un paramètre d'options avec deux champs, l'un pour sourceLanguage et l'autre pour targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Une fois que vous disposez d'un traducteur, appelez la fonction asynchrone translate().

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

Si vous devez traiter des textes plus longs, vous pouvez également utiliser la version en streaming de l'API et appeler translateStreaming().

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Traductions séquentielles

Les traductions sont traitées de manière séquentielle. Si vous envoyez de grandes quantités de texte à traduire, les traductions suivantes sont bloquées jusqu'à ce que les précédentes soient terminées.

Pour obtenir la meilleure réponse à vos requêtes, regroupez-les et ajoutez une interface de chargement, telle qu'un spinner, pour indiquer que la traduction est en cours.

Langues disponibles

Les langues suivantes sont acceptées par l'implémentation de l'API Translator dans Chrome.

Démo

Vous pouvez voir l'API Translator, utilisée en combinaison avec l'API Language Detector, dans l'environnement de test de l'API Translator et de l'API Language Detector.

Règle relative aux autorisations, iframes et Web Workers

Par défaut, l'API Translator n'est disponible que pour les fenêtres de premier niveau et les iframes de même origine. L'accès à l'API peut être délégué à des iframes d'origine croisée à l'aide de l'attribut allow="" de la règle relative aux autorisations :

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

L'API Translator n'est pas disponible dans les Web Workers en raison de la complexité de l'établissement d'un document responsable pour chaque worker, afin de vérifier l'état de conformité avec les règles relatives aux autorisations.

Envoyer des commentaires

Nous voulons voir ce que vous créez. Partagez vos sites Web et applications Web avec nous sur X, YouTube, et LinkedIn.

Pour envoyer des commentaires sur l'implémentation de Chrome, signalez un bug ou une demande de fonctionnalité.