Buat dan deploy agen ADK (Agent Deployment Kit) low code menggunakan ADK Visual Builder

1. Tujuan lab ini

Dalam lab interaktif ini, Anda akan mempelajari cara membuat agen menggunakan ADK (Agent Development Kit) Visual Builder. ADK (Agent Development Kit) Visual Builder menyediakan cara low-code untuk membuat agen ADK (Agent Development Kit). Anda akan mempelajari cara menguji aplikasi secara lokal dan men-deploy di Cloud Run.

Yang akan Anda pelajari

Pahami dasar-dasar ADK (Agent Development Kit) .
Memahami dasar-dasar Pembuat Visual ADK (Agent Development Kit)
Pelajari cara membuat Agen menggunakan alat GUI.
Pelajari cara men-deploy dan menggunakan agen dengan mudah di Cloud Run.

Gambar 1: Dengan ADK Visual Builder, Anda dapat membuat agen menggunakan GUI dengan kode rendah

2. Penyiapan Project

Jika Anda belum memiliki project yang dapat digunakan, Anda harus membuat project baru di konsol GCP. Pilih project di pemilih project (Kiri Atas Konsol Google Cloud)

Gambar 2: Dengan mengklik kotak tepat di samping logo Google Cloud, Anda dapat memilih project. Pastikan project Anda dipilih.

Dalam lab ini, kita akan menggunakan Cloud Shell Editor untuk melakukan tugas. Buka Cloud Shell dan tetapkan project menggunakan Cloud Shell.
Klik link ini untuk langsung membuka Cloud Shell Editor
Buka Terminal jika belum terbuka dengan Mengklik Terminal>New Terminal dari menu. Anda dapat menjalankan semua perintah dalam tutorial ini di terminal ini.
Anda dapat memeriksa apakah project sudah diautentikasi menggunakan perintah berikut di terminal Cloud Shell.

gcloud auth list

Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi project Anda

gcloud config list project

Salin project ID dan gunakan perintah berikut untuk menyetelnya

gcloud config set project <YOUR_PROJECT_ID>

Jika tidak ingat project ID, Anda dapat mencantumkan semua project ID dengan

gcloud projects list

3. Mengaktifkan API

Kita perlu mengaktifkan beberapa layanan API untuk menjalankan lab ini. Jalankan perintah berikut di Cloud Shell:

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

Pengenalan API

Vertex AI API (aiplatform.googleapis.com) memungkinkan akses ke platform Vertex AI , sehingga aplikasi Anda dapat berinteraksi dengan model Gemini untuk pembuatan teks, sesi chat, dan panggilan fungsi.
Cloud Resource Manager API (cloudresourcemanager.googleapis.com) memungkinkan Anda mengelola metadata untuk project Google Cloud secara terprogram, seperti ID dan nama project, yang sering kali diperlukan oleh alat dan SDK lain untuk memverifikasi identitas dan izin project.

4. Mengonfirmasi apakah Kredit Anda telah diterapkan

Pada tahap Penyiapan Project, Anda mengajukan permohonan kredit gratis yang memungkinkan Anda menggunakan layanan di Google Cloud. Saat Anda menerapkan kredit, akun penagihan gratis baru bernama "Akun Penagihan Uji Coba Google Cloud Platform" akan dibuat. Untuk memastikan kredit telah diterapkan, ikuti langkah-langkah berikut di Cloud Shell Editor

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

Jika berhasil, Anda akan dapat melihat hasilnya seperti di bawah: Jika Anda melihat "Successfully linked project", akun penagihan Anda telah disetel dengan benar. Dengan menjalankan langkah di atas, Anda dapat memeriksa apakah akun Anda sudah ditautkan. Jika belum ditautkan, akun tersebut akan ditautkan untuk Anda. Jika Anda belum memilih project, Anda akan diminta untuk memilih project atau Anda dapat melakukannya terlebih dahulu dengan mengikuti langkah-langkah dalam penyiapan project.

Gambar 3: Konfirmasi penautan akun penagihan

5. Pengantar Agent Development Kit

Agent Development Kit menawarkan beberapa keuntungan utama bagi developer yang membangun aplikasi berbasis agen:

