Créer des applications Web optimisées par l'IA avec les extensions Firebase pour l'API Gemini

1. Avant de commencer

Les extensions Firebase vous permettent d'ajouter des fonctionnalités préemballées à vos applications avec un minimum de code, y compris des fonctionnalités optimisées par l'IA. Cet atelier de programmation vous explique comment intégrer deux extensions Firebase dans une application Web afin de pouvoir exploiter l'API Gemini pour générer des descriptions d'images, des résumés et même des recommandations personnalisées en fonction du contexte fourni et de l'entrée de l'utilisateur final.

Dans cet atelier de programmation, vous allez apprendre à créer une application Web optimisée par l'IA qui offre des expériences utilisateur attrayantes avec les extensions Firebase.

Prérequis

• Connaissances de Node.js, Next.js et TypeScript

Points abordés

• Utiliser les extensions Firebase pour l'API Gemini afin de traiter la langue
• Utiliser Cloud Functions for Firebase pour composer un contexte enrichi pour votre modèle de langage
• Utiliser JavaScript pour accéder à la sortie produite par les extensions Firebase

Prérequis

• Un navigateur de votre choix, comme 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

2. Examiner l'application Web, les services Firebase et les extensions

Dans cette section, vous allez examiner l'application Web que vous allez créer avec cet atelier de programmation, et découvrir les services et extensions Firebase que vous allez utiliser.

Application Web

Dans cet atelier de programmation, vous allez créer une application Web appelée Friendly Conf.

L'équipe de la Friendly Conference a décidé d'utiliser l'IA pour offrir une expérience utilisateur agréable et personnalisée à ses participants. L'application de conférence finalisée fournit aux participants un chatbot d'IA conversationnelle basé sur un modèle d'IA générative multimodale (également appelé grand modèle de langage ou LLM). Il peut répondre à des questions sur des sujets généraux, adaptés au calendrier et aux thèmes de la conférence. Le chatbot dispose d'un contexte historique et de connaissances sur la date et l'heure actuelles, ainsi que sur les sujets et le calendrier de la Friendly Conf. Ses réponses peuvent donc tenir compte de tout ce contexte.

Services Firebase

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

Extensions Firebase

Les extensions Firebase que vous utiliserez dans cet atelier de programmation sont les suivantes:

• Créer un chatbot avec l'API Gemini
• Tâches multimodales avec l'API Gemini

Les extensions sont utiles, car elles réagissent aux événements qui se produisent dans votre projet Firebase. Les deux extensions utilisées dans cet atelier de programmation répondent lorsque vous créez des documents dans des collections préconfigurées dans Cloud Firestore.

3. Configurer l'environnement de développement

Vérifier la 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-gemini-api-extensions.
2. Clonez le dépôt GitHub de l'atelier de programmation que vous venez de créer:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

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

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 à jour (version 13.6 ou ultérieure) :

   firebase --version
   

