1. Avant de commencer
Cet atelier de programmation à votre rythme vous guidera dans la création d'agents d'IA avec Vertex AI Agent Builder de Google Cloud. Chaque étape met en avant une fonctionnalité spécifique d'Agent Builder et explique son objectif.
Prérequis
- Connaissances de base sur l'IA générative sur Google Cloud
- Connaissances de base des concepts d'agents d'IA
- Connaissances de base sur Gemini Code Assist (facultatif)
Points abordés
- Créer un agent IA simple à l'aide de Vertex AI Agent Builder
- Ancrer l'agent créé en associant un datastore
- Intégrer un agent d'IA à votre site Web(facultatif)
Prérequis
- Un esprit curieux
- Un ordinateur qui fonctionne et un réseau Wi-Fi fiable
- Un projet Google Cloud auquel la facturation est associée.
Remarque : Si vous n'avez pas encore de projet Google Cloud, vous pouvez en créer un en suivant ces instructions. Vous pouvez également consulter les services de la version sans frais de Google Cloud.
2. Concevoir votre premier agent d'IA
Vous êtes maintenant prêt à créer votre propre agent IA. Toutefois, avant de vous lancer dans le développement, il est essentiel d'établir une vision claire pour votre agent. Posez-vous les questions clés suivantes :
- Quel problème résoudra-t-elle ? Va-t-il automatiser des tâches, fournir des informations, proposer des divertissements ou faciliter l'exploration créative ?
- Quelles sont ses principales fonctions ? Exécutera-t-il des tâches ou les déléguera-t-il ? Va-t-il générer du texte ou une combinaison de différents types de contenus multimédias ?
- Quelles sont ses limites ? Pourra-t-il tout faire de manière autonome ?
- Quelle personnalité ou quel personnage doit-il avoir ? Sera-t-il formel, informel, humoristique, utile ou informatif ?
- Quelles sont les métriques de réussite ? Comment allez-vous mesurer l'efficacité de l'agent ?
Pour accélérer le processus, voici les réponses à ces questions pour l'agent de voyage que vous allez créer aujourd'hui :
- Quel problème résoudra-t-elle ?
- Planifier un voyage peut être long et stressant. Cet agent de voyage aidera les utilisateurs à découvrir des destinations, à planifier des itinéraires, à réserver des vols et des hébergements.
- Quelles sont ses principales fonctions ?
- L'agent doit être capable de
- répondre à des questions sur les destinations, comme les exigences en matière de visa
- planifier des itinéraires qui correspondent aux plannings et aux objectifs des utilisateurs ;
- réserver des vols et des hébergements ;
- Quelles sont ses limites ?
- Par défaut, l'agent n'est peut-être pas en mesure de répondre aux requêtes complexes.
- L'agent ne pourra pas générer d'images.
- Les connaissances de l'agent seront limitées par le modèle sous-jacent.
- Quelle personnalité ou quel personnage doit-il avoir ?
- Cet agent doit être compétent, serviable et passionné par les voyages. Il doit être capable de communiquer des informations de manière claire et concise.
- Quelles sont les métriques de réussite ?
- Le succès de cet agent peut être mesuré par le degré de satisfaction des utilisateurs concernant ses recommandations (exploration, planification, réservation).
3. Créer un agent d'IA avec Vertex AI Agent Builder
Vertex AI Agent Builder permet de créer des agents d'IA en quelques étapes seulement.
Étape 1 :
- Accédez à Vertex AI Agent Builder.
- La page de bienvenue doit s'afficher.

- Cliquez sur le bouton CONTINUER ET ACTIVER L'API.
Étape 2 :
- Vous serez redirigé vers la page de création d'application.

- Cliquez sur le bouton CRÉER UNE APPLICATION.
Étape 3 :
- Sélectionnez Agent conversationnel, puis cliquez sur CRÉER.

Remarque :
- Une fois que vous avez cliqué sur CREATE (CRÉER), un nouvel onglet Diaglogflow Conversational Agents (Agents conversationnels Dialogflow) s'ouvre.
- Si vous êtes invité à choisir un projet Google Cloud, veuillez sélectionner le projet Google Cloud associé à votre compte Gmail.
- Si vous effectuez cet atelier dans un nouveau compte, vous serez invité à activer l'API Dialogflow. Cliquez sur Activer l'API pour l'activer.

- Si le bouton ne fonctionne pas, vous pouvez l'activer manuellement en accédant directement à la page de l'API .
- Sur la page Dialogflow qui s'ouvre, cliquez sur Create Agent (Créer un agent).

- Vous verrez alors des options pour créer un agent. Sélectionnez Build your own (Créer votre propre agent).