Sistem Multi-Agen: Bangun aplikasi modular dan skalabel dengan menyusun beberapa agen khusus dalam hierarki. Memungkinkan koordinasi dan pendelegasian yang kompleks.
Ekosistem Alat yang Lengkap: Lengkapi agen dengan berbagai kemampuan: gunakan alat bawaan (Penelusuran, Eksekusi Kode, dll.), buat fungsi kustom, integrasikan alat dari framework agen pihak ketiga (LangChain, CrewAI), atau bahkan gunakan agen lain sebagai alat.
Orkestrasi yang Fleksibel: Tentukan alur kerja menggunakan agen alur kerja (SequentialAgent, ParallelAgent, dan LoopAgent) untuk pipeline yang dapat diprediksi, atau manfaatkan pemilihan rute dinamis berbasis LLM (transfer LlmAgent) untuk perilaku adaptif.
Pengalaman Developer yang Terintegrasi: Kembangkan, uji, dan lakukan debug secara lokal dengan CLI yang andal dan UI dev yang interaktif. Periksa peristiwa, status, dan eksekusi agen langkah demi langkah.
Evaluasi Bawaan: Menilai performa agen secara sistematis dengan mengevaluasi kualitas respons akhir dan arah eksekusi langkah demi langkah terhadap kasus pengujian yang telah ditentukan sebelumnya.
Siap Di-deploy: Masukkan agen Anda ke dalam container dan deploy di mana saja — jalankan secara lokal, lakukan penskalaan dengan Vertex AI Agent Engine, atau lakukan integrasi ke dalam infrastruktur kustom menggunakan Cloud Run atau Docker.

Meskipun SDK atau framework agen AI Generatif lainnya juga memungkinkan Anda membuat kueri model dan bahkan melengkapinya dengan alat, koordinasi dinamis antara beberapa model memerlukan upaya yang signifikan di pihak Anda.

Agent Development Kit menawarkan framework tingkat yang lebih tinggi daripada alat ini. Dengan begitu, Anda dapat dengan mudah menghubungkan beberapa agen satu sama lain untuk alur kerja yang kompleks tetapi mudah dikelola.

Gambar 4: Pemosisian ADK (Agent Development Kit)

Di versi terbaru, alat ADK Visual Builder telah ditambahkan ke ADK (Agent Development Kit) yang memungkinkan Anda membuat agen ADK (Agent Development Kit) dengan kode rendah. Di lab ini, kita akan mempelajari Alat ADK Visual Builder secara mendetail.

6. Menginstal ADK dan menyiapkan lingkungan Anda

Pertama-tama, kita perlu menyetel lingkungan agar dapat menjalankan ADK (Agent Development Kit). Dalam lab ini, kita akan menjalankan ADK (Agent Development Kit) dan melakukan semua tugas di Google Cloud di Cloud Shell Editor .

Menyiapkan Cloud Shell Editor

Klik link ini untuk langsung membuka Cloud Shell Editor
Klik Lanjutkan.
Jika diminta untuk memberikan otorisasi pada Cloud Shell, klik Authorize.
Di sepanjang lab, Anda dapat memanfaatkan jendela ini sebagai IDE dengan Cloud Shell Editor dan Cloud Shell Terminal.
Buka Terminal baru menggunakan Terminal>New Terminal di Cloud Shell Editor. Semua perintah di bawah akan dijalankan di terminal ini.

Mulai Editor Visual ADK

Jalankan perintah berikut untuk meng-clone sumber yang diperlukan dari github dan menginstal library yang diperlukan. Jalankan perintah di Terminal yang dibuka di Cloud Shell Editor.

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

Kita akan menggunakan uv untuk membuat lingkungan python (Jalankan di Terminal Cloud Shell Editor):

#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

Catatan: Jika Anda perlu memulai ulang terminal, pastikan Anda menyetel lingkungan python dengan menjalankan "source .venv/bin/activate"

Di editor, buka View->Toggle hidden files. Di folder adkui, buat file .env dengan konten berikut.

#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. Membuat Agen sederhana dengan Pembuat Visual ADK