2. Si vous avez installé la CLI Firebase, mais que vous ne disposez pas de 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, accédez au dossier codelab-gemini-api-extensions et connectez-vous à Firebase:

   cd codelab-gemini-api-extensions
   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.

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 Firebase utilisés par l'application Web exemple 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 un compte Google.
2. Cliquez sur Créer un projet, puis saisissez un nom de projet (par exemple, AI Extensions 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.

Passer à un forfait Firebase supérieur

Pour utiliser les extensions Firebase (et leurs services cloud sous-jacents) ainsi que Cloud Storage for Firebase, votre projet Firebase doit être associé au forfait 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 pouvez bénéficier d'un crédit de 300$et d'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.

Notez également que si la facturation est activée sur votre projet Firebase, vous serez facturé pour les appels que l'extension effectue à l'API Gemini (quel que soit le fournisseur que vous choisissez, Google AI ou Vertex AI). En savoir plus sur les tarifs de l'IA de Google et de Vertex AI

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

1. Dans la console Firebase, sélectionnez l'option 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.

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 Pseudo de l'application, saisissez un pseudo d'application facile à retenir, par exemple My AI Extensions.
3. Cliquez sur Enregistrer l'application > Suivant > Suivant > Accéder à la console.
   Vous pouvez ignorer toutes les étapes liées à l'hébergement dans le flux de l'application Web, car vous configurerez éventuellement un service d'hébergement plus tard dans cet atelier de programmation.

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

Configurer Firebase Authentication

1. Accédez à Authentification à l'aide du volet de navigation de gauche.
2. Cliquez sur Commencer.
3. Dans la colonne Fournisseurs supplémentaires, cliquez sur Google > Activer.
4. Dans la zone de texte Nom public du projet, saisissez un nom utile, par exemple My AI Extensions Codelab.
5. Dans le menu Adresse e-mail d'assistance pour le projet, sélectionnez votre adresse e-mail.
6. Cliquez sur Enregistrer.

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é.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. 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.

Configurer Cloud Storage for Firebase

1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Storage (Stockage).
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets dans US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres zones géographiques sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre bucket Storage.
5. Cliquez sur Créer.

Dans la section suivante de cet atelier de programmation, vous allez installer et configurer les deux extensions Firebase que vous utiliserez dans l'application Web tout au long de cet atelier.

5. Configurer l'extension "Créer un chatbot avec l'API Gemini"

Installer l'extension "Build Chatbot with the Gemini API" (Créer un chatbot avec l'API Gemini)

1. Accédez à l'extension "Créer un chatbot avec l'API Gemini".
2. Cliquez sur Installer dans la console Firebase.
3. Sélectionnez votre projet Firebase, puis cliquez sur Suivant.
4. Dans la section Examiner les API activées et les ressources créées, cliquez sur Activer à côté de tous les services suggérés, puis sur Suivant.
5. Pour toutes les autorisations suggérées, sélectionnez Accorder, puis cliquez sur Suivant.
6. Configurez l'extension:
   1. Dans le menu Gemini API Provider (Fournisseur de l'API Gemini), indiquez si vous souhaitez utiliser l'API Gemini de Google AI ou de Vertex AI. Pour les développeurs qui utilisent Firebase, nous recommandons d'utiliser Vertex AI.
   2. Dans la zone de texte Chemin d'accès à la collection Firestore, saisissez: users/{uid}/messages.
      Dans les prochaines étapes de cet atelier de programmation, l'ajout de documents à cette collection déclenchera l'appel de l'API Gemini par l'extension.
   3. Dans le menu Emplacement Cloud Functions, sélectionnez l'emplacement de votre choix (par exemple, Iowa (us-central1) ou l'emplacement que vous avez précédemment spécifié pour votre base de données Firestore).
   4. Conservez toutes les autres valeurs par défaut.
7. Cliquez sur Installer l'extension et attendez qu'elle soit installée.

Essayer l'extension "Créer un chatbot avec l'API Gemini"

L'objectif de cet atelier de programmation est d'interagir avec l'extension "Créer un chatbot avec l'API Gemini" via une application Web. Il est toutefois utile de comprendre le fonctionnement de l'extension en la testant d'abord dans la console Firebase.

L'extension est déclenchée chaque fois qu'un document Firestore est créé sous la collection users/{uid}/discussion/{discussionId}/messages, ce que vous pouvez faire dans la console Firebase.

1. Dans la console Firebase, accédez à Firestore, puis cliquez sur Démarrer la collection dans la première colonne.
2. Dans la zone de texte ID de collection, saisissez users, puis cliquez sur Suivant.
3. Dans la zone de texte ID du document, cliquez sur ID automatique, puis sur Enregistrer.
4. Dans la collection users, cliquez sur Start collection (Démarrer la collection).
5. Dans la zone de texte ID de collection, saisissez messages, puis cliquez sur Suivant.
   1. Dans la zone de texte ID du document, cliquez sur ID automatique.
   2. Dans la zone de texte Champ, saisissez prompt.
   3. Dans la zone de texte Valeur, saisissez Tell me 5 random fruits.
6. Cliquez sur Enregistrer, puis patientez quelques secondes.

