Créer des fonctionnalités d'IA générative alimentées par vos données avec Genkit

1. Avant de commencer

Dans cet atelier de programmation, vous apprendrez à utiliser Genkit pour intégrer l'IA générative à votre application. Genkit est un framework Open Source qui vous aide à créer, déployer et surveiller des applications optimisées par l'IA prêtes pour la production.

Genkit est conçu pour les développeurs d'applications. Il vous aide à intégrer facilement de puissantes fonctionnalités d'IA dans vos applications à l'aide de modèles et de paradigmes familiers. Il a été conçu par l'équipe Firebase, en s'appuyant sur notre expérience dans la création d'outils utilisés par des millions de développeurs à travers le monde.

Prérequis

• Vous devez connaître Firestore, Node.js et TypeScript.

Points abordés

• Découvrez comment créer des applications plus intelligentes grâce aux fonctionnalités avancées de recherche de similarités vectorielles de Firestore.
• Découvrez comment implémenter concrètement l'IA générative dans vos applications à l'aide de Genkit.
• Préparez votre solution pour le déploiement et l'intégration.

Prérequis

• Un navigateur de votre choix, tel que Google Chrome
• Un environnement de développement avec un éditeur de code et un terminal
• Un compte Google pour créer et gérer votre projet Firebase

Remarque : Cet atelier de programmation utilise des services Firebase et Google qui nécessitent un compte de facturation Cloud. Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$ et à un compte de facturation Cloud pour l'essai sans frais afin de tester nos services. Sinon, vous devrez fournir un mode de paiement (comme une carte de crédit) pour configurer un compte de facturation Cloud (pour en savoir plus sur les modes de paiement, consultez la documentation sur Cloud Billing).

2. Examiner l'application Web et les services cloud utilisés

Dans cette section, vous allez examiner l'application Web que vous allez créer avec cet atelier de programmation, ainsi que les services cloud que vous allez utiliser.

Application Web

Dans cet atelier de programmation, vous allez travailler dans la base de code d'une application appelée Compass, qui permet de planifier des vacances. Les utilisateurs peuvent choisir une destination, parcourir les activités proposées et créer un itinéraire pour leur voyage.

Dans cet atelier de programmation, vous allez implémenter deux nouvelles fonctionnalités destinées à améliorer l'engagement des utilisateurs avec la page d'accueil de l'application. Ces deux fonctionnalités sont basées sur l'IA générative :

• L'application affiche actuellement une liste statique de destinations. Vous allez le rendre dynamique.
• Vous allez implémenter un itinéraire prérempli pour, espérons-le, augmenter la fidélité.

Remarque : Il s'agit d'un atelier de programmation volumineux comportant de nombreuses étapes. Pour profiter pleinement de cet atelier de programmation :

• Maintenir un rythme régulier en faisant des pauses
• Lorsque vous travaillez avec du code, prenez le temps de comprendre ce qu'il est et comment il fonctionne, plutôt que de le copier et de le coller sans réfléchir.
• Si vous êtes bloqué, revenez à la dernière étape qui fonctionnait et assurez-vous d'avoir effectué chaque étape correctement.
• Si vous trouvez un bug dans l'atelier de programmation ou son code, veuillez le signaler sur GitHub.

Services utilisés

Dans cet atelier de programmation, vous allez utiliser de nombreux services et fonctionnalités Firebase et Cloud. La plupart du code de démarrage est fourni. Le tableau suivant contient les services que vous utiliserez et les raisons pour lesquelles vous les utiliserez.

Service	Motif d'utilisation
Genkit	Vous utilisez Genkit pour intégrer l'IA générative dans une application Node.js / Next.js.
Cloud Firestore	Vous stockez les données dans Cloud Firestore, qui sont ensuite utilisées pour la recherche de similarité vectorielle.
Vertex AI de Google Cloud	Vous utilisez des modèles de fondation de Vertex AI (comme Gemini) pour alimenter vos fonctionnalités d'IA.
Firebase App Hosting	Vous pouvez également utiliser le nouveau service Firebase App Hosting simplifié pour diffuser votre application Web Next.js dynamique (associée à un dépôt GitHub).

