Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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 データ用の 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);

データベースとテーブルは、最後の手順の結果として作成されます。それでは、Spring Boot アプリケーションの構築を進めるために、Yoga_Poses テーブルにいくつかの行を挿入しましょう。

左側の [データベース] ペインで [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 アプリをブートストラップするこのアプリをゼロからブートストラップするには、こちらのブログをご覧ください。リポジトリからクローンを作成してアクションを開始するには、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. ビルドとデプロイ

コードを複製し、プロジェクト、リージョン、認証情報に合わせてプレースホルダの値を置き換えたので、アプリのビルドとデプロイに進みましょう。次の 3 つのコマンドを 1 つずつ使用して、Cloud Shell ターミナルでプロジェクトフォルダに移動し、ビルドしてから 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 のドキュメントをご覧ください。