Di bagian ini, kita akan membuat agen sederhana menggunakan ADK Visual Builder.ADK Visual Builder adalah alat berbasis web yang menyediakan lingkungan desain alur kerja visual untuk membuat dan mengelola agen ADK (Agent Development Kit). Alat ini memungkinkan Anda mendesain, membangun, dan menguji agen dalam antarmuka grafis yang mudah digunakan oleh pemula, serta menyertakan asisten yang didukung AI untuk membantu Anda membangun agen.

Gambar 5: Builder Visual ADK

Kembali ke direktori teratas adkui di terminal dan jalankan perintah berikut untuk menjalankan agen secara lokal (Jalankan di Terminal Cloud Shell Editor). Anda akan dapat memulai server ADK dan melihat hasil yang menyerupai Gambar 6 di terminal.

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

Gambar 6: Peluncuran aplikasi ADK

Ctrl+Klik (CMD+Klik untuk MacOS) pada URL http:// yang ditampilkan di terminal untuk membuka alat GUI berbasis browser ADK (Agent Development Kit).

Gambar 7: UI web ADK, ADK memiliki komponen berikut: 1: Mengalihkan Mode Terang dan Gelap 2: Ciutkan Panel 3: Buat Agen 4: Edit Agen

Untuk membuat Agen baru, tekan tombol "+".

Gambar 8: Dialog untuk membuat aplikasi baru

Beri nama "Agent1" dan Buat.

Gambar 9: UI untuk pembuat agen

Panel ini dibagi menjadi tiga bagian utama: sisi kiri berisi Kontrol untuk pembuatan agen berbasis GUI, bagian tengah memberikan visualisasi progres Anda, dan sisi kanan berisi Asisten untuk membuat agen menggunakan bahasa alami.
Agen Anda telah berhasil dibuat. Klik tombol Simpan untuk melanjutkan. (Catatan: Agar perubahan Anda tidak hilang, Anda harus menekan Simpan.)
Sekarang agen sudah siap untuk diuji. Untuk memulai, masukkan perintah di kotak Chat, seperti:

Hi, what can you do?

Gambar 10: Menguji agen.

7.Kembali ke editor, mari kita periksa file yang baru dibuat. Anda akan menemukan penjelajah di sisi kiri. Buka folder adkgui dan luaskan untuk menampilkan direktori Agent 1. Di folder, Anda dapat memeriksa file YAML yang menentukan agen, seperti yang ditunjukkan pada gambar di bawah.

Gambar 11: Definisi agen menggunakan file YAML

Sekarang, mari kembali ke editor GUI dan tambahkan beberapa fitur ke agen. Untuk melakukannya, tekan tombol edit (lihat Gambar 7, nomor komponen 4, ikon pena).
Kita akan menambahkan fitur Google Penelusuran ke agen. Untuk melakukannya, kita perlu menambahkan Google Penelusuran sebagai alat yang tersedia untuk agen dan yang dapat digunakan oleh agen. Untuk melakukannya, klik tanda "+" di samping bagian Alat di kiri bawah layar, lalu klik Alat bawaan dari menu (Lihat Gambar 12).

Gambar 12: Menambahkan alat baru ke agen

Dari daftar Alat Bawaan, pilih google_search, lalu klik Buat (Lihat Gambar 12). Tindakan ini akan menambahkan Google Penelusuran sebagai alat di agen Anda.
Tekan tombol Simpan agar perubahan disimpan.

Gambar 13: Daftar alat yang tersedia di UI ADK Visual Builder

Sekarang Anda siap menguji Agen. Pertama, mulai ulang Server ADK. Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Pilih Agent1 dari daftar agen. Agen Anda kini dapat melakukan penelusuran Google. Di kotak chat, uji dengan perintah berikut.

What is the weather today in Yokohama?

Anda akan melihat jawaban dari Google Penelusuran seperti di bawah.

Gambar 14: Penelusuran Google dengan agen

Sekarang, mari kita kembali ke editor dan periksa kode yang telah dibuat pada langkah ini. Dari panel samping Explorer Editor, klik root_agent.yaml untuk membuka. Konfirmasi bahwa google_search telah ditambahkan sebagai alat (Gambar 15).

