このページは Cloud Translation API によって翻訳されました。

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 Data as a Service 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 を使用します。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 アプリケーションの作成を開始します。

左側の [Database] ペインで [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. Spring Boot と Spanner を使用してポーズデータ用の REST API をビルドする

Spring Boot と Google Cloud コンソールについてよく理解するには、こちらのブログをご覧ください。

Spring Boot アプリをブートストラップするこのアプリをゼロからブートストラップするには、こちらのブログをご覧ください。repo からクローンを作成してアクションに入るには、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 クラスです。

template フォルダの 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 ファイルの画像オブジェクトに対して、（getImage.js ファイル内の）JavaScript setattribute メソッドを次のように使用しています。

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 のドキュメントでモデルの詳細を確認する。