Créer des applications à l'ère de l'IA

1. Présentation

Dans cet atelier, vous allez utiliser les produits d'IA générative de Google pour créer une infrastructure dans Google Cloud à l'aide de Gemini Cloud Assist, interroger les données BigQuery à l'aide de fonctionnalités SQL de Data Canvas en langage naturel, écrire du code dans des notebooks Jupyter Colab Enterprise et dans Eclipse Theia (Visual Studio Code) à l'aide de Gemini Code Assist, et intégrer des fonctionnalités de recherche et de chat basées sur des sources d'ancrage Cloud Storage et BigQuery dans Vertex AI Agent Builder.

Notre objectif est de créer un site Web de recettes et de cuisine appelé AI Recipe Haven. Le site sera créé en Python et Streamlit, et contiendra deux pages principales. Cooking Advice hébergera un chatbot que nous créerons à l'aide de Gemini et d'une source Vertex AI Agent Builder associée à un groupe de livres de cuisine. Il proposera des conseils de cuisine et répondra aux questions liées à la cuisine. La recherche de recettes sera un moteur de recherche alimenté par Gemini, cette fois basé sur une base de données de recettes BigQuery.

Si vous rencontrez des difficultés avec le code de cet exercice, les solutions pour tous les fichiers de code se trouvent dans le dépôt GitHub de l'exercice, dans la branche solution.

Objectifs

Dans cet atelier, vous allez apprendre à effectuer les tâches suivantes :

• Activer et utiliser Gemini Cloud Assist
• Créer une application de recherche dans Vertex AI Agent Builder pour le chatbot de conseils culinaires
• Charger et nettoyer des données dans un notebook Colab Enterprise, avec l'aide de Gemini Code Assist
• Créer une application de recherche dans Vertex AI Agent Builder pour le générateur de recettes
• Structurer l'application Web Python et Streamlit de base, avec un peu d'aide de Gemini
• Déployer l'application Web sur Cloud Run
• Associer la page "Conseils de cuisine" à notre application Agent Builder de recherche de livres de cuisine
• (Facultatif) Associer la page de recherche de recettes à l'application de création d'agents de recherche de recettes
• (Facultatif) Explorer l'application finale

2. Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur "Démarrer l'atelier", indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique Qwiklabs vous permet de suivre vous-même les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Conditions requises

Pour réaliser cet atelier, vous devez :

• avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome) ;
• disposer de suffisamment de temps pour réaliser l'atelier en une fois.

Remarque : Si vous possédez déjà votre propre compte ou projet Google Cloud, veillez à ne pas l'utiliser pour réaliser cet atelier.

Remarque:Si vous utilisez un Pixelbook, ouvrez une fenêtre de navigation privée pour effectuer cet atelier.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton "Démarrer l'atelier". Si l'atelier est payant, un pop-up s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous verrez un panneau contenant les identifiants temporaires à utiliser pour cet atelier.

2. Copiez le nom d'utilisateur, puis cliquez sur "Ouvrir la console Google". L'atelier lance les ressources, puis ouvre la page de connexion dans un nouvel onglet.

Conseil : Ouvrez les onglets dans des fenêtres distinctes, placées côte à côte.

Si la page "Sélectionner un compte" s'affiche, cliquez sur "Utiliser un autre compte".

3. Sur la page Connexion, collez le nom d'utilisateur que vous avez copié dans le panneau "Détails de connexion". Copiez et collez ensuite le mot de passe.

Important : Vous devez utiliser les identifiants fournis dans le panneau "Connection Details" (Informations de connexion), et non vos identifiants Qwiklabs. Si vous possédez un compte Google Cloud, ne vous en servez pas pour cet atelier (vous éviterez ainsi que des frais vous soient facturés). 4. Accédez aux pages suivantes :

1. Acceptez les conditions d'utilisation.
2. N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
3. Ne vous inscrivez pas aux essais offerts.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque:Vous pouvez afficher le menu qui contient la liste des produits et services Google Cloud en cliquant sur le menu de navigation en haut à gauche.