3. Configurer l'environnement de développement

Vérifier votre version de Node.js

1. Dans votre terminal, vérifiez que la version 20.0.0 ou ultérieure de Node.js est installée :

   node -v
   

2. Si vous n'avez pas Node.js version 20.0.0 ou ultérieure, téléchargez la dernière version LTS et installez-la.

Obtenir le code source de l'atelier de programmation

Si vous avez un compte GitHub :

1. Créez un dépôt à l'aide de notre modèle sur github.com/FirebaseExtended/codelab-ai-genkit-rag.
2. Créez un clone local du dépôt GitHub de l'atelier de programmation que vous venez de créer :

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Si Git n'est pas installé ou si vous préférez ne pas créer de dépôt :

Téléchargez le dépôt GitHub sous forme de fichier ZIP.

Examiner la structure des dossiers

Sur votre machine locale, recherchez le dépôt cloné et examinez la structure des dossiers :

Dossier	Description
load-firestore-data	Outil de ligne de commande d'assistance pour préremplir rapidement votre collection Firestore
*tout le reste	Code de l'application Web Next.js

Le dossier racine inclut un fichier README.md qui permet de démarrer rapidement l'application Web à l'aide d'instructions simplifiées. Toutefois, si vous débutez, vous devez suivre cet atelier de programmation (au lieu du démarrage rapide), car il contient l'ensemble d'instructions le plus complet.

Si vous n'êtes pas sûr d'avoir correctement appliqué le code comme indiqué dans cet atelier de programmation, vous trouverez le code de la solution dans la branche git end.

Installer la CLI Firebase

1. Vérifiez que la CLI Firebase est installée et qu'il s'agit de la version 13.6 ou ultérieure :

   firebase --version
   

2. Si la CLI Firebase est installée, mais qu'elle n'est pas en version 13.6 ou ultérieure, mettez-la à jour :

   npm update -g firebase-tools
   

3. Si la CLI Firebase n'est pas installée, installez-la :

   npm install -g firebase-tools
   

Si vous ne parvenez pas à mettre à jour ni à installer la CLI Firebase en raison d'erreurs d'autorisation, consultez la documentation npm ou utilisez une autre option d'installation.

Se connecter à Firebase

1. Dans votre terminal, connectez-vous à Firebase :

   firebase login
   

   Si votre terminal indique que vous êtes déjà connecté à Firebase, vous pouvez passer à la section Configurer votre projet Firebase de cet atelier de programmation.
2. Dans votre terminal, saisissez Y ou N selon que vous souhaitez ou non que Firebase collecte des données. (les deux options fonctionnent pour cet atelier de programmation)
3. Dans votre navigateur, sélectionnez votre compte Google, puis cliquez sur Autoriser.

Installer la gcloud CLI de Google Cloud

1. Installez la CLI gcloud.
2. Dans votre terminal, connectez-vous à Google Cloud :

   gcloud auth login
   

4. Configurer votre projet Firebase

Dans cette section, vous allez configurer un projet Firebase et y enregistrer une application Web Firebase. Vous allez également activer quelques services utilisés par l'exemple d'application Web plus loin dans cet atelier de programmation.

Toutes les étapes de cette section sont effectuées dans la console Firebase.

Créer un projet Firebase

1. Connectez-vous à la console Firebase avec le même compte Google que celui utilisé à l'étape précédente.
2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, Compass Codelab).
   

   Ce nom de projet est utilisé comme nom à afficher dans les interfaces Firebase. Firebase crée automatiquement un ID de projet unique basé sur ce nom. Notez que vous pouvez éventuellement cliquer sur l'icône Modifier maintenant pour définir l'ID de projet de votre choix, mais vous ne pourrez plus le modifier une fois le projet créé.

   Prenez note de l'ID de votre projet, car vous en aurez besoin plus tard pour identifier votre projet Firebase dans la CLI Firebase. Si vous oubliez votre ID, vous pourrez toujours le retrouver plus tard dans les paramètres du projet.