Lorsque vous avez ajouté ce document, l'extension a été déclenchée pour appeler l'API Gemini. Le document que vous venez d'ajouter à la collection messages inclut désormais non seulement votre prompt, mais aussi le response du modèle dans votre requête.

Déclenchez à nouveau l'extension en ajoutant un autre document à la collection messages:

1. Dans la collection messages, cliquez sur  Ajouter un document.
2. Dans la zone de texte ID du document, cliquez sur ID automatique.
3. Dans la zone de texte Champ, saisissez prompt.
4. Dans la zone de texte Valeur, saisissez And now, vegetables.
5. Cliquez sur Enregistrer, puis patientez quelques secondes. Le document que vous venez d'ajouter à la collection messages inclut désormais un response dans votre requête.
   
   Lors de la génération de cette réponse, le modèle Gemini sous-jacent a utilisé les connaissances historiques de votre requête précédente.

6. 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.

Configurer la CLI Firebase pour qu'elle s'exécute sur votre projet Firebase

Dans votre terminal, indiquez à la CLI d'utiliser votre projet Firebase en exécutant la commande suivante:

firebase use YOUR_PROJECT_ID

Déployer des règles de sécurité pour Firestore et Cloud Storage

Le code de cet atelier de programmation contient déjà un ensemble de règles de sécurité Firestore et de règles de sécurité Cloud Storage. Une fois ces règles de sécurité déployées, vos services Firebase de votre projet Firebase sont mieux protégés contre les utilisations abusives.

1. Pour déployer des règles de sécurité, exécutez la commande suivante dans votre terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si vous êtes invité à accorder à Cloud Storage le rôle IAM pour utiliser des règles interservices, saisissez Y ou N. (l'une ou l'autre de ces options fonctionne pour cet atelier de programmation)

Associer votre application Web à votre projet Firebase

Le codebase de votre application Web doit savoir quel projet Firebase utiliser pour sa base de données, son stockage, etc. Pour ce faire, ajoutez votre configuration Firebase au codebase de votre application.

1. Obtenez votre configuration Firebase:
   1. Dans la console Firebase, accédez à Paramètres du projet dans votre projet Firebase.
   2. Faites défiler la page jusqu'à la section Vos applications, puis sélectionnez votre application Web enregistrée.
   3. Dans le volet Configuration du SDK, copiez le code initializeApp complet, y compris la constante firebaseConfig.
2. Ajoutez votre configuration Firebase au codebase de votre application Web:
   1. Dans votre éditeur de code, ouvrez le fichier src/app/lib/firebase/firebase.config.js.
   2. Sélectionnez tout le contenu du fichier, puis remplacez-le 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
   

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.

Utiliser le chatbot de l'application Web

1. Dans votre navigateur, revenez à l'onglet de l'application Web Friendly Conf exécutée localement.
2. Cliquez sur Se connecter avec Google, puis sélectionnez votre compte Google si nécessaire.
3. Une fois connecté, une fenêtre de chat vide s'affiche.
4. Saisissez un message d'accueil (par exemple, hi), puis cliquez sur Envoyer.
5. Attendez quelques secondes que le chatbot réponde.

Le chatbot de l'application répond avec une réponse générique.

Spécialiser le chatbot pour l'application

Vous avez besoin du modèle Gemini sous-jacent utilisé par le chatbot de votre application Web pour connaître les détails spécifiques à la conférence lorsque le modèle génère des réponses pour les participants à l'aide de l'application. Il existe de nombreuses façons de contrôler et de diriger ces réponses. Dans la sous-section de cet atelier de programmation, nous vous montrons une méthode très simple en fournissant un "contexte" dans l'invite initiale (plutôt que la seule entrée de l'utilisateur de l'application Web).

1. Dans l'application Web de votre navigateur, effacez la conversation en cliquant sur le bouton rouge "x" (à côté du message dans l'historique des discussions).
2. Dans votre éditeur de code, ouvrez le fichier src/app/page.tsx.
3. Faites défiler la page vers le bas et remplacez le code prompt: userMsg situé sur la ligne 77 ou à proximité par le code suivant:
   prompt: preparePrompt(userMsg, messages),
