透過 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 的能力。

目前使用的服務如下：

  1. Cloud Spanner
  2. Vertex AI Imagen API
  3. Cloud Run

高階流程圖

60192bcbff4c39de.png

建構項目

您會自行建立

  • 專為 Spanner 資料即服務 API 提供的 Java Spring Boot 應用程式
  • 使用 Imagen 產生圖片用途的 Java Spring Boot 應用程式
  • 用於輸入提示和回覆的互動式使用者介面

2. 需求條件

  • 瀏覽器，例如 Chrome 或 Firefox
  • 已啟用計費功能的 Google Cloud 專案

事前準備

  1. 前往 Google Cloud 控制台的專案選取器頁面，選取或建立 Google Cloud 專案
  2. 確認 Cloud 專案已啟用計費功能。瞭解如何檢查專案是否已啟用帳單功能
  3. 請確認已啟用所有必要 API (Cloud Spanner API、Vertex AI API、Cloud Run API、Cloud Functions API)
  4. 您將使用 Cloud Shell，這是在 Google Cloud 中執行的指令列環境，已預先載入 bq。如要查看 gcloud 指令和使用方式，請參閱說明文件

在 Cloud 控制台中，按一下右上角的「啟用 Cloud Shell」：

51622c00acec2fa.png

如果尚未設定專案，請使用下列指令進行設定：

gcloud config set project <YOUR_PROJECT_ID>
  1. 前往「Cloud Spanner」頁面，即可開始使用有效的 Google Cloud 專案

3. 使用 Spanner 準備資料

建立應用程式前，請先建立 Cloud Spanner 執行個體、資料庫和資料表，完成資料庫設定。如要進一步瞭解 Cloud Spanner 的功能、DDL 和 DML 等，請參閱這篇網誌。您可以按照下列步驟，建立這項專案所需的資料庫物件：

  1. 在執行個體頁面按一下 [建立執行個體]，建立執行個體。
  2. 如下圖所示輸入詳細資料，然後按一下「建立」：

f869fcbb922027a5.png

  1. 建立完成後，請在執行個體總覽頁面中點選「建立資料庫」
  2. 提供資料庫名稱為「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 應用程式。

  1. 按一下左側「Database」窗格中的 Spanner Studio，並開啟新的查詢編輯器分頁，如下圖所示：

c86774e8fd32eca0.png

  1. 執行下列 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 控制台，請參閱這篇網誌。

  1. 啟動 Spring Boot 應用程式，如要從頭開始啟動這個應用程式，請查看這個網誌。如要從存放區複製並快速揮動，只要在 Cloud Shell 終端機中執行下列指令即可：
git clone https://github.com/AbiramiSukumaran/spanner-springb

這項工作應已在 Cloud Shell 機器中建立 spanner-springb 專案。如要瞭解應用程式元件，請參閱網誌。

  1. 請建構並執行應用程式。如要執行此操作，請從 Cloud Shell 終端機執行下列指令：
cd spanner-springb

./mvnw package

./mvnw spring-boot:run
  1. 在 Cloud Run 中部署應用程式，以供 pose 產生器應用程式使用。如要執行此操作，請從 Cloud Shell 終端機執行下列指令：
gcloud run deploy –source .

傳送必要參數，並確認應用程式已部署。產生的服務網址應該要能列出在 Spanner 建立的資料。

5. 使用 Spring Boot、Spanner 和 Imagen 啟動姿勢產生器應用程式

現在，我們已完成流程圖的上半部，也就是讓 Spanner 資料以服務 (REST API) 的形式提供。現在，我們要建立一個用戶端應用程式，以叫用 Spanner 資料、透過提示呼叫 IMAGEN API，並將 Base64 編碼字串以圖片形式傳回至使用者介面。

  1. 您現在已瞭解 Spring Boot 專案結構和重要性。因此，在 Cloud Shell 終端機執行下列指令，即可快速地將存放區複製到 Cloud Shell 機器：
git clone https://github.com/AbiramiSukumaran/genai-posegen

這個指令應該已在您的 Cloud Shell 機器中建立專案「genai-posegen」。在 Cloud Shell 編輯器中，複製的專案結構如下所示：

b19a94f895f74c62.png

PromptController Java 類別具有資料庫服務叫用、商業邏輯實作，以及 Imagen 的生成式 AI API 叫用。這個類別會與負責將資料整合至使用者介面的 Thymeleaf 範本互動。這個類別有 3 種服務方法：1) 用於取得提示輸入內容 2) 用於處理要求及叫用 Imagen API，以及 3) 處理圖片回應。

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 編碼字串格式傳回回應。為了將其轉換為圖片，我們使用圖片物件上的 javascript setattribute 方法 (位於 getImage.js 檔案中)，如 getImage.HTML 檔案中所示：

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

Authorization：您必須啟用不記名權杖驗證，才能使用 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 本機以進行本機測試。請逐一執行以下 3 個指令：

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

在 Cloud Run 中部署應用程式，以便使用者透過雲端存取。方法是從專案資料夾中的 Cloud Shell 終端機執行下列指令：

gcloud run deploy –source .

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

7. 展示模式

應用程式部署完成後，終端機中應該會顯示服務網址。點選連結，即可查看在 Google Cloud 上以無伺服器方式執行的圖片生成應用程式！

92bdb22109b2f756.gif

8. 清除所用資源

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

  1. 前往 Google Cloud 控制台中的「管理資源」頁面。
  2. 在專案清單中，選取要刪除的專案，然後按一下 [刪除]
  3. 在對話方塊中輸入專案 ID，然後按一下「關閉」以刪除專案
  4. 如果您不想刪除專案，請前往您剛為這項專案建立的執行個體，然後按一下執行個體總覽頁面右上角的「刪除執行個體」按鈕，即可刪除 Spanner 執行個體
  5. 您也可以前往 Cloud Run 服務頁面，選取在這項專案中建立的服務，然後按一下刪除按鈕刪除服務。

9. 恭喜

在這篇網誌文章中，我們成功提供完整堆疊的 Spring Boot 應用程式，應用程式會在 Cloud Spanner 中儲存及處理資料，然後透過部署於 Cloud Run 的互動式用戶端應用程式，使用 Google Cloud Vertex AI 的 Imagen API 產生姿勢。在這個網誌的架構圖部分中，您看到我們從未做過的 Cloud Functions (Java) 元件嗎？如果你想貢獻一己之力，就等你來拿。您可以實作 2 個 Java Cloud Functions 來執行 getimage.html 檔案中顯示的 2 種方法：將姿勢儲存至資料庫，以及上傳圖片方法。如要進一步瞭解模型，請參閱 Vertex AI 中的 Imagen 說明文件。