Créez des fonctionnalités d'IA générative basées sur 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.

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

Prérequis

• Bonne connaissance de 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é 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, tel que Google Chrome
• Un environnement de développement avec un éditeur de code et un terminal
• Un compte Google pour la création et la gestion de votre projet Firebase

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 utiliser le codebase d'une application appelée Compass, une application de planification de vacances. Les utilisateurs peuvent choisir une destination, consulter les activités qui y sont 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. Les deux fonctionnalités sont optimisées par l'IA générative:

• L'application affiche actuellement une liste statique de destinations. Vous allez la modifier pour qu'elle soit dynamique.
• Vous allez implémenter un itinéraire renseigné automatiquement pour améliorer la fidélité.

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.

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 ne disposez pas de Node.js version 20.0.0 ou ultérieure, téléchargez la dernière version LTS et installez-la.

Obtenir le code source pour l'atelier de programmation

Si vous avez un compte GitHub:

1. Créez un dépôt à l'aide de notre modèle disponible 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 au format ZIP.

Vérifier la structure des dossiers

Sur votre ordinateur local, recherchez le dépôt cloné et examinez la structure de dossiers:

Le dossier racine contient un fichier README.md qui propose un démarrage rapide pour exécuter 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 ne savez pas si vous avez correctement appliqué le code comme indiqué tout au long de cet atelier de programmation, vous trouverez le code de 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 que vous n'utilisez pas la version 13.6 ou une version 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.