3. Tâche 0 : Vérifier votre cluster de stations de travail

Dans une partie ultérieure de cet atelier, vous utiliserez une Google Cloud Workstation pour effectuer des tâches de développement. Le processus de démarrage de cet atelier devrait avoir commencé la création du cluster de votre station de travail. Avant de continuer, vérifions que le cluster est en cours de création.

1. Dans la console Google Cloud, utilisez la zone de recherche pour accéder à Stations de travail cloud.
2. Utilisez le menu de navigation de gauche pour afficher Gestion des clusters.
3. Si votre cluster est en cours de mise à jour, vous pouvez passer à la tâche 1. Si aucun cluster n'est répertorié, actualisez la page. Si le cluster "Updating (building)" (Mise à jour (création)) ne s'affiche toujours pas, terminez l'atelier à l'aide du bouton situé en haut à gauche de ces instructions, puis redémarrez-le.

4. Tâche 1 : Activer et utiliser Gemini Cloud Assist

Dans cette tâche, nous allons activer et utiliser Gemini Cloud Assist. Lorsque vous travaillez dans la console Google Cloud, Gemini Cloud Assist peut vous conseiller, vous aider à créer, configurer et surveiller votre infrastructure Google Cloud, et même vous suggérer des commandes gcloud et écrire des scripts Terraform.

1. Pour activer Cloud Assist, cliquez dans le champ de recherche en haut de l'interface utilisateur de la console Cloud, puis sélectionnez Ask Gemini (Demander à Gemini) ou Ask Gemini for Cloud console (Demander à Gemini pour la console Cloud).
2. Faites défiler la page jusqu'à la section "API requises", puis activez l'API Gemini pour Google Cloud.
3. Si l'interface de chat ne s'affiche pas immédiatement, cliquez sur Commencer à discuter. Commencez par demander à Gemini d'expliquer certains des avantages de l'utilisation de Cloud Workstations. Prenez quelques minutes pour explorer la réponse générée.
4. Demandez ensuite quels sont les avantages d'Agent Builder et comment il peut aider à élaborer des réponses génératives.
5. Enfin, examinons une comparaison. Dans la fenêtre de chat Gemini de la console Google Cloud, posez la question suivante:

What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?

6. Accédez maintenant au site Web public de Gemini sur cette page, connectez-vous si nécessaire et posez la même question. Les réponses sont-elles identiques ou au moins similaires ? Les étapes spécifiques ? L'une des deux est-elle nettement meilleure ? Gardez-les à l'esprit pendant que nous passons aux étapes suivantes.

Remarque:Si vous essayez d'effectuer l'étape ci-dessus avec votre compte Qwiklabs temporaire, vous serez bloqué. Si votre compte professionnel est également bloqué, car votre organisation n'autorise pas l'utilisation de l'application Web Gemini, ignorez simplement cette étape et passez à la suivante. Cela n'aura aucune incidence sur votre capacité à réaliser cet exercice.

5. Tâche 2 : Créer une application de recherche dans Vertex AI Agent Builder pour le chatbot de conseils culinaires

Le site Web que nous créons comportera une page de conseils culinaires contenant un chatbot conçu pour aider les utilisateurs à trouver des réponses à leurs questions culinaires. Il sera basé sur Gemini et s'appuiera sur une source contenant 70 livres de cuisine du domaine public. Les livres de recettes serviront de source fiable à Gemini pour répondre aux questions.

1. Utilisez la zone de recherche de la console Cloud pour accéder à Vertex AI. Dans le tableau de bord, cliquez sur Activer toutes les API recommandées. Si une fenêtre pop-up s'affiche pour vous indiquer que l'API Vertex AI elle-même doit être activée, veuillez également l'activer.
2. Utilisez la recherche pour accéder à Générateur d'agents, puis à Continuer et activer l'API.
3. Comme Gemini l'a suggéré dans notre demande de conseils précédente, la création d'une application de recherche dans Agent Builder commence par la création d'une source de données fiable. Lorsque l'utilisateur effectue une recherche, Gemini comprend la question et sait comment composer des réponses intelligentes. Toutefois, il se tourne vers la source fiable pour obtenir les informations utilisées dans cette réponse, plutôt que de puiser dans ses connaissances innées.

