透過 Spanner 和 Vertex AI Imagen API 將資料轉移至生成式 AI

1. 簡介

在本程式碼實驗室中，您將使用 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 等，請參閱這篇網誌。您可以按照下列步驟，建立這個專案所需的資料庫物件：

在執行個體頁面上按一下「建立執行個體」，建立執行個體。
如以下圖片所示輸入詳細資料，然後按一下「建立」：

建立完成後，在執行個體總覽頁面中，按一下「CREATE DATABASE」(建立資料庫)
將資料庫命名為「first-spanner-db」，在「DDL TEMPLATES」(DDL 範本) 區段中輸入下列 DDL，然後按一下「SUBMIT」(提交)：

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. 使用 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 .

傳遞必要參數，並確認應用程式已部署。產生的服務網址應可列出在 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 是 POJO 類別，內含欄位、getter 和 setter，分別與 Imagen API 和 Spanner 資料伺服器 API 介接。

範本資料夾中的 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 終端機中的專案資料夾、建構，然後在 Cloud Shell 電腦中進行本機測試：

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

將應用程式部署至 Cloud Run，以便在雲端使用。如要這麼做，請在專案資料夾中，透過 Cloud Shell 終端機執行下列指令：

gcloud run deploy –source .

傳遞必要參數，並確認應用程式已部署。

7. 試用版

應用程式部署完成後，終端機中應該會顯示服務網址。點選連結，您就會看到姿勢圖像生成應用程式在 Google Cloud 無伺服器環境中執行！

8. 清理

如要避免系統向您的 Google Cloud 帳戶收取本文章所用資源的費用，請按照下列步驟操作：

在 Google Cloud 控制台中前往「管理資源」頁面。
在專案清單中選取要刪除的專案，然後按一下「刪除」
在對話方塊中輸入專案 ID，然後按一下「關閉」刪除專案
如果不想刪除專案，請刪除 Spanner 執行個體，方法是前往您為這個專案建立的執行個體，然後按一下執行個體總覽頁面右上角的「DELETE INSTANCE」(刪除執行個體) 按鈕
您也可以前往 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 說明文件。