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

1. 简介

想象一下，只需几秒钟，就能将简单的文字描述转化为生动细致的图片。这就是生成式媒体的力量，这是一个快速发展的领域，正在重塑您创作和互动视觉内容的方式。Google 的 Imagen 3 on Vertex AI 等模型为应用开发者带来了先进的生成式 AI 功能。

Imagen 3 是 Google 迄今为止质量最高的文生图模型。它能够生成细节惊人的图片。因此，开发者在构建新一代 AI 产品时可以更好地掌控，将自己的想象力转化为高画质的视觉素材。详细了解 Imagen on Vertex AI。

此 Codelab 将引导您使用 Google Gen AI SDK 来充分发挥 Imagen 的强大功能。您不仅会探索如何根据文本提示生成精美图片，还会了解如何使用 Python 界面框架 Mesop 将此功能集成到 Web 应用中。

前提条件

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

学习内容

如何使用 Google Gen AI SDK for 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 for Python：

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

8. 测试 Imagen 3

您可以在此处使用自己的文本提示来试用 Imagen。您可以生成各种风格的图片，从写实风格到动画风格，再到各种艺术风格。您还可以指定具体的拍摄角度、镜头等。您的原始文本提示也会通过基于大语言模型的功能进行重写，旨在生成更高质量的图片，更好地反映原始提示的意图。

注意：生成人物图像需要额外的访问权限。在此期间，如果您的提示包含人物或人脸生成，您会收到错误消息。

以下是一些您可以尝试的示例提示：

一顶米色棒球帽，顶部用白色泡泡状缝线字母写着“good vibes”，字母轮廓为霓虹绿色。
一家奇特的糖果店。
一张拉斯维加斯的卡通明信片，上面写着城市名称，右下角有一张邮票。
一只小狗和一只小猫在玩毛线球。

9. 清理

停止申请

返回到您启动应用的终端，然后按 Ctrl C 退出。

停用虚拟环境

在同一终端中，输入以下命令：

deactivate

10. 总结

恭喜！您已成功完成此 Codelab，并使用 Imagen 构建了一个应用，还生成了一些图片。

调查问卷

请填写这份简短的调查问卷，告诉我们您对此 Codelab 的看法。