Dans le menu de gauche, accédez à "Data stores" (Datastores) et à "Create data store" (Créer un datastore). 4. Les livres de cuisine du domaine public que nous utilisons pour étoffer notre page de conseils culinaires se trouvent actuellement dans un bucket Cloud Storage d'un projet externe. Sélectionnez le type de source Cloud Storage. 5. Examinez, mais ne modifiez pas les options par défaut concernant le type d'informations que nous importons. Laissez le type d'importation défini sur "Dossier" et utilisez labs.roitraining.com/labs/old-cookbooks comme chemin d'accès au bucket, puis cliquez sur Continuer. 6. Nommez le data store: old-cookbooks. Modifiez l'ID en old-cookbooks-id, puis créez le data store.

Vertex AI Agent Builder est compatible avec plusieurs types d'applications, et le datastore sert de source de vérité pour chacune d'elles. Les applications de recherche sont adaptées à une utilisation générale et à la recherche. Les applications de chat sont destinées aux flux génératifs dans les applications de chatbot/voicebot basées sur Dataflow. Les applications de recommandation aident à créer de meilleurs moteurs de recommandations. Les applications d'agent permettent de créer des agents basés sur l'IA générative. À terme, l'agent serait probablement le plus adapté à ce que nous voulons faire, mais comme le produit est actuellement en version Preview, nous allons nous en tenir au type d'application de recherche. 7. Dans le menu de gauche, accédez à Applications, puis cliquez sur Créer une application. 8. Sélectionnez le type d'application de recherche. Examinez les différentes options, mais ne les modifiez pas. Nommez l'application: cookbook-search. Modifier et définir l'ID de l'application sur cookbook-search-id. Définissez l'entreprise sur Google, puis cliquez sur Continuer. 9. Vérifiez le data store old-cookbooks que vous avez créé il y a quelques étapes, puis créez l'application de recherche.

Si vous examinez l'onglet Activité, vous constaterez probablement que les livres de recettes sont toujours en cours d'importation et d'indexation. L'Agent Builder met plus de cinq minutes à indexer les milliers de pages contenues dans les 70 livres de recettes que nous lui avons fournis. Pendant que le générateur de recettes est en cours d'exécution, chargeons et nettoyons des données de la base de données de recettes pour notre générateur.

6. Tâche 3 : Charger et nettoyer des données dans un notebook Colab Enterprise, avec l'aide de Gemini Code Assist

Google Cloud propose plusieurs façons principales de travailler avec les notebooks Jupiter. Nous allons utiliser la dernière offre de Google, Colab Enterprise. Certains d'entre vous connaissez peut-être le produit Colab de Google, couramment utilisé par les particuliers et les organisations qui souhaitent tester les notebooks Jupiter dans un environnement libre. Colab Enterprise est une offre Google Cloud commerciale entièrement intégrée au reste des produits cloud de Google et qui exploite pleinement les fonctionnalités de sécurité et de conformité de l'environnement GCP.

L'une des fonctionnalités de Colab Enterprise est l'intégration de Gemini Code Assist de Google. Vous pouvez utiliser l'assistance de code dans différents éditeurs de code. Elle peut vous donner des conseils et vous proposer des suggestions intégrées en temps réel pendant que vous codez. Nous allons exploiter cet assistant génératif pour organiser nos données de recettes.

1. Utilisez la recherche pour accéder à Colab Enterprise et à Créer un notebook. Si vous recevez une offre pour tester de nouvelles fonctionnalités Colab, ignorez-la. Pour activer l'environnement d'exécution, c'est-à-dire la puissance de calcul du notebook, appuyez sur Connect (Connecter) en haut à droite de votre nouveau notebook.

2. Utilisez le menu à trois points à côté du nom du notebook actuel dans le volet "Fichiers Colab Enterprise" pour le renommer Data Wrangling.

3. Créez une zone de texte + Texte, puis utilisez la flèche vers le haut pour la déplacer afin qu'elle soit la première cellule de la page.