3. Cliquez sur Continuer.
4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Ajouter une application Web à votre projet Firebase

1. Accédez à l'écran Vue d'ensemble du projet dans votre projet Firebase, puis cliquez sur Web.
2. Dans la zone de texte Pseudo de l'application, saisissez un pseudo facile à retenir, par exemple My Compass Codelab App. Vous pouvez laisser la case à cocher pour configurer Firebase Hosting décochée, car vous configurerez éventuellement un service d'hébergement à la dernière étape de cet atelier de programmation.
   
3. Cliquez sur Enregistrer l'application > Accéder à la console.

Parfait. Vous avez maintenant enregistré une application Web dans votre nouveau projet Firebase.

Passer à un forfait Firebase supérieur

Pour utiliser Genkit et Vertex AI (ainsi que leurs services cloud sous-jacents), votre projet Firebase doit être associé à la formule Blaze avec paiement à l'usage, ce qui signifie qu'il est associé à un compte de facturation Cloud.

• Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
• Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$et à un compte de facturation Cloud pour l'essai sans frais.
• Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

En savoir plus sur les tarifs de Vertex AI

Pour passer à la formule Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez Passer à une formule supérieure.
2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
   Si vous avez dû créer un compte de facturation Cloud lors de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

Remarque : Vous pouvez rétrograder votre projet vers le forfait Spark sans frais une fois cet atelier de programmation terminé.

Configurer Cloud Firestore

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Base de données Firestore.
2. Cliquez sur Créer une base de données.
3. Laissez le champ Database ID (ID de la base de données) défini sur (default).
4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité pour votre base de données.
6. Cliquez sur Créer.

Activer Vertex AI

Utilisez la CLI gcloud pour configurer Vertex AI. Pour toutes les commandes de cette page, veillez à remplacer YOUR_PROJECT_ID par l'ID de votre projet Firebase.

1. Dans votre terminal, définissez le projet par défaut pour le SDK Google Cloud :

   gcloud config set project YOUR_PROJECT_ID
   

2. Si le message d'avertissement suivant s'affiche : "AVERTISSEMENT : Votre projet actif ne correspond pas au projet de quota dans votre fichier local d'identifiants par défaut de l'application. Cela peut entraîner des problèmes de quota inattendus.", puis exécutez la commande suivante pour définir le projet de quota :

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Activez le service Vertex AI dans votre projet :

   gcloud services enable aiplatform.googleapis.com
   

5. Configurer l'application Web

Pour exécuter l'application Web, vous devez exécuter des commandes dans votre terminal et ajouter du code dans votre éditeur de code. Pour toutes les commandes de cette page, veillez à remplacer YOUR_PROJECT_ID par l'ID de votre projet Firebase.

Configurer la CLI Firebase pour cibler votre projet

1. Dans votre terminal, accédez au répertoire racine de votre projet d'atelier de programmation.
2. Pour que la CLI Firebase exécute toutes les commandes sur votre projet Firebase, exécutez la commande suivante :

   firebase use YOUR_PROJECT_ID
   

Importer des exemples de données dans Firestore

Pour vous aider à démarrer rapidement, cet atelier de programmation vous fournit des exemples de données pré-générés pour Firestore.

1. Pour permettre à la base de code locale d'exécuter du code qui utiliserait normalement un compte de service, exécutez la commande suivante dans votre terminal :

   gcloud auth application-default login
   

   Un nouvel onglet s'ouvre alors dans votre navigateur. Connectez-vous avec le compte Google que vous avez utilisé lors des étapes précédentes.
2. Pour importer les exemples de données Firestore, exécutez les commandes suivantes :

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Vérifiez que les données ont bien été ajoutées à votre base de données en accédant à la section Firestore de votre projet Firebase dans la console Firebase.Le schéma de données importé et son contenu doivent s'afficher.

