1. はじめに
シンプルなテキストの説明を、鮮やかで詳細な画像に数秒で変換できることを想像してみてください。これが生成メディアの力です。生成メディアは急速に進化している分野であり、ビジュアル コンテンツの作成方法や操作方法を再構築しています。Vertex AI の Google の Imagen 3 などのモデルは、最先端の生成 AI 機能をアプリケーション デベロッパーに提供しています。
Imagen 3 は、Google のこれまでで最も高品質なテキスト画像変換モデルです。驚くほど詳細な画像を生成できます。これにより、デベロッパーは、想像力を高画質のビジュアル アセットに変換する次世代の 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
10. まとめ
おめでとうございます！Imagen を使用してアプリケーションを構築し、画像を生成することで、この Codelab を完了しました。
アンケート
この Codelab のご感想を、こちらの簡単なアンケートにご記入のうえお聞かせください。