この Codelab について
1. はじめに
簡単なテキストの説明を、鮮やかで詳細な画像に変換するのに数秒しかかからないとしたらどうでしょう。これは生成メディアの力です。生成メディアは急速に進化しており、ビジュアル コンテンツの作成方法や操作方法を再構築しています。Google の Vertex AI の Imagen 3 などのモデルは、最先端の生成 AI 機能をアプリケーション デベロッパーに提供します。
Imagen 3 は、Google がこれまでに開発した中で最も高品質な Text-to-image モデルです。驚くほど細部まで写った画像を作成できます。これにより、デベロッパーは、想像力を高品質のビジュアル アセットに変換する次世代の AI プロダクトを構築する際に、より細かく制御できるようになります。Vertex AI の Imagen の詳細を確認する。
この Codelab では、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、4aspect_ratio: 1:1、9:16、16:9、3:4、4:3safety_filter_level: BLOCK_LOW_AND_ABOVE、BLOCK_MEDIUM_AND_ABOVE、BLOCK_ONLY_HIGH、BLOCK_NONEperson_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 を試すことができます。フォトリアリズムからアニメーション、さまざまな芸術的なスタイルまで、さまざまなスタイルの画像を生成できます。特定のカメラ アングルやレンズなどを指定することもできます。元のテキスト プロンプトも、元のプロンプトの意図をより反映した高品質の画像を生成することを目的とした LLM ベースの機能によって書き換えられます。
注: 人物の画像を生成するには、追加のアクセス権が必要です。プロンプトに人物や顔の生成が含まれている場合は、エラーが発生します。
以下に、試すことができるプロンプトの例を示します。
- ベージュ色の野球帽。上部に「good vibes」と白い泡状のステッチ文字で書かれており、ネオングリーンの枠線が引かれている。
- 風変わりなキャンディーショップ。
- ラスベガスの漫画ポストカード。都市名が書かれ、右隅に切手が貼られています。
- 毛糸玉で遊ぶ子犬と子猫。
9. クリーンアップ
アプリケーションを停止する
アプリケーションを起動したターミナルに戻り、Ctrl+C で終了します。
仮想環境を無効にする
同じターミナルで、次のコマンドを入力します。
deactivate