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 les modèles d'IA fournis dans le navigateur.

Il est possible que votre site Web propose déjà du contenu dans plusieurs langues. L'API Translator permet aux utilisateurs d'écrire dans leur langue maternelle. Par exemple, les utilisateurs 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 que le message ne quitte 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 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 de gagner du temps et de réduire les coûts par rapport à un service de traduction hébergé.

Commencer

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 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 utilise cette API.

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 en informer l'utilisateur, car cela peut prendre du temps.

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'

É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(). 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 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, comme un spinner, 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 des API Translator et Language Detector.

Règles sur les 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é aux iFrames multi-origine à l'aide de l'attribut Permissions Policy allow="" :

<!--
  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 la règle relative 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 demandez une fonctionnalité.