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édéfinies à vos applications avec un minimum de code, y compris des fonctionnalités optimisées par l'IA. Cet atelier de programmation vous montre 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 des entrées 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

• Découvrez comment utiliser les extensions Firebase pour l'API Gemini afin de traiter le langage.
• Découvrez comment utiliser Cloud Functions for Firebase pour composer un contexte augmenté pour votre modèle de langage.
• Découvrez comment utiliser JavaScript pour accéder aux résultats générés par les extensions Firebase.

Prérequis

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

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

2. Examiner l'application Web, 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, ainsi que 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 terminée fournit aux participants un chatbot d'IA conversationnelle alimenté par 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 programme 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 thèmes et le programme de la Friendly Conf. Ses réponses peuvent donc tenir compte de tout ce contexte.

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

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

Services Firebase

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

Service	Motif d'utilisation
Firebase Authentication	Vous utilisez la fonctionnalité Se connecter avec Google pour l'application Web.
Cloud Firestore	Vous stockez les données textuelles dans Cloud Firestore, qui sont ensuite traitées par les extensions Firebase.
Cloud Storage for Firebase	Vous lisez et écrivez à partir de Cloud Storage pour afficher des galeries d'images dans l'application Web.
Règles de sécurité Firebase	Vous déployez des règles de sécurité pour sécuriser l'accès à vos services Firebase.
Extensions Firebase	Vous configurez et installez des extensions Firebase liées à l'IA, puis vous affichez les résultats dans l'application Web.
Bonus : Firebase Hosting	Vous pouvez également utiliser Firebase Hosting pour diffuser votre application Web (sans dépôt GitHub).
Bonus : Firebase App Hosting	Vous pouvez également utiliser le nouveau service Firebase App Hosting simplifié pour diffuser votre application Web Next.js dynamique (associée à un dépôt GitHub).

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 votre version de Node.js

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

   node -v
   

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

Obtenir le code source de l'atelier de programmation

Si vous avez un compte GitHub :

1. Créez un dépôt à l'aide de notre modèle à partir de 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 Git n'est pas installé ou si vous préférez ne pas créer de dépôt :

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

Examiner la structure des dossiers

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

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

Installer la CLI Firebase

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

   firebase --version
   

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

   npm update -g firebase-tools
   

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

   npm install -g firebase-tools
   

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

Se connecter à Firebase

1. Dans votre terminal, 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 ou non que Firebase collecte des données. (les deux options fonctionnent pour cet atelier de programmation)
3. Dans votre navigateur, sélectionnez votre compte Google, puis cliquez sur Autoriser.

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'exemple d'application Web plus loin dans cet atelier de programmation.

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

Créer un projet Firebase

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

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

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

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

Passer à un forfait Firebase supérieur

Pour utiliser les extensions Firebase (et leurs services cloud sous-jacents) ainsi que Cloud Storage pour 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 êtes éligible à un crédit de 300$et à un compte de facturation Cloud pour l'essai sans frais.
• Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

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

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

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

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

Ajouter une application Web à votre projet Firebase

1. Accédez à l'écran Vue d'ensemble du projet dans votre projet Firebase, puis cliquez sur Web.
2. Dans la zone de texte Pseudo de l'application, saisissez un pseudo facile à retenir, par exemple My 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, tel que 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 Créer, puis sélectionnez Base de données Firestore.
2. Cliquez sur Créer une base de données.
3. Laissez le champ 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é.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour 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 Créer, puis sélectionnez Stockage.
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets situés dans les régions 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 régions 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é.
   Dans une étape ultérieure de cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez publiquement une application sans ajouter de règles de sécurité pour 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 "Build Chatbot with the Gemini API"

Remarque : Les extensions Firebase utilisées dans cet atelier de programmation sont bien documentées. Pour en savoir plus, consultez les pages correspondantes à chaque extension, en particulier les pages Premiers pas, Paramètres configurables et Facturation.

