Créer et déployer des agents ADK (Agent Deployment Kit) low-code à l'aide d'ADK Visual Builder

1. Objectif de cet atelier

Dans cet atelier pratique, vous allez apprendre à créer des agents à l'aide du Visual Builder ADK (Agent Development Kit). Le compilateur visuel ADK (Agent Development Kit) permet de créer des agents ADK (Agent Development Kit) avec peu de code. Vous apprendrez à tester l'application en local et à la déployer dans Cloud Run.

Points abordés

Comprendre les bases d'ADK (Agent Development Kit)
Comprendre les bases du générateur visuel ADK (Agent Development Kit)
Découvrez comment créer des agents à l'aide d'outils d'interface utilisateur graphique.
Découvrez comment déployer et utiliser facilement les agents dans Cloud Run.

Figure 1 : Avec ADK Visual Builder, vous pouvez créer des agents à l'aide d'une interface utilisateur graphique avec un minimum de code.

2. Configuration du projet

Si vous ne disposez pas déjà d'un projet que vous pouvez utiliser, vous devrez en créer un dans la console GCP. Sélectionnez le projet dans le sélecteur de projet (en haut à gauche de la console Google Cloud) .

Figure 2 : Cliquez sur la zone située juste à côté du logo Google Cloud pour sélectionner votre projet. Assurez-vous que votre projet est sélectionné.

Dans cet atelier, nous allons utiliser l'éditeur Cloud Shell pour effectuer nos tâches. Ouvrez Cloud Shell et définissez le projet à l'aide de Cloud Shell.
Cliquez sur ce lien pour accéder directement à l'éditeur Cloud Shell.
Ouvrez le terminal s'il n'est pas déjà ouvert en cliquant sur Terminal > Nouveau dans le menu. Vous pouvez exécuter toutes les commandes de ce tutoriel dans ce terminal.
Vous pouvez vérifier si le projet est déjà authentifié à l'aide de la commande suivante dans le terminal Cloud Shell.

gcloud auth list

Exécutez la commande suivante dans Cloud Shell pour confirmer votre projet

gcloud config list project

Copiez l'ID du projet et utilisez la commande suivante pour le définir :

gcloud config set project <YOUR_PROJECT_ID>

Si vous ne vous souvenez pas de l'ID de votre projet, vous pouvez lister tous vos ID de projet avec

gcloud projects list

3. Activer les API

Nous devons activer certains services d'API pour exécuter cet atelier. Exécutez la commande suivante dans Cloud Shell.

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

Présentation des API

L'API Vertex AI (aiplatform.googleapis.com) permet d'accéder à la plate-forme Vertex AI , ce qui permet à votre application d'interagir avec les modèles Gemini pour la génération de texte, les sessions de chat et les appels de fonction.
L'API Cloud Resource Manager (cloudresourcemanager.googleapis.com) vous permet de gérer de façon programmatique les métadonnées de vos projets Google Cloud, telles que l'ID et le nom du projet, qui sont souvent requises par d'autres outils et SDK pour vérifier l'identité et les autorisations du projet.

4. Vérifier si vos crédits ont été appliqués

Lors de la configuration du projet, vous avez demandé les crédits sans frais qui vous permettent d'utiliser les services dans Google Cloud. Lorsque vous appliquez les crédits, un nouveau compte de facturation sans frais intitulé "Compte de facturation Google Cloud Platform pour l'essai" est créé. Pour vous assurer que les crédits ont été appliqués, suivez les étapes ci-dessous dans l'éditeur Cloud Shell.

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

Si l'opération aboutit, vous devriez voir un résultat semblable à celui ci-dessous. Si le message "Projet associé" s'affiche, cela signifie que votre compte de facturation est correctement configuré. En suivant l'étape ci-dessus, vous pouvez vérifier si votre compte est associé. S'il ne l'est pas, il le sera. Si vous n'avez pas sélectionné de projet, vous serez invité à en choisir un. Vous pouvez également le faire à l'avance en suivant les étapes de configuration du projet.

Figure 3 : Confirmation de l'association du compte de facturation

5. Présentation d'Agent Development Kit

Agent Development Kit présente plusieurs avantages majeurs pour les développeurs qui créent des applications agentives :

Systèmes multi-agents : créez des applications modulaires et évolutives en combinant plusieurs agents spécialisés de manière hiérarchique, qui permettent une coordination et une délégation complexes.
Riche écosystème d'outils : dotez les agents de capacités diversifiées en utilisant des outils prédéfinis (outils de recherche, d'exécution de code, etc.), en créant des fonctions personnalisées, en intégrant des outils issus de frameworks d'agents tiers (LangChain, CrewAI) ou même en vous servant d'autres agents comme outils.
Orchestration flexible : définissez des workflows à l'aide d'agents de workflow (SequentialAgent, ParallelAgent et LoopAgent) pour des pipelines prévisibles, ou utilisez le routage dynamique piloté par LLM (transfert LlmAgent) pour un comportement adaptatif.
Expérience de développement intégrée : développez, testez et déboguez en local avec une CLI puissante et une UI de développement interactive. Inspectez les événements, l'état et l'exécution de l'agent à chaque étape.
Évaluation intégrée : évaluez de façon systématique les performances de l'agent en comparant la qualité de la réponse finale et la trajectoire d'exécution étape par étape à des cas de test prédéfinis.
Prêt pour le déploiement : conteneurisez et déployez vos agents où vous le souhaitez. Exécutez-les en local, faites-les évoluer avec Vertex AI Agent Engine ou intégrez-les à une infrastructure personnalisée à l'aide de Cloud Run ou Docker.

Bien que d'autres SDK d'IA générative ou frameworks d'agents vous permettent également d'interroger des modèles et même d'améliorer leur efficacité grâce à des outils, la coordination dynamique entre plusieurs modèles vous demande beaucoup de travail.

Agent Development Kit offre un framework de niveau supérieur. Ainsi, vous pouvez connecter facilement plusieurs agents les uns aux autres pour des workflows complexes, mais simples à gérer.

Figure 4 : Positionnement de l'ADK (Agent Development Kit)

Dans les dernières versions, un outil ADK Visual Builder a été ajouté à ADK (Agent Development Kit), ce qui vous permet de créer des agents ADK (Agent Development Kit) avec un code faible. Dans cet atelier, nous allons explorer en détail l'outil ADK Visual Builder.

6. Installer l'ADK et configurer votre environnement

