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 数据即服务 API 的 Java Spring Boot 应用
一个 Java Spring Boot 应用，用于使用 Imagen 的图片生成用例
用于提示输入和回答的交互式界面

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 页面，开始使用 Cloud Spanner

3. 使用 Spanner 准备数据

在创建应用之前，我们先创建 Cloud Spanner 实例、数据库和表，完成数据库设置。您可以参阅这篇博文，详细了解 Cloud Spanner 功能、DDL、DML 等。您可以按照以下步骤创建此项目所需的数据库对象：

点击实例页面上的“创建实例”，创建实例。
输入详细信息（如下图所示），然后点击“创建”：

创建完成后，在实例概览页面中，点击“创建数据库”
将数据库名称指定为“first-spanner-db”，然后在“DDL TEMPLATES”部分中输入以下 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 引导姿势生成器应用

至此，我们已完成流程图的上半部分，即以服务 (REST API) 的形式提供 Spanner 数据。现在，我们来创建一个客户端应用，该应用会调用 Spanner 数据，使用提示调用 IMAGEN API，并以图片的形式向界面返回 Base64 编码的字符串。

到目前为止，您应该已经熟悉 Spring Boot 项目结构及其重要性。因此，我们将直接跳到克隆 repo 的步骤，在 Cloud Shell 终端中运行以下命令，将 repo 克隆到您的 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. 恭喜

在此博文中，我们能够将在 Cloud Spanner 中存储和处理数据的全栈 Spring Boot 应用引入到部署在 Cloud Run 中的交互式客户端应用中，以使用 Google Cloud Vertex AI 的 Imagen API 生成姿势。在此博文的架构图部分中，您会看到 Cloud Functions（Java）组件，但我们从未实际操作过？如果您愿意贡献力量，可以认领此任务。您可以实现 2 个 Java Cloud Functions 函数，以执行 getimage.html 文件中的 2 种方法：将姿势保存到数据库和上传图片方法。如需详细了解该模型，请参阅 Imagen on Vertex AI 文档。