Installer l'extension "Build Chatbot with the Gemini API"

1. Accédez à l'extension"Build Chatbot with the Gemini API".
2. Cliquez sur Installer dans la console Firebase.
3. Sélectionnez votre projet Firebase, puis cliquez sur Suivant.
4. Dans la section Vérifier les API activées et les ressources créées, cliquez sur Activer à côté des services qui vous sont suggérés, puis cliquez sur Suivant.
5. Pour toutes les autorisations qui vous sont suggérées, sélectionnez Accorder, puis cliquez sur Suivant.
6. Configurez l'extension :
   1. Dans le menu Fournisseur de l'API Gemini, sélectionnez 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 de 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'extension pour appeler l'API Gemini.
   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 spécifié précédemment 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.

Remarque : Pendant l'installation de l'extension, n'hésitez pas à aller regarder votre playlist de vidéos de chats préférée.

Conseil : Si l'installation échoue, réessayez. Il peut arriver que votre projet rencontre des problèmes de timing concernant la création de comptes de service et l'attribution d'autorisations.

Essayer l'extension "Build Chatbot with the Gemini API"

Bien que l'objectif de cet atelier de programmation soit d'interagir avec l'extension "Build Chatbot with the Gemini API" (Créer un chatbot avec l'API Gemini) via une application Web, il est utile de découvrir comment fonctionne 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éé dans 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 Commencer 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 et patientez quelques secondes.

Lorsque vous avez ajouté ce document, l'extension a appelé 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 à 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 et patientez quelques secondes. Le document que vous venez d'ajouter à la collection messages inclut désormais un response à 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

Conseil : Si vous oubliez l'ID de votre projet, vous pouvez le retrouver dans les paramètres du projet de la console Firebase.

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

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

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

   firebase deploy --only firestore:rules,storage
   

2. Si vous êtes invité à accorder à Cloud Storage le rôle IAM permettant d'utiliser des règles multiservices, saisissez Y ou N. (les deux options fonctionnent 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 l'intégralité du code initializeApp, y compris la constante firebaseConfig.
2. Ajoutez votre configuration Firebase à la codebase de votre application Web :
   1. Dans votre éditeur de code, ouvrez le fichier src/lib/firebase/firebase.config.js.
   2. Sélectionnez tout le contenu du fichier et remplacez-le 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 une URL similaire.

Utiliser le chatbot de l'application Web

Remarque : Localhost est un domaine autorisé par défaut pour Firebase Authentication. Si vous préférez utiliser autre chose (comme 127.0.0.1), vous devez ajouter votre nom d'hôte à la liste Domaines autorisés.

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é, vous verrez une fenêtre de chat vide.
4. Saisissez un message d'accueil (hi, par exemple), puis cliquez sur Envoyer.
5. Attendez quelques secondes que le chatbot réponde.

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

Spécialiser le chatbot pour l'application

Vous avez besoin que le modèle Gemini sous-jacent utilisé par le chatbot de votre application Web connaisse les détails spécifiques à la conférence lorsqu'il génère des réponses pour les participants à l'aide de l'application. Il existe de nombreuses façons de contrôler et d'orienter 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 uniquement l'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 "x" rouge (à 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 de la ligne 93 (ou d'une ligne proche) qui indique prompt: userMsg 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 désormais spécifier des questions complémentaires et approfondir le sujet.