Tout d'abord, nous devons configurer l'environnement pour pouvoir exécuter ADK (Agent Development Kit). Dans cet atelier, nous allons exécuter ADK (Agent Development Kit) et effectuer toutes les tâches dans Google Cloud, dans l'éditeur Cloud Shell .

Préparer un éditeur Cloud Shell

Cliquez sur ce lien pour accéder directement à l'éditeur Cloud Shell.
Cliquez sur Continuer.
Si vous êtes invité à autoriser Cloud Shell, cliquez sur Autoriser.
Pour le reste de cet atelier, vous pouvez utiliser cette fenêtre comme IDE avec l'éditeur Cloud Shell et le terminal Cloud Shell.
Ouvrez un terminal à l'aide de Terminal > Nouveau terminal dans l'éditeur Cloud Shell. Toutes les commandes ci-dessous seront exécutées dans ce terminal.

Démarrer l'éditeur visuel ADK

Exécutez les commandes suivantes pour cloner la source nécessaire à partir de GitHub et installer les bibliothèques requises. Exécutez les commandes dans le terminal ouvert dans l'éditeur Cloud Shell.

#create the project directory
mkdir ~/adkui
cd ~/adkui

Nous allons utiliser uv pour créer un environnement Python (exécutez la commande dans le terminal de l'éditeur Cloud Shell) :

#Install uv if you do not have installed yet
pip install uv

#go to the project directory
cd ~/adkui

#Create the virtual environment
uv venv


#use the newly created environment
source .venv/bin/activate

#install libraries
uv pip install google-adk==1.22.1
uv pip install python-dotenv

Remarque : Si vous devez redémarrer le terminal, assurez-vous de définir votre environnement Python en exécutant source .venv/bin/activate.

Dans l'éditeur, accédez à Affichage > Activer/Désactiver les fichiers cachés. Dans le dossier adkui, créez un fichier .env avec le contenu suivant.

#go to adkui folder
cd ~/adkui

cat <<EOF>> .env
GOOGLE_GENAI_USE_VERTEXAI=1
GOOGLE_CLOUD_PROJECT=$(gcloud config get-value project)
GOOGLE_CLOUD_LOCATION=us-central1
IMAGEN_MODEL="imagen-3.0-generate-002"
GENAI_MODEL="gemini-2.5-flash"
EOF

7. Créer un agent simple avec ADK Visual Builder

Dans cette section, nous allons créer un agent simple à l'aide de l'ADK Visual Builder.L'ADK Visual Builder est un outil Web qui fournit un environnement de conception de workflow visuel pour créer et gérer les agents ADK (Agent Development Kit). Il vous permet de concevoir, de créer et de tester vos agents dans une interface graphique conviviale pour les débutants. Il inclut également un assistant optimisé par l'IA pour vous aider à créer des agents.

Figure 5 : ADK Visual Builder

Revenez au répertoire racine adkui dans le terminal et exécutez la commande suivante pour exécuter l'agent en local (exécutez-la dans le terminal de l'éditeur Cloud Shell). Vous devriez pouvoir démarrer le serveur ADK et obtenir des résultats semblables à ceux de la figure 6 dans le terminal.

#go to the directory adkui
cd ~/adkui
# Run the following command to run ADK locally
adk web

Figure 6 : Démarrage de l'application ADK

Ctrl+cliquez (CMD+cliquez pour macOS) sur l'URL http:// affichée dans le terminal pour ouvrir l'outil d'interface utilisateur graphique ADK (Agent Development Kit) basé sur le navigateur.

Figure 7 : UI Web ADK, ADK comporte les composants suivants : 1 : Basculer entre le mode clair et le mode sombre 2 : Réduire le panneau 3 : Créer un agent 4 : Modifier un agent

Pour créer un agent, appuyez sur le bouton "+".

Figure 8 : Boîte de dialogue permettant de créer une application

Nommez-le "Agent1", puis cliquez sur "Créer".

Figure 9 : UI pour le générateur d'agents

Le panneau est divisé en trois sections principales : la partie gauche contient les commandes permettant de créer des agents basés sur l'interface utilisateur, la partie centrale fournit une visualisation de votre progression et la partie droite contient l'assistant permettant de créer des agents à l'aide du langage naturel.
Votre agent a bien été créé. Cliquez sur le bouton Enregistrer pour continuer. Remarque : Pour éviter de perdre vos modifications, il est essentiel d'appuyer sur "Enregistrer".
L'agent devrait maintenant être prêt à être testé. Pour commencer, saisissez une requête dans le champ de discussion, par exemple :

Hi, what can you do?

Figure 10 : Tester l'agent.

7.Revenons à l'éditeur pour examiner les fichiers nouvellement générés. L'explorateur se trouve sur la gauche. Accédez au dossier adkgui et développez-le pour afficher le répertoire Agent 1. Dans le dossier, vous pouvez consulter le fichier YAML qui définit l'agent, comme illustré dans la figure ci-dessous.

Figure 11 : Définition de l'agent à l'aide d'un fichier YAML

Revenons maintenant à l'éditeur d'interface utilisateur graphique et ajoutons quelques fonctionnalités à l'agent. Pour ce faire, appuyez sur le bouton de modification (voir figure 7, composant 4, icône en forme de stylo).
Nous allons ajouter une fonctionnalité de recherche Google à l'agent. Pour ce faire, nous devons ajouter la recherche Google en tant qu'outil disponible et utilisable par l'agent. Pour ce faire, cliquez sur le signe + à côté de la section Outils en bas à gauche de l'écran, puis sur Outil intégré dans le menu (voir figure 12).

Figure 12 : Ajouter un outil à un agent

Dans la liste Outil intégré, sélectionnez google_search, puis cliquez sur Créer (voir figure 12). Cela ajoutera la recherche Google en tant qu'outil dans votre agent.
Appuyez sur le bouton Enregistrer pour enregistrer les modifications.

Figure 13 : Liste des outils disponibles dans l'interface utilisateur de l'éditeur visuel ADK

Vous êtes maintenant prêt à tester l'agent. Redémarrez d'abord le serveur ADK. Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Sélectionnez Agent1 dans la liste des agents. Votre agent peut désormais effectuer des recherches Google. Dans la zone de chat, testez avec le prompt suivant.

What is the weather today in Yokohama?

La réponse de la recherche Google devrait s'afficher comme ci-dessous.

Figure 14 : Recherche Google avec l'agent

