Dans cet atelier, vous allez intégrer un agent IA à une application Flutter. Vous allez utiliser Flutter comme framework d'application cliente, Vertex AI Search comme base de données vectorielle et Reasoning Engine pour créer et déployer un agent avec LangChain sur Vertex AI. L'agent utilise Gemini, une famille de grands modèles de langage (LLM) très performants, pour générer des réponses d'IA à partir de requêtes contenant du texte et des images.
L'atelier est préprovisionné avec VS Code en tant qu'IDE à l'aide de code-server, ainsi qu'avec les extensions Flutter et Dart nécessaires pour exécuter l'application Flutter. Il inclut également fwr, un outil que vous utilisez pour livrer l'application Flutter en tant qu'application Web accessible à l'aide d'un navigateur.
Cet atelier s'adresse aux développeurs de tous niveaux participant à la création d'applications, mais dont l'expérience est peut-être limitée dans le développement d'applications cloud. Il est souhaitable d'avoir une expérience de l'utilisation du langage Python et d'être familiarisé avec le framework Flutter. Vous n'avez pas besoin de connaître Flutter pour effectuer les tâches de cet atelier. Cependant, vous allez examiner une partie du code de l'application Flutter et tester ses fonctionnalités.
Objectifs
Dans cet atelier, vous allez réaliser les tâches suivantes :
Créer un datastore et une application de recherche à l'aide d'AI Applications dans la console Google Cloud
Déployer un agent Reasoning Engine à l'aide de Vertex AI Workbench
Utiliser une application Python qui intègre Vertex AI Search et l'agent Reasoning Engine
Déployer l'application sur Cloud Run et l'utiliser comme backend d'une application Flutter
Configurer un projet Firebase et l'associer à l'application Flutter
Voici une présentation des différents composants utilisés dans cet atelier :
Préparation
Pour chaque atelier, nous vous attribuons un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée, sans frais.
Connectez-vous à Qwiklabs dans une fenêtre de navigation privée.
Vérifiez le temps imparti pour l'atelier (par exemple : 01:15:00) : vous devez pouvoir le terminer dans ce délai.
Une fois l'atelier lancé, vous ne pouvez pas le mettre en pause. Si nécessaire, vous pourrez le redémarrer, mais vous devrez tout reprendre depuis le début.
Lorsque vous êtes prêt, cliquez sur Démarrer l'atelier.
Notez vos identifiants pour l'atelier (Nom d'utilisateur et Mot de passe). Ils vous serviront à vous connecter à Google Cloud Console.
Cliquez sur Ouvrir la console Google.
Cliquez sur Utiliser un autre compte, puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.
Si vous utilisez d'autres identifiants, des messages d'erreur s'afficheront ou des frais seront appliqués.
Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.
Tâche 1 : Créer un datastore et une application de recherche
Dans cette tâche, vous allez implémenter une fonctionnalité de recherche dans votre application Flutter en créant un datastore et une application de recherche à l'aide d'AI Applications dans la console Google Cloud.
Créer un datastore de recherche
Dans la console Cloud, cliquez sur Afficher tous les produits. Faites défiler la page Tous les produits jusqu'à la section Intelligence artificielle, puis cliquez sur AI Applications.
Cliquez sur Continuer et activer l'API.
Dans le volet de gauche, cliquez sur Datastores pour ouvrir la page correspondante, puis sur Créer un datastore.
Sur cette page, vous allez configurer la source de données qui sera utilisée pour générer les résultats. Pour cet atelier, un fichier CSV contenant des données sur des articles du Google Merchandise Store a été préprovisionné dans un bucket Cloud Storage.
Pour sélectionner Cloud Storage comme source de données, sous Cloud Storage, cliquez sur Sélectionner.
Pour le type de données à importer, sélectionnez Données structurées de FAQ pour une application de chat (CSV).
Sous "Sélectionnez un dossier ou un fichier à importer", cliquez sur Fichier.
Pour indiquer l'URL Cloud Storage du fichier CSV, cliquez sur Parcourir.
Pour afficher le contenu du bucket Cloud Storage , cliquez sur .
Sélectionnez le fichier goog_merch.csv, puis cliquez sur Sélectionner.
L'URI gs:// du dossier est alors renseigné.
Cliquez sur Continuer.
Pour le nom du datastore, saisissez goog-merch-ds.
Cliquez sur Créer.
Un datastore est créé, et l'ingestion des données à partir du fichier CSV est lancée.
Sur la page Datastores, cliquez sur le nom du datastore que vous venez de créer.
L'onglet Documents présente la liste des documents importés. Pour afficher les données associées à un document, cliquez sur Afficher le document.
Cliquez sur Vérifier ma progression pour valider l'objectif.
Créer un datastore Vertex AI Search
Créer une application de recherche
Pour utiliser le datastore de recherche, vous devez l'associer à une application de recherche dans Vertex AI Agent Builder.
Dans la console Cloud, cliquez sur AI Applications, puis sur Applications.
Cliquez sur Créer une application.
Sur la page Créer une application, pour le type d'application à créer, sous Recherche et assistant > Recherche personnalisée (général), cliquez sur Créer.
Sur la page Configuration de l'application de recherche, configurez une application de recherche sur site Web en utilisant les paramètres suivants et conservez les valeurs par défaut des autres paramètres :
Propriété
Valeur (saisir ou sélectionner)
Fonctionnalités de l'édition Enterprise
Désactiver
Nom de votre application
gms-search-app
Nom externe de votre entreprise ou organisation
gms-company
Emplacement de votre application
mondial (Mondial)
Cliquez sur Continuer.
La liste des datastores existants s'affiche. Sélectionnez le datastore goog_merch_ds que vous avez créé à la sous-tâche précédente.
Pour créer l'application de recherche, cliquez sur Créer.
L'application de recherche est créée et le datastore y est associé.
Pour tester l'application de recherche, dans le menu de navigation d'AI Applications, cliquez sur Aperçu.
Dans le champ Rechercher, saisissez dino.
Une liste s'affiche avec les résultats de recherche associés générés à partir des documents importés dans le datastore.
Remarque : Si un message d'erreur s'affiche et indique L'aperçu de la recherche n'est pas encore prêt, veuillez patienter quelques minutes avant de réessayer. Si vous ne souhaitez pas attendre, vous pouvez passer à la tâche suivante de l'atelier.
Cliquez sur Vérifier ma progression pour valider l'objectif.
Créer une application Vertex AI Search
Tâche 2 : Créer et déployer le backend
Le backend de l'application Flutter s'exécutera en tant que service Cloud Run sur Google Cloud. Le service de backend intègre l'application de recherche que vous avez créée à l'étape précédente pour générer des réponses à partir des données du Merchandise Store. Il intègre également un agent Reasoning Engine qui accède à Gemini pour obtenir du contenu d'IA générative en réponse aux requêtes de l'application Flutter.
Dans cette tâche, vous allez créer l'application backend Python et la déployer sur Cloud Run.
Configurer et examiner l'application backend
Pour cet atelier, un IDE basé sur VS Code a été préprovisionné. Pour accéder à l'IDE, copiez l'URL du service IDE depuis le panneau des identifiants d'atelier Qwiklabs et collez-la dans une nouvelle fenêtre de navigation privée.
Remarque : L'URL du service IDE est le point de terminaison d'un service Cloud Run préprovisionné pour cet atelier et transfère les requêtes à la VM code-server. L'IDE est créé avec code-server et inclut les extensions Flutter, Dart et Vim.
Ouvrez un terminal dans l'IDE. Dans le menu de navigation de l'IDE (), cliquez sur Terminal > Nouveau terminal.
Remarque : Exécutez les commandes des étapes ci-dessous dans la fenêtre de terminal de l'IDE.
La version initiale de l'application backend et les fichiers associés sont préprovisionnés pour l'atelier. Copiez la version initiale du dossier de l'application backend et son contenu depuis Cloud Storage :
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~
Remarque : Si vous y êtes invité, cliquez sur Autoriser pour coller le texte et les images du presse-papiers, puis appuyez sur Entrée.
Pour lister le contenu du dossier, dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :
ls ~/ag-web/app
Le dossier ag-web/app contient le code source de l'application et les autres fichiers nécessaires pour créer l'application backend et la déployer sur Cloud Run.
Définissez les variables PROJECT_ID, LOCATION et STAGING_BUCKET pour l'application.
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py
sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py
sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py
Configurez l'application backend pour qu'elle utilise le datastore de recherche que vous avez créé plus tôt.
Dans la commande ci-dessous, remplacez la chaîne {YOUR_SEARCH_DATA_STORE_ID} par l'ID de votre datastore de recherche.
Veillez à supprimer les accolades dans la commande sed.
Remarque : Pour récupérer l'ID du datastore de recherche que vous avez créé plus tôt, accédez à AI Applications > Datastores dans la console Cloud, puis cliquez sur son nom. Copiez l'ID du datastore, qui correspond à celui du moteur de recherche.
sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py
Pour afficher le code dans l'IDE, cliquez sur dans le menu de navigation de l'IDE, puis cliquez sur Ouvrir le dossier.
Sélectionnez le dossier IDE-DEV/ag-web/ dans la liste, puis cliquez sur OK.
Pour approuver les auteurs du code, cliquez sur Oui, je fais confiance aux auteurs.
Dans le volet Explorateur, développez le dossier app, puis cliquez sur app.py pour ouvrir le fichier dans l'éditeur.
Le code de l'application backend effectue les opérations suivantes :
Il initialise Vertex AI avec l'ID de projet Google Cloud, la région et le bucket Cloud Storage de l'atelier.
La fonction search_gms() utilise le point de terminaison des datastores d'API discoveryengine.googleapis.com pour lancer une requête de recherche. L'ID du datastore que vous avez créé plus tôt est utilisé dans l'URL.
La fonction utilise la requête de recherche fournie par l'utilisateur pour effectuer la recherche dans le contenu du datastore, et met en forme les résultats dans une réponse JSON.
L'application utilise flask pour acheminer les appels vers les fonctions individuelles. Le point de terminaison / correspond à la page par défaut utilisée pour vérifier que l'application se charge correctement, tandis que le point de terminaison /ask_gms appelle la fonction search_gms() qui utilise Vertex AI Search.
Créer et déployer l'application sur Cloud Run
Un script de déploiement est disponible pour créer et déployer l'application backend sur Cloud Run.
Ouvrez une fenêtre de terminal dans l'IDE et accédez au dossier de l'application backend :
cd ~/ag-web/app
Authentifiez-vous sur Google Cloud à partir de la gcloud CLI :
gcloud auth login
Pour continuer, saisissez Y.
Pour lancer la procédure de connexion, appuyez sur la touche Ctrl (pour Windows et Linux) ou Cmd (pour macOS) et cliquez sur le lien dans le terminal.
S'il vous est demandé de confirmer l'ouverture du site web externe, cliquez sur Ouvrir.
Cliquez sur l'adresse e-mail que vous utilisez pour participer à l'atelier.
Lorsqu'un message vous invite à poursuivre, cliquez sur Continuer.
Pour autoriser Google Cloud SDK à accéder à votre compte Google et accepter les conditions d'utilisation, cliquez sur Autoriser.
Votre code de vérification s'affiche dans l'onglet du navigateur.
Cliquez sur Copier.
Dans la fenêtre de terminal de l'IDE, collez le code à l'endroit où est indiqué Saisir le code d'autorisation, puis appuyez sur Entrée.
Vous êtes désormais connecté à Google Cloud.
Rendez le script deploy.sh exécutable, puis exécutez-le pour déployer l'application dans la région Cloud Run spécifiée :
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
Une fois l'application créée et déployée sur Cloud Run, l'URL de son point de terminaison s'affiche à la fin des résultats du script. Elle a été générée par la commande gcloud run deploy exécutée dans le script.
Remarque : L'exécution de cette commande prend du temps. Attendez qu'elle se termine avant de passer à la tâche suivante.
Tester l'application backend
Vous allez tester le fonctionnement de l'application en accédant à son point de terminaison Cloud Run.
Copiez l'URL du point de terminaison de l'application générée à l'étape précédente, puis accédez-y dans un nouvel onglet du navigateur.
Une fois l'application chargée, sa page d'accueil affiche le message Bienvenue dans l'application backend ag-web.
Dans la barre d'adresse du navigateur, ajoutez le chemin d'accès ci-dessous à la fin de l'URL :
/ask_gms?query=dino
Vérifiez que l'application renvoie des résultats issus du datastore de recherche que vous avez créé plus tôt.
Cliquez sur Vérifier ma progression pour valider l'objectif.
Créer une application backend
Tâche 3 : Configurer Firebase
Pour appeler l'API Gemini, l'application d'interface Flutter utilise le SDK Dart Vertex AI for Firebase. Ce SDK correspond au package firebase_vertexai disponible sur pub.dev, le dépôt de packages officiel des applications Dart et Flutter.
Firebase est la plate-forme de développement d'applications backend de Google. Elle fournit des services pour différents OS, tels qu'Android, iOS, etc.
Dans cette tâche, vous allez configurer Firebase et vous connecter à la CLI Firebase. Plus tard dans cet atelier, vous allez associer votre application Flutter à Firebase.
Configurer Firebase
Pour utiliser le SDK, vous devez d'abord configurer un projet Firebase.
Pour ajouter Firebase au projet Google Cloud de l'atelier, cliquez sur Ajouter Firebase au projet Google Cloud en bas de la page.
Cliquez sur Sélectionner un projet Google Cloud, puis sélectionnez le projet de l'atelier dans la liste.
Acceptez les conditions d'utilisation de Firebase, puis cliquez sur Continuer.
Cliquez de nouveau sur Continuer.
Pour utiliser le mode de facturation par défaut, cliquez sur Confirmer et continuer.
Désactivez Google Analytics pour le projet, puis cliquez sur Ajouter Firebase.
Attendez que votre projet Firebase soit prêt, puis cliquez sur Continuer.
Vous pouvez maintenant utiliser Firebase dans le projet Google Cloud de l'atelier.
Se connecter à Firebase
Dans la fenêtre de terminal de votre IDE, connectez-vous à la CLI Firebase :
firebase login --no-localhost
Pour autoriser Firebase à collecter les informations des rapports de la CLI et de l'émulateur, saisissez Y, puis appuyez sur Entrée.
Notez votre ID de session, puis suivez les étapes pour lancer la procédure de connexion. Appuyez sur la touche Ctrl (pour Windows et Linux) ou Cmd (pour macOS), puis cliquez sur l'URL dans le terminal.
Lorsque vous êtes invité à ouvrir le site Web externe, cliquez sur Ouvrir.
Cliquez sur l'adresse e-mail que vous utilisez pour participer à l'atelier.
Cliquez sur Continuer.
Pour accorder les autorisations nécessaires à la CLI Firebase, cliquez sur Autoriser.
Cliquez sur Oui, je viens d'exécuter cette commande.
Vérifiez votre ID de session, puis cliquez sur Oui, il s'agit de mon ID de session.
Pour copier le code d'autorisation, cliquez sur Copier.
Collez le code d'autorisation à l'endroit indiqué dans la fenêtre de terminal de l'IDE, puis appuyez sur Entrée.
Vous êtes maintenant connecté à la CLI Firebase.
Tâche 4 : Créer un agent IA Reasoning Engine
Un agent IA est une application qui exploite la puissance des grands modèles de langage (LLM) pour raisonner et orchestrer l'utilisation d'outils externes afin d'atteindre son objectif. Vertex AI Agent Builder est une suite de produits et d'outils Google qui vous aide à créer des agents IA en les associant à vos sources de données de confiance.
Vertex AI Reasoning Engine (également appelé LangChain sur Vertex AI) vous aide à créer et à déployer un agent de raisonnement avec Vertex AI Agent Builder. LangChain est un outil OSS populaire utilisé pour créer des chatbots et des systèmes RAG.
Reasoning Engine permet aux développeurs d'utiliser des appels de fonction pour mapper les résultats des LLM (Gemini) à des fonctions Python. Reasoning Engine s'intègre parfaitement au SDK Python pour le modèle Gemini dans Vertex AI et est compatible avec LangChain et d'autres frameworks Python.
Dans cette tâche, vous allez utiliser Vertex AI Workbench avec un notebook Jupyter pour déployer un agent Reasoning Engine avec des fonctions Python. Nous utiliserons cet agent dans l'application backend d'IA générative lors de la prochaine tâche de cet atelier.
Créer une instance Vertex AI Workbench
Vertex AI Workbench est un environnement de développement basé sur des notebooks Jupyter pour l'ensemble du workflow de data science et de machine learning. Vous pouvez interagir avec Vertex AI et d'autres services Google Cloud à partir du notebook Jupyter d'une instance Vertex AI Workbench. Par exemple, Vertex AI Workbench vous permet d'accéder à vos données et de les parcourir dans un notebook Jupyter à l'aide d'intégrations BigQuery et Cloud Storage.
Les instances Vertex AI Workbench sont fournies avec une suite préinstallée de packages de deep learning, compatibles avec les frameworks TensorFlow et PyTorch.
Les notebooks Vertex AI Workbench offrent une solution flexible et évolutive pour développer et déployer des modèles de ML sur Google Cloud.
Pour créer une instance Workbench, dans la console Cloud, cliquez sur le menu de navigation (), puis sélectionnez Vertex AI > Workbench.
Si vous y êtes invité dans la console Cloud, activez l'API Notebooks.
Vérifiez que l'option Instances est sélectionnée dans l'onglet Instances, puis cliquez sur Créer.
Sur la page "Nouvelle instance", saisissez my-instance dans le champ Nom.
Conservez les autres paramètres par défaut, puis cliquez sur Créer.
Votre nouvelle instance se lance dans la section "Instances". Attendez que l'instance soit créée avant de passer à l'étape suivante.
Remarque : Une coche verte apparaît à côté de l'instance lorsqu'elle est prête à être utilisée.
Lorsque l'instance est prête, cliquez sur Ouvrir JupyterLab.
Pour lancer un notebook Jupyter Python 3, cliquez sur le notebook Python 3.
Copier le fichier notebook
Un notebook qui permet de créer et déployer un agent Reasoning Engine a été préprovisionné pour cet atelier.
Pour copier le notebook dans votre instance JupyterLab, copiez ce code dans la première cellule de votre nouveau notebook :
Sélectionnez la cellule et exécutez-la en cliquant sur Exécuter dans le menu de la cellule :
La commande copie le notebook depuis Cloud Storage dans votre instance JupyterLab. Une fois la commande terminée, le fichier notebook est listé dans le dossier racine de premier niveau.
Pour ouvrir le notebook, double-cliquez sur le fichier notebook dans la liste des dossiers. Un onglet distinct s'ouvre et affiche le contenu du notebook.
Créer et déployer un agent Reasoning Engine
Exécutez toutes les cellules de code du notebook dans l'ordre, en commençant par le début. Pour exécuter une cellule, sélectionnez-la en cliquant n'importe où dans la cellule, puis cliquez sur Exécuter dans son menu ou dans le menu supérieur du notebook.
Remarque : Lorsque vous exécutez une commande dans une cellule, attendez la fin de l'exécution avant de passer à la cellule suivante. Une fois l'exécution terminée, l'astérisque (*) qui s'affiche dans le champ du numéro de cellule est remplacé par le numéro de la cellule.Remarque : Avant d'exécuter une cellule, veuillez consulter les notes ci-dessous pour connaître les instructions ou les étapes spécifiques à suivre. Ces instructions sont indiquées avec le préfixe INSTRUCTIONS POUR LA CELLULE.
a. [INSTRUCTIONS POUR LA CELLULE] Restart current runtime (Redémarrer l'environnement d'exécution actuel) :
Si vous y êtes invité, dans la boîte de dialogue Redémarrage du noyau, cliquez sur OK.
b. [INSTRUCTIONS POUR LA CELLULE] Set Google Cloud project information and initialize Vertex AI SDK (Définir les informations du projet Google Cloud et initialiser le SDK Vertex AI) :
Avant d'exécuter cette cellule pour initialiser le SDK Vertex AI, modifiez les valeurs de configuration pour l'ID du projet, l'emplacement et le bucket de préproduction :
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}"
LOCATION = "{{{project_0.default_region|set at lab start}}}"
STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
Cellule modifiée avec des exemples de paramètres de configuration :
c. [INSTRUCTIONS POUR LA CELLULE] Define Tool function for Vertex AI Search (Définir la fonction de l'outil pour Vertex AI Search) :
Avant d'exécuter cette cellule, remplacez la valeur de GOOGLE_SHOP_VERTEXAI_SEARCH_URL par l'URL du point de terminaison Cloud Run de votre application backend.
Pour récupérer l'URL du point de terminaison, dans la console Cloud, accédez à Cloud Run, puis cliquez sur le nom de l'application backend (ag-web). Copiez la valeur de l'URL du point de terminaison et collez-la dans la cellule.
Cellule modifiée avec l'URL de point de terminaison Cloud Run de l'application backend :
Remarque : Vous pouvez également exécuter une cellule en cliquant sur Exécuter dans la barre de menu du notebook.
Après avoir exécuté la cellule Deploy the Agent to the Reasoning Engine runtime (Déployer l'agent dans l'environnement d'exécution Reasoning Engine), attendez que la commande se termine et que l'agent Reasoning Engine soit créé. Copiez ensuite l'ID de l'agent Reasoning Engine :
Vous aurez besoin de cet ID pour configurer et redéployer l'application backend à la tâche suivante.
Remarque : L'exécution de cette cellule peut prendre jusqu'à 10 minutes. Attendez que le résultat final indique que l'agent Reasoning Engine a bien été créé avant de passer à l'étape suivante.
Pour vérifier que l'agent Reasoning Engine fonctionne correctement, exécutez les deux cellules suivantes et observez le résultat.
L'agent Reasoning Engine a bien appelé le datastore Wikipédia ou Vertex AI Search en fonction de l'entrée de la requête et de la sortie du modèle Gemini.
Cliquez sur Vérifier ma progression pour valider l'objectif.
Déployer l'agent Reasoning Engine
Tâche 5 : Améliorer l'application backend
Vous allez maintenant améliorer l'application backend pour qu'elle appelle l'agent Reasoning Engine que vous avez déployé à la tâche précédente.
La version initiale de l'application backend ne récupérait directement les résultats qu'à partir de Vertex AI Search. Sa nouvelle version appelle l'agent Reasoning Engine, qui utilise les résultats de Gemini et les outils de l'agent pour générer une réponse à partir de Vertex AI Search ou de Wikipédia en fonction de la requête d'entrée.
Dans cette tâche, vous allez modifier le code de l'application backend pour ajouter un autre point d'entrée qui appelle l'agent Reasoning Engine à l'aide d'une requête et qui renvoie la réponse de l'agent.
Mettre à jour l'application backend
Dans la fenêtre de terminal de l'IDE, ajoutez le code du nouveau point d'entrée au fichier app.py en exécutant la commande suivante :
cat << EOF >> ~/ag-web/app/app.py
#
# Reasoning Engine
#
NB_R_ENGINE_ID = "REASONING_ENGINE_ID"
from vertexai.preview import reasoning_engines
remote_agent = reasoning_engines.ReasoningEngine(
f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}"
)
# Endpoint for the Flask app to call the Agent
@app.route("/ask_gemini", methods=["GET"])
def ask_gemini():
query = request.args.get("query")
log.info("[ask_gemini] query: " + query)
retries = 0
resp = None
while retries < MAX_RETRIES:
try:
retries += 1
resp = remote_agent.query(input=query)
if (resp == None) or (len(resp["output"].strip()) == 0):
raise ValueError("Empty response.")
break
except Exception as e:
log.error("[ask_gemini] error: " + str(e))
if (resp == None) or (len(resp["output"].strip()) == 0):
raise ValueError("Too many retries.")
return "No response received from Reasoning Engine."
else:
return resp["output"]
EOF
Configurez l'application backend pour qu'elle utilise l'agent Reasoning Engine que vous avez créé plus tôt.
Remplacez la chaîne {YOUR_REASONING_ENGINE_ID} dans la commande ci-dessous par l'ID de votre agent Reasoning Engine que vous avez copié depuis la cellule du notebook à la tâche précédente, puis exécutez la commande ci-dessous dans la fenêtre de terminal de l'IDE.
Veillez à supprimer les accolades dans la commande sed.
sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py
Pour afficher le code dans l'IDE, cliquez sur dans le menu de navigation de l'IDE, puis sélectionnez le fichier IDE-DEV/ag-web/app/app.py.
Dans la version améliorée de l'application backend :
Un handle sur remote_agent est récupéré à partir de l'environnement d'exécution Reasoning Engine à l'aide de la valeur REASONING_ENGINE_ID de l'agent que vous avez créé à la tâche précédente.
Un nouveau point de terminaison /ask_gemini qui définit la fonction "ask_gemini()" est configuré.
La fonction transmet le paramètre query fourni par l'utilisateur dans la requête à l'agent Reasoning Engine (remote_agent) et renvoie la réponse de l'agent.
Créer et redéployer l'application backend sur Cloud Run
Accédez au dossier de l'application backend :
cd ~/ag-web/app
Exécutez le script pour redéployer l'application dans la région Cloud Run spécifiée :
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
Tester l'application backend
Vous allez tester le fonctionnement de l'application en accédant à son point de terminaison Cloud Run.
Copiez l'URL du point de terminaison de l'application générée à l'étape précédente, puis accédez-y dans un nouvel onglet du navigateur.
Une fois l'application chargée, sa page d'accueil affiche le message Bienvenue dans l'application backend ag-web.
Dans la barre d'adresse du navigateur, ajoutez le chemin d'accès ci-dessous à la fin de l'URL :
/ask_gemini?query=where can I buy the chrome dino pin
L'application renvoie les résultats de l'agent qui les a récupérés dans le datastore Vertex AI Search que vous avez créé plus tôt.
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.
Dans la barre d'adresse du navigateur, remplacez le chemin d'accès par ce qui suit :
/ask_gemini?query=what is fallingwater
L'application renvoie les résultats de l'agent qui a récupéré une réponse de l'API Wikipédia que vous avez configurée dans le notebook.
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall.
Remarque : La réponse réelle que vous recevez peut différer de celles affichées ci-dessus.
Tâche 6 : Tester Gemini 2.0 Flash
Maintenant que vous avez développé et déployé votre application backend, les composants Vertex AI Search et un agent Reasoning Engine, vous pouvez commencer à créer l'application d'interface Flutter.
L'application Flutter permet aux utilisateurs de découvrir plus d'informations sur les photos qu'ils importent dans l'application. Elle intègre Gemini pour générer des réponses sur les photos et utilise un agent IA pour les fournir dans une interface de chat.
Avant de développer l'application d'interface, vous devez définir la structure des réponses renvoyées par le modèle Gemini 2.0 Flash. Ce modèle est utilisé par l'agent IA que vous avez déployé plus tôt dans l'atelier.
Dans cette tâche, vous allez envoyer des requêtes au modèle Gemini 2.0 Flash et afficher ses réponses au format JSON.
Gemini 2.0 Flash est disponible dans Vertex AI Studio (accessible depuis la console Cloud). Pour accéder à Vertex AI Studio, cliquez sur le menu de navigation (), puis sélectionnez Vertex AI > Créer un prompt (sous Vertex AI Studio).
Si vous êtes invité à activer les API nécessaires à l'utilisation de Vertex AI Studio, cliquez sur Accepter et continuer.
Remarque : Vertex AI Studio est un outil dans la console Google Cloud qui vous permet de tester et de prototyper rapidement des modèles d'IA générative pour les utiliser dans vos applications.
Dans la section Requête, cliquez sur Insérer un média, puis sélectionnez Importer depuis Cloud Storage.
Cliquez sur > à côté du nom du bucket de l'atelier .
Sélectionnez le fichier image fallingwater.jpg, puis cliquez sur Sélectionner.
L'image est importée dans le champ de requête.
Pour interroger le modèle, saisissez What is this? (De quoi s'agit-il ?) dans le champ de requête sous l'image, puis cliquez sur Envoyer ().
Le modèle fournit une réponse brève décrivant correctement l'objet dans l'image.
Pour demander au modèle de fournir plus d'informations au format JSON, modifiez le prompt textuel. Pour modifier le prompt, faites défiler la page jusqu'en haut du volet des prompts, puis cliquez sur Modifier. Remplacez le texte du prompt par :
What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".
Cliquez sur Envoyer ().
Consultez la réponse JSON générée par le modèle.
{
"name": "Fallingwater",
"description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.",
"suggestedQuestions": [
"Who commissioned Frank Lloyd Wright to design Fallingwater?",
"What are some of the key architectural features of Fallingwater?",
"Is Fallingwater open to the public, and if so, how can I visit?"
]
}
Vous disposez désormais d'une requête et d'une réponse au format JSON que vous pouvez utiliser pour créer votre application Flutter.
Remarque : La réponse du modèle que vous recevez peut différer de celle affichée ci-dessus.
Maintenant que vous connaissez la structure des données renvoyées par le modèle, vous pouvez créer l'application d'interface.
Flutter est un framework de développement d'applications multiplates-formes Open Source. Il vous permet d'écrire un codebase qui s'exécute sur Android, iOS, le Web, macOS, Windows et Linux. Les applications Flutter sont développées dans le langage de programmation Dart.
Dans cet atelier, vous allez utiliser le Web comme plate-forme cible afin que l'application Flutter soit déployée en tant qu'application Web et soit accessible via un navigateur.
Dans cette tâche, vous allez examiner le code de l'application Flutter, puis la créer et l'exécuter en tant qu'application Web.
Examiner le codebase de l'application Flutter
L'une des fonctionnalités de l'application permet aux utilisateurs d'importer une photo d'une attraction touristique, puis d'interroger Gemini pour récupérer des informations sur la photo. Pour les besoins de cet atelier, l'application Flutter a été développée et est disponible dans Cloud Storage.
Dans le terminal de votre IDE, téléchargez le code de l'application Flutter :
Pour récupérer les dépendances du projet d'application, exécutez la commande suivante dans la fenêtre de terminal de l'IDE :
cd ~/app; flutter pub get
Pour afficher le code dans l'IDE, dans le menu de navigation (), cliquez sur Fichier, puis sélectionnez Ouvrir un dossier.
Sélectionnez /home/ide-dev/app/ dans la liste, puis cliquez sur OK.
Pour approuver les auteurs des fichiers du dossier, cliquez sur Oui, je fais confiance aux auteurs.
Voici une vue d'ensemble du contenu du dossier app :
Dossier/Fichier
Description
app
Dossier racine du projet qui contient les sous-dossiers et les fichiers qui composent l'application Flutter.
android/ios/linux/macos/web/windows
Contient les fichiers spécifiques aux plates-formes nécessaires pour exécuter l'application Flutter sur chaque plate-forme prise en charge.
lib
Contient les principaux fichiers Dart de l'application, qui incluent les fonctionnalités, le routage, les modèles de données et l'interface utilisateur.
test
Contient les tests Dart utilisés pour tester les widgets de l'application.
pubspec.yaml
Contient les dépendances de l'application, la version Flutter et d'autres paramètres de configuration.
analysis_options.yaml
Contient les paramètres de configuration pour l'analyse statique de l'application.
Examinons certains des fichiers de ces dossiers.
Dans le menu Explorateur, cliquez sur le dossier /app/lib/models, puis sur le fichier metadata.dart pour l'ouvrir.
Le fichier metadata.dart contient le modèle de données utilisé par l'application Flutter.
class Metadata {
String name = '';
String description = '';
List suggestedQuestions = [];
// more code follows ...
}
Les attributs de l'objet de métadonnées correspondent aux attributs JSON renvoyés dans la réponse de l'API Gemini. La méthode fromJson initialise les attributs de l'objet lorsqu'elle est appelée.
Dans le menu Explorateur, cliquez sur le fichier /app/lib/main.dart pour l'ouvrir.
Il s'agit du point d'entrée de l'application Flutter. Après avoir effectué les tâches d'initialisation, le code de ce fichier compile l'interface utilisateur de l'application à l'aide de Material Components et définit son titre, son thème et sa configuration de routage.
Remarque : Material Components commence avec le widget MaterialApp, qui crée un certain nombre de widgets utiles à la racine de votre application, y compris un navigateur qui gère l'acheminement vers les différents écrans de votre application.
Pour afficher la configuration du routage de l'application, dans le menu Explorateur, cliquez sur le fichier /app/lib/functionality/routing.dart pour l'ouvrir.
Le code de ce fichier définit les routes /, /chat et /settings pour l'application.
Flutter repose sur des widgets, qui sont des classes déclaratives utilisées pour créer l'application. Dans Flutter, vous créez une mise en page en combinant des widgets afin de construire des widgets plus complexes et de former une arborescence de widgets. Pour en savoir plus sur la création d'une interface utilisateur dans Flutter, consultez la documentation.
Examinons le code de certaines fonctionnalités et de certains écrans de l'interface utilisateur de l'application. Dans le menu Explorateur, cliquez sur le fichier /app/lib/ui/screens/quick_id.dart pour l'ouvrir.
Ce fichier contient les classes qui créent les widgets de l'application. Il inclut la classe GenerateMetadataScreen qui crée la page principale de l'application et qui est appelée à partir du chemin d'accès / défini dans le fichier routing.dart. L'interface utilisateur permet à l'utilisateur d'importer une image depuis son ordinateur ou son appareil mobile, ou de prendre une photo avec son appareil.
Les autres écrans d'interface utilisateur utilisés dans l'application correspondent aux paramètres et à la page de chat, qui sont implémentés dans les fichiers settings.dart et chat.dart du dossier app/lib/ui/screens/.
Lors de l'initialisation de l'application, le SDK Dart Vertex AI for Firebase est utilisé pour récupérer une instance du modèle d'IA générative Gemini qui sera utilisé par l'application. Cette opération est implémentée dans la classe _GenerateMetadataScreenState.
Une fois que l'utilisateur a sélectionné une image, l'application appelle l'API Gemini Vertex AI avec l'image et une requête textuelle. La requête textuelle est la même que celle que vous avez utilisée dans une tâche précédente pour tester le modèle Gemini 2.0 Flash.
La méthode _sendVertexMessage() contient le code qui envoie la requête. Voici un extrait du code de la méthode :
Future _sendVertexMessage() async {
...
final messageContents = Content.multi(
[
TextPart(
'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'),
DataPart('image/jpeg', _image!),
],
);
var response = await model.generateContent([messageContents]);
var text = response.text;
if (text == null) {
_showError('No response from API.');
return;
} else {
var jsonMap = json.decode(text);
if (mounted) {
context.read().updateMetadata(Metadata.fromJson(jsonMap));
}
}
...
}
La réponse JSON du modèle est ensuite décodée pour extraire les valeurs name, description et suggestedQuestions, qui sont enregistrées localement et affichées dans l'interface utilisateur de l'application.
Associer l'application Flutter à Firebase
Dans la fenêtre de terminal de l'IDE, accédez au dossier racine app du projet et activez le package flutterfire_cli :
cd ~/app
dart pub global activate flutterfire_cli
Pour enregistrer votre application Flutter dans Firebase, exécutez la commande suivante :
flutterfire configure --project={{{project_0.project_id|set at lab start}}}
Une fois la commande exécutée, un fichier de configuration firebase_options.dart est ajouté au dossier lib de votre projet Flutter.
Pour configurer les plates-formes compatibles avec l'application, appuyez sur la barre d'espace pour désélectionner toutes les plates-formes, sauf le Web. Faites défiler les plates-formes à l'aide de la flèche. Appuyez ensuite sur Entrée.
Votre application Web Flutter est désormais enregistrée et peut être utilisée avec Firebase.
Configurer la fonctionnalité de chat de l'application Flutter
L'application Flutter dispose d'une fonctionnalité de chat qui permet aux utilisateurs d'obtenir plus d'informations sur l'image qu'ils importent ou de demander des informations issues d'autres sources de données externes qui pourraient être plus récentes. Pour ce faire, nous devons trouver un moyen d'associer ou d'ancrer le modèle Gemini à ces sources de données.
Pour implémenter cette fonctionnalité, l'application Flutter intègre l'agent Reasoning Engine que vous avez déployé plus tôt dans l'atelier. L'intégration s'effectue en associant l'application Flutter au point de terminaison de l'application backend que vous avez créée et déployée sur Cloud Run.
Commencez par récupérer le nom d'hôte du point de terminaison Cloud Run de l'application backend, puis stockez sa valeur dans une variable d'environnement. Dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3);
echo $BACKEND_APP_HOST
Pour l'application Flutter, le point de terminaison de l'application backend est configuré dans le fichier ~/app/lib/config.dart. Modifiez l'entrée de configuration dans le fichier :
sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart
Pour vérifier la modification, dans le menu Explorateur de l'IDE, cliquez sur le fichier IDE-DEV/app/lib/config.dart pour l'ouvrir. Vérifiez que la valeur de l'entrée de configuration cloudRunHost est mise à jour comme dans l'exemple ci-dessous.
Remarque : La valeur doit correspondre à celle de la variable d'environnement BACKEND_APP_HOST que vous avez définie à l'étape précédente.
Examiner le code de la fonctionnalité de chat
Examinons le code de l'application Flutter qui permet d'implémenter la fonctionnalité de chat.
Dans le menu Explorateur de l'IDE, cliquez sur le fichier /app/lib/ui/screens/chat.dart pour l'ouvrir.
La classe ChatPage crée le widget Flutter pour la page de chat de l'interface utilisateur. Cette page s'affiche dans l'interface utilisateur lorsque l'utilisateur appuie sur le bouton En savoir plus.
Pour créer l'interface utilisateur du chat, l'application utilise le package flutter_chat_ui_package, qui implémente la majeure partie du code récurrent du chat que vous pouvez personnaliser. La méthode build() utilise la classe Chat pour construire le widget.
listBottomWidget sert à afficher la liste des questions suggérées renvoyées dans la réponse de l'appel Gemini précédent. L'utilisateur peut ainsi sélectionner une question comme message de chat.
La méthode de rappel _handleSendPressed() est appelée lorsque l'utilisateur clique sur Envoyer dans la fenêtre de chat. La méthode crée un message, l'ajoute à la liste des messages et l'envoie au backend à l'aide de la méthode askAgent().
Faites défiler le code pour trouver la méthode askAgent().
Pour appeler Gemini à l'aide de l'agent Reasoning Engine, la méthode askAgent() envoie une requête à l'URL /ask_gemini sur le point de terminaison Cloud Run de l'application backend. Les paramètres de la requête incluent les valeurs name et description de l'image qui ont été renvoyées lors de l'appel précédent de Gemini, ainsi que le message de l'utilisateur.
Future askAgent(
String name, String description, String question) async {
var query = 'The photo is $name. $description. $question.';
var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query});
var response = await http.get(endpoint);
if (response.statusCode == 200) {
var responseText = convert.utf8.decode(response.bodyBytes);
return responseText.replaceAll(RegExp(r'\*'), '');
}
return 'Sorry I can\'t answer that.';
}
La réponse du backend est ensuite ajoutée à la liste des messages dans la fenêtre de chat par la fonction d'appel _sendMessageToAgent().
Déployer l'application Flutter
Maintenant que vous avez terminé de configurer l'application Flutter, vous pouvez la compiler et la déployer. Pour les besoins de cet atelier, nous utilisons Fwr, un serveur de développement Web pour Flutter, afin d'exécuter l'application en tant qu'application Web.
Vérifiez que vous vous trouvez bien dans le dossier de l'application Flutter. Dans la fenêtre de terminal de l'IDE, exécutez la commande suivante :
cd ~/app
Pour récupérer les dépendances du projet d'application, exécutez la commande suivante :
flutter pub get
Pour créer le projet et démarrer le serveur Web, exécutez la commande suivante :
fwr
Attendez que le serveur démarre et livre l'application Flutter. Une fois le serveur lancé, le résultat de la commande doit être semblable à ceci :
Cliquez sur Vérifier ma progression pour valider l'objectif.
Configurer le projet Firebase et l'application Flutter
Tâche 8 : Tester l'application Flutter
Vous allez tester le fonctionnement de l'application Flutter.
Télécharger des images pour le test
Pour tester l'application, commencez par télécharger et enregistrer une image sur votre ordinateur. Copiez l'URL pour afficher l'image dans un nouvel onglet de navigateur :
Pour accéder à l'application Flutter, copiez l'URL du serveur actif depuis le panneau d'identifiants Qwiklabs, puis ouvrez-la dans un nouvel onglet de votre fenêtre de navigation privée.
Attendez quelques secondes que l'application se charge. Ensuite, pour importer l'image de Fallingwater, cliquez sur Choisir dans la bibliothèque.
Une fois que vous avez importé l'image, l'application appelle l'API Gemini Vertex AI pour générer une réponse contenant le nom et la description de l'image et les afficher dans son interface utilisateur.
Il peut s'écouler quelques secondes avant que le nom et la description issus de la réponse du modèle Gemini soient renseignés dans l'interface utilisateur de l'application.
Remarque : Si vous recevez une erreur "autorisation refusée", ignorez-la et cliquez sur "OK" pour continuer. Cliquez sur Supprimer l'image, puis réimportez l'image.
Cliquez sur En savoir plus.
La page de chat se charge et affiche les questions suggérées qui ont été renvoyées dans la réponse de l'appel précédent de l'API Gemini.
Remarque : Si les questions suggérées ne s'affichent pas, actualisez la page, puis répétez les deux étapes précédentes pour importer l'image.
Tester l'application avec des données de produits
Dans l'interface utilisateur du chat, cliquez sur Supprimer l'image.
Pour importer l'image de la broche Google Chrome Dino, cliquez sur Choisir dans la bibliothèque, puis importez l'image que vous avez enregistrée plus tôt.
Une fois que vous avez importé l'image, l'application appelle l'API Gemini Vertex AI pour générer une réponse contenant le nom et la description de l'image et les afficher dans son interface utilisateur.
Cliquez sur En savoir plus.
Dans la zone de message de chat, saisissez :
Where can I buy this pin?
L'agent effectue un appel HTTPS au point de terminaison Cloud Run de l'application backend, qui appelle ensuite l'agent Reasoning Engine. Celui-ci utilise Gemini pour renvoyer une réponse à partir du datastore Vertex AI Search.
(Facultatif) Pour voir la mise en page de l'application Flutter sur mobile, redimensionnez la fenêtre de votre navigateur pour qu'elle ait à peu près la taille d'un appareil mobile :
Cela indique que l'application Flutter est responsive aux changements de taille de l'écran ou de la fenêtre. Flutter propose des widgets et des packages qui permettent de rendre votre application responsive et adaptable aux changements en fonction de la configuration de l'appareil.
Terminer l'atelier
Une fois l'atelier terminé, cliquez sur End Lab (Terminer l'atelier). Qwiklabs supprime les ressources que vous avez utilisées, puis efface le compte.
Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez le nombre d'étoiles correspondant à votre note, saisissez un commentaire, puis cliquez sur Submit (Envoyer).
Le nombre d'étoiles que vous pouvez attribuer à un atelier correspond à votre degré de satisfaction :
1 étoile = très mécontent(e)
2 étoiles = insatisfait(e)
3 étoiles = ni insatisfait(e), ni satisfait(e)
4 étoiles = satisfait(e)
5 étoiles = très satisfait(e)
Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.
Pour soumettre des commentaires, suggestions ou corrections, veuillez utiliser l'onglet Support (Assistance).
Félicitations !
Au cours de cet atelier, vous avez appris à :
créer un datastore et une application de recherche à l'aide de Vertex AI Agent Builder dans la console Google Cloud ;
déployer un agent Reasoning Engine à l'aide de Vertex AI Workbench ;
créer une application Python qui intègre Vertex AI Search et Reasoning Engine ;
déployer l'application sur Cloud Run et l'utiliser comme backend d'une application Flutter ;
configurer un projet Firebase et l'associer à l'application Flutter ;
consulter le code de l'application Flutter pour comprendre certaines fonctionnalités ;
Copyright 2024 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.
Les ateliers créent un projet Google Cloud et des ressources pour une durée déterminée.
Les ateliers doivent être effectués dans le délai imparti et ne peuvent pas être mis en pause. Si vous quittez l'atelier, vous devrez le recommencer depuis le début.
En haut à gauche de l'écran, cliquez sur Démarrer l'atelier pour commencer.
Utilisez la navigation privée
Copiez le nom d'utilisateur et le mot de passe fournis pour l'atelier
Cliquez sur Ouvrir la console en navigation privée
Connectez-vous à la console
Connectez-vous à l'aide des identifiants qui vous ont été attribués pour l'atelier. L'utilisation d'autres identifiants peut entraîner des erreurs ou des frais.
Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.
Ne cliquez pas sur Terminer l'atelier, à moins que vous n'ayez terminé l'atelier ou que vous ne vouliez le recommencer, car cela effacera votre travail et supprimera le projet.
Ce contenu n'est pas disponible pour le moment
Nous vous préviendrons par e-mail lorsqu'il sera disponible
Parfait !
Nous vous contacterons par e-mail s'il devient disponible
Un atelier à la fois
Confirmez pour mettre fin à tous les ateliers existants et démarrer celui-ci
Utilisez la navigation privée pour effectuer l'atelier
Ouvrez une fenêtre de navigateur en mode navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.
Dans cet atelier, vous allez développer une application Flutter et y intégrer un agent IA à l'aide d'AI Applications.
Durée :
3 min de configuration
·
Accessible pendant 120 min
·
Terminé après 120 min