4. Enregistrez le fichier.
5. Revenez à l'application Web exécutée dans votre navigateur.
6. Saisissez à nouveau un message d'accueil (par exemple, hi), puis cliquez sur Envoyer.
7. Attendez quelques secondes que le chatbot réponde.

Le chatbot répond en s'appuyant sur les connaissances guidées par le contexte fourni dans src/app/lib/context.md. Même si vous n'avez pas saisi de requête spécifique, le modèle Gemini sous-jacent génère une recommandation personnalisée en fonction de ce contexte, ainsi que de la date et de l'heure actuelles. Vous pouvez maintenant spécifier des questions de suivi et approfondir le sujet.

Ce contexte développé est important pour le chatbot, mais vous ne devez pas l'afficher à l'utilisateur de l'application Web. Voici comment le masquer:

1. Dans votre éditeur de code, ouvrez le fichier src/app/page.tsx.
2. Faites défiler la page vers le bas et remplacez le code ...doc.data(), sur la ligne 56 ou à proximité par le code suivant:
   ...prepareMessage(doc.data()),
3. Enregistrez le fichier.
4. Revenez à l'application Web exécutée dans votre navigateur.
5. Actualisez la page.

Vous pouvez également essayer de discuter avec le chatbot en utilisant le contexte historique:

1. Dans la zone de texte Saisissez un message, posez une question comme celle-ci: Any other interesting talks about AI?Le chatbot vous répondra.
2. Dans la zone de texte Saisissez un message, posez une question de suivi liée à la question précédente: Give me a few more details about the last one.

Le chatbot répond en s'appuyant sur des connaissances historiques. Étant donné que l'historique des discussions fait désormais partie du contexte, le chatbot comprend les questions de suivi.

Bonus: Exécuter l'application Web à l'aide de la suite d'émulateurs locaux Firebase

La suite d'émulateurs locaux Firebase vous permet de tester localement la plupart des fonctionnalités de l'application Web.

1. Dans le terminal, assurez-vous que vous vous trouvez dans la racine de l'application Web.
2. Exécutez la commande suivante pour installer, puis exécuter la suite d'émulateurs locaux Firebase:

   firebase init emulators
   firebase emulators:start
   

7. Configurer l'extension "Multimodal Tasks with the Gemini API" (Multimodal Tasks avec l'API Gemini)

L'extension "Multimodal Tasks with the Gemini API" (Tâches multimodales avec l'API Gemini) appelle l'API Gemini avec des requêtes multimodales contenant une requête textuelle, ainsi qu'une URL de fichier ou une URL Cloud Storage compatible (notez que même l'API Google AI Gemini utilise une URL Cloud Storage comme infrastructure d'URL de fichier sous-jacente). L'extension accepte également les variables handlebars pour remplacer les valeurs du document Cloud Firestore afin de personnaliser l'invite de texte.

Dans votre application, chaque fois que vous importez une image dans un bucket Cloud Storage, vous pouvez générer une URL et l'ajouter à un nouveau document Cloud Firestore. L'extension est alors déclenchée pour créer une invite multimodale et appeler l'API Gemini. Dans le code source de cet atelier de programmation, nous avons déjà fourni le code permettant d'importer une image et d'écrire l'URL dans un document Firestore.

Installer l'extension "Multimodal Tasks with the Gemini API" (Multimodal Tasks avec l'API Gemini)

1. Accédez à l'extension"Multimodal Tasks with the Gemini API" (Multimodal Tasks with the Gemini API).
2. Cliquez sur Installer dans la console Firebase.
3. Sélectionnez votre projet Firebase.
4. Cliquez sur Suivant > Suivant > Suivant jusqu'à ce que vous atteigniez la section Configurer l'extension.
   1. Dans le menu Gemini API Provider (Fournisseur de l'API Gemini), indiquez si vous souhaitez utiliser l'API Gemini de Google AI ou de Vertex AI. Pour les développeurs qui utilisent Firebase, nous recommandons d'utiliser Vertex AI.
   2. Dans la zone de texte Chemin d'accès à la collection Firestore, saisissez: gallery.
   3. Dans la zone de texte Invite, saisissez: Please describe the provided image; if there is no image, say "no image".
   4. Dans la zone de texte Champ Image, saisissez: image.
   5. Dans le menu Emplacement Cloud Functions, sélectionnez l'emplacement de votre choix (par exemple, Iowa (us-central1) ou l'emplacement que vous avez précédemment spécifié pour votre base de données Firestore).
   6. Conservez toutes les autres valeurs par défaut.