Revenons maintenant à l'éditeur et examinons le code créé lors de cette étape. Dans le panneau latéral Explorateur de l'éditeur, cliquez sur root_agent.yaml pour l'ouvrir. Vérifiez que google_search a été ajouté comme outil (figure 15).

Figure 15 : Confirmation que google_search a été ajouté en tant qu'outil dans Agent1

8. Déployer l'agent sur Cloud Run

Déployons maintenant l'agent créé sur Cloud Run. Avec Cloud Run, vous pouvez créer rapidement des applications ou des sites Web sur une plate-forme entièrement gérée.

Vous pouvez exécuter des services d'interface et de backend, des jobs par lot, des LLM hôtes et des charges de travail de traitement de file d'attente sans avoir à gérer l'infrastructure.

Dans le terminal de l'éditeur Cloud Shell, si vous exécutez toujours le serveur ADK (Agent Development Kit), appuyez sur Ctrl+C pour l'arrêter.

Accédez au répertoire racine du projet.

cd ~/adkui

Obtenez le code de déploiement. Une fois la commande exécutée, le fichier deploycloudrun.py devrait s'afficher dans le volet de l'explorateur de l'éditeur Cloud Shell.

curl -LO https://raw.githubusercontent.com/haren-bh/codelabs/main/adk_visual_builder/deploycloudrun.py

Consultez les options de déploiement dans deploycloudrun.py. Nous allons utiliser la commande adk deploy pour déployer notre agent sur Cloud Run. ADK (Agent Development Kit) dispose d'une option intégrée permettant de déployer l'agent sur Cloud Run. Nous devons spécifier les paramètres tels que l'ID du projet Google Cloud, la région, etc. Pour le chemin d'application, ce script suppose que agent_path=./Agent1. Nous allons également créer un compte de service avec les autorisations nécessaires et l'associer à Cloud Run. Cloud Run doit avoir accès à des services tels que Vertex AI et Cloud Storage pour exécuter l'agent.

   command = [
        "adk", "deploy", "cloud_run",
        f"--project={project_id}",
        f"--region={location}",
        f"--service_name={service_name}",
        f"--app_name={app_name}",
        f"--artifact_service_uri=memory://",
        f"--with_ui",
        agent_path,
        f"--",
        f"--service-account={sa_email}",
    ]

Exécutez le script deploycloudrun.py. Le déploiement devrait commencer, comme illustré dans la figure ci-dessous.**

python3 deploycloudrun.py

Si vous recevez un message de confirmation comme celui ci-dessous, appuyez sur "Y" (Oui) et sur "Entrée" pour tous les messages. Le fichier depoycloudrun.py part du principe que votre agent se trouve dans le dossier "Agent1", comme créé ci-dessus.

Figure 16 : Déployer l'agent dans Cloud Run. Appuyez sur "Y" pour tout message de confirmation.

Une fois le déploiement terminé, l'URL du service doit s'afficher, par exemple https://agent1service-78833623456.us-central1.run.app.
Accédez à l'URL dans votre navigateur Web pour lancer l'application.

        Figure 17: Agent running in Cloud Run

9. Créer un agent avec un sous-agent et un outil personnalisé

Dans la section précédente, vous avez créé un agent unique avec un outil de recherche Google intégré. Dans cette section, vous allez créer un système multi-agent dans lequel les agents sont autorisés à utiliser les outils personnalisés.

Redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Cliquez sur le bouton "+" pour créer un agent. Dans la boîte de dialogue de l'agent, saisissez "Agent2" (figure 18), puis cliquez sur "Create" (Créer).

Figure 18 : Création d'une application Agent

Dans la section des instructions de l'Agent2, saisissez ce qui suit.

You are an agent that takes image creation instruction from the user and passes it to your sub agent

Nous allons maintenant ajouter un sous-agent à l'agent racine. Pour ce faire, cliquez sur le bouton "+" à gauche du menu "Sous-agent" en bas du volet de gauche (figure 19), puis sur Agent LLM. Un agent sera créé en tant que sous-agent de l'agent racine.

Figure 19 : Ajouter un sous-agent.

Dans les instructions pour sub_agent_1, saisissez le texte suivant.

You are an Agent that can take instructions about an image and create an image using the create_image tool.

Ajoutons maintenant un outil personnalisé à ce sous-agent. Cet outil appellera le modèle Imagen pour générer une image à l'aide des instructions de l'utilisateur. Pour ce faire, cliquez d'abord sur le sous-agent créé à l'étape précédente, puis sur le bouton "+" à côté du menu "Outils". Dans la liste des options de l'outil, cliquez sur Outil Fonction. Cet outil nous permettra d'ajouter notre propre code personnalisé.

Figure 20 : Cliquez sur l'outil Fonction pour créer un outil. 8. Nommez l'outil Agent2.image_creation_tool.create_image dans la boîte de dialogue.

Figure 21 : Ajouter le nom de l'outil

Cliquez sur le bouton Enregistrer pour enregistrer les modifications.
Dans le terminal de l'éditeur Cloud Shell, appuyez sur Ctrl+S pour arrêter le serveur ADK.
Dans le terminal, saisissez la commande suivante pour créer le fichier image_creation_tool.py.

touch ~/adkui/Agent2/image_creation_tool.py

Ouvrez le fichier image_creation_tool.py que vous venez de créer en cliquant dessus dans le volet "Explorateur" de l'éditeur Cloud Shell. Remplacez le contenu de image_creation_tool.py par ce qui suit, puis enregistrez-le (Ctrl+S).

import os
import io
import vertexai
from vertexai.preview.vision_models import ImageGenerationModel
from dotenv import load_dotenv
import uuid
from typing import Union
from datetime import datetime
from google import genai
from google.genai import types
from google.adk.tools import ToolContext
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

