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

1. 簡介

想像一下，只要輸入簡單的文字描述，就能在幾秒內生成生動細緻的圖像。這就是生成式媒體的力量。這個領域正迅速發展，將徹底改變您製作及與視覺內容互動的方式。Vertex AI 中的 Google Imagen 3 等模型，為應用程式開發人員提供最先進的生成式 AI 功能。

Imagen 3 是 Google 至今為止品質最高的文字轉圖像模型。可生成細緻度令人驚豔的圖片。因此，開發人員在建構新一代 AI 產品時，能更全面地控管，將想像轉化為高畫質視覺素材。進一步瞭解 Vertex AI 上的 Imagen。

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

必要條件

已啟用計費功能和 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 編輯器中的這個檔案。

匯入程式庫

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」(變更並預覽)。系統應會開啟新視窗，顯示載入的應用程式，看起來應該會像這樣：

8. 測試 Imagen 3

您可以在這裡使用自己的文字提示詞試用 Imagen。您可以生成各種風格的圖像，包括寫實攝影、動畫和不同藝術風格。你也可以指定特定攝影機角度、鏡頭等。系統也會透過以 LLM 為基礎的功能重寫原始文字提示，生成更能反映原始提示意圖的高畫質圖像。

注意：如要生成人物圖像，必須取得額外的存取權。在此期間，如果提示包含人物或臉部生成內容，系統會顯示錯誤訊息。

以下列舉幾個可用的提示詞範例：

米色棒球帽，頂部以白色泡泡字體縫製「good vibes」，並以螢光綠勾邊。
充滿奇趣的糖果店。
拉斯維加斯卡通明信片，右下角有郵票，並標示城市名稱。
小狗和小貓在玩毛線球。

9. 清除

停止應用程式

返回啟動應用程式的終端機，然後按下 Ctrl C 鍵結束。

停用虛擬環境

在同一個終端機中輸入下列指令：

deactivate

10. 結語

恭喜！您已成功完成本程式碼研究室，並使用 Imagen 建構應用程式及生成一些圖片。

問卷調查

請填寫這份簡短的問卷調查，分享您對本程式碼研究室的看法。