Associer votre application Web à votre projet Firebase

Le code de votre application Web doit être associé au bon projet Firebase pour utiliser ses services, comme la base de données. Pour ce faire, vous devez ajouter la configuration Firebase à la codebase de votre application. Cette configuration inclut des valeurs essentielles telles que l'ID de votre projet, la clé API et l'ID de votre application, ainsi que d'autres valeurs qui permettent à votre application d'interagir avec Firebase.

1. Obtenez la configuration Firebase de votre application :
   1. Dans la console Firebase, accédez à votre projet Firebase.
   2. Dans le panneau de gauche, cliquez sur l'icône en forme de roue dentée à côté de Vue d'ensemble du projet, puis sélectionnez Paramètres du projet.
   3. Dans la fiche "Vos applications", sélectionnez votre application Web.
   4. Dans la section "Configuration et paramétrage du SDK", sélectionnez l'option Config.
   5. Copiez l'extrait. Il commence par const firebaseConfig ....
2. Ajoutez votre configuration Firebase à la codebase de votre application Web :
   1. Dans votre éditeur de code, ouvrez le fichier src/lib/genkit/genkit.config.ts.
   2. Remplacez la section concernée par le code que vous avez copié.
   3. Enregistrez le fichier.

Prévisualiser l'application Web dans votre navigateur

1. Dans votre terminal, installez les dépendances, puis exécutez l'application Web :

   npm install
   npm run dev:next
   

2. Dans votre navigateur, accédez à l'URL d'hébergement hébergée localement pour afficher l'application Web. Par exemple, dans la plupart des cas, l'URL est http://localhost:3000/ ou une URL similaire.

Compass est une application Next.js qui utilise les composants serveur React. Il s'agit de la page d'accueil.

Remarque : Si l'application ne ressemble pas à celle de la capture d'écran, patientez quelques secondes et actualisez la page. Next.js peut être lent lors du premier rendu.

Cliquez sur Trouver le voyage de mes rêves. Vous pouvez voir qu'il affiche des données codées en dur pour certaines destinations fixes :

N'hésitez pas à explorer. Lorsque vous êtes prêt à continuer, cliquez sur le bouton d'accueil  (en haut à droite).

6. Découvrir l'IA générative avec Genkit

Vous êtes maintenant prêt à exploiter la puissance de l'IA générative dans votre application. Cette section de l'atelier de programmation vous guidera dans l'implémentation d'une fonctionnalité qui suggère des destinations en fonction de l'inspiration fournie par l'utilisateur. Vous utiliserez Genkit et Vertex AI de Google Cloud comme fournisseur du modèle génératif (vous utiliserez Gemini).

Genkit peut stocker l'état des traces et des flows (ce qui vous permet d'inspecter le résultat de l'exécution des flows Genkit). Dans cet atelier de programmation, vous utiliserez Firestore pour stocker ces traces.

Pour terminer cet atelier de programmation, vous allez déployer votre application Genkit sur Firebase App Hosting.

Associer votre application Genkit à votre projet Firebase

Nous avons déjà connecté Genkit à votre projet en modifiant src/lib/genkit/genkit.config.ts à l'étape précédente.

Lancer l'interface utilisateur pour les développeurs Genkit

Genkit est fourni avec une interface utilisateur Web qui vous permet d'interagir avec les LLM, les flux Genkit, les récupérateurs et d'autres composants d'IA.

Dans votre terminal, exécutez la commande suivante :

npm run dev:genkit

Dans votre navigateur, accédez à l'URL Genkit hébergée en local. Dans la plupart des cas, il s'agit de http://localhost:4000/.

Interagir avec Gemini

Vous pouvez désormais utiliser l'interface utilisateur pour les développeurs de Genkit afin d'interagir avec l'un des modèles compatibles ou avec l'un des autres composants d'IA, tels que les requêtes, les récupérateurs et les flux Genkit.