async def create_image(prompt: str,tool_context: ToolContext) -> Union[bytes, str]:
  """
  Generates an image based on a text prompt using a Vertex AI Imagen model.
  Args:
      prompt: The text prompt to generate the image from.

  Returns:
      The binary image data (PNG format) on success, or an error message string on failure.
  """
  print(f"Attempting to generate image for prompt: '{prompt}'")

  try:
      # Load environment variables from .env file two levels up
      dotenv_path = os.path.join(os.path.dirname(__file__), '..', '..', '.env')
      load_dotenv(dotenv_path=dotenv_path)
      project_id = os.getenv("GOOGLE_CLOUD_PROJECT")
      location = os.getenv("GOOGLE_CLOUD_LOCATION")
      model_name = os.getenv("IMAGEN_MODEL")
      client = genai.Client(
          vertexai=True,
          project=project_id,
          location=location,
      )
      response = client.models.generate_images(
          model="imagen-3.0-generate-002",
          prompt=prompt,
          config=types.GenerateImagesConfig(
              number_of_images=1,
              aspect_ratio="9:16",
              safety_filter_level="block_low_and_above",
              person_generation="allow_adult",
          ),
      )
      if not all([project_id, location, model_name]):
          return "Error: Missing GOOGLE_CLOUD_PROJECT, GOOGLE_CLOUD_LOCATION, or IMAGEN_MODEL in .env file."
      vertexai.init(project=project_id, location=location)
      model = ImageGenerationModel.from_pretrained(model_name)
      images = model.generate_images(
          prompt=prompt,
          number_of_images=1
      )
      if response.generated_images is  None:
          return "Error: No image was generated."
      for generated_image in response.generated_images:
          # Get the image bytes
          image_bytes = generated_image.image.image_bytes
          counter = str(tool_context.state.get("loop_iteration", 0))
          artifact_name = f"generated_image_" + counter + ".png"
          # Save as ADK artifact (optional, if still needed by other ADK components)
          report_artifact = types.Part.from_bytes(
              data=image_bytes, mime_type="image/png"
          )
          await tool_context.save_artifact(artifact_name, report_artifact)
          logger.info(f"Image also saved as ADK artifact: {artifact_name}")
          return {
              "status": "success",
              "message": f"Image generated .  ADK artifact: {artifact_name}.",
              "artifact_name": artifact_name,
          }
  except Exception as e:
      error_message = f"An error occurred during image generation: {e}"
      print(error_message)
      return error_message

Redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.

Dans l'onglet de l'interface utilisateur ADK (Agent Development Kit), sélectionnez Agent2 dans la liste des agents, puis appuyez sur le bouton Modifier (icône en forme de crayon). Dans l'éditeur visuel du kit de développement d'agent (ADK), cliquez sur le bouton "Enregistrer" pour conserver les modifications.
Nous pouvons maintenant tester le nouvel agent.
Dans l'interface de chat de l'ADK (Agent Development Kit), saisissez la requête suivante. Vous pouvez également essayer d'autres requêtes. Les résultats affichés doivent être ceux de la figure 22.

Create an image of a cat

Figure 22 : Interface de chat de l'UI de l'ADK

10. Créer un agent de workflow

Alors que l'étape précédente consistait à créer un agent avec un sous-agent et des outils spécialisés de création d'images, cette phase se concentre sur l'amélioration des capacités de l'agent. Nous allons améliorer le processus en veillant à ce que la requête initiale de l'utilisateur soit optimisée avant la génération de l'image. Pour ce faire, un agent séquentiel sera intégré à l'agent racine pour gérer le workflow en deux étapes suivant :

Recevez la requête de l'agent racine et améliorez-la.
Transférez la requête affinée à l'agent de création d'images pour qu'il produise l'image finale à l'aide d'IMAGEN.
Redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Sélectionnez Agent2 dans le sélecteur d'agents, puis cliquez sur le bouton Modifier (icône en forme de crayon).
Cliquez sur Agent2 (Agent racine), puis sur le bouton + à côté du menu"Sous-agents". Dans la liste des options, cliquez sur Agent séquentiel.
Vous devriez voir la structure de l'agent, comme celle illustrée dans la figure 23.

Figure 23 : Structure de l'agent séquentiel

Vous allez maintenant ajouter le premier agent à l'agent séquentiel, qui servira à améliorer les requêtes. Pour ce faire, cliquez sur le bouton "Ajouter un sous-agent" dans la boîte SequentialAgent, puis cliquez sur "Agent LLM".
Nous devons ajouter un autre agent à la séquence. Répétez donc l'étape 6 pour ajouter un autre agent LLM (appuyez sur le bouton + et sélectionnez LLMAgent).
Cliquez sur sub_agent_4 et ajoutez un outil en cliquant sur l'icône + à côté de Outils dans le volet de gauche. Cliquez sur Outil de fonction dans les options. Dans la boîte de dialogue, nommez l'outil Agent2.image_creation_tool.create_image et appuyez sur Créer.
Nous pouvons maintenant supprimer sub_agent_1, car il a été remplacé par sub_agent_2, plus avancé. Pour ce faire, cliquez sur le bouton Supprimer à droite de sub_agent_1 dans le diagramme.

Figure 24 : Supprimer sub_agent_1 10. La structure de notre agent ressemble à celle de la figure 25.

Figure 25 : Structure finale de l'agent amélioré

Cliquez sur sub_agent_3, puis saisissez les instructions suivantes.

     Act as a professional AI Image Prompt Engineer. I will provide you 
    with a basic idea for an image. Your job is to expand my idea into 
    a detailed, high-quality prompt for models like Imagen. 
    
    For every input, output the following structure:
    1. **Optimized Prompt**: A vivid, descriptive paragraph including 
    subject, background, lighting, and textures.
    2. **Style & Medium**: Specify if it is photorealistic, digital art, 
    oil painting, etc.
    3. **Camera & Lighting**: Define the lens (e.g., 85mm), angle, 
    and light quality (e.g., volumetric, golden hour).
    
    Guidelines: Use sensory language, avoid buzzwords like 'photorealistic' 
    unless necessary, and focus on specific artistic descriptors.
    Once the prompt is created send the prompt to the

Cliquez sur sub_agent_4. Remplacez l'instruction par ce qui suit.

You are an agent that takes instructions about an image and can generate the image using the create_image tool.

Cliquez sur le bouton "Enregistrer".
Accédez au volet de l'explorateur de l'éditeur Cloud Shell et ouvrez les fichiers YAML de l'agent. Les fichiers de l'agent doivent se présenter comme suit :

root_agent.yaml

name: Agent2
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: You are an agent that takes image creation instruction from the
  user and passes it to your sub agent
sub_agents:
  - config_path: ./sub_agent_2.yaml
tools: []

sub_agent_2.yaml

name: sub_agent_2
agent_class: SequentialAgent
sub_agents:
  - config_path: ./sub_agent_3.yaml
  - config_path: ./sub_agent_4.yaml

sub_agent_3.yaml

