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

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à utiliser Firebase Genkit pour intégrer l'IA générative à votre application. Firebase 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 à vos applications à l'aide de modèles et de paradigmes familiers. Il a été conçu par l'équipe Firebase, qui s'appuie sur son expérience en création d'outils utilisés par des millions de développeurs dans le monde entier.

Prérequis

• Connaissances de Firestore, Node.js et TypeScript

Points abordés

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

Prérequis

• Un navigateur de votre choix, comme Google Chrome
• 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 en essai sans frais pour essayer 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, et vous allez découvrir les services cloud que vous allez utiliser.

Application Web

Dans cet atelier de programmation, vous allez travailler sur le code de base d'une application de planification de vacances appelée Compass. Les utilisateurs peuvent choisir une destination, consulter les activités disponibles 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 renseigné automatiquement pour augmenter la rétention.

Remarque: Cet atelier de programmation est long et comporte de nombreuses étapes. Pour tirer le meilleur parti de cet atelier de programmation:

• Maintenez 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 copier-coller sans réfléchir.
• Si vous rencontrez un problème, revenez à l'état de fonctionnement précédent et assurez-vous d'avoir correctement effectué chaque étape.
• Si vous trouvez un bug dans l'atelier de programmation ou dans son code, veuillez signaler le problème 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 correspondant est fournie. Le tableau suivant contient les services que vous utiliserez et les raisons pour lesquelles vous les utiliserez.