Gambar 15: Konfirmasi bahwa google_search telah ditambahkan sebagai alat di Agent1

8. Men-deploy Agen ke Cloud Run

Sekarang, mari kita deploy agen yang dibuat ke Cloud Run. Dengan Cloud Run, Anda dapat membangun aplikasi atau situs dengan cepat di platform yang terkelola sepenuhnya.

Anda dapat menjalankan layanan frontend dan backend, tugas batch, host LLM, dan workload pemrosesan antrean tanpa perlu mengelola infrastruktur.

Di Terminal Cloud Shell Editor, jika Anda masih menjalankan server ADK (Agent Development Kit), tekan Ctrl+C untuk menghentikannya.

Buka direktori root project.

cd ~/adkui

Dapatkan kode deployment. Setelah menjalankan perintah, Anda akan melihat file deploycloudrun.py di panel Explorer Cloud Shell Editor

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

Periksa opsi deployment di deploycloudrun.py. Kita akan menggunakan perintah adk deploy untuk men-deploy agen ke Cloud Run. ADK (Agent Development Kit) memiliki opsi bawaan untuk men-deploy agen ke Cloud Run. Kita perlu menentukan parameter seperti Project ID Google Cloud, Region, dll. Untuk jalur aplikasi, skrip ini mengasumsikan bahwa agent_path=./Agent1. Kita juga akan membuat akun layanan baru dengan izin yang diperlukan dan melampirkannya ke Cloud Run. Cloud Run memerlukan akses ke layanan seperti Vertex AI, Cloud Storage untuk menjalankan Agen.

   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}",
    ]

Jalankan skrip deploycloudrun.py**. Deployment akan dimulai seperti yang ditunjukkan pada gambar di bawah.**

python3 deploycloudrun.py

Jika Anda mendapatkan pesan konfirmasi seperti di bawah, tekan Y lalu Enter untuk semua pesan. depoycloudrun.py mengasumsikan bahwa agen Anda berada di folder Agent1 seperti yang dibuat di atas.

Gambar 16: Men-deploy agen ke Cloud Run, tekan Y untuk mengonfirmasi pesan apa pun.

Setelah deployment selesai, Anda akan melihat URL Layanan seperti, https://agent1service-78833623456.us-central1.run.app
Akses URL di browser web Anda untuk meluncurkan aplikasi.

        Figure 17: Agent running in Cloud Run

9. Membuat agen dengan sub-agen dan alat kustom

Di bagian sebelumnya, Anda telah membuat satu agen dengan Alat Penelusuran Google bawaan. Di bagian ini, Anda akan membuat sistem multi-agen yang memungkinkan agen menggunakan alat kustom.

Pertama, mulai ulang Server ADK (Agent Development Kit). Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Klik tombol "+" untuk membuat Agen baru. Pada dialog agen, masukkan "Agent2" (Gambar 18), lalu klik "Buat".

Gambar 18: Membuat aplikasi Agen baru.

Di bagian petunjuk Agent2, masukkan perintah berikut.

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

Sekarang kita akan menambahkan sub-agen ke agen root. Untuk melakukannya, klik tombol "+" di sisi kiri menu Sub Agent di bagian bawah panel kiri (Gambar 19), lalu klik "LLM Agent". Tindakan ini akan membuat Agen baru sebagai sub-agen baru dari agen utama.

Gambar 19: Tambahkan Sub Agen baru.

Di Instructions for the sub_agent_1, masukkan teks berikut.

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

Sekarang, mari tambahkan alat kustom di sub-agen ini. Alat ini akan memanggil model Imagen untuk membuat gambar menggunakan petunjuk pengguna. Untuk melakukannya, klik terlebih dahulu Sub Agen yang dibuat pada langkah sebelumnya, lalu klik tombol "+" di samping menu Alat. Dari daftar opsi alat, klik "Alat fungsi". Alat ini akan memungkinkan kita menambahkan kode kustom kita sendiri ke alat tersebut.

Gambar 20: Klik alat Function untuk membuat alat baru. 8. Beri nama alat Agent2.image_creation_tool.create_image di kotak dialog.

Gambar 21: Tambahkan nama alat