Par exemple, demandez à Gemini de vous suggérer des vacances. Notez que vous pouvez utiliser des instructions système pour orienter le comportement du modèle en fonction de vos besoins spécifiques. Cela fonctionne également pour les modèles qui ne sont pas compatibles avec les instructions système de manière native.

Gérer les invites

Genkit présente Dotprompt, un plug-in et un format de texte conçus pour simplifier la création et la gestion de vos requêtes d'IA générative. L'idée principale derrière Dotprompt est de traiter les requêtes comme du code, ce qui vous permet de les écrire, de les gérer et de les contrôler en termes de version en même temps que le code de votre application.

Pour utiliser Dotprompt, commencez par un hello-world :

1. Dans votre éditeur de code, ouvrez le fichier prompts/1-hello-world.prompt.
2. Dans l'interface utilisateur pour les développeurs Genkit, ouvrez prompts/1-hello-world.
3. Utilisez le nom ou le code linguistique de votre choix, ou laissez le champ vide.
4. Cliquez sur Exécuter.
5. Essayez différentes valeurs. Les grands modèles de langage sont efficaces pour comprendre les requêtes simples comme celle-ci, même si elles sont abrégées, mal orthographiées ou incomplètes.

Enrichir votre sortie avec des données structurées

En plus de générer du texte brut, Genkit vous permet de structurer votre sortie pour une meilleure présentation et intégration dans l'UI de votre application. En définissant un schéma, vous pouvez demander au LLM de générer des données structurées qui correspondent au format souhaité.

Explorer les schémas de sortie

Vous pouvez également spécifier le schéma de sortie d'un appel LLM.

1. Dans votre éditeur de code, examinez le fichier d'invite :
   1. Ouvrez le fichier prompts/2-simple-itinerary.prompt.
   2. Examinez les schémas d'entrée et de sortie définis.
2. Interagissez avec l'UI :
   1. Dans l'interface utilisateur Genkit Developer, accédez à la section prompts/2-simple-itinerary.
   2. Fournissez des entrées en remplissant les champs place et interests avec des exemples de données :

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Cliquez sur Exécuter.

Comprendre les résultats basés sur un schéma

Notez que le résultat généré est conforme au schéma défini. En spécifiant la structure souhaitée, vous avez demandé au LLM de produire des données faciles à analyser et à intégrer dans votre application. Genkit valide automatiquement la sortie par rapport au schéma, ce qui garantit l'intégrité des données.

De plus, vous pouvez configurer Genkit pour qu'il réessaie ou tente de réparer la sortie si elle ne correspond pas au schéma.

Principaux avantages des schémas de sortie

• Intégration simplifiée : intégrez facilement des données structurées dans les éléments d'interface utilisateur de votre application.
• Validation des données : assurez-vous de l'exactitude et de la cohérence des résultats générés.
• Gestion des erreurs : implémentez des mécanismes pour résoudre les problèmes d'incompatibilité de schéma.

L'utilisation de schémas de sortie améliore votre expérience Genkit, vous permettant de créer des données structurées et personnalisées pour des expériences utilisateur plus riches et plus dynamiques.

Utiliser des entrées multimodales

Imaginez que votre application suggère des destinations de vacances personnalisées en fonction des images qui inspirent vos utilisateurs. Genkit, associé à un modèle génératif multimodal, vous permet de concrétiser cette vision.

1. Dans votre éditeur de code, examinez le fichier d'invite :
   1. Ouvrez le fichier prompts/imgDescription.prompt.
   2. Notez l'inclusion de {{media url=this}}, qui est un élément de syntaxe Handlebars qui facilite l'intégration d'images dans votre requête.
2. Interagissez avec l'UI :
   1. Dans l'interface utilisateur pour les développeurs Genkit, ouvrez l'invite prompts/imgDescription.
   2. Collez l'URL d'une image dans le champ imageUrls. Par exemple, vous pouvez utiliser une image miniature de Wikipédia représentant la tour Eiffel :

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Cliquez sur Exécuter.