Étape 4 :
- Choisissez un nom à afficher (par exemple, "Compagnon de voyage").
- Pour l'emplacement, sélectionnez global (Global serving, data-at-rest in US) (Diffusion mondiale, données au repos aux États-Unis) comme Région.
- Conserver les autres configurations, par défaut
- Cliquez sur le bouton CRÉER.

Étape 5 :
- Choisissez un nom de playbook (par exemple, "Agent d'information").
- Ajoutez un objectif (par exemple, "Aider les clients à répondre à leurs questions sur les voyages").
- Définissez une instruction (par exemple, "Accueillez les utilisateurs, puis demandez-leur comment vous pouvez les aider aujourd'hui").
- Appuyez sur Enregistrer une fois que tout est finalisé.

Étape 6 :
- Cliquez sur l'icône Toggle Simulator (Activer/Désactiver le simulateur)
. - Sélectionnez l'agent que vous venez de créer (par exemple, Info Agent).
- Choisissez le modèle d'IA générative sous-jacent pour votre agent (par exemple, gemini-1.5-flash).
- Testez votre agent en discutant avec lui (c'est-à-dire en saisissant quelque chose dans la zone de texte "Enter User Input" (Saisir l'entrée utilisateur)).

Félicitations ! Vous venez de créer un agent d'IA à l'aide de Vertex AI Agent Builder.
4. Associer des data stores à l'agent
Si vous demandez à votre agent comment vous rendre au Wakanda (par exemple, "Quel est le meilleur moyen de se rendre au Wakanda ?"), vous obtiendrez une réponse comme celle-ci :

Bien que cette réponse soit factuellement correcte, il serait plus utile pour l'utilisateur que l'agent suggère des lieux similaires au lieu de simplement dire "Je ne peux pas vous fournir d'informations" et de mettre fin à la conversation. Cette approche pourrait potentiellement amener les utilisateurs à réserver un voyage par le biais de l'agent.
Pour que l'agent puisse recommander des lieux similaires, vous pouvez lui fournir plus d'informations via les datastores. Elle sert de base de connaissances supplémentaire à l'agent, à laquelle il peut se référer s'il n'est pas en mesure de répondre aux questions des utilisateurs en se basant sur ses connaissances intégrées.
Remarque : Si vous souhaitez fermer le simulateur, cliquez à nouveau sur l'icône d'activation/désactivation du simulateur.
La création d'un datastore est simple. Cliquez sur le bouton + Data store (Ajouter un datastore) en bas de la page "Agent Basics" (Principes de base de l'agent).

Renseignez les informations suivantes :
- Nom de l'outil : Autre lieu
- Type : data store
- Description : utilisez cet outil si la demande de l'utilisateur contient un lieu qui n'existe pas.
Cliquez sur Enregistrer lorsque vous avez terminé.
Cela crée un outil de data store permettant à l'agent de communiquer avec le data store, mais vous devez encore créer un data store contenant les informations. Pour ce faire, cliquez sur Ajouter des datastores, puis sur Créer un datastore.


Une fois que vous avez cliqué sur Créer un data store, vous êtes redirigé vers la page Vertex AI Agent Builder, comme ci-dessous.
Choisir l'option "Sur Cloud Storage"

Une fois l'étape terminée,
- Cliquez sur FICHIER (cette étape est très importante, sinon votre importation échouera).
- Saisissez ai-workshops/agents/data/wakanda.txt.
- cliquez sur CONTINUER.

Si vous êtes curieux, voici le contenu du fichier texte fourni :
Places that are similar to Wakanda
- Oribi Gorge in South Africa: The rock formations here are reminiscent of the Warrior Falls in Wakanda.
- Iguazu Falls: Located on the border of Argentina and Brazil, these massive waterfalls were a major inspiration for the Warrior Falls.
- Immerse yourself in Wakandan culture: Read the Black Panther comics, watch the movies, and explore online resources to learn more about Wakandan culture, language, and technology.
- Visit a Disney theme park: While there isn't a dedicated Wakanda land yet, you might be able to meet Black Panther at Disneyland or on a Marvel Day at Sea Disney cruise.
Sur la page suivante, nommez votre datastore (par exemple, "Alternative Wakanda"), puis cliquez sur CRÉER.

Pour terminer, SÉLECTIONNEZ la source de données que vous venez de créer,puis cliquez sur CRÉER. Vous pouvez suivre la progression de l'importation de votre data store en cliquant dessus**.**

Remarque : L'importation des activités prendra un certain temps. En attendant, vous pouvez explorer d'autres options de datastore disponibles pour votre agent Vertex AI ici.

