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 des données BigQuery à l'aide des fonctionnalités de langage naturel vers SQL de Data Canvas, écrire du code dans les 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 l'IA et reposant 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 comportera deux pages principales. Cooking Advice hébergera un chatbot que nous créerons à l'aide de Gemini et d'une source ancrée Vertex AI Agent Builder lié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-ci ancré dans 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
• Définir le framework de l'application Web Python et Streamlit, 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) Connectez la page de recherche de recettes à l'application Agent Builder 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.

Ce dont vous avez besoin

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 "Se connecter" 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é à partir du panneau "Connection Details" (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 sans frais.

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 station de travail Google Cloud pour effectuer des tâches de développement. Le processus de démarrage de cet atelier devrait avoir lancé la création du cluster de votre poste de travail. Avant de continuer, vérifions que le cluster est en cours de création.

1. Dans la console Google Cloud, utilisez le champ de recherche pour accéder à Cloud Workstations.
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 ne s'affiche, quel que soit son état, actualisez la page. Si vous ne voyez toujours pas de cluster en cours de mise à jour (création), mettez fin à cet atelier à l'aide du bouton 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 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 Demander à Gemini (ou Demander à Gemini pour la console Cloud).
2. Faites défiler la page jusqu'à la section "API requise", 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 de vous expliquer certains des avantages de l'utilisation de Cloud Workstations. Prenez quelques minutes pour explorer la réponse générée.
4. Ensuite, posez des questions sur les avantages d'Agent Builder et sur la façon dont il peut aider à ancrer les 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. Maintenant, dans votre fenêtre non privée, accédez au site Web public de Gemini, connectez-vous si nécessaire, puis posez la même question. Les réponses sont-elles identiques ou au moins similaires ? Quelles sont les étapes spécifiques ? L'une est-elle nettement meilleure que l'autre ? Quoi qu'il en soit, gardez les réponses à l'esprit lorsque nous passerons 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é parce que 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é à effectuer 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 allons créer comportera une page de conseils de cuisine contenant un chatbot conçu pour aider les utilisateurs à trouver des réponses à leurs questions sur la cuisine. Il s'appuiera sur Gemini, ancré dans une source contenant 70 livres de cuisine du domaine public. Les cookbooks serviront de source de référence à Gemini pour répondre aux questions.

1. Utilisez le champ 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 demander d'activer l'API Vertex AI, veuillez également cliquer sur Activer.
2. Utilisez la recherche pour accéder à Agent Builder, puis cliquez sur Continuer et activer l'API.
3. Comme Gemini l'a suggéré dans nos conseils précédents, la création d'une application de recherche dans Agent Builder commence par la création d'une source de données faisant autorité. Lorsque l'utilisateur effectue une recherche, Gemini comprend la question et sait comment composer des réponses intelligentes. Toutefois, il recherche les informations utilisées dans la réponse dans la source ancrée, plutôt que de les extraire de ses connaissances innées.

Dans le menu de gauche, accédez à "Datastores", puis à "Créer un datastore". 4. Les livres de cuisine du domaine public que nous utilisons pour étayer notre page de conseils de cuisine se trouvent actuellement dans un bucket Cloud Storage d'un projet externe. Sélectionnez le type de source Cloud Storage. 5. Examinez les options par défaut liées au type d'informations que vous importez, mais ne les modifiez pas. Laissez le type d'importation défini sur "Dossier", puis utilisez le chemin d'accès au bucket suivant : labs.roitraining.com/labs/old-cookbooks, puis cliquez sur Continuer. 6. Nommez le data store : old-cookbooks. Cliquez sur Modifier, remplacez l'ID par old-cookbooks-id, puis cliquez sur Créer pour créer le datastore.

Vertex AI Agent Builder est compatible avec plusieurs types d'applications, et le datastore sert de source de vérité pour chacun d'eux. Les applications de recherche sont adaptées à l'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 recommandation. Les applications d'agent permettent de créer des agents basés sur l'IA générative. À terme, Agent sera 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 "Recherche". 7. Dans le menu de gauche, accédez à Applications, puis cliquez sur Créer une application. Sélectionnez le type d'application "Recherche". Examinez les différentes options, mais ne les modifiez pas. Nommez l'application : cookbook-search. Cliquez sur Modifier et définissez l'ID de l'application sur cookbook-search-id. Définissez l'entreprise sur Google, puis cliquez sur Continuer. 9. Cochez le datastore old-cookbooks que vous avez créé il y a quelques étapes, puis cliquez sur Create (Créer) pour créer l'application de recherche.

Si vous examinez l'onglet Activité, vous verrez probablement que les livres de recettes sont toujours en cours d'importation et d'indexation. L'indexation des milliers de pages contenues dans les 70 livres de cuisine que nous lui avons fournis prendra au moins cinq minutes. Pendant qu'il fonctionne, chargeons et nettoyons des données de base de données de recettes pour notre générateur de recettes.

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 d'utiliser les notebooks Jupyter. Nous allons utiliser la dernière offre de Google, Colab Enterprise. Certains d'entre vous connaissent peut-être le produit Colab de Google, couramment utilisé par les particuliers et les organisations qui souhaitent expérimenter avec les notebooks Jupiter dans un environnement sans frais. Colab Enterprise est une offre commerciale Google Cloud entièrement intégrée au reste des produits cloud de Google. Elle tire pleinement parti des fonctionnalités de sécurité et de conformité de l'environnement GCP.

Colab Enterprise propose, entre autres, l'intégration à Gemini Code Assist de Google. Code Assist peut être utilisé dans différents éditeurs de code. Il peut vous donner des conseils et vous proposer des suggestions intégrées pendant que vous codez. Nous allons utiliser cet assistant génératif pour organiser les données de nos 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 que le runtime, la puissance de calcul derrière le notebook, soit opérationnel, appuyez sur Connect (Connecter) en haut à droite de votre nouveau notebook.

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

3. Créez une zone de + Texte et utilisez la flèche vers le haut pour la déplacer afin qu'elle devienne 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 situé 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 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. Une fois encore, commencez à saisir "df" et examinez le code généré par Gemini Code Assist. Si une liste déroulante de saisie semi-automatique de mots clés Python s'affiche au-dessus de la suggestion générée, appuyez sur la touche É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 fonction head(), ajoutez-le.

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

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

Remarque : Vous verrez [ ] juste à gauche lorsqu'une cellule n'a pas été exécutée. Lorsqu'une cellule est en cours d'exécution, une animation de chargement s'affiche. Une fois la cellule terminée, un nombre s'affiche, comme [13]. 9. Exécutez la cellule qui charge le fichier CSV dans le DataFrame. Attendez que le fichier se charge, puis examinez les cinq premières lignes de données. Il s'agit des données de recettes que nous allons charger dans BigQuery et que nous utiliserons par la suite pour ancrer 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. La suggestion df.columns devrait s'afficher. Acceptez-le, puis exécutez la cellule.

# List the current DataFrame column names

Nous venons de vous montrer que vous avez deux possibilités pour obtenir de l'aide de Gemini Code Assist dans un notebook Jupyter : les cellules de texte au-dessus des cellules de code ou les commentaires à l'intérieur de la cellule de code elle-même. Les commentaires dans les cellules de code fonctionnent bien dans les notebooks Jupyter, mais cette approche fonctionnera également dans tout autre IDE compatible avec Gemini Code Assist de Google.

11. Nettoyons un peu les colonnes. Renommez la colonne Unnamed: 0 en id et link en uri. Utilisez la technique de votre choix (requête > code) pour créer le code, puis exécutez la cellule lorsque vous êtes satisfait du résultat.

# 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 de nouveau l'aide de Gemini. 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 contient notre ensemble de données. Encore une fois, commencez par choisir une technique de requête et voyez si vous pouvez obtenir l'aide de Gemini pour générer le code.

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

14. 2,23 millions d'enregistrements, c'est probablement plus de recettes que nous n'avons le temps de consulter. Le processus d'indexation dans Agent Builder prendrait probablement trop de temps pour notre exercice d'aujourd'hui. Pour faire un compromis, échantillonnons 150 000 recettes et travaillons avec cet échantillon. Utilisez votre approche "requête > code" pour extraire l'échantillon et le stocker dans un DataFrame nommé dfs (s pour "small").

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

15. Les données sources de nos recettes sont prêtes à être chargées dans BigQuery. Avant de charger les données, accédez à BigQuery et préparez un ensemble de données pour contenir notre table. Dans la console Google Cloud, utilisez le champ de recherche pour accéder à BigQuery. Vous pouvez effectuer un clic droit sur BigQuery et l'ouvrir dans un nouvel onglet du navigateur.
16. Si le panneau de discussion Gemini IA n'est pas déjà visible, ouvrez-le à l'aide du logo Gemini en haut à droite de la console Cloud. Si vous êtes à nouveau invité à activer l'API, cliquez sur "Activer" ou actualisez la page. Exécutez la requête : What is a dataset used for in BigQuery? Après avoir exploré la réponse, posez la question suivante : 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 l'ID recipe_data. Laissez le type d'emplacement sur États-Unis, puis 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 est créé dans BigQuery, revenons à notre notebook et insérons les données. 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 l'ID de votre projet actuel. Vous trouverez l'ID du projet actuel en haut à gauche de ces instructions, sous le bouton "Terminer l'atelier". Vous pouvez également le trouver sur la page d'accueil de la console Cloud. Attribuez la valeur à votre variable project_id et exécutez la cellule.

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

20. Utilisez l'approche "requête > 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 nous avons créé notre tableau de données de recettes, utilisons-le pour créer une source de données ancrée pour notre générateur de recettes. L'approche que nous allons utiliser sera similaire à celle que nous avons adopté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 les étapes à 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 Datastores et Créer un datastore. Cette fois, sélectionnez le type de data store BigQuery.
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 vous voyez des recettes provenant d'autres projets qwiklabs-gcp-..., veillez à sélectionner celle qui vous appartient.

Remarque : Si vous cliquez sur recipes au lieu de sélectionner le bouton radio à côté, un nouvel onglet s'ouvre dans votre navigateur et vous êtes redirigé vers la page de présentation 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 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 data store recipe-data. Modifiez l'ID du datastore et définissez-le sur recipe-data-id. Créez le datastore. 6. Accédez à Applications à l'aide du menu de navigation de gauche, puis cliquez sur 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 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, testons le nouveau Data Canvas de BigQuery et voyons 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 cliquez sur Ajouter au canevas.
11. Une représentation visuelle de votre tableau de recettes sera chargée dans le canevas de données BigQuery. Vous pouvez explorer le schéma de la table, prévisualiser les données qu'elle contient et examiner d'autres détails. Sous la représentation du tableau, cliquez sur Requête.
12. Le canevas chargera une boîte de dialogue de requête BigQuery plus ou moins typique, avec une nouveauté : 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 échantillon. Exécutez la requête suivante (en saisissant le texte et en appuyant sur Entrée/Retour 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 ! N'hésitez pas à tester d'autres requêtes et requêtes avant de passer à la suite. Lorsque vous faites des tests, essayez des requêtes moins spécifiques pour voir ce qui fonctionne et ce qui ne fonctionne pas. Par exemple, ce prompt :

Do I have any chili recipes?

(N'oubliez pas d'exécuter la nouvelle requête) a renvoyé une liste de recettes de chili, mais a omis les ingrédients jusqu'à ce que je la modifie en :

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

(Oui, je dis "s'il te plaît" quand je fais une requête. Ma maman serait tellement fière.)

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

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 : Définir le framework de l'application Web Python et Streamlit, avec un peu d'aide de Gemini

Maintenant que nos deux data stores Vertex AI Agent Builder sont indexés et que nos applications de recherche sont presque prêtes à être déployées, passons à la création de notre application Web.

Nous utiliserons Gemini Code Assist pendant que nous travaillerons. Pour en savoir plus sur l'utilisation de Gemini Code Assist dans Visual Studio Code, consultez la documentation.

Nous allons développer notre application dans une Google Cloud Workstation, un environnement de développement basé sur le cloud, qui, dans notre cas, est préchargé avec Eclipse Theia (Visual Studio Code Open Source). Un script automatisé a créé le cluster et la configuration Cloud Workstations pour nous dans cet exercice, mais nous devons encore créer la Cloud Workstation elle-même. Si vous souhaitez en savoir plus sur Cloud Workstations et leur utilisation, demandez à Gemini Cloud Assist :-)

1. Utilisez la recherche pour accéder à Cloud Workstations, puis cliquez sur 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 s'affiche dans la liste "Mes stations de travail". Démarrez dev-env, puis lancez l'environnement de développement.
3. L'éditeur de poste de travail s'ouvre dans un nouvel onglet de navigateur. Au bout de quelques instants, vous devriez voir une interface Theia (Visual Studio Code) familière. Sur la gauche de l'interface, développez l'onglet Source Control (Gestion de code source), 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 - Se connecter. Si le lien ne s'affiche pas, patientez une minute et réessayez.

6. Une longue URL s'affiche dans la fenêtre du terminal. 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-... pour l'atelier et non votre compte Google Cloud personnel lors de l'authentification. Dans la dernière boîte de dialogue, copiez le code de validation et collez-le dans la fenêtre de terminal en attente de l'onglet de navigateur de votre Cloud Workstation.
7. Au bout de quelques instants, le lien Cloud Code en bas à gauche de votre éditeur devient 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 est mis à jour et affiche l'ID de votre projet. Cela indique que Cloud Code est correctement associé à votre projet de travail.
8. Une fois Cloud Code 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 panneau de chat Gemini s'ouvre à 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 suivi correctement les étapes (et que Google n'a rien changé), vous devriez maintenant voir une fenêtre de chat Gemini active.