5. Cliquez sur Installer l'extension et attendez qu'elle soit installée.

Essayer l'extension "Multimodal Tasks with the Gemini API"

L'objectif de cet atelier de programmation est d'interagir avec l'extension "Multimodal Tasks with the Gemini API" (Tâches multimodales avec l'API Gemini) via une application Web. Il est toutefois utile de comprendre le fonctionnement de l'extension en la testant d'abord dans la console Firebase.

L'extension est déclenchée chaque fois qu'un document Firestore est créé sous la collection users/{uid}/gallery, ce que vous pouvez faire dans la console Firebase. L'extension récupère ensuite l'URL de l'image Cloud Storage dans le document Cloud Firestore et la transmet dans l'invite multimodale lors d'un appel à l'API Gemini.

Tout d'abord, importez une image dans un bucket Cloud Storage:

1. Accédez à Storage dans votre projet Firebase.
2. Cliquez sur Créer un dossier.
3. Dans la zone de texte Folder name (Nom du dossier), saisissez gallery.
4. Cliquez sur Ajouter un dossier.
5. Dans le dossier gallery, cliquez sur Importer un fichier.
6. Sélectionnez un fichier image JPEG à importer.

Ajoutez ensuite l'URL Cloud Storage de l'image à un document Firestore (qui est le déclencheur de l'extension):

1. Accédez à Firestore dans votre projet Firebase.
2. Cliquez sur Commencer une collection dans la première colonne.
3. Dans la zone de texte ID de collection, saisissez gallery, puis cliquez sur Suivant.
4. Ajoutez un document à la collection:
   1. Dans la zone de texte ID du document, cliquez sur ID automatique.
   2. Dans la zone de texte Champ, saisissez: image. Dans la zone Valeur, saisissez l'URI de l'emplacement de stockage de l'image que vous venez d'importer.
5. Cliquez sur Ajouter un champ.
6. Dans la zone de texte Champ, saisissez: published. Dans la zone Type, sélectionnez booléen. Dans le champ Value (Valeur), sélectionnez true.
7. Cliquez sur Enregistrer, puis patientez quelques secondes.

La collection gallery inclut désormais un document contenant une réponse à votre requête.

Utiliser la galerie d'images de l'application Web

1. Dans votre navigateur, revenez à l'onglet de l'application Web Friendly Conf exécutée localement.
2. Cliquez sur l'onglet de navigation Galerie.
3. Une galerie d'images importées et de descriptions générées par IA s'affiche. L'image que vous avez importée précédemment dans le dossier gallery de votre bucket Storage doit s'afficher.
4. Cliquez sur le bouton Importer, puis sélectionnez une autre image JPEG.
5. Attendez quelques secondes que l'image s'affiche dans la galerie. Quelques instants plus tard, la description générée par IA de l'image nouvellement importée s'affiche également.

Pour comprendre comment cela a été implémenté, consultez src/app/gallery/page.tsx dans le code de base de l'application Web.

8. Bonus: Déployer votre application

Firebase propose plusieurs façons de déployer une application Web. Pour cet atelier de programmation, choisissez l'une des options suivantes:

• Option 1 : Firebase Hosting : utilisez cette option si vous décidez de ne pas créer votre propre dépôt GitHub (et de ne stocker votre code source que localement sur votre machine).
• Option 2 : Firebase App Hosting : utilisez cette option si vous souhaitez un déploiement automatique chaque fois que vous déployez des modifications dans votre propre dépôt GitHub. Ce nouveau service Firebase est conçu spécifiquement pour répondre aux besoins des applications dynamiques Next.js et Angular.

Option 1: Déployer à l'aide de Firebase Hosting

Utilisez cette option si vous décidez de ne pas créer votre propre dépôt GitHub (et de ne stocker votre code source que localement sur votre machine).

1. Dans votre terminal, initialisez Firebase Hosting en exécutant les commandes suivantes:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Pour la requête: Detected an existing Next.js codebase in your current directory, should we use this?, appuyez sur Y.
3. Pour l'invite: In which region would you like to host server-side content, if applicable?, sélectionnez l'emplacement par défaut ou celui que vous avez utilisé précédemment dans cet atelier de programmation. Appuyez ensuite sur Enter (ou return sous macOS).
4. Pour la requête: Set up automatic builds and deploys with GitHub?, appuyez sur N.
5. Déployez votre application Web sur Hosting en exécutant la commande suivante:

   firebase deploy --only hosting
   

Terminé ! Si vous mettez à jour votre application et que vous souhaitez déployer cette nouvelle version, exécutez simplement firebase deploy --only hosting. Firebase Hosting compilera et redéployera votre application.

Option 2: Déployer à l'aide de Firebase App Hosting

Utilisez cette option si vous souhaitez un déploiement automatique chaque fois que vous déployez des modifications dans votre propre dépôt GitHub.

1. Validez vos modifications sur 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 Paramètre de déploiement > Répertoire racine, saisissez le nom du dossier contenant votre code source (si votre package.json ne se trouve pas dans le répertoire racine de votre dépôt).
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, chatbot).
8. Cliquez sur Terminer et déployer.