7. Implémenter la récupération avec la recherche de similarité vectorielle

Si la génération de contenus créatifs avec des modèles d'IA est impressionnante, les applications pratiques nécessitent souvent d'ancrer le résultat dans un contexte spécifique.

Dans cet atelier de programmation, vous disposez d'une base de données de destinations (lieux et activités) et vous souhaitez vous assurer que les suggestions générées par le modèle Gemini font exclusivement référence aux entrées de cette base de données.

Pour combler le fossé entre les requêtes non structurées et le contenu pertinent, vous exploiterez la puissance de la recherche de similarité vectorielle sur les embeddings générés.

Comprendre les embeddings et la similarité vectorielle

• Vecteurs : les vecteurs sont des représentations numériques de points de données, souvent utilisés pour modéliser des informations complexes comme du texte ou des images. Chaque dimension d'un vecteur correspond à une caractéristique spécifique des données.
• Modèles d'embedding : ces modèles d'IA spécialisés transforment les données d'entrée, telles que le texte, en vecteurs de grande dimension. L'aspect fascinant est que les entrées similaires sont mappées sur des vecteurs proches les uns des autres dans cet espace de grande dimension.
• Recherche de similarité vectorielle : cette technique exploite la proximité des vecteurs d'embedding pour identifier les points de données pertinents. À partir d'une requête, il recherche dans la base de données les entrées dont les vecteurs d'embedding sont similaires, ce qui indique une relation sémantique.

Comprendre le fonctionnement du processus de récupération

1. Intégration de la requête : la saisie de l'utilisateur (par exemple, "dîner romantique à Paris") est transmise à un modèle d'embedding, qui génère un vecteur de requête.
2. Embeddings de base de données : idéalement, vous avez prétraité votre base de données de destinations en créant des vecteurs d'embedding pour chaque entrée.
3. Calcul de la similarité : le vecteur de requête est comparé à chaque vecteur d'embedding de la base de données à l'aide d'une métrique de similarité (par exemple, la similarité cosinus).
4. Récupération : les entrées les plus similaires de la base de données, en fonction de leur proximité avec le vecteur de requête, sont récupérées en tant que suggestions pertinentes.

En intégrant ce mécanisme de récupération à votre application, vous exploitez le modèle Gemini pour générer des suggestions qui sont non seulement créatives, mais aussi fermement ancrées dans votre ensemble de données spécifique. Cette approche garantit que le résultat généré reste contextuellement pertinent et conforme aux informations disponibles dans votre base de données.

Activer la recherche de similarité vectorielle dans Firestore

Lors d'une étape précédente de cet atelier de programmation, vous avez rempli votre base de données Firestore avec des exemples de lieux et d'activités. Chaque entrée de lieu inclut un champ de texte knownFor décrivant ses attributs notables, ainsi qu'un champ embedding correspondant contenant la représentation vectorielle de cette description.

Pour exploiter la puissance de la recherche de similarités vectorielles sur ces embeddings, vous devez créer un index Firestore. Cet index permet de récupérer efficacement des lieux en fonction de la similarité de leurs vecteurs d'embedding avec une requête donnée.

1. Créez l'index en veillant à remplacer YOUR_PROJECT_ID par l'ID de votre projet.

   gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
   

2. Dans l'interface utilisateur pour les développeurs Genkit, ouvrez retrievers/placesRetriever.
3. Cliquez sur Exécuter. Observez l'objet échafaudé avec un texte d'espace réservé, indiquant où vous implémenterez la logique du récupérateur.
4. Dans votre éditeur de code, ouvrez le fichier src/lib/genkit/placesRetriever.ts.
5. Faites défiler l'écran jusqu'en bas et remplacez l'espace réservé placesRetriever par ce qui suit :

   export const placesRetriever = defineFirestoreRetriever(ai, {
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
     distanceMeasure: 'COSINE',
   });
   

