在 Cloud Shell 中使用 Imagen 和 Mesop 建構圖像生成應用程式

還剩 25 分鐘

程式碼研究室簡介

上次更新時間：4月 4, 2025

作者：Katie Nguyen

1. 簡介

想像一下，只要幾秒鐘，就能將簡單的文字說明轉換為生動細緻的圖片。這就是生成式媒體的強大功能，這項技術發展迅速，正在改變我們創作及與視覺內容互動的方式。Vertex AI 上的 Google Imagen 3 等模型，可為應用程式開發人員提供最先進的生成式 AI 功能。

Imagen 3 是 Google 至今品質最優的文字轉圖像模型。這項技術可產生精細的圖片，因此，開發人員在建構新一代 AI 產品時，可享有更大的控管權，將想像力轉化為高品質的視覺素材資源。進一步瞭解 Vertex AI 上的 Imagen。

本程式碼實驗室將引導您使用 Google Gen AI SDK 發揮 Imagen 的強大功能。您不僅會瞭解如何根據文字提示產生精美圖片，還會使用 Mesop (Python UI 架構) 將這項功能整合至網路應用程式。

必要條件

已啟用計費功能和 Vertex AI API 的 Google Cloud 專案。進一步瞭解如何設定專案和開發環境。

課程內容

如何使用 Python 適用的 Google Gen AI SDK 與 Imagen 3 互動
如何使用文字提示生成圖像
如何建構 Mesop 應用程式，並透過 Cloud Shell 執行

軟硬體需求

對 Python 有基本瞭解
在 Cloud Shell 終端機中執行指令
可存取 Cloud Shell 的電腦

2. 設定環境並安裝依附元件

開啟 Cloud Shell 編輯器
按一下右上角的「Open Terminal」按鈕
在終端機中輸入下列指令，建立新的資料夾：

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 編輯器中的這個檔案。

匯入程式庫

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 Preview」按鈕，然後點選「Change port」。在「Port Number」(通訊埠編號) 方塊中輸入 32123，然後按一下「Change and Preview」(變更並預覽)。系統應會開啟新視窗，讓您查看已載入的應用程式。畫面應會顯示類似以下的畫面：