4. Modifiez la zone de texte et saisissez:

# Data Wrangling

Import the Pandas library

5. Dans le bloc de code sous le bloc de texte que vous venez de créer, commencez à saisir "imp". Gemini Code Assist devrait suggérer le reste de l'importation en gris. Appuyez sur la touche Tabulation pour accepter la suggestion.

import pandas as pd

6. Sous la zone de code d'importation, créez une autre zone de texte et saisissez:

Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.

7. Créez et modifiez un autre bloc de code. À nouveau, commencez à saisir df et examinez le code généré par Gemini Code Assist. Si une liste déroulante de suggestions de mots clés Python s'affiche au-dessus de la suggestion générée, appuyez sur Échap pour afficher le code suggéré en gris clair. Appuyez à nouveau sur la touche de tabulation pour accepter la suggestion. Si votre suggestion ne contenait pas l'appel de la fonction head(), ajoutez-le.

df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()

8. Cliquez dans la première cellule de code dans laquelle vous avez importé Pandas, puis utilisez le menu Commands (Commandes) ou le clavier pour exécuter la cellule sélectionnée. Sur le clavier, appuyez sur Maj+Entrée pour exécuter la cellule et déplacer le focus vers la cellule suivante, en créant une si nécessaire. Attendez que la cellule s'exécute avant de continuer.

Remarque : [ ] s'affiche à gauche d'une cellule lorsqu'elle n'a pas été exécutée. Lorsqu'une cellule s'exécute, une animation en rotation s'affiche. Une fois la cellule terminée, un nombre s'affiche, par exemple [13]. 9. Exécutez la cellule qui charge le fichier CSV dans le DataFrame. Attendez que le fichier soit chargé, puis examinez les cinq premières lignes de données. Ce sont les données de recettes que nous allons charger dans BigQuery. Nous les utiliserons ensuite pour élaborer notre générateur de recettes. 10. Créez un bloc de code et saisissez le commentaire ci-dessous. Après avoir saisi le commentaire, passez à la ligne de code suivante. Vous devriez alors recevoir la suggestion df.columns. Acceptez-le, puis exécutez la cellule.

# List the current DataFrame column names

Nous venons de démontrer que vous avez deux options pour obtenir de l'aide de Gemini Code Assist dans un notebook Jupyter: des cellules de texte au-dessus des cellules de code ou des commentaires dans la cellule de code elle-même. Les commentaires dans les cellules de code fonctionnent bien dans les notebooks Jupyter, mais cette approche fonctionne également dans n'importe quel autre IDE compatible avec l'assistant Gemini Code de Google.

11. Faisons un peu de nettoyage dans les colonnes. Renommez la colonne Unnamed: 0 en id et link en uri. Utilisez les techniques d'invite > code de votre choix pour créer le code, puis exécutez la cellule lorsque vous êtes satisfait.

# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)

12. Supprimez les colonnes source et NER, puis utilisez head() pour afficher les premières lignes. Demandez à Gemini de vous aider. Exécutez les deux dernières lignes et examinez les résultats.

# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()

13. Voyons combien d'enregistrements sont présents dans notre ensemble de données. Encore une fois, commencez par la technique d'invite de votre choix et voyez si vous pouvez demander à Gemini de vous aider à générer le code.

# Count the records in the DataFrame
df.shape # count() will also work

14. 2,23 millions d'enregistrements représentent probablement plus de recettes que nous n'avons le temps de cuisiner. Le processus d'indexation dans Agent Builder prendrait probablement trop de temps pour notre exercice du jour. Pour trouver un compromis, prenons un échantillon de 150 000 recettes et utilisons-le. Utilisez votre approche d'invite > code pour prélever l'échantillon et le stocker dans un nouveau DataFrame nommé dfs (s pour "small", petit).

# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)

