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 应用
- 适用于使用 Imagen 的映像生成用例的 Java Spring Boot 应用
- 用于输入和响应提示的交互式界面
2. 要求
准备工作
- 在 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 等。您可以按照以下步骤创建此项目所需的数据库对象：
- 点击“实例”页面上的“创建实例”来创建实例。
- 输入下图所示的详细信息，然后点击“创建”：
- 创建完成后，在实例概览页面中点击“创建数据库”
- 将数据库的名称提供为“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 应用。
- 在左侧的 Database 窗格中点击 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 终端中运行以下命令，快速直接将 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 编码的字符串格式返回响应。为了将其转换为图片，我们针对图片对象使用了 JavaScript setattribute 方法（在 getImage.js 文件中），如下所示（在 getImage.HTML 文件中）：
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. 构建和部署
现在，您已经克隆了代码，替换了适用于项目、区域和身份验证凭据的占位符值，接下来我们继续构建和部署应用。依次使用以下 3 个命令，使用相应 build 和 build 前往 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 实例，方法是导航到您刚刚为此项目创建的实例，然后点击实例概览页面右上角的“删除实例”按钮
- 您也可以前往“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 文档。