Эта страница переведена с помощью Cloud Translation API.

Создавайте и развертывайте агенты ADK (Agent Deployment Kit) с минимальным использованием кода, применяя ADK Visual Builder.

1. Цель данной лабораторной работы

В этой практической работе вы научитесь создавать агентов с помощью визуального конструктора ADK (Agent Development Kit) . Визуальный конструктор ADK (Agent Development Kit) предоставляет способ создания агентов ADK с минимальным использованием кода. Вы узнаете, как тестировать приложение локально и развертывать его в Cloud Run .

Что вы узнаете

Разберитесь в основах ADK (Agent Development Kit) .
Разберитесь в основах визуального конструктора ADK (Agent Development Kit).
Узнайте, как создавать агентов с помощью графического интерфейса пользователя.
Узнайте, как легко развертывать и использовать агенты в Cloud Run .

Рисунок 1: С помощью ADK Visual Builder можно создавать агентов, используя графический интерфейс пользователя с минимальным количеством кода.

2. Настройка проекта

Если у вас еще нет проекта , который вы можете использовать, вам потребуется создать новый проект в консоли GCP . Выберите проект в селекторе проектов (в левом верхнем углу консоли Google Cloud).

Рисунок 2: Нажав на квадратик рядом с логотипом Google Cloud, вы можете выбрать свой проект. Убедитесь, что ваш проект выбран.

В этой лабораторной работе мы будем использовать редактор Cloud Shell для выполнения наших задач. Откройте Cloud Shell и настройте проект с помощью Cloud Shell.
Нажмите на эту ссылку, чтобы перейти непосредственно в редактор Cloud Shell.
Откройте терминал, если он еще не открыт, выбрав в меню «Терминал» > «Новый терминал». В этом терминале вы можете выполнять все команды из этого руководства.
Проверить, прошла ли аутентификация проекта, можно с помощью следующей команды в терминале Cloud Shell.

gcloud auth list

Выполните следующую команду в Cloud Shell, чтобы подтвердить свой проект.

gcloud config list project

Скопируйте идентификатор проекта и используйте следующую команду для его установки.

gcloud config set project <YOUR_PROJECT_ID>

Если вы не помните идентификатор своего проекта, вы можете перечислить все идентификаторы своих проектов с помощью команды...

gcloud projects list

3. Включите API.

Для запуска этой лабораторной работы необходимо включить некоторые API-сервисы. Выполните следующую команду в Cloud Shell.

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

Представляем API.

API Vertex AI ( aiplatform.googleapis.com ) обеспечивает доступ к платформе Vertex AI , позволяя вашему приложению взаимодействовать с моделями Gemini для генерации текста, чатов и вызова функций.
API Cloud Resource Manager ( cloudresourcemanager.googleapis.com ) позволяет программно управлять метаданными для ваших проектов Google Cloud, такими как идентификатор и имя проекта, которые часто требуются другими инструментами и SDK для проверки подлинности проекта и прав доступа.

4. Убедитесь, что ваши бонусы были начислены.

На этапе настройки проекта вы запросили бесплатные кредиты, которые позволяют использовать сервисы Google Cloud. После применения кредитов создается новый бесплатный платежный аккаунт под названием «Пробный платежный аккаунт Google Cloud Platform». Чтобы убедиться, что кредиты применены, выполните следующие действия в редакторе Cloud Shell.

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

В случае успеха вы должны увидеть результат, как показано ниже: Если вы видите сообщение «Проект успешно связан», значит, ваш платежный аккаунт настроен правильно. Выполнив описанный выше шаг, вы можете проверить, связан ли ваш аккаунт; если нет, он будет связан автоматически. Если вы не выбрали проект, вам будет предложено выбрать проект, или вы можете сделать это заранее, следуя инструкциям по настройке проекта.

Рисунок 3: Подтверждение привязки платежного аккаунта

5. Введение в Agent Development Kit