Tester le récupérateur

1. Dans l'interface utilisateur pour les développeurs Genkit, ouvrez le récupérateur retrievers/placesRetriever.
2. Fournissez la requête suivante :

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. Vous pouvez également fournir des options. Par exemple, voici comment spécifier le nombre de documents que le récupérateur doit renvoyer :

   {
       "limit": 4
   }
   

4. Cliquez sur Exécuter.

Vous pouvez filtrer davantage les données au-delà de la similarité en ajoutant des clauses where aux Options.

8. Génération augmentée par récupération (RAG) avec Genkit

Dans les sections précédentes, vous avez créé des requêtes individuelles capables de gérer du texte, du JSON et des images, en générant des destinations de vacances et d'autres contenus intéressants pour vos utilisateurs. Vous avez également implémenté une invite qui récupère les destinations pertinentes de votre base de données Firestore. Il est maintenant temps d'orchestrer ces composants dans un flux de génération augmentée par récupération (RAG) cohérent.

Cette section présente un concept Genkit important appelé flux. Les flux sont des fonctions fortement typées et diffusables qui peuvent être appelées localement et à distance, avec une observabilité complète. Vous pouvez gérer et appeler des flux à partir de la CLI Genkit et de l'UI pour les développeurs Genkit.

1. Dans votre éditeur de code, examinez l'invite d'itinéraire :
   1. Ouvrez le fichier prompts/itineraryGen.prompt.
   2. Notez que la requête a été élargie pour accepter des entrées supplémentaires, en particulier les données activities provenant du récupérateur.
2. Dans l'interface utilisateur pour les développeurs Genkit, affichez un flow Genkit dans le fichier src/lib/genkit/itineraryFlow.ts.
   Conseil : Pour simplifier le débogage, envisagez de décomposer les longs flows en étapes plus petites et plus faciles à gérer.
3. Améliorez le flux en intégrant une étape de "description de l'image" :
   1. Recherchez le commentaire TODO: 2 (vers la ligne 81). Cela marque l'endroit où vous allez améliorer votre flux.
   2. Remplacez l'espace réservé imgDescription vide par le résultat généré par l'appel d'invite imgDescription.
4. Testez le flux :
   1. Accédez à flows/itineraryFlow.
   2. Utilisez l'entrée suivante pour tester l'exécution réussie de itineraryFlow avec l'étape que vous venez d'ajouter :

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Cliquez sur Exécuter.
   4. Observez le résultat généré, qui devrait intégrer la description de l'image dans la suggestion d'itinéraire.
5. Si vous rencontrez des erreurs ou des comportements inattendus, consultez l'onglet Inspecter pour en savoir plus. Vous pouvez également utiliser cet onglet pour consulter l'historique des exécutions du Trace Store.

RAG pour votre application Web

1. Assurez-vous que l'application Web est toujours en cours d'exécution en accédant à http://localhost:3000/ dans votre navigateur.
2. Si l'application Web n'est plus en cours d'exécution, exécutez les commandes suivantes dans votre terminal :

   npm install
   npm run dev
   

3. Consultez la page de l'application Web Dream Your Vacation (http://localhost:3000/gemini).
4. Consultez son code source (src/app/gemini/page.tsx) pour obtenir un exemple d'intégration Next.js.

9. Déployer votre application avec Firebase App Hosting

La dernière étape de ce parcours consiste à déployer votre application Web. Vous allez utiliser Firebase App Hosting, une solution d'hébergement compatible avec les frameworks, conçue pour simplifier le déploiement des applications Next.js et Angular sur un backend sans serveur.

