概览

生成式 AI 是一种技术，可以用来创建文本、视频、图片和代码等内容。Google Cloud 提供多种大语言模型和工具，例如 Gemini 和 Vertex AI，帮助您快速上手生成式 AI。您可以使用依托大语言模型的工具，创建和优化网站内容，提供对话式搜索体验。此外，您还可以帮助用户发现所需网页并优化网站导航。

目标

在本实验中，您将采用网站现代化改造解决方案，实现以下目标：

• 使用生成式 AI 简化内容生成流程，提升网站内容的质量和产出效率。
• 生成与网站文字内容相辅相成的图片。
• 将网站内容无缝翻译成目标语言。
• 在网站中集成 Vertex AI Search，助力用户发现所需信息。

设置

对于每个实验，您都会免费获得一个新的 Google Cloud 项目及一组资源，它们都有固定的使用时限。

1. 请使用无痕式窗口登录 Qwiklabs。

2. 留意实验的访问时限（例如 1:15:00）并确保能在相应时间段内完成实验。
   系统不提供暂停功能。如有需要，您可以重新开始实验，不过必须从头开始。

3. 准备就绪时，点击开始实验。

4. 请记好您的实验凭据（用户名和密码）。您需要使用这组凭据来登录 Google Cloud 控制台。

5. 点击打开 Google 控制台。

6. 点击使用其他账号，然后将此实验的凭据复制并粘贴到相应提示框中。
   如果您使用其他凭据，将会收到错误消息或产生费用。

7. 接受条款并跳过恢复资源页面。

激活 Cloud Shell

Cloud Shell 是一种包含开发工具的虚拟机。它提供了一个 5 GB 的永久性主目录，并且在 Google Cloud 上运行。Cloud Shell 可让您通过命令行访问 Google Cloud 资源。gcloud 是 Google Cloud 的命令行工具。它会预先安装在 Cloud Shell 上，且支持 Tab 键自动补全功能。

1. 在 Google Cloud Console 的导航窗格中，点击激活 Cloud Shell ()。

2. 点击继续。
   预配和连接到环境需要一些时间。若连接成功，也就表明您已通过身份验证，且相关项目的 ID 会被设为您的 PROJECT_ID。例如：

命令示例

• 列出有效的帐号名称：

gcloud auth list

（输出）

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

（输出示例）

Credentialed accounts: - google1623327_student@qwiklabs.net

• 列出项目 ID：

gcloud config list project

（输出）

[core] project = <project_ID>

（输出示例）

[core] project = qwiklabs-gcp-44776a13dea667a6

任务 1. 启用 Vertex AI API

您必须先启用 Vertex AI API，然后才能开始使用 Vertex AI。

1. 要启用 API，请在 Cloud Shell 中运行以下命令：

   gcloud services enable aiplatform.googleapis.com

2. 如果出现提示，请点击授权。

   注意：请等几秒钟，待 API 启用后再检查进度。

如需验证是否已完成以下目标，请点击检查我的进度： 启用 Vertex AI API。

任务 2. 下载网站代码

本实验使用一个预先构建的网站应用，这个应用的后端 API 基于 FastAPI 构建，前端则使用 HTML、CSS 和 JavaScript 构建。在这项任务中，您将下载网站代码并查看代码和文件结构。

下载并查看网站代码

1. 在 Cloud Shell 中，从 Cloud Storage 下载网站代码归档文件：

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. 解压缩归档文件内容：

   tar -zxvf genai-website-mod-app.tar.gz

3. 如需查看网站代码和文件结构，请在 Cloud Shell 菜单栏中点击打开编辑器。

4. 在 Cloud Shell 编辑器的导航栏中，展开 genai-website-mod-app 文件夹。

   这个文件夹包含构建和部署网站应用需要的所有文件。以下是这些文件及其用途的概况：

   文件/文件夹	说明
   Dockerfile	用于通过 Cloud Run 构建网站应用容器的 Dockerfile
   config.toml	使用变量配置应用
   main.py	网站应用的主要 FastAPI 入口点
   models/	包含网站应用所使用的数据模型的文件夹
   routers/	用于不同应用功能的 FastAPI API 路由器
   static/	包含静态网站资源，例如 CSS、图片和 JS 文件
   templates/	用于网站应用页面的 Jinja 模板
   utils/	网站应用的实用程序模块
   views/	网站应用的视图实现

   注意：除非在本实验的后续步骤中另有说明，否则不需要查看或修改文件内容

任务 3. 实现 Vertex AI Search

在此任务中，您将在 Vertex AI 中创建搜索应用，实现网站搜索功能，以搜索博文等非结构化数据。