9. Enfin, configurons la fenêtre de terminal de l'éditeur de la même manière. Utilisez menu hamburger > Afficher > 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 nos configurations de terminal, de chat Gemini et de Cloud Code sont définies, ouvrez l'onglet Explorer et prenez quelques minutes pour explorer les fichiers du projet actuel.

11. Dans l'explorateur, ouvrez votre fichier requirements.txt pour le modifier. Passez au panneau de chat Gemini et posez la question suivante :

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 l'indique Gemini, Streamlit est un framework permettant de créer des applications Web axées sur les données en Python. Demandez à présent :

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'ensemble 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?

Bien, nous pouvons voir que Gemini nous offre un bel aperçu, y compris les avantages et les 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 à préciser "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 des discussions Gemini à tout moment, utilisez l'icône en forme de corbeille en haut de la fenêtre de chat Gemini.

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

Parfait, la structure de notre application principale est en place, mais tout fonctionnera-t-il ? Mieux encore, où devrions-nous l'héberger dans Google Cloud ?

1. Dans la fenêtre de chat Gemini, posez la question suivante :

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

2. N'oubliez pas que si vous ne travailliez pas déjà dans votre IDE, vous pouviez également utiliser Google Cloud Assist. Ouvrez la console Google Cloud, puis Gemini Cloud Assist et posez la question suivante :

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 avec certains de ces conseils ? N'oubliez pas que Gemini est un assistant d'IA générative. Comme avec un assistant humain, vous ne serez pas toujours d'accord avec tout ce qu'il dit. Toutefois, le fait d'avoir cet 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 et de courte durée. Dans la fenêtre de chat Gemini de votre éditeur de code, essayez le prompt suivant :

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

4. Il semble que la première chose à faire est de créer un Dockerfile. À l'aide de l'éditeur, créez un fichier nommé Dockerfile à la racine du dossier de votre projet. Veillez à ne pas le placer accidentellement dans le dossier des pages. Ouvrez le fichier pour le modifier.
5. Utilisons le panneau latéral de chat Gemini pour créer notre Dockerfile. Utilisez un prompt comme celui 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é un Dockerfile à Gemini, j'ai obtenu exactement le fichier 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:

Quel est le meilleur endroit dans Google Cloud pour stocker des images Docker ?

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 registre 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é "recipe-web-app" à partir d'une image du même nom provenant 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 commenter le 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("How can I tell if a tomato is ripe?") 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("How can I tell if a tomato is ripe?") 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é depuis 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 le brocoli ?

Et si vous essayiez une recette de soupe de poulet classique ?

Parle-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 au citron meringuée

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!