1. Validez vos modifications dans votre dépôt Git local, puis déployez-les sur GitHub.
2. Dans la console Firebase, accédez à App Hosting dans votre projet Firebase.
3. Cliquez sur Commencer > Se connecter à GitHub.
4. Sélectionnez votre compte GitHub et votre dépôt. Cliquez sur Next (Suivant).
5. Dans Paramètre de déploiement > Répertoire racine, conservez la valeur par défaut.
6. Pour la branche "Live", sélectionnez la branche main de votre dépôt GitHub. Cliquez sur Next (Suivant).
7. Saisissez un ID pour votre backend (par exemple, compass).
8. Lorsque vous êtes invité à créer ou associer une application Web Firebase, sélectionnez Sélectionner une application Web Firebase existante, puis choisissez l'application que vous avez créée lors d'une étape précédente de cet atelier de programmation.
9. Cliquez sur Terminer et déployer.

Surveiller l'état du déploiement

Le processus de déploiement prendra quelques minutes. Vous pouvez suivre la progression dans la section App Hosting de la console Firebase.

Accorder des autorisations à votre compte de service

Pour que votre backend Node.js puisse accéder aux ressources Vertex AI, vous devez attribuer le rôle aiplatform.user au compte de service de votre application :

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Une fois l'opération terminée, votre application Web sera accessible aux utilisateurs.

Redéploiement automatique

Firebase App Hosting simplifie les futures mises à jour. Chaque fois que vous envoyez des modifications à la branche principale de votre dépôt GitHub, Firebase App Hosting recompilera et redéploiera automatiquement votre application, ce qui garantit que vos utilisateurs bénéficient toujours de la dernière version.

10. Conclusion

Bravo ! Vous avez terminé cet atelier de programmation complet.

Vous avez exploité la puissance de Genkit, Firestore et Vertex AI pour créer un "flux" sophistiqué qui génère des recommandations de vacances personnalisées en fonction des préférences et de l'inspiration des utilisateurs, tout en ancrant les suggestions dans les données de votre application.

Tout au long de ce parcours, vous avez acquis une expérience pratique des modèles d'ingénierie logicielle essentiels pour créer des applications d'IA générative robustes. Voici quelques exemples de ces schémas :

• Gestion des requêtes : organisation et maintenance des requêtes en tant que code pour une meilleure collaboration et un meilleur contrôle des versions.
• Contenu multimodal : intégration de divers types de données, comme des images et du texte, pour améliorer les interactions avec l'IA.
• Schémas d'entrée/de sortie : structurez les données pour une intégration et une validation fluides dans votre application.
• Magasins de vecteurs : utilisation d'embeddings vectoriels pour une recherche de similarité efficace et la récupération d'informations pertinentes.
• Récupération de données : implémenter des mécanismes pour extraire et intégrer des données de bases de données dans des contenus générés par IA.
• Génération augmentée par récupération (RAG) : combinaison de techniques de récupération et d'IA générative pour obtenir des résultats précis et adaptés au contexte.
• Instrumentation des flux : créez et orchestrez des workflows d'IA complexes pour une exécution fluide et observable.

En maîtrisant ces concepts et en les appliquant dans l'écosystème Firebase, vous serez bien équipé pour vous lancer dans vos propres aventures d'IA générative. Explorez les nombreuses possibilités, créez des applications innovantes et continuez à repousser les limites de ce qui est possible avec l'IA générative.

Explorer d'autres options de déploiement

Genkit propose différentes options de déploiement pour répondre à vos besoins spécifiques, y compris :

• Cloud Functions for Firebase
• Cloud Run
• Next.js
• N'importe quel environnement Node.js
• Genkit est également compatible avec Go

Il vous suffit de choisir celui qui vous convient le mieux en exécutant la commande suivante dans votre dossier de nœud (package.json) :

npx genkit init

Étapes suivantes

• Testez des requêtes et profitez des grandes fenêtres de contexte dans Google AI Studio ou Vertex AI Studio.
• En savoir plus sur la recherche par génération augmentée par récupération (RAG) de l'IA
• Consultez la documentation officielle de Genkit.
• En savoir plus sur les fonctionnalités de recherche par similarité dans Firestore et Cloud SQL pour PostgreSQL
• Approfondissez les flux d'IA générative avec l'appel de fonction.