Spanner と Vertex AI Imagen API を使用した生成 AI へのデータから

1. はじめに

この Codelab では、Java、Spring Boot、Cloud Spanner データベース、Vertex AI Imagen API を使用して、AI 搭載のポーズ生成ツールを構築します。ユーザーがプロンプトを入力すると、アプリケーションはそのプロンプトに基づいてポーズを生成します。また、REST API として公開されている Spanner データベースのデータも使用します。これは、Google Cloud 上の Spring Boot で生成 AI の機能をデモンストレーションする、楽しくて教育的な方法です。

使用するサービスのリストは次のとおりです。

Cloud Spanner
Vertex AI Imagen API
Cloud Run

大まかなフロー図

作成するアプリの概要

作成するアプリは次のとおりです。

Spanner データ（サービスとしての API）用の Java Spring Boot アプリケーション
Imagen を使用した画像生成ユースケース用の Java Spring Boot アプリケーション
プロンプト入力とレスポンス用のインタラクティブなユーザーインターフェース

2. 必要なもの

ブラウザ（Chrome、Firefox など）
課金を有効にした Google Cloud プロジェクト

始める前に

[Google Cloud コンソール] の [プロジェクトセレクタ] ページで、Google Cloud プロジェクトを選択または作成します。
Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトで課金が有効になっているかどうかを確認する方法について
必要な API（Cloud Spanner API、Vertex AI API、Cloud Run API、Cloud Functions API）がすべて有効になっていることを確認します。
Cloud Shell（Google Cloud で動作するコマンドライン環境）を使用します。この環境には bq がプリロードされています。gcloud コマンドとその使用方法については、ドキュメントをご覧ください。

Cloud コンソールで、[Cloud Shell をアクティブにする] をクリックします。

プロジェクトが設定されていない場合は、次のコマンドを使用して設定します。

gcloud config set project <YOUR_PROJECT_ID>

アクティブな Google Cloud プロジェクトで Cloud Spanner ページに移動して、開始します。

3. Spanner でデータを準備する

アプリを作成する前に、Cloud Spanner のインスタンス、データベース、テーブルを作成して、データベースの設定を完了しましょう。Cloud Spanner の機能、DDL、DML などの詳細については、こちらのブログをご覧ください。このプロジェクトに必要なデータベースオブジェクトを作成する手順は次のとおりです。

[インスタンス] ページで [インスタンスを作成] をクリックして、インスタンスを作成します。
次の図に示すように詳細を入力し、[作成] をクリックします。

作成したら、インスタンスの概要ページで [データベースを作成] をクリックします。
データベースの名前として「first-spanner-db」を指定し、[DDL テンプレート] セクションに次の DDL を入力して、[送信] をクリックします。

CREATE TABLE Yoga_Poses(
  Pose_Id   INT64 NOT NULL,
  Name  STRING(1024),
  Breath STRING(1024),
  Description STRING(1024)
) PRIMARY KEY(Pose_Id);

最後のステップで、データベースとテーブルが作成されます。次に、Yoga_Poses テーブルにいくつかの行を挿入して、Spring Boot アプリケーションの構築を開始しましょう。

左側の [データベース] ペインで [Spanner Studio] をクリックし、次の図に示すように新しいクエリエディタタブを開きます。

次の INSERT クエリを実行します。

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(1, 'STAND', 'INHALE AND EXHALE', 
'STAND WITH YOUR FEET HIP WIDTH APART AND ARMS RESTING BY THE SIDES');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(2, 'PLANK', 'INHALE OR EXHALE', 
'PLANT YOUR TOES AND PALMS ON THE MAT WITH BODY PARALLEL TO THE GROUND');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(3, 'SIT', 'INHALE AND EXHALE', 
'SIT ON THE FLOOR LEGS CROSSED');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(4, 'BEND', 'EXHALE', 
'FOLD FORWARD AS YOU STAND, HANDS REACHING TO THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(5, 'PUSH UP', 'EXHALE', 
'PLANK WITH ELBOWS ON MAT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(6, 'SEATED FORWARD BEND', 'EXHALE', 
'FOLD FORWARD AS YOU SIT, HANDS TRYING TO REACH THE FEET');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(7, 'LUNGE', 'EXHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK LEG STRAIGHT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(8, 'COURTESY LUNGE', 'INHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK KNEE TOUCHING THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(9, 'BANK BEND', 'INHALE', 
'STAND WITH ARMS UP AND BODY BENT BACKWARDS, ARCHING YOUR SPINE, LOOKING AT THE SKY');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(10, 'BICEP ACTION', 'INHALE AND EXHALE', 
'CURL, PRESS AND WORK YOUR BICEPS');

これで、Spanner のインスタンス、データベース、テーブル、データが作成され、アプリケーションで使用できるようになりました。

4. ポーズデータ用の REST API を Spring Boot と Spanner で構築する

Spring Boot と Google Cloud コンソールに慣れるには、こちらのブログをご覧ください。

Spring Boot アプリをブートストラップするこのアプリをゼロからブートストラップするには、こちらのブログをご覧ください。リポジトリからクローンを作成してすぐに使用するには、Cloud Shell ターミナルで次のコマンドを実行します。

git clone https://github.com/AbiramiSukumaran/spanner-springb

これにより、Cloud Shell マシンにプロジェクト spanner-springb が作成されます。アプリのコンポーネントについては、ブログをご覧ください。

アプリをビルドして実行するこれを行うには、Cloud Shell ターミナルから次のコマンドを実行します。

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

ポーズ生成ツールアプリで使用できるように、Cloud Run にアプリをデプロイするこれを行うには、Cloud Shell ターミナルから次のコマンドを実行します。

gcloud run deploy –source .

必要なパラメータを渡し、アプリがデプロイされていることを確認します。生成されたサービス URL で、Spanner に作成されたデータを一覧表示できるはずです。

5. Spring Boot、Spanner、Imagen を使用してポーズ生成ツールアプリをブートストラップする

これで、フロー図の上部、つまり Spanner データをサービス（REST API）として使用できるようにする部分が完了しました。次に、Spanner データを呼び出し、プロンプトを使用して IMAGEN API を呼び出し、Base64 エンコードされた文字列を画像としてユーザーインターフェースに返すクライアントアプリケーションを作成しましょう。

これで、Spring Boot プロジェクトの構造とその重要性について理解できました。Cloud Shell ターミナルで次のコマンドを実行して、リポジトリを Cloud Shell マシンにクローンします。

git clone https://github.com/AbiramiSukumaran/genai-posegen

これにより、Cloud Shell マシンにプロジェクト genai-posegen が作成されます。クローンされたプロジェクト構造は、Cloud Shell エディタで次のように表示されます。

PromptController Java クラスには、データベースサービスの呼び出し、ビジネスロジックの実装、Imagen の生成 AI API の呼び出しもあります。このクラスは、ユーザーインターフェースへのデータ統合を処理する Thymeleaf テンプレートと連携します。このクラスには 3 つのサービスメソッドがあります。1）プロンプト入力を取得するメソッド、2）リクエストを処理して Imagen API を呼び出すメソッド、3）Imagen レスポンスを処理するメソッドです。

Prompt と Yoga は、Imagen API と Spanner データサーバー API とのインターフェースとなるフィールド、ゲッター、セッターを含む POJO クラスです。

templates フォルダの Index と getImage の HTML ファイルには、ユーザーインターフェースのテンプレートが含まれており、それぞれのフォルダに JS スクリプトと CSS スクリプトの依存関係があります。

Vertex AI Imagen API の統合 画像生成ユースケースでは、Vertex AI の Imagen API を次の形式で使用します。

https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict

Imagen の機能の詳細については、こちらをご覧ください。レスポンスは Base64 エンコードされた文字列形式で返されます。画像に変換するために、getImage.HTML ファイルで次のように、画像オブジェクトに対して JavaScript の setattribute メソッド（getImage.js ファイル内）を使用しました。

poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);