15. Les données de notre source de recettes sont prêtes à être chargées dans BigQuery. Avant de procéder au chargement, allons dans BigQuery et préparons un ensemble de données pour contenir notre table. Dans la console Google Cloud, utilisez la zone de recherche pour accéder à BigQuery. Vous pouvez cliquer avec le bouton droit sur BigQuery et l'ouvrir dans un nouvel onglet du navigateur.
16. Si ce n'est pas déjà fait, ouvrez le panneau de chat Gemini AI à l'aide du logo Gemini en haut à droite de la console Cloud. Si vous êtes invité à réactiver l'API, appuyez sur "Activer" ou actualisez la page. Exécutez l'invite: What is a dataset used for in BigQuery? Après avoir examiné la réponse, posez-vous les questions suivantes: How can I create a dataset named recipe_data using the Cloud Console? Comparez les résultats aux étapes suivantes.

17. Dans le volet "Explorateur" de BigQuery, cliquez sur le menu à trois points Afficher les actions à côté de l'ID de votre projet. Sélectionnez ensuite Créer un ensemble de données.

18. Attribuez l'ensemble de données et l'ID de recipe_data. Laissez le type d'emplacement défini sur États-Unis et cliquez sur Créer un ensemble de données. Si vous recevez un message d'erreur indiquant que l'ensemble de données existe déjà, passez simplement à l'étape suivante.

Maintenant que l'ensemble de données a été créé dans BigQuery, revenons à notre notebook et effectuons l'insertion. 19. Revenez à votre notebook de préparation des données dans Colab Enterprise. Dans une nouvelle cellule de code, créez une variable nommée project_id et utilisez-la pour stocker votre ID de projet actuel. En haut à gauche de ces instructions, sous le bouton "Mettre fin à l'atelier", vous trouverez l'ID de projet actuel. Vous pouvez également y accéder sur la page d'accueil de la console Cloud. Attribuez la valeur à votre variable project_id, puis exécutez la cellule.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'

20. Utilisez l'approche invite > code pour créer un bloc de code qui insérera le DataFrame dfs dans une table nommée recipes dans l'ensemble de données que nous venons de créer recipe_data. Exécutez le code de la cellule.

dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. Tâche 4 : Créer une application de recherche dans Vertex AI Agent Builder pour le générateur de recettes

Excellent. Maintenant que notre table de données de recettes est créée, utilisons-la pour créer une source de données fiable pour notre générateur de recettes. L'approche que nous allons suivre sera semblable à celle que nous avons utilisée pour notre chatbot de cuisine. Nous allons utiliser Vertex AI Agent Builder pour créer un datastore, puis l'utiliser comme source de vérité pour une application de recherche.

Si vous le souhaitez, n'hésitez pas à demander à Gemini dans la console Google Cloud de vous rappeler la procédure à suivre pour créer une application de recherche Agent Builder. Vous pouvez également suivre les étapes ci-dessous.

1. Utilisez la recherche pour accéder à Agent Builder. Ouvrez Data Stores (Datastores) et Create Data Store (Créer un data store). Cette fois, sélectionnez le type de BigQuery Datastore.
2. Dans la cellule de sélection de la table, appuyez sur Parcourir et recherchez recipes. Cochez la case d'option à côté de votre tableau. Si des recettes d'autres projets qwiklabs-gcp-... s'affichent, veillez à sélectionner celle qui vous appartient.

Remarque:Si vous cliquez sur recipes au lieu de sélectionner la case d'option à côté, un nouvel onglet s'ouvre dans votre navigateur et vous êtes redirigé vers la page d'aperçu de la table dans BigQuery. Il vous suffit de fermer l'onglet du navigateur et de sélectionner la case d'option dans Agent Builder. 3. Examinez les autres options par défaut, mais ne les modifiez pas, puis cliquez sur Continue (Continuer). 4. Sur la page d'examen du schéma, examinez les configurations par défaut initiales, mais ne modifiez rien. Continuer 5. Nommez le datastore recipe-data. Modifiez l'ID du datastore et définissez-le sur recipe-data-id. Créez le datastore. 6. Accédez à Applications dans le menu de navigation de gauche, puis à Créer une application. Sélectionnez à nouveau l'application Recherche. Nommez l'application recipe-search et définissez l'ID sur recipe-search-id. Définissez le nom de l'entreprise sur Google, puis cliquez sur Continue (Continuer). 8. Cette fois, vérifiez les sources de données recipe-data. Créez l'application.

