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

大体流程图

构建内容

您将创建

一个 Java Spring Boot 应用，用于 Spanner 数据即服务 API
一个 Java Spring Boot 应用，用于使用 Imagen 的图片生成用例
一个用于提示输入和响应的互动式界面

2. 要求

一个浏览器，例如 Chrome 或 Firefox
启用了结算功能的 Google Cloud 项目

准备工作

在 Google Cloud 控制台的项目选择器页面上，选择或创建一个 Google 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. 使用 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 类，其中包含用于分别与 Imagen API 和 Spanner 数据服务器 API 进行交互的字段、getter 和 setter。

模板文件夹中的 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 个命令在 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 实例，方法是前往您刚刚为此项目创建的实例，然后点击实例概览页面右上角的“删除实例”按钮
您还可以前往 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 个方法：将姿势保存到数据库和上传图片方法。如需详细了解该模型，请参阅 Imagen on Vertex AI 文档。

使用 Spanner 和 Vertex AI Imagen API 将数据传输到生成式 AI 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。