Создайте приложение для создания изображений с помощью Imagen и Mesop в Cloud Shell.

Минут осталось: 25

О практической работе

Последнее обновление: апр. 4, 2025

Авторы: Katie Nguyen

1. Введение

Представьте себе, что простое текстовое описание можно превратить в яркое, детальное изображение за считанные секунды. В этом сила генеративных медиа, быстро развивающейся области, которая меняет то, как вы создаете визуальный контент и взаимодействуете с ним. Такие модели, как Google Imagen 3 на Vertex AI, предоставляют разработчикам приложений самые современные возможности генеративного искусственного интеллекта.

Imagen 3 — это модель Google для преобразования текста в изображение высочайшего качества на сегодняшний день. Он способен создавать изображения с удивительной детализацией. Таким образом, разработчики получают больше контроля при создании продуктов искусственного интеллекта следующего поколения, которые преобразуют их воображение в высококачественные визуальные ресурсы. Узнайте больше об Imagen на Vertex AI .

Эта лаборатория кода поможет вам использовать возможности Imagen с помощью Google Gen AI SDK. Вы не только узнаете, как создавать потрясающие изображения из текстовых подсказок, но и интегрируете эту возможность в веб-приложение с помощью Mesop , платформы пользовательского интерфейса Python.

Предварительные условия

Проект Google Cloud с включенным биллингом и Vertex AI API . Узнайте больше о настройке проекта и среды разработки .

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

Как использовать Google Gen AI SDK для Python для взаимодействия с Imagen 3
Как генерировать изображения из текстовых подсказок
Как создать приложение Mesop и запустить его из Cloud Shell

Что вам понадобится

Базовое понимание Python
Опыт выполнения команд в терминале Cloud Shell
Компьютер с доступом к Cloud Shell

2. Настройка среды и установка зависимостей

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

mkdir my-imagen-app

Измените каталог на новую папку:

cd my-imagen-app

Создайте виртуальную среду в Python 3:

python3 -m venv myenv

Активируйте виртуальную среду:

source myenv/bin/activate

Установите Месоп:

pip3 install mesop

Установите Google Gen AI SDK для Python:

pip install google-genai

Создайте файл Python:

touch main.py

3. Настройка приложения

Весь код, необходимый для запуска приложения Mesop, будет находиться в main.py На каждом из следующих шагов последовательно копируйте и вставляйте его в этот файл в редакторе Cloud Shell.

Импортировать библиотеки

import base64
import mesop as me
from google import genai
from google.genai import types

Установите информацию о проекте Google Cloud и создайте клиент.

Установите идентификатор проекта:

PROJECT_ID = "[your-project-id]"

Замените [your-project-id] на имя вашего проекта Google Cloud при копировании этой строки кода.

Создать клиента:

client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

Загрузите модель генерации изображения

imagen_model = "imagen-3.0-generate-002"

Государственное управление

Определение управления состоянием позволяет хранить информацию на протяжении всего пути пользователя.

@me.stateclass
class State:
   input: str = ""
   enhanced_prompt: str = ""
   img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"

input : введенные пользователем данные, которые будут использоваться для генерации изображения.
enhanced_prompt : модель imagen-3.0-generate-002 предлагает возможность улучшить предоставленное вами приглашение. На основе исходного будет создано новое подробное приглашение, которое поможет создать изображения более высокого качества, и оно будет возвращено в этой переменной.
img_data : местоположение облачного хранилища или байты изображения, созданного с помощью Imagen 3.

4. Определить вспомогательные функции

Функция загрузки

Этот код будет выполнен при загрузке приложения. Он устанавливает режим приложения на системные цвета.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

Функция размытия

Эта функция сохраняет ввод пользователя в вашу переменную состояния.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5. Создать изображение с помощью Imagen

Эта функция вызывается, когда пользователь нажимает кнопку, чтобы отправить текстовую подсказку для создания изображения.