Klik tombol Simpan untuk menyimpan perubahan.
Di Terminal Cloud Shell Editor, tekan Ctrl+S untuk mematikan server adk.
Di Terminal, masukkan perintah berikut untuk membuat file image_creation_tool.py.

touch ~/adkui/Agent2/image_creation_tool.py

Buka image_creation_tool.py yang baru dibuat dengan mengkliknya di panel Explorer Cloud Shell Editor. Kemudian, ganti konten image_creation_tool.py dengan yang berikut dan Simpan (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

Pertama, mulai ulang Server ADK (Agent Development Kit). Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.

Di tab UI ADK (Agent Development Kit), pilih Agent2 dalam daftar Agen, lalu tekan tombol edit (ikon Pena). Di Editor Visual ADK (Agent Development Kit), klik tombol Simpan untuk mempertahankan perubahan.
Sekarang kita dapat menguji Agen baru.
Di antarmuka chat UI ADK (Agent Development Kit), masukkan perintah berikut. Anda juga dapat mencoba perintah lain. Anda akan melihat hasil yang ditampilkan dalam Gambar 22)

Create an image of a cat

Gambar 22: Antarmuka chat UI ADK

10. Membuat agen alur kerja

Meskipun langkah sebelumnya melibatkan pembuatan agen dengan Sub Agen dan alat pembuatan gambar khusus, fase ini berfokus pada peningkatan kemampuan agen. Kami akan meningkatkan kualitas proses dengan memastikan perintah awal pengguna dioptimalkan sebelum pembuatan gambar dilakukan. Untuk mencapainya, agen Berurutan akan diintegrasikan ke Agen Root untuk menangani alur kerja dua langkah berikut:

Menerima perintah dari Agen Root dan melakukan peningkatan perintah.
Teruskan perintah yang telah disempurnakan ke Agent pembuat gambar untuk menghasilkan gambar akhir menggunakan IMAGEN.
Pertama, mulai ulang Server ADK (Agent Development Kit). Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Pilih Agent2 dari pemilih agen, lalu klik tombol Edit (ikon Pena).
Klik Agent2 (Agen Root), lalu klik tombol "+" di samping menu Sub-Agen. Dari Daftar opsi, klik Sequential Agent
Anda akan melihat Struktur Agen seperti yang ditunjukkan pada Gambar 23

Gambar 23: Struktur Agen Berurutan

Sekarang kita akan menambahkan agen pertama ke Sequential Agent yang akan bertindak sebagai peningkat kualitas perintah. Untuk melakukannya, Klik tombol Tambahkan sub-agen di dalam kotak SequentialAgent, lalu Klik LLM Agent
Kita perlu menambahkan Agen lain ke urutan, jadi ulangi Langkah 6 untuk menambahkan Agen LLM lain (Tekan tombol + dan pilih LLMAgent).
Klik sub_agent_4 dan tambahkan Alat baru dengan mengklik ikon"+" di samping Alat di Panel Kiri. Klik "Function tool" dari opsi. Di DialogBox, beri nama alat, Agent2.image_creation_tool.create_image, lalu tekan "Create".
Sekarang kita dapat menghapus sub_agent_1 karena telah digantikan oleh sub_agent_2 yang lebih canggih. Untuk melakukannya, klik tombol Delete di sisi kanan sub_agent_1 dalam diagram.

Gambar 24: Hapus sub_agent_1 10. Struktur agen kita akan terlihat seperti yang ada di Gambar 25.

Gambar 25: Struktur akhir Agen yang ditingkatkan

Klik sub_agent_3 dan masukkan petunjuk berikut.

     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

Klik sub_agent_4. Ubah petunjuk menjadi seperti berikut.

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

Klik tombol Simpan
Buka Panel Explorer Cloud Shell Editor, lalu buka file YAML agen. File Agen akan terlihat seperti di bawah

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

Sekarang, mari kita uji.
Pertama, mulai ulang Server ADK (Agent Development Kit). Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Pilih Agent2 dari daftar agen. Kemudian, masukkan perintah berikut.

Create an image of a Cat

