Traduction avec IA intégrée

Thomas Steiner

Alexandra Klepper

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

Explication	Web	Extensions	État de Chrome	Intention
MDN	Chrome 138	Chrome 138	Afficher	Intention d'expédier

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

Il est possible que votre site Web propose déjà du contenu dans plusieurs langues pour le rendre accessible à une audience mondiale. L'API Translator permet aux utilisateurs de contribuer dans leur langue maternelle. Par exemple, les utilisateurs peuvent participer à des discussions d'assistance dans leur langue maternelle, et votre site peut les traduire dans la langue utilisée par vos agents d'assistance avant qu'elles ne quittent l'appareil de l'utilisateur. Cela permet de créer une expérience fluide, rapide et inclusive pour tous les utilisateurs.

La traduction de contenu sur le 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. En exécutant la traduction sur le client, vous gagnez du temps en évitant les allers-retours vers le serveur et vous économisez les coûts d'hébergement du service de traduction.

Commencer

L'API Translator est disponible à partir de Chrome 138 (version stable). Commencez par exécuter 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 pas toujours la langue source. Dans ce cas, vous pouvez utiliser l'API Language Detector.

Vérifier la prise en charge 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 les codes de langue courts 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'

La fonction availability() renvoie une promesse avec les valeurs suivantes :

• "unavailable" : l'implémentation ne prend pas en charge la traduction ni la détection de la langue pour les langues indiquées.
• "downloadable" : l'implémentation permet la traduction ou la détection de la langue des langues indiquées, mais un téléchargement est nécessaire pour continuer. Le téléchargement peut être le modèle de navigateur.
• "downloading" : l'implémentation prend en charge la traduction ou la détection de la langue pour les langues indiquées. Le navigateur termine un téléchargement en cours, dans le cadre de la création de l'objet associé.
• "available" : l'implémentation prend en charge la traduction ou la détection de la langue pour les langues données, et tous les téléchargements requis sont déjà terminés.

É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, appelez la fonction asynchrone create(). Il 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 avez un traducteur, appelez l'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 demandes, regroupez-les et ajoutez une interface de chargement, telle qu'un indicateur de progression, pour indiquer que la traduction est en cours.

Démo

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

Effort de standardisation

Nous nous efforçons de standardiser l'API Translator pour assurer la compatibilité entre les navigateurs.

Notre proposition d'API a reçu le soutien de la communauté et a été transférée au groupe de la communauté W3C Web Incubator pour une discussion plus approfondie. L'équipe Chrome a demandé l'avis du Technical Architecture Group du W3C et a sollicité Mozilla et WebKit pour connaître leur position sur les normes.

Vous pouvez participer à l'élaboration des normes en rejoignant le Web Incubator Community Group.

Envoyer des commentaires

Nous voulons découvrir ce que vous créez avec l'API Language Detector. 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 demandez l'ajout d'une fonctionnalité.