Utilisez l'API Prompt de Chrome pour générer un planificateur de voyage dans Angular

DEV - 15/01
Dans cet article de blog, je décris comment créer localement une application de planification de voyage à l'aide de la fonctionnalité intégrée de Chrome...

Dans cet article de blog, je décris comment créer localement une application de planification de voyage à l'aide de l'API d'invite intégrée et d'Angular de Chrome. L'application Angular appelle l'API Prompt pour créer un modèle de langage et soumet des requêtes à Gemini Nano pour fournir des détails tels que la demande de visa de voyage, les vêtements à emporter et les attractions à visiter chaque jour.

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. Si les utilisateurs utilisent des navigateurs autres que Chrome ou d'anciens navigateurs Chrome, une implémentation de secours devrait être disponible, par exemple en appelant Gemma ou Gemini sur Vertex AI pour renvoyer le sentiment correct.

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

Désactiver le classificateur de sécurité de texte sur Chrome

  1. (Développement local) Accédez à chrome://flags/#text-safety-classifier.
  2. (Développement local) Sélectionnez Désactivé
  3. Cliquez sur Relancer ou redémarrez Chrome.

Échafauder une application angulaire

ng la nouvelle invite-api-demo
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

Amorcer le modèle de langage

importer { InjectionToken } depuis '@angular/core' ; export const AI_PROMPT_API_TOKEN = nouveau InjectionToken('AI_PROMPT_API_TOKEN');
Entrer en mode plein écran Quitter le mode plein écran
fonction d'exportation provideLanguageModel() : EnvironmentProviders { return makeEnvironmentProviders([ { provide : AI_PROMPT_API_TOKEN, useFactory: () => { const platformId = inject(PLATFORM_ID); const objWindow = isPlatformBrowser(platformId) ? window : non défini ; return objWindow?.ai? .langageModèle; }, } ]); }
Entrer en mode plein écran Quitter le mode plein écran

Je défin...
[Courte citation de 8% de l'article original]