Комплект для разработки агентов (Agent Development Kit) предоставляет разработчикам, создающим агентные приложения, ряд ключевых преимуществ:

Многоагентные системы : Создавайте модульные и масштабируемые приложения, объединяя множество специализированных агентов в иерархическую структуру. Обеспечивайте сложную координацию и делегирование задач.
Богатая экосистема инструментов : Оснастите агентов разнообразными возможностями: используйте готовые инструменты (поиск, выполнение кода и т. д.), создавайте собственные функции, интегрируйте инструменты из сторонних фреймворков для агентов (LangChain, CrewAI) или даже используйте других агентов в качестве инструментов.
Гибкая оркестровка : определяйте рабочие процессы с помощью агентов рабочих процессов ( SequentialAgent , ParallelAgent и LoopAgent ) для предсказуемых конвейеров или используйте динамическую маршрутизацию на основе LLM ( LlmAgent transfer) для адаптивного поведения.
Интегрированный интерфейс разработчика : разрабатывайте, тестируйте и отлаживайте локально с помощью мощного интерфейса командной строки и интерактивного пользовательского интерфейса для разработчиков. Пошагово отслеживайте события, состояние и выполнение агента.
Встроенная оценка : Систематическая оценка производительности агента путем анализа как качества конечного ответа, так и пошаговой траектории выполнения на основе предопределенных тестовых примеров.
Готовность к развертыванию : контейнеризируйте и развертывайте своих агентов где угодно — запускайте локально, масштабируйте с помощью Vertex AI Agent Engine или интегрируйте в собственную инфраструктуру, используя Cloud Run или Docker.

Хотя другие SDK для генерации ИИ или фреймворки для агентов также позволяют запрашивать модели и даже расширять их возможности с помощью инструментов, динамическая координация между несколькими моделями требует значительных усилий с вашей стороны.

Agent Development Kit предлагает более высокоуровневую структуру, чем эти инструменты, позволяя легко соединять несколько агентов друг с другом для создания сложных, но простых в обслуживании рабочих процессов.

Рисунок 4: Расположение ADK (комплекта для разработки агентов)

В последних версиях в ADK (Agent Development Kit) был добавлен инструмент ADK Visual Builder , позволяющий создавать агентов ADK с минимальным количеством кода. В этой лабораторной работе мы подробно рассмотрим инструмент ADK Visual Builder .

6. Установите ADK и настройте свою среду.

Прежде всего, нам необходимо настроить среду для запуска ADK (Agent Development Kit) . В этой лабораторной работе мы запустим ADK (Agent Development Kit) и выполним все задачи в Google Cloud в редакторе Cloud Shell .

Подготовка редактора Cloud Shell

Нажмите на эту ссылку, чтобы перейти непосредственно в редактор Cloud Shell.
Нажмите «Продолжить» .
Когда появится запрос на авторизацию Cloud Shell, нажмите «Авторизовать» .
В течение оставшейся части этой лабораторной работы вы можете работать в этом окне как в своей интегрированной среде разработки (IDE) с помощью редактора Cloud Shell и терминала Cloud Shell.
Откройте новый терминал, используя команду «Терминал» > «Новый терминал» в редакторе Cloud Shell. Все приведенные ниже команды будут выполнены в этом терминале.

Запустите визуальный редактор ADK.

Выполните следующие команды, чтобы клонировать необходимый исходный код с GitHub и установить необходимые библиотеки. Запустите команды в терминале, открытом в редакторе Cloud Shell .

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