name: sub_agent_3
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: |
  Act as a professional AI Image Prompt Engineer. I will provide you  with a
  basic idea for an image. Your job is to expand my idea into  a detailed,
  high-quality prompt for models like Imagen. 

  For every input, output the following structure: 1. **Optimized Prompt**: A
  vivid, descriptive paragraph including  subject, background, lighting, and
  textures. 2. **Style & Medium**: Specify if it is photorealistic, digital
  art,  oil painting, etc. 3. **Camera & Lighting**: Define the lens (e.g.,
  85mm), angle,  and light quality (e.g., volumetric, golden hour).

  Guidelines: Use sensory language, avoid buzzwords like
  'photorealistic'  unless necessary, and focus on specific artistic
  descriptors. Once the prompt is created send the prompt to the 
sub_agents: []
tools: []

sub_agent_4.yaml

name: sub_agent_4
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: You are an agent that takes instructions about an image and
  generate the image using the create_image tool.
sub_agents: []
tools:
  - name: Agent2.image_creation_tool.create_image

Testons-le maintenant.
Redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Sélectionnez "Agent2" dans la liste des agents. Saisissez ensuite le prompt suivant.

Create an image of a Cat

Pendant que l'agent fonctionne, vous pouvez consulter le terminal dans l'éditeur Cloud Shell pour voir ce qui se passe en arrière-plan. Le résultat final doit ressembler à la figure 26.

Figure 26 : Tester l'agent

11. Créer un agent avec l'assistant Agent Builder

L'assistant Agent Builder fait partie de ADK Visual Builder. Il permet de créer des agents de manière interactive à l'aide de requêtes dans une interface de chat simple, avec différents niveaux de complexité. En utilisant le générateur visuel ADK, vous pouvez obtenir un retour visuel immédiat sur les agents que vous développez. Dans cet atelier, nous allons créer un agent capable de générer une bande dessinée HTML à partir d'une requête utilisateur. Les utilisateurs peuvent fournir une requête simple, comme "Crée une bande dessinée sur Hansel et Gretel", ou saisir une histoire complète. L'agent analysera ensuite le récit, le segmentera en plusieurs panneaux et utilisera Nanobanana pour produire les visuels de la bande dessinée, avant de regrouper le résultat au format HTML.

Figure 27 : UI de l'assistant Agent Builder

C'est parti !

Redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Dans l'interface utilisateur graphique du kit de développement d'agent (ADK), cliquez sur le bouton + pour créer un agent.
Dans la boîte de dialogue, saisissez Agent3, puis cliquez sur le bouton Create (Créer).

Illustration 28 : Créer un agent Agent3

Dans le volet Assistant à droite, saisissez le prompt suivant. La requête ci-dessous contient toutes les instructions nécessaires pour créer un système d'agents permettant de créer un agent basé sur HTML.

System Goal: You are the Studio Director (Root Agent). Your objective is to manage a linear pipeline of four ADK Sequential Agents to transform a user's seed idea into a fully rendered, responsive HTML5 comic book. 

0. Root Agent: The Studio Director
Role: Orchestrator and State Manager.

Logic: Receives the user's initial request. It initializes the workflow and ensures the output of each Sub-Agent is passed as the context for the next. It monitors the sequence to ensure no steps are skipped. Make sure the query explicitly mentions "Create me a comic of ..." if it's just a general question or prompt just answer the question.

1. Sub-Agent: The Scripting Agent (Sequential Step 1)
Role: Narrative & Character Architect.

Input: Seed idea from Root Agent.