L'indexation de notre table de base de données prendra un certain temps. En attendant, essayons le nouveau canevas de données de BigQuery pour voir si nous pouvons trouver une ou deux recettes intéressantes. 9. Utilisez le champ de recherche pour accéder à BigQuery. En haut de BigQuery Studio, cliquez sur la flèche vers le bas à côté de l'onglet le plus à droite, puis sélectionnez Canevas de données. Définissez la région sur us-central1.

10. Dans le champ de recherche du canevas de données, recherchez recipes, puis Ajouter au canevas votre tableau.
11. Une représentation visuelle de votre table de recettes est chargée dans le canevas de données BigQuery. Vous pouvez explorer le schéma de la table, prévisualiser les données de la table et examiner d'autres détails. Sous la représentation de la table, cliquez sur Requête.
12. Le canevas charge une boîte de dialogue de requête BigQuery plus ou moins classique, avec une addition: au-dessus de la fenêtre de requête se trouve une zone de texte que vous pouvez utiliser pour demander de l'aide à Gemini. Voyons si nous pouvons trouver des recettes de gâteaux dans notre exemple. Exécutez l'invite suivante (en saisissant le texte et en appuyant sur Entrée pour déclencher la génération SQL):

Please select the title and ingredients for all the recipes with a title that contains the word cake.

13. Examinez le code SQL généré. Une fois que vous avez terminé, exécutez la requête.
14. Pas mal du tout ! N'hésitez pas à tester d'autres requêtes et invites avant de continuer. Lorsque vous effectuez des tests, essayez des invites moins spécifiques pour voir ce qui fonctionne et ce qui ne fonctionne pas. Par exemple, cette requête:

Do I have any chili recipes?

(N'oubliez pas d'exécuter la nouvelle requête) Elle a renvoyé une liste de recettes de chili, mais n'incluait pas les ingrédients jusqu'à ce que je la modifie pour qu'elle soit la suivante:

Do I have any chili recipes?  Please include their title and ingredients.

(Oui, je dis "s'il vous plaît" lorsque je pose une question. Ma mère serait tellement fière.)

J'ai remarqué qu'une recette de chili contenait des champignons. Qui veut ça dans un chili ? J'ai demandé à Gemini de m'aider à les exclure.

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. Tâche 5 : Structurer l'application Web Python et Streamlit de base, avec un peu d'aide de Gemini

L'indexation de nos deux data stores Vertex AI Agent Builder est terminée, et nos applications de recherche sont presque prêtes. Passons à la création de notre application Web.

Nous utiliserons Gemini Code Assist pour ce faire. Pour en savoir plus sur l'utilisation de Gemini Code Assist dans Visual Studio Code, consultez la documentation.

Nous allons effectuer notre développement dans une Google Cloud Workstation, un environnement de développement cloud, dans notre cas préchargé avec Eclipse Theia (Visual Studio Code Open Source). Un script automatisé dans cet exercice a créé le cluster et la configuration de la station de travail Cloud pour nous, mais nous devons encore créer la station de travail Cloud elle-même. Pour en savoir plus sur Cloud Workstations et leur utilisation, contactez l'assistance Gemini Cloud :-)

1. Utilisez la recherche pour accéder à Cloud Workstations, puis à Créer une station de travail. Nommez la station de travail dev-env et utilisez la configuration my-config. Créez la station de travail.
2. Après quelques minutes, votre nouvelle station de travail apparaît dans la liste "Mes stations de travail". Démarrez dev-env, puis lancez l'environnement de développement.
3. L'éditeur de la station de travail s'ouvre dans un nouvel onglet de navigateur. Après quelques instants, vous devriez voir une interface Theia (Visual Studio Code) familière. Sur le côté gauche de l'interface, développez l'onglet Source Control (Contrôle des sources), puis cliquez sur Clone Repository (Cloner le dépôt).