创建搜索应用

1. 在 Google Cloud 控制台中，点击导航菜单 ()，然后选择 Agent Builder。

   注意：如果导航菜单中没有列出 Agent Builder，请点击查看所有产品。在所有产品页面中，滚动到人工智能部分，然后点击 Agent Builder。

2. 点击“继续”并激活 API。

3. 如果您被自动重定向到创建应用页面，继续下一步。否则点击新建应用。

4. 在“创建应用”页面的网站搜索下方，点击创建

5. 在配置页面，根据以下设置来配置一个宽泛搜索应用，其余设置保留为默认值：

   属性	值（输入或选择）
   您的应用名称	my-search-app
   贵公司或组织的外部名称	my-company
   您的应用的位置	global（全球）

6. 点击继续。

为搜索应用创建数据存储区

1. 在数据存储区页面，点击创建数据存储区。

   在该页面上，您要为搜索应用配置数据源，以供在网站搜索结果中使用。

2. 选择 Cloud Storage。

   注意：在本实验中，您项目的 Cloud Storage 存储桶内已经预备了一些代表博文的 HTML 文档。

3. 在选中文件夹默认选项的情况下，点击浏览。

4. 如需查看 Cloud Storage 存储桶的内容 ，请点击 。

5. 选择 blog_posts 文件夹，然后点击选择。

   系统会自动填充文件夹的 gs:// URI

   

6. 对于要导入的数据类型，选择默认的非结构化文档选项，然后点击继续。

7. 输入数据存储区名称 my-data-store。

8. 点击创建。

9. 在数据存储区页面上，选择您新建的数据存储区。然后，点击创建来创建搜索应用。

   

   Agent Builder 现在开始从您的 Cloud Storage 存储桶中提取博文 HTML 数据，供搜索应用使用。

10. 如需查看数据注入状态，请点击 my-data-store 数据页面上的活动标签页。

    状态列会显示当前状态。导入过程完成后，状态列会显示导入已完成。

    

    注意：导入过程可能需要几分钟才能完成。等到数据导入完成后再继续执行下一步。

11. 要验证文档是否已经成功导入，请点击文档标签页。

测试搜索应用

您可以在 Agent Builder 中测试搜索应用的功能，以此来预览搜索应用。

1. 在 Agent Builder 导航菜单中，点击预览。

2. 在搜索框中输入 What is dollar cost averaging and how can it help me?（什么是美元成本平均法以及它对我有什么帮助？），然后按下 Enter 键。

   搜索应用会生成回答，解释 dollar cost averaging（美元成本平均法），并提供从 Cloud Storage 导入的相关文件的选段和链接。

   注意：默认情况下，搜索应用使用 Gemini 1.5 Pro 模型生成搜索回答。您可以在 Google Cloud 控制台的 Agent Builder > 配置页面查看或修改搜索应用配置。

如需验证是否已完成以下目标，请点击检查我的进度： 创建 Vertex AI Search 应用。

任务 4. 将网站应用与搜索相集成

创建搜索应用后，您现在可以将它与您的网站或应用相集成。本实验使用 Search API 进行调用，并接收要在网站上显示的回答。您还可以将搜索 widget 嵌入到网站中，它会自动提供搜索栏和可展开的搜索界面。如需详细了解这个方案，可访问本实验末尾的链接，查看相关文档。

在此任务中，您将配置网站代码，集成在先前任务中创建的搜索应用。然后将网站应用部署到 Cloud Run 进行测试。

配置网站应用

该网站应用基于 FastAPI 构建。FastAPI 是一个用于在 Python 中构建 API 的 Web 框架。genai-website-mod-app/routers 文件夹包含各种网站功能（如搜索）的路由器 API 实现。

1. 在 Cloud Shell 编辑器中，导航至 genai-website-mod-app/routers 文件夹，然后打开 vertex_search.py 文件。

   该文件包含使用云客户端 Python SDK 中的 discoveryengine 模块实现搜索 API 调用的代码。这些代码还使用 tomllib，它是 Python 中一个用于解析配置文件的模块。

2. 查看 trigger_first_search() 函数中的代码。

   该函数包含路径参数，使用路径 projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id} 来设置对 Discovery Engine API 的调用。

3. 如需给路径参数赋值，请在 genai-website-mod-app 文件夹中修改 config.toml 文件。

4. 在 [global] 部分中替换配置属性的值，如下所示：

   部分	属性	值
   global	project_id
   global	location
   global	datastore_id	见后续步骤