Logic: 1. Create a Character Manifest: Define 3 specific, unchangeable visual identifiers 
          for every character (e.g., "Gretel: Blue neon hair ribbons, silver apron, 
          glowing boots"). 
       2. Expand the seed idea into a coherent narrative arc.

Output: A narrative script and a mandatory character visual guide.

2. Sub-Agent: The Panelization Agent (Sequential Step 2)
Role: Cinematographer & Storyboarder.

Input: Script and Character Manifest from Step 1.

Logic: 
     1. Divide the script into exactly X panels (User-defined or default to 8). 
     2. For each panel, define a specific composition (e.g., "Panel 1: 
        Wide shot of the gingerbread house").


Output: A structured list of exactly X panel descriptions.

3. Sub-Agent: The Image Synthesis Agent (Sequential Step 3)
Role: Technical Artist & Asset Generator.

Input: The structured list of panel descriptions from Step 2.

Logic: 
     1. Iterative Generation: You must execute the "generate_image" tool in 
     "image_generation.py" file 
     (Nano Banana) individually for each panel defined in Step 2. 
     2. Prompt Engineering: For every panel, translate the description into a 
     Nano Banana prompt, strictly enforcing the character identifiers 
     (e.g., the "blue neon ribbons") and the global style: "vibrant comic book style, 
     heavy ink lines, cel-shaded, 4k." . Make sure that the necessary speech bubbles
     are present in the image representing the dialogue.
     3. Mapping: Associate each generated image URL with its corresponding panel 
     number and dialogue.

Output: A complete gallery of X images mapped to their respective panel data.

4. Sub-Agent: The Assembly Agent (Sequential Step 4)
Role: Frontend Developer.

Input: The mapped images and panel text from Step 3.

Logic: 
     1. Write a clean, responsive HTML5/CSS3 file that shows the comic. The comic should be
        Scrollable with image on the top and the description below the image.   
     2. Use "write_comic_html" tool in file_writer.py to write the created html file in 
        the "output" folder.      
     4. In the "write_comic_html" tool add logic to copy the images folder to the 
        output folder so that the images in the html file are actually visible when 
        the user opens the html file.

Output: A final, production-ready HTML code block.

L'agent peut vous demander de saisir le modèle à utiliser. Dans ce cas, saisissez gemini-2.5-pro parmi les options proposées.

Figure 29 : Saisissez "gemini-2.5-pro" si vous êtes invité à saisir le modèle à utiliser.

L'Assistant peut être inclus dans le forfait et vous demander de confirmer si vous souhaitez continuer. Vérifiez le plan, saisissez OK, puis appuyez sur Entrée.

Figure 30 : Saisissez "OK" si le plan vous convient 8. Une fois que l'Assistant a terminé son travail, vous devriez pouvoir voir la structure de l'agent, comme illustré à la figure 31.

Figure 31 : Agent créé par l'assistant de création d'agents 9. Dans image_synthesis_agent (votre nom peut être différent), cliquez sur l'outil "Agent3.tools.image_generation.gene...". Si la dernière section du nom de l'outil n'est pas image_generation.generate_image change, remplacez-la par image_generation.generate_image. Si le nom est déjà défini, vous n'avez pas besoin de le modifier. Appuyez sur le bouton Enregistrer pour l'enregistrer.

Figure 32 : Modifiez le nom de l'outil en image_generation.generate_image, puis cliquez sur "Save" (Enregistrer).

Dans assembly_agent (le nom de votre agent peut être différent), cliquez sur l'outil **Agent3.tools.file_writer.write_comic_...**. Si la dernière section du nom de l'outil n'est pas **file_writer.write_comic_html**, remplacez-la par **file_writer.write_comic_html**.

Figure 33 : Remplacez le nom de l'outil par file_writer.write_comic_html 11. Appuyez sur le bouton Enregistrer en bas à gauche du panneau de gauche pour enregistrer l'agent que vous venez de créer. 12. Dans le volet Explorateur de l'éditeur Cloud Shell, développez le dossier Agent3. Le dossier tools doit se trouver dans le dossier Agent3/. Cliquez sur Agent3/tools/file_writer.py pour l'ouvrir, puis remplacez son contenu par le code suivant. Appuyez sur Ctrl+S pour enregistrer. Remarque : Bien que l'assistant Agent ait peut-être déjà créé le code correct, nous utiliserons le code testé pour cet atelier.

import os
import shutil

def write_comic_html(html_content: str, image_directory: str = "images") -> str:
   """
   Writes the final HTML content to a file and copies the image assets.

   Args:
       html_content: A string containing the full HTML of the comic.
       image_directory: The source directory where generated images are stored.

   Returns:
       A confirmation message indicating success or failure.
   """
   output_dir = "output"
   images_output_dir = os.path.join(output_dir, image_directory)

   try:
       # Create the main output directory
       if not os.path.exists(output_dir):
           os.makedirs(output_dir)

       # Copy the entire image directory to the output folder
       if os.path.exists(image_directory):
           if os.path.exists(images_output_dir):
               shutil.rmtree(images_output_dir)  # Remove old images
           shutil.copytree(image_directory, images_output_dir)
       else:
           return f"Error: Image directory '{image_directory}' not found."

       # Write the HTML file
       html_file_path = os.path.join(output_dir, "comic.html")
       with open(html_file_path, "w") as f:
           f.write(html_content)

       return f"Successfully created comic at '{html_file_path}'"

   except Exception as e:
       return f"An error occurred: {e}"

Dans le volet de l'explorateur de l'éditeur Cloud Shell, développez le dossier Agent3. Le dossier tools doit se trouver dans le dossier **Agent3/**. Cliquez sur Agent3/tools/image_generation.py pour l'ouvrir, puis remplacez son contenu par le code suivant. Appuyez sur Ctrl+S pour enregistrer. Remarque : Bien que l'assistant Agent ait peut-être déjà créé le code correct, nous utiliserons le code testé pour cet atelier.

import time
import os
import io
import vertexai
from vertexai.preview.vision_models import ImageGenerationModel
from dotenv import load_dotenv
import uuid
from typing import Union
from datetime import datetime
from google import genai
from google.genai import types
from google.adk.tools import ToolContext

import logging
import asyncio

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# It's better to initialize the client once and reuse it.
# IMPORTANT: Your Google Cloud Project ID must be set as an environment variable
# for the client to authenticate correctly.


def edit_image(client, prompt: str, previous_image: str, model_id: str) -> Union[bytes, None]:
   """
   Calls the model to edit an image based on a prompt.

   Args:
       prompt: The text prompt for image editing.
       previous_image: The path to the image to be edited.
       model_id: The model to use for the edit.

   Returns:
       The raw image data as bytes, or None if an error occurred.
   """

   try:
       with open(previous_image, "rb") as f:
           image_bytes = f.read()

       response = client.models.generate_content(
           model=model_id,
           contents=[
               types.Part.from_bytes(
                   data=image_bytes,
                   mime_type="image/png",  # Assuming PNG, adjust if necessary
               ),
               prompt,
           ],
           config=types.GenerateContentConfig(
               response_modalities=['IMAGE'],
           )
       )

       # Extract image data
       for part in response.candidates[0].content.parts:
           if part.inline_data:
               return part.inline_data.data

       logger.warning("Warning: No image data was generated for the edit.")
       return None

   except FileNotFoundError:
       logger.error(f"Error: The file {previous_image} was not found.")
       return None
   except Exception as e:
       logger.error(f"An error occurred during image editing: {e}")
       return None

async def generate_image(tool_context: ToolContext, prompt: str, image_name: str, previous_image: str = None) -> dict:
   """
   Generates or edits an image and saves it to the 'images/' directory.

   If 'previous_image' is provided, it edits that image. Otherwise, it generates a new one.

   Args:
       prompt: The text prompt for the operation.
       image_name: The desired name for the output image file (without extension).
       previous_image: Optional path to an image to be edited.

   Returns:
       A confirmation message with the path to the saved image or an error message.
   """
   load_dotenv()
   project_id = os.environ.get("GOOGLE_CLOUD_PROJECT")
   if not project_id:
       return "Error: GOOGLE_CLOUD_PROJECT environment variable is not set."
  
   try:
       client = genai.Client(vertexai=True, project=project_id, location="global")
   except Exception as e:
       return f"Error: Failed to initialize genai.Client: {e}"

   image_data = None
   model_id = "gemini-3-pro-image-preview"

   try:
       if previous_image:
           logger.info(f"Editing image: {previous_image}")
           image_data = edit_image(
               client=client,
               prompt=prompt,
               previous_image=previous_image,
               model_id=model_id
           )
       else:
           logger.info("Generating new image")
           # Generate the image
           response = client.models.generate_content(
               model=model_id,
               contents=prompt,
               config=types.GenerateContentConfig(
                   response_modalities=['IMAGE'],
                   image_config=types.ImageConfig(aspect_ratio="16:9"),
               ),
           )

           # Check for errors
           if response.candidates[0].finish_reason != types.FinishReason.STOP:
               return f"Error: Image generation failed. Reason: {response.candidates[0].finish_reason}"

           # Extract image data
           for part in response.candidates[0].content.parts:
               if part.inline_data:
                   image_data = part.inline_data.data
                   break

       if not image_data:
           return {"status": "error", "message": "No image data was generated.", "artifact_name": None}

       # Create the images directory if it doesn't exist
       output_dir = "images"
       os.makedirs(output_dir, exist_ok=True)

       # Save the image to file system
       file_path = os.path.join(output_dir, f"{image_name}.png")
       with open(file_path, "wb") as f:
           f.write(image_data)

       # Save as ADK artifact
       counter = str(tool_context.state.get("loop_iteration", 0))
       artifact_name = f"{image_name}_" + counter + ".png"
       report_artifact = types.Part.from_bytes(data=image_data, mime_type="image/png")
       await tool_context.save_artifact(artifact_name, report_artifact)
       logger.info(f"Image also saved as ADK artifact: {artifact_name}")

       return {
           "status": "success",
           "message": f"Image generated and saved to {file_path}. ADK artifact: {artifact_name}.",
           "artifact_name": artifact_name,
       }

   except Exception as e:
       return f"An error occurred: {e}"

Les fichiers YAML finaux produits dans l'environnement de l'auteur sont fournis ci-dessous pour référence (veuillez noter que les fichiers de votre environnement peuvent être légèrement différents). Veuillez vous assurer que la structure YAML de votre agent correspond à la mise en page affichée dans ADK Visual Builder.

root_agent.yamlname: studio_director
model: gemini-2.5-pro
agent_class: LlmAgent
description: The Studio Director who manages the comic creation pipeline.
instruction: >
 You are the Studio Director. Your objective is to manage a linear pipeline of
 four sequential agents to transform a user's seed idea into a fully rendered,
 responsive HTML5 comic book.


 Your role is to be the primary orchestrator and state manager. You will
 receive the user's initial request.


 **Workflow:**

 1.  If the user's prompt starts with "Create me a comic of ...", you must
 delegate the task to your sub-agent to begin the comic creation pipeline.

 2.  If the user asks a general question or provides a prompt that does not
 explicitly ask to create a comic, you must answer the question directly
 without triggering the comic creation pipeline.

 3.  Monitor the sequence to ensure no steps are skipped. Ensure the output of
 each Sub-Agent is passed as the context for the next.
sub_agents:
 - config_path: ./comic_pipeline.yaml
tools: []

comic_pipline.yaml
name: comic_pipeline
agent_class: SequentialAgent
description: A sequential pipeline of agents to create a comic book.
sub_agents:
 - config_path: ./scripting_agent.yaml
 - config_path: ./panelization_agent.yaml
 - config_path: ./image_synthesis_agent.yaml
 - config_path: ./assembly_agent.yaml

scripting_agent.yamlname: scripting_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Narrative & Character Architect.
instruction: >
 You are the Scripting Agent, a Narrative & Character Architect.

 Your input is a seed idea for a comic.


 **Your Logic:**

 1.  **Create a Character Manifest:** You must define exactly 3 specific,
 unchangeable visual identifiers for every character. For example: "Gretel:
 Blue neon hair ribbons, silver apron, glowing boots". This is mandatory.

 2.  **Expand the Narrative:** Expand the seed idea into a coherent narrative
 arc with dialogue.


 **Output:**

 You must output a JSON object containing:

 - "narrative_script": A detailed script with scenes and dialogue.

 - "character_manifest": The mandatory character visual guide.
sub_agents: []
tools: []

panelization_agent.yamlname: panelization_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Cinematographer & Storyboarder.
instruction: >
 You are the Panelization Agent, a Cinematographer & Storyboarder.

 Your input is a narrative script and a character manifest.


 **Your Logic:**

 1.  **Divide the Script:** Divide the script into a specific number of panels.
 The user may define this number, or you should default to 8 panels.

 2.  **Define Composition:** For each panel, you must define a specific
 composition, camera shot (e.g., "Wide shot", "Close-up"), and the dialogue for
 that panel.


 **Output:**

 You must output a JSON object containing a structured list of exactly X panel
 descriptions, where X is the number of panels. Each item in the list should
 have "panel_number", "composition_description", and "dialogue".
sub_agents: []
tools: []

image_synthesis_agent.yaml
name: image_synthesis_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Technical Artist & Asset Generator.
instruction: >
 You are the Image Synthesis Agent, a Technical Artist & Asset Generator.

 Your input is a structured list of panel descriptions.


 **Your Logic:**

 1.  **Iterate and Generate:** You must iterate through each panel description
 provided in the input. For each panel, you will execute the `generate_image`
 tool.

 2.  **Construct Prompts:** For each panel, you will construct a detailed
 prompt for the image generation tool. This prompt must strictly enforce the
 character visual identifiers from the manifest and include the global style:
 "vibrant comic book style, heavy ink lines, cel-shaded, 4k". The prompt must
 also describe the composition and include a request for speech bubbles to
 contain the dialogue.

 3.  **Map Output:** You must associate each generated image URL with its
 corresponding panel number and dialogue.


 **Output:**

 You must output a JSON object containing a complete gallery of all generated
 images, mapped to their respective panel data (panel_number, dialogue,
 image_url).
sub_agents: []
tools:
 - name: Agent3.tools.image_generation.generate_image

assembly_agent.yamlname: assembly_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Frontend Developer for comic book assembly.
instruction: >
 You are the Assembly Agent, a Frontend Developer.

 Your input is the mapped gallery of images and panel data.


 **Your Logic:**

 1.  **Generate HTML:** You will write a clean, responsive HTML5/CSS3 file to
 display the comic. The comic must be vertically scrollable, with each panel
 displaying its image on top and the corresponding dialogue or description
 below it.

 2.  **Write File:** You must use the `write_comic_html` tool to save the
 generated HTML to a file named `comic.html` in the `output/` folder.

 3.  Pass the list of image URLs to the tool so it can handle the image assets
 correctly.


 **Output:**

 You will output a confirmation message indicating the path to the final HTML
 file.
sub_agents: []
tools:
 - name: Agent3.tools.file_writer.write_comic_html

Accédez à l'onglet de l'interface utilisateur ADK (Agent Development Kit), sélectionnez Agent3, puis cliquez sur le bouton Modifier (icône en forme de crayon).
Cliquez sur le bouton "Enregistrer" en bas à gauche de l'écran. Cela conservera toutes les modifications de code que vous avez apportées à l'agent principal.
Nous pouvons maintenant commencer à tester notre agent.
Fermez l'onglet de l'interface utilisateur ADK (Agent Development Kit) actuel et revenez à l'onglet Éditeur Cloud Shell.
Dans le terminal de l'onglet Éditeur Cloud Shell, redémarrez d'abord le serveur ADK (Agent Development Kit). Accédez au terminal où vous avez démarré le serveur ADK (Agent Development Kit) et appuyez sur CTRL+C pour arrêter le serveur s'il est toujours en cours d'exécution. Exécutez la commande suivante pour redémarrer le serveur.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clic sur l'URL (par exemple, http://localhost:8000) affichée à l'écran. L'interface utilisateur graphique ADK (Agent Development Kit) doit s'afficher dans l'onglet du navigateur.
Sélectionnez Agent3 dans la liste des agents.
Saisissez le prompt suivant :

Create a Comic Book based on the following story,

Title: The Story of Momotaro

The story of Momotaro (Peach Boy) is one of Japan's most famous and beloved folktales. It is a classic "hero's journey" that emphasizes the virtues of courage, filial piety, and teamwork.

The Miraculous Birth
Long, long ago, in a small village in rural Japan, lived an elderly couple. They were hardworking and kind, but they were sad because they had never been blessed with children.

One morning, while the old woman was washing clothes by the river, she saw a magnificent, giant peach floating downstream. It was larger than any peach she had ever seen. With great effort, she pulled it from the water and brought it home to her husband for their dinner.

As they prepared to cut the fruit open, the peach suddenly split in half on its own. To their astonishment, a healthy, beautiful baby boy stepped out from the pit.

"Don't be afraid," the child said. "The Heavens have sent me to be your son."

Overjoyed, the couple named him Momotaro (Momo meaning peach, and Taro being a common name for an eldest son).

The Call to Adventure
Momotaro grew up to be stronger and kinder than any other boy in the village. During this time, the village lived in fear of the Oni—ogres and demons who lived on a distant island called Onigashima. These Oni would often raid the mainland, stealing treasures and kidnapping villagers.

When Momotaro reached young adulthood, he approached his parents with a request. "I must go to Onigashima," he declared. "I will defeat the Oni and bring back the stolen treasures to help our people."

Though they were worried, his parents were proud. As a parting gift, the old woman prepared Kibi-dango (special millet dumplings), which were said to provide the strength of a hundred men.

Gathering Allies
Momotaro set off on his journey toward the sea. Along the way, he met three distinct animals:

The Spotted Dog: The dog growled at first, but Momotaro offered him one of his Kibi-dango. The dog, tasting the magical dumpling, immediately swore his loyalty.

The Monkey: Further down the road, a monkey joined the group in exchange for a dumpling, though he and the dog bickered constantly.

The Pheasant: Finally, a pheasant flew down from the sky. After receiving a piece of the Kibi-dango, the bird joined the team as their aerial scout.

Momotaro used his leadership to ensure the three animals worked together despite their differences, teaching them that unity was their greatest strength.

The Battle of Onigashima
The group reached the coast, built a boat, and sailed to the dark, craggy shores of Onigashima. The island was guarded by a massive iron gate.

The Pheasant flew over the walls to distract the Oni and peck at their eyes.

The Monkey climbed the walls and unbolted the Great Gate from the inside.

The Dog and Momotaro charged in, using their immense strength to overpower the demons.

The Oni were caught off guard by the coordinated attack. After a fierce battle, the King of the Oni fell to his knees before Momotaro, begging for mercy. He promised to never trouble the villagers again and surrendered all the stolen gold, jewels, and precious silks.

The Triumphant Return
Momotaro and his three companions loaded the treasure onto their boat and returned to the village. The entire town celebrated their homecoming.

Momotaro used the wealth to ensure his elderly parents lived the rest of their lives in comfort and peace. He remained in the village as a legendary protector, and his story was passed down for generations as a reminder that bravery and cooperation can overcome even the greatest evils.

Pendant que l'agent fonctionne, vous pouvez voir les événements dans le terminal de l'éditeur Cloud Shell.
La génération de toutes les images peut prendre un certain temps. Veuillez patienter ou aller vous chercher un café ! Lorsque la génération d'images commence, vous devriez pouvoir voir les images liées à l'histoire, comme ci-dessous.

Figure 34 : L'histoire de Momotaro sous forme de bande dessinée 25. Si tout se passe bien, le fichier HTML généré doit être enregistré dans le dossier HTML. Si vous souhaitez améliorer l'agent, vous pouvez revenir à l'assistant Agent et lui demander d'apporter d'autres modifications.

Figure 35 : Contenu du dossier de sortie

Si l'étape 25 s'exécute correctement, vous obtenez comic.html dans le dossier output. Pour le tester, suivez les étapes ci-dessous. Tout d'abord, ouvrez un nouveau terminal en cliquant sur Terminal > Nouveau terminal dans le menu principal de l'éditeur Cloud Shell. Un nouveau terminal devrait s'ouvrir.

#go to the project folder
cd ~/adkui

#activate python virtual environment
source .venv/bin/activate

#Go to the output folder
cd ~/adkui/output

#start local web server
python -m http.server 8080

Ctrl+clic sur http://0.0.0.0:8080

Figure 36 : Exécution du serveur Web local

Le contenu du dossier doit s'afficher dans l'onglet du navigateur. Cliquez sur le fichier HTML (et. comic.html). La bande dessinée doit s'afficher comme ci-dessous (le résultat peut être légèrement différent).

Figure 37 : Exécution sur localhost

12. Effectuer un nettoyage

Nettoyons maintenant ce que nous venons de créer.

Supprimez l'application Cloud Run que nous venons de créer. Accédez à Cloud Run en cliquant sur Cloud Run . L'application que vous avez créée à l'étape précédente devrait s'afficher. Cochez la case à côté de l'application, puis cliquez sur le bouton "Supprimer".

Figure 38 : Supprimer l'application Cloud Run 2. Supprimer les fichiers dans Cloud Shell

#Execute the following to delete the files
cd ~
rm -R ~/adkui

13. Conclusion

Félicitations ! Vous avez créé des agents ADK (Agent Development Kit) à l'aide de l'ADK Visual Builder intégré. Vous avez également appris à déployer l'application sur Cloud Run. Il s'agit d'une avancée majeure qui couvre le cycle de vie principal d'une application cloud native moderne. Elle vous offre une base solide pour déployer vos propres systèmes agentiques complexes.

Résumé

Dans cet atelier, vous avez appris à :

Créer une application multi-agents à l'aide de l'outil de création visuelle ADK
Déployer l'application sur Cloud Run

Ressources utiles