4. Pour l'URL du dépôt, saisissez https://github.com/haggman/recipe-app. Clonez le dépôt dans votre dossier user, puis ouvrez le dépôt cloné pour le modifier.
5. Avant d'explorer le dossier cloné et de commencer à travailler sur notre application Web, nous devons connecter le plug-in Cloud Code de l'éditeur à Google Cloud et activer Gemini. Alors allons-y. En bas à gauche de l'éditeur, cliquez sur Cloud Code - Sign in (Cloud Code - Se connecter). Si le lien ne s'affiche pas, attendez une minute et vérifiez à nouveau.

6. La fenêtre du terminal affiche une longue URL. Ouvrez l'URL dans le navigateur et suivez les étapes pour accorder à Cloud Code l'accès à votre environnement Google Cloud. Assurez-vous d'utiliser votre compte student-... temporaire pour l'exercice et non votre compte Google Cloud personnel lorsque vous vous authentifiez. Dans la boîte de dialogue finale, copiez le code de validation, puis collez-le dans la fenêtre de terminal en attente de l'onglet de votre navigateur Cloud Workstation.
7. Au bout de quelques instants, le lien Cloud Code en bas à gauche de l'éditeur est remplacé par Cloud Code - No Project (Cloud Code - Aucun projet). Cliquez sur le nouveau lien pour sélectionner un projet. La palette de commandes devrait s'ouvrir en haut de l'éditeur. Cliquez sur Sélectionner un projet Google Cloud, puis sélectionnez votre projet qwiklabs-gcp-.... Après quelques instants, le lien en bas à gauche de l'éditeur s'actualise pour afficher votre ID de projet. Cela signifie que Cloud Code est bien associé à votre projet de travail.
8. Maintenant que Cloud Code est connecté à votre projet, vous pouvez activer Gemini Code Assist. En bas à droite de l'interface de l'éditeur, cliquez sur le logo Gemini barré. Le volet Gemini Chat s'ouvre sur la gauche de l'éditeur. Cliquez sur Sélectionner un projet Google Cloud. Lorsque la palette de commandes s'ouvre, sélectionnez votre projet qwiklabs-gcp-.... Si vous avez correctement suivi les étapes (et que Google n'a rien changé), une fenêtre de chat Gemini active devrait s'afficher.

9. Enfin, configurons également la fenêtre de terminal de l'éditeur. Utilisez le menu hamburger > Vue > Terminal pour ouvrir la fenêtre du terminal. Exécutez gcloud init. Une fois de plus, utilisez le lien pour autoriser le terminal Cloud Shell à fonctionner avec votre projet qwiklabs-gcp-.... Lorsque vous y êtes invité, sélectionnez l'option numérique de votre projet qwiklabs-gcp-....
10. Excellent. Maintenant que les configurations du terminal, de la discussion Gemini et de Cloud Code sont terminées, ouvrez l'onglet Explorer (Explorer) et prenez quelques minutes pour explorer les fichiers du projet en cours.

11. Dans l'explorateur, ouvrez votre fichier requirements.txt pour le modifier. Passez au volet de chat Gemini et demandez:

From the dependencies specified in the requirements.txt file, what type of application are we building?

12. Nous allons donc créer une application Web interactive à l'aide de Python et de Streamlit qui interagit avec Vertex AI et Discovery Engine. Pour l'instant, concentrons-nous sur les composants de l'application Web. Comme Gemini le dit, Streamlit est un framework permettant de créer des applications Web basées sur les données en Python. Maintenant, demandez:

Does the current project's folder structure seem appropriate for a Streamlit app?s

C'est là que Gemini a tendance à rencontrer des problèmes. Gemini peut accéder au fichier que vous avez actuellement ouvert dans l'éditeur, mais il ne peut pas voir l'intégralité du projet. Essayez de poser cette question:

Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?

- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py

obtenir une meilleure réponse ?

13. Voici quelques informations supplémentaires sur Streamlit:

What can you tell me about Streamlit?

Parfait. Nous voyons que Gemini nous offre un bon aperçu, y compris des avantages et des inconvénients.

14. Si vous souhaitez explorer les inconvénients, vous pouvez demander:

What are the major downsides or shortcomings?

Notez que nous n'avons pas eu besoin de dire "de Streamlit", car Gemini Chat est conversationnel (multitours). Gemini sait de quoi nous parlons, car nous sommes dans une session de chat. Si vous souhaitez effacer l'historique de chat Gemini, utilisez l'icône en forme de poubelle en haut de la fenêtre de chat du code Gemini.

9. Tâche 6: Déployer l'application Web sur Cloud Run

Excellent. Nous avons mis en place la structure de base de l'application, mais tout cela fonctionnera-t-il ? Mieux encore, où devrions-nous l'héberger dans Google Cloud ?

1. Dans la fenêtre de chat Gemini, demandez:

If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?

2. N'oubliez pas que si vous n'utilisiez pas déjà votre IDE, vous pouvez également utiliser Google Cloud Assist. Ouvrez la console Google Cloud, puis Gemini Cloud Assist et demandez:

If I have a containerized web application, where would be the
best place to run it in Google Cloud?

Les deux ensembles de conseils étaient-ils identiques ? Êtes-vous d'accord ou non avec certains de ces conseils ? N'oubliez pas que Gemini est un assistant IA générative. Comme un assistant humain, vous ne serez pas toujours d'accord avec tout ce qu'il dit. Toutefois, avoir un assistant toujours à vos côtés lorsque vous travaillez dans Google Cloud et dans votre éditeur de code peut vous rendre beaucoup plus efficace.

3. Cloud Run est une excellente option pour une application Web conteneurisée sans état de courte durée. Dans la fenêtre de chat Gemini de votre éditeur de code, essayez l'invite suivante:

What steps would be required to run this application in
Cloud Run?

4. Il semble que la première chose que nous devions faire soit de créer un Dockerfile. À l'aide de l'éditeur, créez un fichier nommé Dockerfile dans le répertoire racine de votre dossier de projet. Veillez à ne pas le placer accidentellement dans le dossier "pages". Ouvrez le fichier pour le modifier.
5. Utilisons le panneau latéral de chat Gemini pour créer notre Dockerfile. Utilisez une requête semblable à celle ci-dessous. Lorsque les résultats s'affichent dans le chat, utilisez le signe + à côté de l'icône de copie juste au-dessus du Dockerfile suggéré pour insérer le code suggéré dans le Dockerfile.

Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.

Gemini ne renvoie pas toujours la même réponse à la même requête. La première fois que j'ai demandé à Gemini un Dockerfile, j'ai obtenu le fichier exact que je vais vous suggérer d'utiliser. Je viens de recevoir la suggestion suivante:

```docker
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]

That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:

FROM python:3.11-slim-bookworm

WORKDIR /app

COPY requirements.txt . RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt

COPY . .

CMD ["streamlit", "run", "Home.py"]

7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

Où est-il préférable de stocker des images Docker dans Google Cloud ?

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

Comment puis-je utiliser gcloud pour créer un dépôt Docker dans Artifact Registry ?

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

Comment puis-je utiliser gcloud pour créer un service Cloud Run nommé "recette-web-app" à partir d'une image du même nom à partir du dépôt Artifact Registry que nous venons de créer ?

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

Veuillez ajouter des commentaires au fichier actuel.

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder > Data Stores > old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.

Comment savoir si une tomate est mûre ?

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat

11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("Comment savoir si une tomate est mûre ?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:

response = chat.send_message("Comment savoir si une tomate est mûre ?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:

Ajoutez le code que vous avez copié dans votre notebook sous ce message.

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

Voici le code permettant de configurer vos variables de session

Décommentez ce bloc lorsque vous y êtes invité.

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

Voici le code permettant de créer l'interface de chat

Décommentez le code ci-dessous lorsque vous y êtes invité.

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

Avez-vous des conseils pour préparer des brocolis ?

Que diriez-vous d'une recette de soupe au poulet classique ?

Parlez-moi de la meringue.

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

Chili con carne

Chili, maïs, riz

Tarte meringuée au citron

Dessert contenant des fraises

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!