Saat Agen sedang bekerja, Anda dapat melihat Terminal di Cloud Shell Editor untuk melihat apa yang terjadi di latar belakang. Hasil akhirnya akan terlihat seperti Gambar 26.

Gambar 26: Menguji Agen

11. Membuat agen dengan Asisten Pembuat Agen

Asisten Agent Builder adalah bagian dari ADK Visual Builder yang memungkinkan pembuatan agen secara interaktif melalui perintah dalam antarmuka chat sederhana, sehingga memungkinkan berbagai tingkat kompleksitas. Dengan memanfaatkan ADK Visual Builder, Anda dapat menerima masukan visual langsung tentang agen yang Anda kembangkan. Di lab ini, kita akan membangun agen yang mampu membuat buku komik HTML dari permintaan pengguna. Pengguna dapat memberikan perintah sederhana seperti "Buat buku komik tentang Hansel dan Gretel", atau mereka dapat memasukkan seluruh cerita. Kemudian, agen akan menganalisis narasi, menyegmentasikannya ke dalam beberapa panel, dan menggunakan Nanobanana untuk menghasilkan visual komik, yang pada akhirnya mengemas hasilnya ke dalam format HTML.

Gambar 27: UI Asisten Agent Builder

Mari kita mulai!

Pertama, mulai ulang Server ADK (Agent Development Kit). Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Di GUI ADK (Agent Development Kit), klik tombol "+" untuk membuat Agent baru.
Di kotak dialog, masukkan "Agent3", lalu klik tombol "Create".

Gambar 28: Buat Agen baru Agent3

Di Panel Asisten di sisi kanan, masukkan Perintah berikut. Perintah di bawah memiliki semua petunjuk yang diperlukan untuk membuat sistem agen guna membuat agen berbasis 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.

Agen dapat meminta Anda memasukkan model yang akan digunakan. Jika demikian, masukkan gemini-2.5-pro dari opsi yang diberikan.

Gambar 29: Masukkan gemini-2.5-pro jika Anda diminta untuk memasukkan model yang akan digunakan

Asisten mungkin disertakan dalam paket dan meminta Anda mengonfirmasi apakah Anda ingin melanjutkan. Periksa paket, ketik "OK", lalu tekan "Enter".

Gambar 30: Masukkan OK jika rencana terlihat baik 8. Setelah Asisten selesai bekerja, Anda akan dapat melihat Struktur Agen seperti yang ditunjukkan pada Gambar 31.

Gambar 31: Agen yang dibuat oleh Asisten Pembuat Agen 9. Di dalam image_synthesis_agent (nama Anda bisa berbeda), klik alat "Agent3.tools.image_generation.gene...". Jika bagian terakhir nama alat bukan image_generation.generate_image change, ubah menjadi image_generation.generate_image. Jika nama sudah disetel ke nama tersebut, Anda tidak perlu mengubah nama. Tekan tombol "Simpan" untuk menyimpannya.

Gambar 32: Ubah nama alat menjadi image_generation.generate_image, lalu tekan Simpan.

Di dalam assembly_agent (Nama agen Anda mungkin berbeda), klik alat **Agent3.tools.file_writer.write_comic_...**. Jika bagian terakhir dari nama alat bukan **file_writer.write_comic_html**, ubah menjadi **file_writer.write_comic_html**.

Gambar 33: Ubah nama alat menjadi file_writer.write_comic_html 11. Tekan tombol Simpan di kiri bawah panel Kiri untuk menyimpan Agen yang baru dibuat. 12. Di panel Explorer Cloud Shell Editor, luaskan folder Agent3 dan di dalam folder Agent3/ akan ada folder tools. Klik Agent3/tools/file_writer.py untuk membukanya dan ganti konten Agent3/tools/file_writer.py dengan kode berikut. Tekan Ctrl+S untuk menyimpan. Catatan: Meskipun Asisten agen mungkin telah membuat kode yang benar, untuk lab ini kita akan menggunakan kode yang telah diuji.

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}"