Si tout s'est bien passé, revenez à l'onglet Dialogflow et cliquez sur Actualiser. Le datastore créé devrait s'afficher sur la page Datastores disponibles.

Pour éviter que l'agent ne génère des hallucinations, définissez le paramètre de configuration de l'ancrage de votre data store sur Très faible. Cela permet d'appliquer des restrictions plus strictes à l'agent pour qu'il ne génère pas de fausses informations. Pour l'instant, conservez le paramètre par défaut, mais vous pourrez l'explorer avec différents paramètres à tout moment.

Sélectionnez ensuite le data store ajouté, cliquez sur Confirmer, puis sur Enregistrer.

Revenez à la page Principes de base de l'agent. En bas de la configuration du playbook, vous verrez que le datastore que vous venez de créer(par exemple, "Autre lieu") est disponible. Cochez le datastore (par exemple, "Autre lieu"), puis cliquez sur le bouton "Enregistrer" en haut de la page.


Vous y êtes presque ! La dernière étape consiste à inclure l'outil Alternative Location (Autre lieu) dans les instructions de l'agent. Ajoutez une ligne, - Utilisez ${TOOL: Alternative Location} si la demande de l'utilisateur contient un lieu qui n'existe pas, aux instructions de l'agent, puis cliquez sur Enregistrer.

Tout est prêt. Ouvrons à nouveau le simulateur de bouton bascule et posons les mêmes questions (par exemple, "Quel est le meilleur moyen de contacter le Wakanda ?").

Félicitations ! Votre agent recommande désormais des lieux en utilisant les informations fournies dans un fichier texte.
Voilà, nous avons terminé de créer notre propre agent d'IA pour la création d'agents. Si vous souhaitez en savoir plus sur la personnalisation de votre agent pour une meilleure expérience, veuillez consulter les activités supplémentaires ci-dessous.
5. Autres activités : rendre votre agent IA opérationnel
Au cours des étapes précédentes, vous avez développé un agent d'IA et l'avez ancré avec des données de référence pertinentes. Dans la section suivante, vous allez aborder la question cruciale de l'intégration de cet agent à votre site Web, ce qui permettra une interaction en temps réel avec vos visiteurs.
Il existe de nombreuses façons d'exposer votre agent. Vous pouvez l'exporter ou la publier directement. Vous pouvez consulter la documentation pour en savoir plus sur les options disponibles.
En haut à droite de l'onglet Dialogflow, cliquez sur le menu à trois points, puis sur Publier l'agent.

Conservez la configuration Par défaut et cliquez sur Activer l'API non authentifiée.
Remarque : L'activation de l'API non authentifiée n'est destinée qu'à des fins de démonstration. Il n'est pas recommandé d'utiliser cette configuration pour les charges de travail de production. Si vous souhaitez publier des documents de manière sécurisée, consultez cette documentation.

Lorsque vous cliquez dessus, un petit extrait de code CSS s'affiche :

Il vous suffit de copier l'extrait de code. Vous intégrerez cet extrait de code à un site Web ultérieurement.
Pour créer un site Web, vous utiliserez l'environnement Cloud Editor. Voici comment ouvrir l'éditeur Cloud :
- Ouvrez la console Google Cloud dans un autre onglet.
- Cliquez sur le bouton Activer Cloud Shell en haut à droite.
- Cliquez sur le bouton Ouvrir l'éditeur.
Si vous êtes invité à autoriser Cloud Shell, cliquez sur Autoriser pour continuer.

Dans la section suivante, vous allez utiliser Gemini Code Assist pour créer un exemple d'application Web Python Flask à intégrer à votre extrait d'agent.
Une fois l'éditeur Cloud Shell ouvert, cliquez sur Gemini Code Assist, puis sur se connecter à votre projet Google Cloud. Si vous êtes invité à activer l'API, cliquez sur Activer.

Une fois cela fait, demandons à Gemini Code Assist de créer une application Flask et d'y intégrer l'extrait de code de l'agent d'IA.
Voici un exemple de prompt que vous pouvez utiliser :
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
Remarque : Ici, nous avons demandé une application Python Flask. Si vous préférez un autre langage de programmation ou framework, n'hésitez pas à l'utiliser. Gemini Code Assist peut générer du code dans différents langages de programmation. Pour en savoir plus, consultez Langages, IDE et interfaces compatibles.
Vous constaterez que l'extrait de code fourni est déjà intégré à l'agent d'IA. Pour tester si le code fourni est valide et fonctionne comme prévu, vous pouvez suivre les instructions de Gemini Code Assist sur l'exécution de cette section de code de la réponse.
Exemple d'extrait de code de réponse :
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)