Мы будем использовать uv для создания среды Python (запустите в терминале редактора 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

Примечание : Если вам когда-либо понадобится перезапустить терминал, убедитесь, что вы настроили среду Python, выполнив команду " source .venv/bin/activate ".

В редакторе перейдите в меню «Вид» -> «Отключить отображение скрытых файлов». А в папке adkui создайте файл .env со следующим содержимым.

#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. Создайте простой агент с помощью ADK Visual Builder.

В этом разделе мы создадим простого агента с помощью ADK Visual Builder . ADK Visual Builder — это веб-инструмент, предоставляющий визуальную среду проектирования рабочих процессов для создания и управления агентами ADK (Agent Development Kit) . Он позволяет проектировать, создавать и тестировать агентов в удобном для начинающих графическом интерфейсе и включает в себя помощника на основе искусственного интеллекта, который поможет вам в создании агентов.

Рисунок 5: Визуальный конструктор ADK

Важно: Информация об ADK Visual Builder (на момент публикации данного руководства)

ADK Visual Builder позволяет создавать агентов с помощью графического интерфейса пользователя (GUI) с минимальным использованием кода. При создании агента с помощью ADK Visual Builder все артефакты, такие как YAML-файл или инструменты, сохраняются во временной папке (tmp). Для сохранения изменений в основной папке агента необходимо нажать кнопку «Сохранить». Если вы внесли изменения во временную папку, необходимо вернуться в графический интерфейс и снова нажать кнопку «Сохранить», чтобы сохранить изменения.

Вернитесь в корневой каталог adkui в терминале и выполните следующую команду для локального запуска агента (Запустить в терминале редактора Cloud Shell ). Вы должны запустить сервер ADK и увидеть в терминале результаты, похожие на рисунок 6.

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

Рисунок 6: Запуск приложения ADK

Нажмите Ctrl+Click ( CMD+Click для MacOS) на URL-адресе http://, отображаемом в терминале, чтобы открыть графический инструмент ADK (Agent Development Kit) на основе браузера.

Рисунок 7: Веб-интерфейс ADK, ADK включает следующие компоненты: 1: Переключение между светлым и темным режимом; 2: Сворачивание панели; 3: Создание агента; 4: Редактирование агента.

Чтобы создать нового агента, нажмите кнопку "+".

Рисунок 8 : Диалоговое окно для создания нового приложения

Присвойте имя "Agent1" и создайте файл.

Рисунок 9: Пользовательский интерфейс конструктора агентов

Панель разделена на три основных раздела: в левой части расположены элементы управления для создания агентов с помощью графического интерфейса, в центре отображается визуализация хода работы, а в правой части находится помощник для создания агентов с использованием естественного языка.
Ваш агент успешно создан. Нажмите кнопку «Сохранить» , чтобы продолжить. ( Примечание: Во избежание потери изменений необходимо нажать кнопку «Сохранить».)
Теперь агент должен быть готов к тестированию. Для начала введите запрос в поле чата, например:

Hi, what can you do?

Рисунок 10: Тестирование агента.

7. Вернувшись в редактор, давайте рассмотрим только что созданные файлы. Вы найдете проводник слева. Перейдите в папку adkgui и разверните ее, чтобы отобразить каталог Agent 1. В этой папке вы можете проверить YAML-файл, определяющий агента, как показано на рисунке ниже.

Рисунок 11: Определение агента с использованием файла YAML.

Теперь вернемся к редактору графического интерфейса и добавим несколько функций к агенту. Для этого нажмите кнопку редактирования (см. рисунок 7, компонент номер 4, значок пера).
Мы собираемся добавить функцию поиска Google в систему агента. Для этого нам нужно добавить поиск Google в качестве инструмента, доступного агенту и предназначенного только для его использования. Для этого нажмите на знак «+» рядом с разделом «Инструменты» в левом нижнем углу экрана и выберите «Встроенный инструмент» в меню ( см. рисунок 12 ).

Рисунок 12: Добавление нового инструмента к агенту.

В списке встроенных инструментов выберите google_search и нажмите «Создать» (см. Рисунок 12) . Это добавит Google Search в качестве инструмента в ваш агент.
Нажмите кнопку «Сохранить» , чтобы сохранить изменения.

Рисунок 13: Список инструментов, доступных в пользовательском интерфейсе визуального конструктора ADK.

Теперь вы готовы протестировать агента. Сначала перезапустите сервер ADK. Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
Выберите Agent1 из списка агентов. Теперь ваш агент может выполнять поиск в Google . В окне чата проверьте это с помощью следующей подсказки.

What is the weather today in Yokohama?

В результатах поиска Google вы должны увидеть ответ, как показано ниже.

Рисунок 14: Поиск в Google с помощью агента

Теперь вернемся к редактору и проверим код, созданный на этом шаге. На боковой панели « Обозреватель редактора» щелкните файл root_agent.yaml , чтобы открыть его. Убедитесь, что google_search добавлен в качестве инструмента (Рисунок 15).

Рисунок 15: Подтверждение того, что google_search добавлен в качестве инструмента в Agent1.

8. Разверните агент в Cloud Run

Теперь давайте развернем созданный агент в Cloud Run ! С Cloud Run вы можете быстро создавать приложения или веб-сайты на полностью управляемой платформе.

Вы можете запускать фронтенд и бэкенд сервисы, пакетные задания, размещать LLM-ы и обрабатывать задачи в очередях без необходимости управления инфраструктурой.

В терминале редактора Cloud Shell , если у вас все еще запущен сервер ADK (Agent Development Kit) , нажмите Ctrl+C, чтобы остановить его.

Перейдите в корневой каталог проекта.

cd ~/adkui

Получите код развертывания. После выполнения команды вы должны увидеть файл deploycloudrun.py в панели обозревателя редактора Cloud Shell.

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

Проверьте параметры развертывания в файле deploycloudrun.py. Мы будем использовать команду adk deploy для развертывания нашего агента в Cloud Run . ADK (Agent Development Kit) имеет встроенную опцию для развертывания агента в Cloud Run . Нам необходимо указать такие параметры, как идентификатор проекта Google Cloud, регион и т. д. Для пути к приложению этот скрипт предполагает, что agent_path=./Agent1. Мы также создадим новую учетную запись службы с необходимыми разрешениями и подключим ее к Cloud Run . Cloud Run необходим доступ к таким сервисам, как Vertex AI и Cloud Storage, для запуска агента.

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

Запустите скрипт deploycloudrun.py **. Развертывание должно начаться, как показано на рисунке ниже.**

python3 deploycloudrun.py

Если вы получили подтверждающее сообщение, как показано ниже, нажмите Y и Enter для просмотра всех сообщений. Скрипт depoycloudrun.py предполагает, что ваш агент находится в папке Agent1, созданной выше.

Рисунок 16: Развертывание агента в Cloud Run, нажмите Y для получения подтверждающих сообщений.

После завершения развертывания вы должны увидеть URL-адрес службы, примерно такой: https://agent1service-78833623456.us-central1.run.app
Чтобы запустить приложение, откройте URL-адрес в веб-браузере.

        Figure 17: Agent running in Cloud Run

9. Создайте агента с субагентом и пользовательским инструментом.

В предыдущем разделе вы создали одного агента со встроенным инструментом поиска Google. В этом разделе вы создадите многоагентную систему, в которой агенты смогут использовать собственные пользовательские инструменты.

Сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
Нажмите кнопку «+», чтобы создать нового агента. В диалоговом окне агента введите «Agent2» (Рисунок 18) и нажмите «Создать».

Рисунок 18: Создание нового приложения Agent.

В разделе инструкций Agent2 введите следующее.

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

Теперь добавим субагента к корневому агенту. Для этого нажмите кнопку «+» в левой части меню «Субагент» внизу левой панели (Рисунок 19) и выберите « LLM Agent ». Это создаст нового агента в качестве нового субагента корневого агента.

Рисунок 19: Добавление нового суб-агента.

В инструкции для sub_agent_1 введите следующий текст.

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

Теперь добавим пользовательский инструмент к этому вспомогательному агенту. Этот инструмент будет вызывать модель Imagen для генерации изображения в соответствии с инструкциями пользователя. Для этого сначала щелкните по вспомогательному агенту, созданному на предыдущем шаге, и нажмите кнопку «+» рядом с меню «Инструменты». Из списка параметров инструмента выберите « Инструмент функций ». Этот инструмент позволит нам добавить собственный пользовательский код.

Рисунок 20: Щелкните инструмент «Функция», чтобы создать новый инструмент. 8. В диалоговом окне назовите инструмент Agent2.image_creation_tool.create_image .

Рисунок 21: Добавить название инструмента

Нажмите кнопку «Сохранить» , чтобы сохранить изменения.
В терминале редактора Cloud Shell нажмите Ctrl+S , чтобы остановить сервер adk .
В терминале введите следующую команду для создания файла image_creation_tool.py .

touch ~/adkui/Agent2/image_creation_tool.py

Откройте только что созданный файл image_creation_tool.py , щелкнув по нему в панели проводника редактора Cloud Shell . Замените содержимое файла image_creation_tool.py следующим содержимым и сохраните его (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

Сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .

На вкладке пользовательского интерфейса ADK (Agent Development Kit) выберите Agent2 в списке агентов и нажмите кнопку редактирования (значок пера). В визуальном редакторе ADK (Agent Development Kit) нажмите кнопку «Сохранить», чтобы сохранить изменения.
Теперь мы можем протестировать нового агента.
В интерфейсе чата ADK (Agent Development Kit) введите следующую подсказку. Вы также можете попробовать другие подсказки. Вы должны увидеть результаты, показанные на рисунке 22.

Create an image of a cat

Рисунок 22: Интерфейс чата ADK UI

10. Создайте агент рабочего процесса.

Если на предыдущем этапе создавался агент с субагентом и специализированными инструментами для создания изображений, то на этом этапе основное внимание уделяется совершенствованию возможностей агента. Мы улучшим процесс, обеспечив оптимизацию первоначального запроса пользователя перед генерацией изображения. Для этого в корневой агент будет интегрирован последовательный агент, который будет обрабатывать следующий двухэтапный рабочий процесс:

Получите приглашение от корневого агента и выполните улучшение приглашения.
Перешлите уточненное сообщение агенту, создающему изображение, для создания окончательного изображения с помощью IMAGEN.
Сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
Выберите Agent2 в списке агентов и нажмите кнопку «Редактировать» (значок пера) .
Щелкните по Agent2 (Корневой агент) и нажмите кнопку «+» рядом с меню «Подагенты». Затем из списка параметров выберите «Последовательный агент».
Вы должны увидеть структуру агента, подобную той, что показана на рисунке 23.

Рисунок 23: Последовательная структура агентов

Теперь добавим первого агента в Sequential Agent , который будет выступать в роли усилителя подсказок. Для этого нажмите кнопку «Добавить субагента» в поле SequentialAgent и выберите LLM Agent.
Нам нужно добавить еще одного агента в последовательность, поэтому повторите шаг 6, чтобы добавить еще одного агента LLM (нажмите кнопку «+» и выберите LLMAgent ).
Щелкните по sub_agent_4 и добавьте новый инструмент, щелкнув значок «+» рядом с инструментами на левой панели. Выберите « Функциональный инструмент » из предложенных вариантов. В диалоговом окне назовите инструмент Agent2.image_creation_tool.create_image и нажмите «Создать».
Теперь мы можем удалить sub_agent_1, поскольку он был заменен более продвинутым sub_agent_2 . Для этого нажмите кнопку «Удалить» справа от sub_agent_1 на диаграмме.

Рисунок 24: Удалить sub_agent_1 10. Наша структура агентов выглядит так же, как на рисунке 25.

Рисунок 25: Окончательная структура улучшенного агента.

Нажмите на sub_agent_3 и в поле "Инструкции" введите следующее.

     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_agent_4 . Измените инструкцию на следующую.

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

Нажмите кнопку «Сохранить».
Перейдите в панель обозревателя редактора Cloud Shell и откройте файлы YAML агента. Файлы агента должны выглядеть следующим образом.

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

Давайте теперь это проверим.
Сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
Выберите Agent2 из списка агентов. И введите следующую команду.

Create an image of a Cat

Пока работает агент, вы можете посмотреть в терминале редактора Cloud Shell , что происходит в фоновом режиме. Конечный результат должен выглядеть как на рисунке 26.

Рисунок 26: Тестирование агента

11. Создайте агента с помощью Agent Builder Assistant.

Agent Builder Assistant — это часть ADK Visual Builder , позволяющая интерактивно создавать агентов с помощью подсказок в простом чат-интерфейсе, обеспечивая различную степень сложности. Используя ADK Visual Builder , вы можете получать мгновенную визуальную обратную связь по создаваемым агентам. В этой лабораторной работе мы создадим агента, способного генерировать HTML-комикс по запросу пользователя. Пользователи могут задать простой вопрос, например: «Создайте комикс о Гензеле и Гретель», или ввести целую историю. Затем агент проанализирует повествование, разделит его на несколько панелей и использует Nanobanana для создания визуальных элементов комикса, в конечном итоге упаковав результат в HTML-формат.

Рисунок 27: Пользовательский интерфейс помощника по созданию агентов.

Давайте начнём!

Сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
В графическом интерфейсе ADK (Agent Development Kit) нажмите кнопку «+» , чтобы создать нового агента .
В диалоговом окне введите " Agent3 " и нажмите кнопку " Создать ".

Рисунок 28: Создание нового агента Agent3

В панели помощника справа введите следующую подсказку. Приведенная ниже подсказка содержит все необходимые инструкции для создания системы агентов и формирования 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.

Оператор может попросить вас ввести модель для использования, в этом случае выберите gemini-2.5-pro из предложенных вариантов.

Рисунок 29: Введите gemini-2.5-pro, если появится запрос на ввод используемой модели.

Ассистент может представить план и попросить вас подтвердить, можно ли продолжить. Проверьте план, введите «ОК» и нажмите «Enter» .

Рисунок 30: Нажмите OK, если план выглядит нормально. 8. После завершения работы помощника вы должны увидеть структуру агента, как показано на рисунке 31.

Рисунок 31: Агент, созданный помощником по созданию агентов 9. Внутри image_synthesis_agent (ваше имя может отличаться) щелкните инструмент "Agent3.tools.image_generation.gene...". Если последняя часть имени инструмента не image_generation.generate_image, измените ее на image_generation.generate_image . Если имя уже установлено, менять его не нужно. Нажмите кнопку "Сохранить" , чтобы сохранить изменения.

Рисунок 32: Измените имя инструмента на image_generation.generate_image и нажмите «Сохранить».

Внутри папки assembly_agent (имя вашего агента может отличаться) щелкните инструмент **Agent3.tools.file_writer.write_comic_...**. Если последняя часть имени инструмента не **file_writer.write_comic_html**, измените ее на **file_writer.write_comic_html**.

Рисунок 33: Измените имя инструмента на file_writer.write_comic_html 11. Нажмите кнопку «Сохранить» в левом нижнем углу левой панели, чтобы сохранить созданный агент. 12. В панели обозревателя редактора Cloud Shell разверните папку Agent3 , и внутри папки Agent3/ должна быть папка tools . Щелкните Agent3/tools/file_writer.py , чтобы открыть его, и замените содержимое Agent3/tools/file_writer.py следующим кодом. Нажмите Ctrl+S для сохранения. Примечание: Хотя помощник агента, возможно, уже создал правильный код, для этой лабораторной работы мы будем использовать проверенный код.

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

В панели обозревателя редактора Cloud Shell разверните папку Agent3 , и внутри папки **Agent3/** должна быть папка tools . Щелкните файл Agent3/tools/image_generation.py , чтобы открыть его, и замените содержимое Agent3/tools/image_generation.py следующим кодом. Нажмите Ctrl+S для сохранения. Примечание: Хотя помощник агента, возможно, уже создал правильный код, для этой лабораторной работы мы будем использовать проверенный код.

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

Ниже для вашего означения представлены окончательные YAML-файлы, созданные в среде автора (обратите внимание, что файлы в вашей среде могут немного отличаться). Пожалуйста, убедитесь, что структура YAML-файлов вашего агента соответствует структуре, отображаемой в визуальном конструкторе ADK .

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

Перейдите на вкладку ADK (Agent Development Kit) UI, выберите " Agent3 " и нажмите кнопку редактирования (значок пера).
Нажмите кнопку «Сохранить» в левом нижнем углу экрана. Это сохранит все изменения кода, внесенные вами в основной агент.
Теперь мы можем начать тестирование нашего агента!
Закройте текущую вкладку пользовательского интерфейса ADK (Agent Development Kit) и вернитесь на вкладку редактора Cloud Shell .
В терминале во вкладке «Редактор Cloud Shell» сначала перезапустите сервер ADK (Agent Development Kit) . Перейдите в терминал, где вы запустили сервер ADK (Agent Development Kit) , и нажмите CTRL+C, чтобы выключить сервер, если он все еще работает. Выполните следующие действия, чтобы снова запустить сервер.

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

#start the server
adk web

Нажмите Ctrl+Click на URL-адресе (например, http://localhost:8000 ), отображаемом на экране. В вкладке браузера должен отобразиться графический интерфейс ADK (Agent Development Kit) .
Выберите Agent3 из списка агентов.
Введите следующую подсказку

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.

Во время работы агента вы можете просматривать события в терминале редактора Cloud Shell .
Генерация всех изображений может занять некоторое время, поэтому, пожалуйста, наберитесь терпения или выпейте кофе! Когда начнется генерация изображений, вы сможете увидеть изображения, связанные с сюжетом, как показано ниже.

Рисунок 34: История Момотаро в виде комикса № 25. Если все пройдет гладко, сгенерированный HTML-файл должен быть сохранен в папке html. Если вы хотите внести улучшения в работу Агента, вы можете вернуться к помощнику Агента и попросить его внести дополнительные изменения!

Рисунок 35: Содержимое выходной папки

Если шаг 25 выполнен правильно и в выходной папке появился файл comic.html , вы можете проверить это, выполнив следующие действия. Прежде всего, откройте новый терминал, щелкнув «Терминал» > «Новый терминал» в главном меню редактора Cloud Shell . Это должно открыть новый терминал.

#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+Click на http://0.0.0.0:8080

Рисунок 36: Работающий локальный веб-сервер

Содержимое папки должно отобразиться во вкладке браузера. Щелкните по HTML-файлу (например, comic.html). Комикс должен отобразиться, как показано ниже (ваш результат может немного отличаться).

Рисунок 37: Запуск на localhost

12. Уборка

Теперь давайте уберём то, что мы только что создали.

Удалите только что созданное приложение Cloud Run . Перейдите в Cloud Run , открыв Cloud Run . Вы должны увидеть приложение, созданное на предыдущем шаге. Установите флажок рядом с приложением и нажмите кнопку «Удалить».

Рисунок 38: Удаление приложения Cloud Run. 2. Удалите файлы в Cloud Shell.

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

13. Заключение

Поздравляем! Вы успешно создали агентов ADK (Agent Development Kit) с помощью встроенного визуального конструктора ADK . Вы также научились развертывать приложение в Cloud Run . Это значительное достижение, охватывающее основной жизненный цикл современного облачного приложения и обеспечивающее вам прочную основу для развертывания собственных сложных агентских систем.

Краткий обзор

В этой лабораторной работе вы научились:

Создайте многоагентное приложение с помощью ADK Visual Builder.
Разверните приложение в Cloud Run.

Полезные ресурсы