認証 Imagen API にアクセスするには、ベアラートークン認証を有効にする必要があります。この例では、アプリケーションのデフォルト認証情報 JSON アプローチを使用しました。Cloud Shell ターミナルから次のコマンドを実行し、ターミナルに表示される手順に沿って操作することで、実装できます。

gcloud auth application-default login

「Y」と入力して、アカウントで認証します。アクセスを許可し、ポップアップに表示される認証コードをコピーします。これにより、アプリケーションのデフォルト認証情報が JSON ファイルに保存されます。保存場所は /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json のようになります。

ファイルをダウンロードするか、cat コマンド（cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json）を実行して JSON ファイルの内容をコピーし、PromptController.java クラスの callImagen() メソッドでアプリケーションで使用します。認証の詳細については、こちらをご覧ください。

ユーザーインターフェース テンプレートエンジンとして Thymeleaf を使用して、フロントエンドテンプレートファイルにデータを解析してレンダリングし、ユーザーインターフェースに洗練されたデザインを追加しました。HTML に似ていますが、レンダリングされたデータを操作するための属性が追加されています。index.html にはランディングページのデザインコンポーネントが含まれており、ユーザーはトピックを選択してオーバーライドプロンプトを追加し、目的の画像を生成できます。

6. ビルドとデプロイ

コードをクローンし、プロジェクト、リージョン、認証情報に応じてプレースホルダの値を置き換えたので、アプリのビルドとデプロイに進みましょう。コマンドを使用して Cloud Shell ターミナルでプロジェクトフォルダに移動し、次の 3 つのコマンドを 1 つずつ実行して、Cloud Shell マシンでローカルにビルドしてデプロイします。

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

Cloud Run にアプリをデプロイして、クラウドで使用できるようにします。これを行うには、プロジェクトフォルダ内の Cloud Shell ターミナルから次のコマンドを実行します。

gcloud run deploy –source .

必要なパラメータを渡し、アプリがデプロイされていることを確認します。

7. デモ

アプリがデプロイされると、ターミナルにサービス URL が表示されます。リンクをクリックすると、Google Cloud でサーバーレスで実行されているポーズ画像生成ツールアプリが表示されます。

8. クリーンアップ

この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。

Google Cloud コンソールで、[リソースの管理] ページに移動します。
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
プロジェクトを削除しない場合は、このプロジェクト用に作成したインスタンスに移動して Spanner インスタンスを削除し、インスタンスの概要ページの右上にある [インスタンスを削除] ボタンをクリックします。
Cloud Run サービスページに移動し、このプロジェクトで作成したサービスを選択して、削除ボタンをクリックしてサービスを削除することもできます。

9. 完了

このブログでは、Cloud Spanner にデータを保存して処理するフルスタック Spring Boot アプリケーションを、Cloud Run にデプロイされたインタラクティブなクライアントアプリケーションで Google Cloud Vertex AI の Imagen API を使用してポーズを生成できるようにしました。このブログのアーキテクチャ図のセクションには、Cloud Functions（Java）コンポーネントが表示されていますが、これはまだ実装していません。ご希望の場合は、ご協力ください。2 つの Java Cloud Functions を実装して、getimage.html ファイルにある 2 つのメソッド（ポーズをデータベースに保存するメソッドと画像をアップロードするメソッド）を実行できます。モデルの詳細については、Vertex AI の Imagen のドキュメントをご覧ください。