Ce contexte étendu est important pour le chatbot, mais vous ne devez pas le montrer à 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 de la ligne 56 (ou d'une ligne proche) qui indique ...doc.data(), 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 lui fournissant un contexte historique :

1. Dans la zone de texte Saisissez un message, posez une question comme Any other interesting talks about AI?. Le chatbot vous répondra.
2. Dans la zone de texte Saisissez un message, posez une question complémentaire en rapport avec 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. L'historique des discussions faisant désormais partie du contexte, le chatbot comprend les questions complémentaires.

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

Remarque : Les extensions Firebase utilisées dans cet atelier de programmation sont bien documentées. Pour en savoir plus, consultez les pages correspondantes à chaque extension, en particulier les pages Premiers pas, Paramètres configurables et Facturation.

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 compatibles (notez que même l'API Google AI Gemini utilise une URL Cloud Storage comme infrastructure d'URL de fichier sous-jacente). L'extension est également compatible avec 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 ainsi 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"

1. Accédez à l'extension"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'à atteindre la section Configurer l'extension.
   1. Dans le menu Fournisseur de l'API Gemini, sélectionnez 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 Requête, saisissez : Please describe the provided image; if there is no image, say "no image".
   4. Dans la zone de texte Champ d'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 spécifié précédemment 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.

Remarque : Pendant l'installation de l'extension, n'hésitez pas à aller regarder votre deuxième playlist préférée de vidéos de chats.

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

Bien que l'objectif de cet atelier de programmation soit d'interagir avec l'extension "Multimodal Tasks with the Gemini API" (Tâches multimodales avec l'API Gemini) via une application Web, il est utile de découvrir 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éé dans 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 la requête multimodale lors d'un appel à l'API Gemini.

Commencez par importer 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 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 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 boolean. Dans la zone Valeur, sélectionnez true.
7. Cliquez sur Enregistrer et 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. Il doit contenir l'image que vous avez importée précédemment dans le dossier gallery de votre bucket Storage.
4. Cliquez sur le bouton Importer et sélectionnez une autre image JPEG.
5. Patientez quelques secondes pour que l'image s'affiche dans la galerie. Quelques instants plus tard, la description générée par l'IA pour la nouvelle image importée s'affiche également.

Si vous souhaitez comprendre le code d'implémentation, consultez src/app/gallery/page.tsx dans la base de code de l'application Web.

Conseil : Si aucune description d'image n'est générée et que vous obtenez une erreur PERMISSION_DENIED, désinstallez et réinstallez l'extension pour lui permettre de définir les autorisations appropriées sur le compte de service qu'elle utilise.

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 que votre code source est stocké 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 spécialement conçu 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 que votre code source est uniquement stocké 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, il vous suffit de réexécuter firebase deploy --only hosting. Firebase Hosting compilera et redéploiera 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 dans GitHub.
2. Dans la console Firebase, accédez à App Hosting dans votre projet Firebase.
3. Cliquez sur Commencer > Se connecter à GitHub.
4. Sélectionnez votre compte GitHub et votre dépôt. Cliquez sur Next (Suivant).
5. Dans Paramètres de déploiement > Répertoire racine, saisissez le nom du dossier contenant votre code source (si votre fichier package.json ne se trouve pas dans le répertoire racine de votre dépôt).
6. Pour la branche "Live", sélectionnez la branche main de votre dépôt GitHub. Cliquez sur Next (Suivant).
7. Saisissez un ID pour votre backend (par exemple, 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 App Hosting de la console Firebase.

À partir de maintenant, 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 passe-partout pour gérer l'authentification avec les services Google Cloud ou la logique Cloud Functions de backend pour écouter et interagir avec Firestore et les services et API Google Cloud.

Essayer des extensions à l'aide de la console Firebase

Au lieu de vous lancer directement dans le code, vous avez pris le temps de comprendre comment fonctionnent ces extensions d'IA générative, 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 les extensions Firebase pour accéder à quelques fonctionnalités 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 un contexte historique et spécifique à l'application dans les conversations. Chaque message est stocké dans un document Firestore associé à un utilisateur spécifique.

L'application Web a également utilisé l'extension "Multimodal Tasks with the Gemini API" (Tâches multimodales avec l'API Gemini) pour générer automatiquement des descriptions d'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.
• En savoir plus sur la recherche par génération augmentée par récupération (RAG) de l'IA
• Essayez un atelier de programmation à votre rythme qui vous montre comment ajouter un chatbot à une application Firebase existante à l'aide de 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 avec l'appel de fonction.