5. 将 datastore_id 配置属性的值替换为搜索应用数据存储区 ID 的值：

   a. 要获得 datastore_id 的值，请导航至 Google Cloud 控制台中的 Agent Builder，然后选择数据。

   b. 将 my-data-store 的数据存储区 ID 值复制粘贴到 config.toml 文件中。

6. 替换相关配置部分中的其他配置属性，如下所示：

   部分	属性	值
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. 保存对文件所做的更改。

任务 5. 在 Cloud Run 上构建、部署和测试网站

Cloud Run 是一个托管式计算平台，可以让您在 Google 可伸缩的基础设施上运行容器。

在此任务中，您将构建网站应用并将其部署到 Cloud Run。您还需要测试集成到网站中的搜索功能。

设置环境

1. 确保您位于网站应用目录中：

   cd ~/genai-website-mod-app

2. 为项目 ID、区域和网站应用服务设置环境变量：

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Name of your Cloud Run service. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

在 Cloud Run 上构建和部署应用

1. 如需在 Cloud Run 上构建和部署应用，请运行以下命令：

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. 如需创建 Artifact Registry Docker 仓库，请输入 Y

   服务部署完成后，命令输出中会生成服务网址。

测试网站的搜索功能

1. 如需在 Cloud Run 上测试您的应用，可在单独的浏览器标签页或窗口中导航至网站应用的 Cloud Run 服务网址。

2. 在搜索框中输入 What is dollar cost averaging and how can it help me?（什么是美元成本平均法以及它对我有什么帮助？），然后按下 Enter 键。

3. 验证网站是否返回并显示搜索结果。

   注意：搜索结果包含 AI 生成的回答。这些回答基于数据存储区中的 HTML 文件内容，而这些文件是您在 Cloud Storage 中为搜索应用预配的。有时，虽然搜索结果链接到了相关博文，但可能不会显示摘要。注意：网站使用的博文文件以 JSON 文件形式存储在 Cloud Storage 存储桶内一个单独的 production 文件夹中。网站应用使用 EditorJS 将这些文件渲染为 HTML，以便在网站上显示。

4. 通过在搜索框中输入 Can you use dollar cost averaging with ETFs?（能否使用美元成本平均法购买 ETF？）来提出后续问题，然后按下 Enter 键。

5. 验证搜索结果是否包含后续问题的回答以及相关博文的链接。

如需验证是否已完成以下目标，请点击检查我的进度： 将网站应用部署到 Cloud Run。

任务 6. 使用生成式 AI 修改网站内容

Google 的生成式 AI 工具可以用来创建和修改网站文案或内容。在这项任务中，您将以网站内容编辑者的身份使用这些工具更新本实验中网站的文本和图片内容。

查看图片生成代码

网站应用使用 Vertex AI 中的 Imagen API 生成和更新图片。

1. 在 Cloud Shell 编辑器中，打开 config.toml 配置文件。

2. 查看 [imagen] 部分中的配置属性。该部分定义了用于图片生成和标注的模型属性以及一些其他属性。

3. 在 Cloud Shell 编辑器中，打开 routers/vertex_imagen.py 文件。

   该文件定义了不同的图片标注和修改函数，以及这些函数的 API 路由。

4. 这些函数在 utils/imagen.py 文件中实现。在 Cloud Shell 编辑器中打开该文件。

5. 查看 generate_image() 函数：

   该函数使用 Python SDK 中 vertexai 软件包的 vertexai.preview.vision_models.ImageGenerationModel 类。

   该函数首先加载图片生成模型，然后通过调用模型的 generate_images() 函数并传递文本提示和其他参数来生成图片。

更新图片内容

我们来更新网站上某篇博文中的图片。

1. 在 Cymbal Investments 网站的右上角，点击 All Blogs（所有博客）。

   网站会显示一个包含六篇博文的页面。

   注意：如果系统默认选中了初始博文，点击页面任意位置可以取消选择。

2. 点击链接查看第一篇博文：Unleashing the Techie Within: A Journey to FIRE。

   博文页面包含标题、图片和文本段落。

3. 如需修改页面内容，点击右下角的 Edit () 图标。

4. 将鼠标悬停在图片上。然后点击图片左侧的 Click to tune () 图标。

5. 在 Click to tune 菜单中，选择 Generate。

   

6. 在图片说明下的 Prompt 中，输入 An image of a retired man and woman sitting on a beach enjoying the sunset（一对退休夫妇坐在海滩上欣赏日落的图片）。点击 Generate。

7. 滚动到页面顶部，等待图片生成。

   系统会生成一张新图片，随后上传到您的 Cloud Storage 图片存储桶中。博文页面将更新并使用这张新图片。

翻译内容