Connectez-vous à Firebase

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

   firebase login
   

   Si votre terminal vous 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. Dans la suite de cet atelier de programmation, vous activerez également quelques services utilisés par l'exemple d'application Web.

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 compte Google 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 (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 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 pouvez bénéficier d'un crédit de 300$et d'un compte de facturation Cloud avec essai sans frais.
• Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à votre 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 à un forfait supérieur.
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 pour cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour effectuer la mise à niveau.

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 ID de 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 suivant s'affiche : "WARNING: Your active project does not match the quota projet in your local Application Default Credentials." (AVERTISSEMENT : Votre projet actif ne correspond pas au projet de quota dans votre fichier local des 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 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 des échantillons 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 permettre au codebase local 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 dans votre navigateur. Connectez-vous avec le compte Google utilisé lors des é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 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. 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 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
   

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 la 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 des destinations fixes:

N'hésitez pas à les explorer. Lorsque vous êtes prêt à continuer, cliquez sur le bouton d'accueil (dans l'angle supérieur droit).

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 idées fournies par l'utilisateur. Vous utiliserez Firebase Genkit et Vertex AI de Google Cloud en tant que fournisseur pour le modèle génératif (vous utiliserez Gemini).

Genkit peut stocker l'état de trace et de 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

Avant de pouvoir lancer Genkit, votre codebase 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 Genkit. 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. Dans 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 la configuration Firebase de votre application au codebase de votre application Genkit:
   1. Dans votre éditeur de code, ouvrez le fichier genkit-functions/src/lib/genkit.config.ts.
   2. Remplacez la section concernée par le code que vous avez copié.
   3. Enregistrez le fichier.

Lancer l'interface utilisateur Genkit pour les développeurs

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.

1. Lancez l'UI des développeurs Genkit :
   1. Ouvrez une nouvelle fenêtre de terminal.
   2. Accédez à la racine de votre répertoire genkit-functions.
   3. Exécutez la commande suivante pour démarrer l'UI de développement Genkit :

      cd genkit-functions
      npx genkit start
      

2. Dans votre navigateur, accédez à l'URL 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, essayez de demander à 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 en mode natif 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. Dotprompt a pour objectif de traiter les requêtes comme du code, ce qui vous permet de les écrire, de les gérer et d'en contrôler les versions en même temps que le code de votre application.

Pour utiliser Dotprompt, commencez par un exemple Hello World :

1. Dans votre éditeur de code, ouvrez le fichier genkit-functions/prompts/1-hello-world.prompt.
2. Dans l'interface utilisateur du développeur Genkit, ouvrez dotprompt/1-hello-world.
3. Utilisez un nom ou un code language que vous connaissez, ou laissez-les sous la forme d'une chaîne vide.
4. Cliquez sur Exécuter.
5. Essayez différentes valeurs. Les grands modèles de langage sont efficaces pour comprendre les requêtes abrégées, mal orthographiées ou incomplètes dans des requêtes simples comme celle-ci.

Enrichissez vos résultats 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 des 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 dotprompt/2-simple-itinerary.
   2. Examinez les schémas d'entrée et de sortie définis.
2. Interagissez avec l'interface utilisateur:
   1. Dans l'interface utilisateur du développeur Genkit, accédez à la section dotprompt/2-simple-itinerary.
   2. Renseignez 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 qui peuvent être 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 réessayer ou tenter 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 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: mettez en place des mécanismes pour corriger les incohérences 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 genkit-functions/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 dotprompt/imgDescription.
   2. Saisissez l'URL d'une image dans le champ imageUrls en collant l'URL d'une image. Par exemple, vous pouvez utiliser une vignette de la tour Eiffel provenant de Wikipédia:

      {
          "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 faire le lien entre les requêtes non structurées et le contenu pertinent, vous allez exploiter la puissance de la recherche de similarité vectorielle sur les représentations vectorielles continues générées.

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. Intégration de la requête: l'entrée de l'utilisateur (par exemple, "dîner romantique à Paris") est transmise à un modèle de représentation vectorielle continue, générant ainsi 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 similarité: le vecteur de requête est comparé à chaque vecteur de représentation vectorielle continue de la base de données à l'aide d'une métrique de similarité (par exemple, 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 rempli votre base de données Firestore avec des exemples de lieux et d'activités. 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 représentations vectorielles continues, 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 votre terminal, exécutez la commande suivante pour installer le dernier composant alpha. Vous devez disposer de la version 2024.05.03 ou d'une version ultérieure:

   gcloud components install alpha
   

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

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

3. Dans l'interface utilisateur du développeur Genkit, ouvrez 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 genkit-functions/src/lib/placesRetriever.ts.
6. Faites défiler la page 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 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 appliquer 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 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, 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 de récupération (RAG) de récupération cohérent.

Cette section présente un concept important de Genkit appelé flux. Les flux sont des fonctions streamable à typage strict 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 du développeur Genkit.

1. Dans votre éditeur de code, examinez l'invite d'itinéraire :
   1. Ouvrez le fichier genkit-functions/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 genkit-functions/src/lib/itineraryFlow.ts.
   Conseil: Pour simplifier le débogage, envisagez de décomposer les flux longs en étapes plus petites et plus faciles à gérer.
3. Améliorez le flux en intégrant une étape "description d'image" :
   1. Recherchez le commentaire TODO: 2 (vers la ligne 70). Il s'agit de 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 à 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 à la suggestion de voyage.
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 à 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 Get started > Connect to GitHub (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 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, cliquez sur Sélectionner une application Web Firebase existante, puis sélectionnez l'application que vous avez créée précédemment dans 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 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 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 déployez des modifications dans la branche principale de votre dépôt GitHub, Firebase App Hosting recompile et redéploie automatiquement votre application, garantissant ainsi 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 exploité 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 ancréant 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, cruciaux 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 : structurent les données pour une intégration et une validation fluides dans votre application.
• Vector Stores: exploitation des représentations vectorielles continues pour permettre une recherche et une récupération efficaces des informations pertinentes.
• Récupération de données : implémentation de mécanismes permettant d'extraire et d'intégrer des données à partir 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 avec l'IA générative pour obtenir des résultats précis et pertinents en 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 de genAI. Explorez les vastes possibilités, créez des applications innovantes et continuez à repousser les limites de 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
• Tout environnement Node.js
• Genkit est aussi compatible avec Go

Pour choisir celle qui vous convient le mieux, exécutez la commande suivante dans le dossier de votre nœud (package.json) :

npx genkit init

Étapes suivantes

• Testez les requêtes et profitez des grandes fenêtres de contexte 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)
• Consultez la documentation officielle sur Firebase Genkit.
• Découvrez les fonctionnalités de recherche par similarité dans Firestore et Cloud SQL pour PostgreSQL.
• Approfondissez vos connaissances sur les flux d'IA générative avec l'appel de fonction.