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. 要求
准备工作
- 在 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 控制台，请查看这篇 博文。
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 文档。