def generate_image(e: me.ClickEvent):
    state = me.state(State)
    image = client.models.generate_images(
        model=imagen_model,
        prompt=state.input,
        config=types.GenerateImagesConfig(
            number_of_images=1,
            aspect_ratio="1:1",
            enhance_prompt=True,
            safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
            person_generation="DONT_ALLOW",
        )
    )
    img = image.generated_images[0].image.image_bytes
    # Encode image in Base64 to display in web app
    img64 = base64.b64encode(img).decode('utf-8')
    state.enhanced_prompt = image.generated_images[0].enhanced_prompt
    state.img_data = f"data:image/png;base64,{img64}"

Вы можете настроить параметры, расположенные в GenerateImagesConfig :

number_of_images : 1, 2, 3, 4
aspect_ratio : 1:1, 9:16, 16:9, 3:4, 4:3
safety_filter_level : BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONE
person_generation : DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL

Примечание. Единственный вариант, который будет работать без дополнительного внесения в белый список, — это DONT_ALLOW.

6. Структура макета приложения

@me.page(
  on_load=load,
  path="/",
  title="Imagen 3",
)
def app():
   s = me.state(State)
   with me.box(
        style=me.Style(
            display="grid",
            width="100%",
            place_items="center",
            margin=me.Margin(top=100),
         )
    ):
        me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
        with me.box(
           style=me.Style(
              border_radius=16,
              padding=me.Padding.all(8),
              display="flex",
           )
        ):
            with me.box(
               style=me.Style(flex_grow=1)
            ):
                me.native_textarea(
                autosize=True,
                on_blur=on_blur,
                min_rows=8,
                placeholder="Enter your image prompt",
                style=me.Style(
                    padding=me.Padding(top=16, left=16),
                    width="700px",
                    border_radius=16,
                    outline="none",
                    overflow_y="auto",
                    border=me.Border.all(
                        me.BorderSide(style="none"),
                    ),
                    font_family="Google Sans",
                  ),
                )
            with me.content_button(
                type="icon",
                on_click=generate_image,
            ):
                me.icon("send")
        with me.box(style=me.Style(margin=me.Margin.all(8),
            width="700px",
            display="flex",
            align_items="center")
        ):
            me.image(
              src=s.img_data,
              style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
            )
            with me.box(
               style=me.Style(
                  padding=me.Padding.all(8),
                  background="white",
                  height="400px",
                  width="400px",
                  border_radius=16,
               )
            ):
                me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
                me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
            )

Этот код создает одностраничное приложение, которое включает в себя следующие компоненты:

Заголовок
Текстовая область для ввода подсказки изображения
Кнопка «Отправить», вызывающая generate_image .
Изображение, созданное Imagen
Расширенное приглашение возвращается вместе с изображением.

7. Запустите приложение в Cloud Shell

После того как вы скопировали все фрагменты кода в main.py , вы можете запустить приложение Mesop со своего терминала Cloud Shell.
```
mesop main.py
```
Теперь нажмите кнопку «Просмотр в Интернете» в верхнем правом углу, а затем нажмите «Изменить порт». Введите 32123 в поле «Номер порта» и нажмите «Изменить и просмотреть». Должно открыться новое окно, в котором вы сможете просмотреть загруженное приложение. Это должно выглядеть примерно так:

8. Тестовое изображение 3

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

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

Вот несколько примеров подсказок, которые вы можете попробовать:

Бежевая бейсболка с надписью «Хорошее настроение» сверху белыми буквами, вышитыми пузырьками и обведенными неоново-зеленым контуром.
Необычная кондитерская.
Мультяшная открытка с изображением Лас-Вегаса с написанным названием города и почтовой маркой в правом углу.
Щенок и котенок играют с клубком пряжи.

9. Очистка

Остановить приложение

Вернитесь в терминал, где вы запустили приложение, и закройте его, нажав Ctrl C.

Деактивировать виртуальную среду

В том же терминале введите следующую команду:

deactivate

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

Поздравляем! Вы успешно завершили эту лабораторную работу, создав приложение с помощью Imagen и создав несколько изображений.

Опрос

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

Следующие шаги

Сообщить об ошибке