La préparation de votre nouveau déploiement prendra quelques minutes. Vous pouvez vérifier l'état du déploiement dans la section Hébergement d'applications de la console Firebase.

À partir de ce moment, chaque fois que vous enverrez une modification à votre dépôt GitHub, Firebase App Hosting compilera et déploiera automatiquement votre application.

9. Conclusion

Félicitations ! Vous avez accompli beaucoup de choses dans cet atelier de programmation.

Installer et configurer des extensions

Vous avez utilisé la console Firebase pour configurer et installer différentes extensions Firebase qui utilisent l'IA générative. L'utilisation des extensions Firebase est pratique, car vous n'avez pas besoin d'apprendre et d'écrire beaucoup de code standard pour gérer l'authentification avec les services Google Cloud ou la logique de backend Cloud Functions afin d'écouter et d'interagir avec les services et API Firestore et Google Cloud.

Tester des extensions à l'aide de la console Firebase

Au lieu de vous lancer directement dans le code, vous avez pris le temps de comprendre le fonctionnement de ces extensions genAI, en fonction d'une entrée que vous avez fournie via Firestore ou Cloud Storage. Cela peut être particulièrement utile lors du débogage de la sortie d'une extension.

Créer une application Web optimisée par l'IA

Vous avez créé une application Web optimisée par l'IA qui utilise des extensions Firebase pour accéder à quelques fonctionnalités seulement du modèle Gemini.

Dans l'application Web, vous utilisez l'extension "Chatbot avec l'API Gemini" pour fournir à l'utilisateur une interface de chat interactive, qui inclut le contexte historique et spécifique à l'application dans les conversations, où chaque message est stocké dans un document Firestore limité à un utilisateur particulier.

L'application Web utilisait également l'extension "Multimodal Tasks with the Gemini API" (Tâches multimodales avec l'API Gemini) pour générer automatiquement des descriptions d'images pour les images importées.

Étapes suivantes

• Testez des requêtes et profitez de la grande fenêtre de contexte dans Google AI Studio ou Vertex AI Studio.
• Découvrez la recherche avec génération augmentée de récupération (RAG) basée sur l'IA.
• Essayez un atelier de programmation en libre-service qui vous montre comment ajouter un chatbot à une application Firebase existante à l'aide de Firebase Genkit (un nouveau service de framework d'IA).
• Découvrez les fonctionnalités de recherche par similarité dans Firestore et Cloud SQL pour PostgreSQL.
• Apprenez à votre chatbot à appeler votre application existante à l'aide de l'appel de fonction.