Conformément aux instructions fournies
- Copiez l'extrait de code de l'application Flask fourni.
- Créez un fichier nommé app.py et enregistrez-le.

L'étape suivante consiste à installer Flask pour exécuter cet extrait. Cette étape n'est pas nécessaire pour le moment, car Cloud Shell dispose déjà de tous les utilitaires couramment utilisés installés par défaut.

Enregistrez le fichier (Ctrl+S ou Cmd+S), puis cliquez sur Ouvrir le terminal, où vous exécuterez le code fourni.
Dans le terminal, exécutez la commande ci-dessous.
python app.py
Remarque : Assurez-vous de vous trouver dans le bon dossier, où se trouve votre fichier app.py.
L'application Python Flask s'exécutera sur le port 5000. Pour afficher l'aperçu de cette application Web, cliquez sur l'icône Aperçu sur le Web dans Cloud Shell. Vous pouvez ensuite cliquer sur Modifier le port, saisir 5000,puis cliquer sur Modifier et prévisualiser pour enregistrer.

Un exemple de site Web s'affiche et un agent IA est déjà disponible. Il vous suffit de cliquer sur l'agent IA et de commencer à discuter avec lui.

N'hésitez pas à le tester avec différentes requêtes. Vous pouvez également demander à Gemini Code Assist d'embellir votre site Web ou d'ajouter des données d'ancrage à l'agent d'IA pour le rendre plus efficace.
Lorsque vous serez prêt, vous pourrez héberger cet agent d'IA sur Google Cloud afin que tout le monde puisse y accéder, où qu'il soit. Pour le reste de cet atelier de programmation, vous allez déployer cet exemple d'application Flask dans Cloud Run en tant que conteneur.
Remarque : Cette fonctionnalité ne se limite pas à Cloud Run (si vous ne savez pas ce qu'est Cloud Run, vous pouvez même le demander). Vous pouvez demander à Gemini Code Assist de vous aider à déployer cette fonctionnalité dans Google Cloud ou n'importe où en suivant les bonnes pratiques. Il peut également vous aider pour cette partie.
Revenez au terminal Cloud Shell et appuyez sur Ctrl+C pour arrêter le processus. Cliquez à nouveau sur Ouvrir l'éditeur et demandez à Gemini Code Assist de nous aider à conteneuriser l'application et à la déployer dans Cloud Run.
Can you help me deploy this sample flask app to cloud run service
Il fournit des instructions et des commandes à suivre pour héberger notre application dans le service Cloud Run. Suivons les instructions.
Voici un exemple de réponse :
Étapes à suivre pour déployer sur Cloud Run
- Prérequis :
- Compte Google Cloud : vous devez disposer d'un compte Google Cloud pour lequel la facturation est activée.
- gcloud CLI : installez et initialisez le SDK Google Cloud (gcloud CLI) sur votre machine locale. Vous l'utiliserez pour interagir avec Google Cloud depuis votre terminal.
- Docker : installez Docker sur votre machine locale. Cloud Run utilise Docker pour conteneuriser votre application.
- Configuration du projet : assurez-vous d'avoir sélectionné un projet Google Cloud dans votre gcloud CLI. Vous pouvez vérifier avec
gcloud config list projectet définir avecgcloud config set project YOUR_PROJECT_ID.
Remarque : Comme nous effectuons toute cette activité dans Cloud Shell, il n'est pas nécessaire de configurer des projets.
- Créer **
requirements.txt** :
- Ce fichier liste tous les packages Python dont votre application a besoin. Dans le répertoire de votre projet (où se trouve
main.py), créez un fichier nommérequirements.txtet ajoutez la ligne suivante :
- Créer **
Dockerfile** :
- Un
Dockerfiledéfinit comment créer une image Docker pour votre application. Créez un fichier nomméDockerfile(sans extension) dans le répertoire de votre projet et ajoutez le contenu suivant :
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- Créez l'image Docker :
- Ouvrez votre terminal, accédez au répertoire de votre projet et exécutez la commande suivante :
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- Déployer sur Cloud Run :
- Une fois l'image créée et importée, déployez-la sur Cloud Run à l'aide de la commande suivante :
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
Une fois ces étapes effectuées, votre application avec agent d'IA intégré sera disponible pour vos utilisateurs finaux.
Félicitations et bonne formation !
6. Effectuer un nettoyage
Pour éviter que les ressources utilisées dans cet atelier de programmation soient facturées sur votre compte Google Cloud, procédez comme suit :
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.
- Vous pouvez également accéder à Cloud Run dans la console, sélectionner le service que vous venez de déployer, puis le supprimer.