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

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

1. Введение

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

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

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

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

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

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

Как использовать SDK Google Gen AI для 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

Установите Mesop:

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, предназначенной для создания изображений более высокого качества, которые лучше отражают первоначальный замысел.

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

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

Бежевая бейсболка с надписью «good vibes» (хорошие вибрации), выполненной белыми объемными вышитыми буквами с неоново-зеленой обводкой.
Причудливый магазин сладостей.
Карикатурная открытка с изображением Лас-Вегаса, на которой название города написано словами, а в правом углу наклеена почтовая марка.
Щенок и котенок играют с клубком пряжи.

9. Уборка

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

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

Отключите виртуальную среду.

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

deactivate

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

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

Опрос

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