Service	Motif d'utilisation
Firebase Genkit	Vous utilisez Genkit pour intégrer l'IA générative à une application Node.js / Next.js.
Cloud Firestore	Vous stockez des 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 base de Vertex AI (comme Gemini) pour alimenter vos fonctionnalités d'IA.
Firebase App Hosting	Vous pouvez éventuellement utiliser la nouvelle version simplifiée de Firebase App Hosting pour diffuser votre application Web Next.js dynamique (connecté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 vous avez installé la version 20.0.0 ou ultérieure de Node.js:

   node -v
   

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

Obtenir le code source de l'atelier de programmation

Si vous possédez 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 du tutoriel de programmation que vous venez de créer:

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

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

Téléchargez le dépôt GitHub au format ZIP.

Examiner la structure des dossiers

Sur votre machine locale, recherchez le dépôt cloné et examinez la structure de 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 (plutôt que le tutoriel de démarrage), 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é tout au long de cet atelier de programmation, vous pouvez consulter le code de la solution dans la branche git end.

Installer la CLI Firebase

1. Vérifiez que vous avez installé la CLI Firebase et qu'elle est en version 13.6 ou ultérieure:

   firebase --version
   

2. Si vous avez installé la CLI Firebase, mais qu'elle n'est pas à la 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 ou à 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 que Firebase collecte des données. (l'une ou l'autre de ces options fonctionne pour cet atelier de programmation)
3. Dans votre navigateur, sélectionnez votre compte Google, puis cliquez sur Autoriser.

Installer la CLI gcloud 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 tard 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 Créer un projet, puis saisissez un nom de projet (par exemple, Compass Codelab).
   Prenez note de l'ID de projet attribué automatiquement à votre projet Firebase (ou cliquez sur l'icône Modifier pour définir l'ID de projet souhaité). 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. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
6. 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 Project Overview (Vue d'ensemble du projet) de votre projet Firebase, puis cliquez sur Web.
2. Dans la zone de texte App nickname (Pseudo de l'application), saisissez un pseudo d'application facile à retenir, par exemple My Compass Codelab App. Vous pouvez laisser la case de configuration de 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 Firebase Genkit et Vertex AI (ainsi que leurs services cloud sous-jacents), votre projet Firebase doit être associé au forfait Blaze (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 en essai sans frais.
• Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur s'il existe des crédits Cloud 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 Mettre à niveau votre forfait.
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 dans le cadre de cette migration, vous devrez peut-être revenir au flux de migration dans la console Firebase pour la finaliser.

Remarque: Vous pouvez passer votre projet au 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 Build (Compilation), puis sélectionnez Firestore database (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é à 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 "AVERTISSEMENT: Votre projet actif ne correspond pas au projet de quota dans votre fichier local d'identifiants par défaut de l'application s'affiche, 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 le 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 un échantillon 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ées pour Firestore.

1. Pour autoriser le codebase local à 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 dans votre navigateur. Connectez-vous avec le même compte Google que celui utilisé aux étapes précédentes.
2. Pour importer l'exemple 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ées et son contenu devraient s'afficher.

Associer votre application Web à votre projet Firebase

Le code de votre application Web doit être associé au bon projet Firebase pour pouvoir utiliser ses services, comme la base de données. Pour ce faire, vous devez ajouter votre configuration Firebase au codebase de votre application. Cette configuration inclut des valeurs essentielles telles que votre ID de 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. Sur la fiche "Vos applications", sélectionnez votre application Web.
   4. Dans la section "Configuration et configuration du SDK", sélectionnez l'option Config (Configuration).
   5. Copiez l'extrait. Il commence par const firebaseConfig ....
2. Ajoutez votre configuration Firebase au codebase de votre application Web:
   1. Dans votre éditeur de code, ouvrez le fichier src/lib/genkit/genkit.config.ts.
   2. Remplacez la section appropriée par le code que vous avez copié.
   3. Enregistrez le fichier.

Prévisualiser l'application Web dans votre navigateur

1. Dans le 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 quelque chose de similaire.

Compass est une application Next.js qui utilise des composants serveur React. Voici sa page d'accueil.

Cliquez sur Trouver mon voyage de rêve. Vous pouvez voir qu'il affiche actuellement 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écouvrez 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 explique comment implémenter une fonctionnalité qui suggère des destinations en fonction des inspirations fournies par l'utilisateur. Vous utiliserez Firebase Genkit et Vertex AI de Google Cloud comme fournisseur du modèle génératif (vous utiliserez Gemini).

Genkit peut stocker l'état de la trace et du flux (ce qui vous permet d'inspecter le résultat de l'exécution des flux Genkit). Dans cet atelier de programmation, vous allez utiliser 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'UI des développeurs Genkit

Genkit est fourni avec une interface utilisateur basée sur le 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 de Genkit hébergée localement. Dans la plupart des cas, il s'agit de http://localhost:4000/.

Interagir avec Gemini

Vous pouvez désormais utiliser l'UI du développeur de Genkit pour interagir avec l'un des modèles compatibles ou 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 pour les fêtes. 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 nativement avec les instructions système.

Gérer les invites

Firebase Genkit introduit 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 de base de 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 version avec le code de votre application.

Pour utiliser Dotprompt, commencez par un programme Hello World:

1. Dans votre éditeur de code, ouvrez le fichier prompts/1-hello-world.prompt.
2. Dans l'interface utilisateur du développeur Genkit, ouvrez prompts/1-hello-world.
3. Utilisez le nom ou le code de langue que vous connaissez, ou laissez la chaîne vide.
4. Cliquez sur Run (Exécuter).
5. Essayez différentes valeurs. Les grands modèles de langage sont efficaces pour comprendre les requêtes simples comme celle-ci, qui comportent des requêtes 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 améliorer la présentation et l'intégration dans l'UI de votre application. En définissant un schéma, vous pouvez demander au LLM de produire 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. Interagir avec l'UI:
   1. Dans l'interface utilisateur du développeur Genkit, accédez à la section prompts/2-simple-itinerary.
   2. Fournissez une entrée en remplissant les champs place et interests avec des exemples de données:

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

   3. Cliquez sur Exécuter.

Comprendre la sortie basée sur un schéma

Notez que la sortie générée est conforme au schéma défini. En spécifiant la structure souhaitée, vous avez demandé au LLM de produire des données facilement analysées et intégrées à 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: incorporez facilement des données structurées aux é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.
• Traitement des erreurs: implémentez des mécanismes pour résoudre les incompatibilités de schéma.

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

Utiliser une entrée multimodale

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 donner vie à 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. Interagir avec l'UI:
   1. Dans l'interface utilisateur du développeur Genkit, ouvrez l'invite prompts/imgDescription.
   2. Saisissez une URL d'image dans le champ imageUrls en collant l'URL d'une image. Par exemple, vous pouvez utiliser une vignette de Wikipedia 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

La génération de contenus créatifs à l'aide de modèles d'IA est impressionnante, mais 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 l'écart entre les requêtes non structurées et le contenu pertinent, vous allez exploiter 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 telles que 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 haute dimensionnalité.
• 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 d'entrée, il recherche dans la base de données des entrées avec des vecteurs d'embedding similaires, ce qui indique une relation sémantique.

Comprendre le fonctionnement du processus de récupération

1. Embedding 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: dans l'idéal, 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 pertinent dans le contexte et qu'il est aligné sur les informations disponibles dans votre base de données.

Activer la recherche de similarité vectorielle dans Firestore

Dans une étape précédente de cet atelier de programmation, vous avez inséré des exemples d'établissements et d'activités dans votre base de données Firestore. Chaque entrée de lieu comprend 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é vectorielle sur ces embeddings, vous devez créer un index Firestore. Cet indice 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. Dans le terminal, exécutez la commande suivante pour installer le dernier composant alpha. Vous devez utiliser la version 2024.05.03 ou ultérieure:

   gcloud components install alpha
   

2. 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": "{}"}'
   

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

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

Tester le récupérateur

1. Dans l'interface utilisateur du développeur Genkit, ouvrez le récupérateur retrievers/placesRetriever.
2. Spécifiez 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 effectuer un filtrage supplémentaire sur les données au-delà de la similarité en ajoutant des clauses where aux options.

8. Génération augmentée de 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, et de générer des destinations de vacances et d'autres contenus attrayants pour vos utilisateurs. Vous avez également implémenté une invite qui récupère les destinations pertinentes à partir 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 important de Genkit appelé flux. Les flux sont des fonctions streamable fortement typées qui peuvent être appelées à la fois localement et à distance, avec une observabilité totale. Vous pouvez gérer et appeler des flux à la fois à partir de la CLI de Genkit et de l'UI pour les développeurs de Genkit.

1. Dans votre éditeur de code, examinez l'invite d'itinéraire:
   1. Ouvrez le fichier prompts/itineraryGen.prompt.
   2. Notez que l'invite a été étendue pour accepter des entrées supplémentaires, en particulier les données activities provenant du récupérateur.
2. Dans l'interface utilisateur du développeur Genkit, affichez un flux Genkit dans le fichier src/lib/genkit/itineraryFlow.ts.
   Conseil: Pour simplifier le débogage, envisagez de diviser les flux longs en étapes plus petites et gérables.
3. Améliorez le flux en intégrant une étape "Description de l'image" :
   1. Recherchez le commentaire TODO: 2 (vers la ligne 81). Il s'agit de l'endroit où vous allez améliorer votre flux.
   2. Remplacez l'espace réservé imgDescription vide par la sortie générée 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 doit 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 Inspect (Inspecter) pour en savoir plus. Vous pouvez également utiliser cet onglet pour consulter l'historique des exécutions à partir 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 d'applications Next.js et Angular sur un backend sans serveur.

1. Validez vos modifications dans votre dépôt Git local, puis transférez-les vers GitHub.
2. Dans la console Firebase, accédez à Hébergement d'applications 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 Deployment setting > Root directory (Paramètre de déploiement > Répertoire racine), conservez la valeur par défaut.
6. Pour la branche active, 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 à 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 prend quelques minutes. Vous pouvez suivre la progression dans la section "Hébergement d'applications" 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 cette étape terminée, les utilisateurs pourront accéder à votre application Web.

Redéploiement automatique

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

10. Conclusion

Félicitations ! Vous avez terminé cet atelier de programmation complet.

Vous avez réussi à exploiter la puissance de Firebase 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 appuyant les suggestions sur 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 tendances:

• Gestion des requêtes: organisez et gérez les requêtes en tant que code pour améliorer la collaboration et le contrôle des versions.
• Contenu multimodal: intégration de divers types de données, tels que des images et du texte, pour améliorer les interactions avec l'IA.
• Schémas d'entrée/sortie: structurer les données pour une intégration et une validation fluides dans votre application.
• Magasins Vector: exploitez les représentations vectorielles continues pour une recherche de similarité efficace et la récupération d'informations pertinentes.
• Récupération de données: implémentation de mécanismes permettant d'extraire et d'intégrer des données de bases de données dans du contenu généré par IA.
• Génération augmentée de récupération (RAG): combinaison de techniques de récupération et d'IA générative pour obtenir des résultats pertinents et précis en fonction du contexte.
• Instrumentation de flux: création et orchestration de 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 genAI. Explorez les possibilités infinies, créez des applications innovantes et repoussez les limites de ce qu'il est possible de faire avec l'IA générative.

Explorer d'autres options de déploiement

Genkit propose différentes options de déploiement adaptées à vos besoins spécifiques, y compris les suivantes:

• 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 celle qui vous convient le mieux en exécutant la commande suivante dans le dossier de nœud (package.json) :

npx genkit init

Étapes suivantes

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