在 Cloud Shell 中使用 Imagen 和 Mesop 构建图片生成应用

剩余时间：25 分钟

关于此 Codelab

上次更新时间：4月 4, 2025

Katie Nguyen 编写

1. 简介

想象一下，只需几秒钟，就能将简单的文字说明转换为色彩鲜艳、细节丰富的图片。这就是生成式媒体的强大之处。生成式媒体是一个快速发展的领域，正在重塑您创作和与视觉内容互动的方式。Vertex AI 上的 Google Imagen 3 等模型为应用开发者提供了最先进的生成式 AI 功能。

Imagen 3 是 Google 迄今为止最出色的文本转图片模型。它能够生成细节惊人的图片。因此，开发者在构建新一代 AI 产品时可以拥有更大的控制权，将他们的想象力转化为高品质的视觉素材资源。详细了解 Vertex AI 上的 Imagen。

此 Codelab 将引导您使用 Google Gen AI SDK 充分利用 Imagen 的强大功能。您不仅可以探索如何根据文本提示生成令人惊艳的图片，还可以使用 Python 界面框架 Mesop 将此功能集成到 Web 应用中。

前提条件

已启用结算功能和 Vertex AI API 的 Google Cloud 项目。详细了解如何设置项目和开发环境。

学习内容

如何使用 Python 版 Google Gen AI SDK 与 Imagen 3 进行交互
如何根据文本提示生成图片
如何构建 Mesop 应用并通过 Cloud Shell 运行该应用

所需条件

对 Python 有基本的了解
体验在 Cloud Shell 终端中运行命令
一台可以访问 Cloud Shell 的计算机

2. 设置环境并安装依赖项

打开 Cloud Shell Editor
点击右上角的“打开终端”按钮
在终端中输入以下命令以创建新文件夹：

mkdir my-imagen-app

cd my-imagen-app

在 Python 3 中创建虚拟环境：

python3 -m venv myenv

激活此虚拟环境：

source myenv/bin/activate

安装 Mesop：

pip3 install mesop

安装 Python 版 Google Gen AI SDK：

pip install google-genai

创建一个 Python 文件：

touch main.py

3. 应用设置

运行 Mesop 应用所需的所有代码都将存在于 main.py 中。在后续的每个步骤中，将其复制并依次粘贴到 Cloud Shell Editor 中的此文件中。

导入库

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

设置 Google Cloud 项目信息并创建客户端

设置项目 ID：

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 生成的图片的 Cloud Storage 位置或图片字节。

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 后，您就可以从 Cloud Shell 终端运行 Mesop 应用了。
```
mesop main.py
```
现在，点击右上角的“Web 预览”按钮，然后点击“更改端口”。在“端口号”框中输入 32123，然后点击“更改并预览”。系统应会打开一个新窗口，您可以在其中查看已加载的应用。该窗口应如下所示：