您可以使用文本生成模型来翻译整个网页或部分内嵌文本。在这项子任务中，您将翻译网站博客页面上的内嵌文本。

1. 在 Cloud Shell 编辑器中，打开 routers/vertex_llm.py 文件。

   该文件定义了不同的网页修改和翻译函数，以及这些函数的 API 路由。

2. 滚动到源文件底部，查看 ai_translate_inline() 函数的代码。

   该函数使用 ai_translate_inline_prompt 配置属性、用户选择的文本和用户指定的目标语言来构建提示。然后调用 llm_generate_gemini() 函数生成模型回答。

   下面是 config.toml 文件中 ai_translate_inline_prompt 配置属性的值：

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a target language as TARGET_LANGUAGE. 3. You should translate the INPUT_TEXT into the TARGET_LANGUAGE. 4. Strictly output only the translated text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT_TEXT:

3. 如需查看 llm_generate_gemini() 函数，请打开 utils/vertex_llm_utils.py 文件。

   该函数使用 Python SDK 中 vertexai 软件包的 vertexai.generative_models.GenerativeModel 类。

   该函数首先加载 gemini-1.5-pro 模型，然后通过调用模型的 generate_content() 函数并传递文本提示和其他参数来生成回答。

4. 确保您处于网站博客页面的修改模式。如果不在修改模式，点击右下角的 Edit () 图标。

5. 选择任一文本段落，然后点击翻译工具：

   

6. 在语言提示字段中输入法语，然后点击发送。

   几秒钟后，段落文本将翻译为您指定的语言，并替换页面中的内嵌文本。

更新网站文案（文本内容）

您还可以使用生成模型优化网站文本内容。

1. 在 routers/vertex_llm.py 文件中查看 ai_refine_text() 函数。

   该函数使用 ai_refine_prompt 配置属性、用户从网站内容中选择的文本以及用户输入的指令来构建提示。

   下面是 config.toml 文件中 ai_refine_prompt 配置属性的值：

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a style or tone or instructions as REFINE_PROMPT. 3. You should modify or refine INPUT_TEXT in the tone or style of REFINE_PROMPT. 4. Strictly output only the refined text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT TEXT:

2. 确保您处于网站博客页面的修改模式。如果不在修改模式，点击右下角的 Edit () 图标。

3. 选择任一文本段落，然后点击文本优化工具：

   

4. 如需使所选的文本语气更加正式、更有说服力，请在“style”（风格）框中输入formal impactful（正式、有说服力）。在调用模型之前，该值将作为 REFINE_PROMPT 字符串附加到提示中。

5. 点击发送。

   几秒钟后，模型会生成一个回答，并显示在页面上原始文本下方的封闭式框中。

6. 查看更新后的段落文本，然后点击替换。

7. 如需保存对博客页面的更改，请点击页面顶部的保存图标。

8. 如需查看提示的最终值，可在 Google Cloud 控制台的导航菜单 () 中选择日志记录 > Logs Explorer。

   注意：如果导航菜单中没有列出日志记录，请点击查看所有产品。在所有产品页面中，滚动至可观测性部分，然后点击日志记录。

9. 如需突出显示相关日志条目，可在结果菜单栏中点击操作 > 在结果中突出显示。

10. 在在结果中突出显示字段中，输入 REFINE_PROMPT。

    

如需验证是否已完成以下目标，请点击检查我的进度： 更改网站内容。

结束实验

完成实验后，请点击结束实验。Qwiklabs 会移除您使用过的资源并为您清理帐号。

系统会提示您为实验体验评分。请选择相应的评分星级，输入评论，然后点击提交。

星级的含义如下：

• 1 颗星 = 非常不满意
• 2 颗星 = 不满意
• 3 颗星 = 一般
• 4 颗星 = 满意
• 5 颗星 = 非常满意

如果您不想提供反馈，可以关闭该对话框。

如果要留言反馈、提出建议或做出更正，请使用支持标签页。

恭喜！

在本实验中，您完成了以下操作：

• 创建并测试 Vertex AI 宽泛搜索应用。
• 将 Vertex AI Search 应用集成到网站中。
• 使用 Imagen API 在网站上生成和更新图片。
• 使用 Vertex AI TextGenerationModel 翻译并优化网页文本。
• 在 Cloud Run 上部署并测试网站应用。

借助这些功能，您可以构建流程来更新网站内容，并将更改保存到外部存储空间（例如 Cloud Storage），以便进行审核和发布。

后续步骤/了解详情

• Vertex AI
• Gemini
• 向网页中添加搜索 widget
• Artifact Registry
• Cloud Run

版权所有 2024 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名称和产品名称可能是其各自相关公司的商标。