Créez une application de traduction avec l'IA intégrée de Chrome dans Angular

DEV - 31/12
Dans cet article de blog, je décris comment créer localement une application de traduction simple à l'aide de Chrome...

Dans cet article de blog, je décris comment créer localement une application de traduction simple à l'aide de l'API de traduction intégrée de Chrome et d'Angular. Tout d'abord, l'application Angular appelle l'API pour créer un détecteur de langue qui détecte le code de langue du texte saisi. Ensuite, il crée un traducteur pour traduire les textes entre les langues source et cible.

L'avantage de l'utilisation de l'IA intégrée de Chrome est nul puisque l'application utilise les modèles locaux de Chrome Canary.

C'est la voie heureuse lorsque les utilisateurs utilisent Chrome Dev ou Chrome Canary. Une implémentation de secours doit exister si les utilisateurs utilisent des navigateurs non Chrome ou d'anciens navigateurs Chrome, par exemple en appelant Gemma ou Gemini sur Vertex AI pour renvoyer le texte traduit.

Installer Gemini Nano sur Chrome

Mettez à jour Chrome Dev/Canary vers la dernière version. Au moment d’écrire ces lignes, la version la plus récente de Chrome Canary est la 133.

Veuillez vous référer à cette section pour vous inscrire au programme de préversion anticipée de Chrome Built-in AI. https://developer.chrome.com/docs/ai/built-in#get_an_early_preview

Veuillez vous référer à cette section pour activer Gemini Nano sur Chrome et télécharger le modèle. https://developer.chrome.com/docs/ai/get-started#use_apis_on_localhost

Installer l'API de détection de traduction sur Chrome

  1. Accédez à chrome://flags/#langue-detection-api.
  2. Sélectionnez Activé
  3. Accédez à chrome://flags/#translation-api.
  4. Sélectionnez Activé sans limite de pack de langue pour essayer plus de paires de langues.
  5. Cliquez sur Relancer ou redémarrez Chrome.
  6. Ouvrez un nouvel onglet, accédez à chrome://components.
  7. Rechercher Chrome TranslateKit
  8. Cliquez sur le bouton « Vérifier les mises à jour » pour télécharger le modèle de langage. Le numéro de version devrait être mis à jour.
  9. (Facultatif) Ouvrez un nouvel onglet, accédez à chrome://on-device-translation-internals/
  10. (Facultatif) Installez les paires de langues.

Échafauder une application angulaire

ng nouvelle traduction-api-démo
Entrer en mode plein écran Quitter le mode plein écran

Installer les dépendances

npm je -save-exact -save-dev @types/dom-chromium-ai
Entrer en mode plein écran Quitter le mode plein écran

Cette dépendance fournit le typage TypeScript de toutes les API Chrome Built-in. Par conséquent, les développeurs peuvent écrire des codes élégants pour créer des applications d’IA en TypeScript.

Dans main.ts, ajoutez une balise de référence pour pointer vers le fichier de définition de typage du package.

// main.ts ///
Entrer en mode plein écran Quitter le mode plein écran

Détecteur et traducteur de langage Bootstrap

importer { InjectionToken } depuis '@angular/core' ; export const AI_TRANSLATION_API_TOKEN = nouveau InjectionToken('AI_TRANSLATION_API_TOKEN'); export const AI_LANGUAGE_DETECTION_API_TOKEN = nouveau InjectionToken('AI_LANGUAGE_DETECTION_API_TOKEN');
Entrer en mode plein écran Quitter le mode plein écran
fonction d'exportation provideTranslationApi() : EnvironmentProviders { return makeEnvironmentProviders([ { provide : AI_TRANSLATION_API_TOKEN, useFactory: () => { const platformId = inject(PLATFORM_ID); const objWindow = isPlatformBrowser(platformId) ? window : non défini ; return objWindow?.ai? .traducteur ? objWindow.ai.translator : non défini ; }, }, { provide : AI_LANGUAGE_DETECTION_API_TOKEN, useFactory : () => { const platformId = inject(PLATFORM_ID); const objWindow = isPlatformBrowser(platf...
[Courte citation de 8% de l'article original]