Di panel Explorer Cloud Shell Editor, luaskan folder Agent3 dan di dalam folder **Agent3/**, akan ada folder tools. Klik Agent3/tools/image_generation.py untuk membukanya dan ganti konten Agent3/tools/image_generation.py dengan kode berikut. Tekan Ctrl+S untuk menyimpan. Catatan: Meskipun Asisten agen mungkin telah membuat kode yang benar, untuk lab ini kita akan menggunakan kode yang telah diuji.

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}"

File YAML akhir yang dihasilkan di lingkungan penulis disediakan di bawah untuk referensi Anda (Perhatikan bahwa file di lingkungan Anda mungkin sedikit berbeda). Pastikan struktur YAML agen Anda sesuai dengan tata letak yang ditampilkan di 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

Buka Tab UI ADK (Agent Development Kit), pilih "Agent3", lalu klik tombol edit ("Ikon pena").
Klik tombol Simpan di kiri bawah layar. Tindakan ini akan mempertahankan semua perubahan kode yang Anda buat pada agen utama.
Sekarang kita dapat mulai menguji agen.
Tutup tab UI ADK (Agent Development Kit) saat ini dan kembali ke tab Cloud Shell Editor.
Di terminal dalam tab Cloud Shell Editor, mulai ulang Server ADK (Agent Development Kit) terlebih dahulu. Buka terminal tempat Anda memulai server ADK (Agent Development Kit) dan tekan CTRL+C untuk mematikan server jika masih berjalan. Jalankan perintah berikut untuk memulai server lagi.

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

#start the server
adk web

Ctrl+Klik URL (mis. http://localhost:8000) yang ditampilkan di layar. GUI ADK (Agent Development Kit) akan ditampilkan di tab browser.
Pilih Agent3 dari daftar Agen.
Masukkan perintah berikut

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.

Saat Agen sedang bekerja, Anda dapat melihat peristiwa di Terminal Cloud Shell Editor.
Mungkin perlu waktu beberapa saat untuk membuat semua gambar, jadi harap bersabar atau minum kopi sebentar. Saat pembuatan gambar dimulai, Anda akan dapat melihat gambar yang terkait dengan cerita seperti di bawah.

Gambar 34: Kisah Momotaro sebagai komik strip 25. Jika semuanya berjalan lancar, file html yang dihasilkan akan disimpan di folder html. Jika ingin meningkatkan kualitas Agen, Anda dapat kembali ke Asisten agen dan memintanya untuk melakukan lebih banyak perubahan.

Gambar 35: Konten folder output

Jika langkah 25 berjalan dengan benar dan Anda mendapatkan comic.html di folder output. Anda dapat menjalankan langkah-langkah berikut untuk mengujinya. Pertama-tama, buka terminal baru dengan mengklik Terminal>New Terminal dari Menu utama Cloud Shell Editor. Tindakan ini akan membuka Terminal baru.

#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+Klik http://0.0.0.0:8080

Gambar 36: Menjalankan server web lokal

Konten folder akan ditampilkan di tab browser. Klik file html (et. comic.html). Komik akan ditampilkan seperti di bawah (Output Anda mungkin sedikit berbeda).

Gambar 37: Berjalan di localhost

12. Pembersihan

Sekarang, mari kita hapus apa yang baru saja kita buat.

Hapus aplikasi Cloud Run yang baru saja kita buat. Buka Cloud Run dengan mengakses Cloud Run . Anda akan dapat melihat aplikasi yang Anda buat di langkah sebelumnya. Centang kotak di samping aplikasi, lalu klik tombol Hapus.

Gambar 38: Menghapus aplikasi Cloud Run 2. Hapus file di Cloud Shell

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

13. Kesimpulan

Selamat! Anda telah berhasil membuat agen ADK (Agent Development Kit) menggunakan ADK Visual Builder bawaan. Anda juga telah mempelajari cara men-deploy aplikasi ke Cloud Run. Ini adalah pencapaian signifikan yang mencakup siklus proses inti aplikasi cloud-native modern, sehingga memberi Anda fondasi yang kuat untuk men-deploy sistem agentik kompleks Anda sendiri.

Rangkuman

Di lab ini, Anda telah mempelajari cara:

Membuat aplikasi multi-agen menggunakan ADK Visual Builder
Men-deploy aplikasi ke Cloud Run

Referensi yang berguna