使用 Vertex AI 和 Flutter 构建生成式 AI 智能体

课程 · 3 个小时 15 分钟

< 1%

完成

访问 700 多个实验和课程

使用 AI Applications 将 AI 智能体与 Flutter 应用进行集成

实验 2 个小时 universal_currency_alt 5 个积分 show_chart 入门级

info 此实验可能会提供 AI 工具来支持您学习。

概览
目标
设置
任务 1. 创建搜索数据存储区和搜索应用
任务 2. 构建并部署后端
任务 3. 配置 Firebase
任务 4. 创建 Reasoning Engine AI 智能体
任务 5. 增强后端应用
任务 6. 试用 Gemini 2.0 Flash
任务 7. 部署 Flutter 前端应用
任务 8. 测试 Flutter 应用
结束实验
恭喜！

访问 700 多个实验和课程

概览

在本实验中，您要将一个 AI 智能体与 Flutter 应用进行集成。Flutter 将作为客户端应用框架，Vertex AI Search 将作为向量数据库，Reasoning Engine 则用于使用 Vertex AI 中的 LangChain 框架构建和部署智能体。该智能体将使用 Gemini 这个功能强大的大语言模型 (LLM) 系列，根据文本和图片提示生成 AI 回答。

本实验已使用 code-server 预配置了 VSCode 来作为 IDE，以及运行 Flutter 应用所需的 Flutter 和 Dart 扩展程序。本实验还会使用 fwr，该工具可将 Flutter 应用作为 Web 应用部署，以便您通过浏览器访问。

本实验面向参与构建应用但可能不熟悉云应用开发的开发者，不限经验水平。如果您具备一些使用 Python 的经验，并熟悉 Flutter 框架，将会很有帮助。您无需了解 Flutter 就能完成本实验中的任务，不过您需要查看 Flutter 应用的一些代码并测试该应用的功能。

目标

在本实验中，您将执行以下任务：

在 Google Cloud 控制台中使用 AI Applications 创建搜索数据存储区和搜索应用。
使用 Vertex AI Workbench 部署 Reasoning Engine 智能体。
使用与 Vertex AI Search 和 Reasoning Engine 智能体集成的 Python 应用。
将该应用部署到 Cloud Run，并将其作为 Flutter 应用的后端。
设置 Firebase 项目并将其关联到 Flutter 应用。

下面是本实验使用的不同组件的概览：

设置

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

请使用无痕式窗口登录 Qwiklabs。
留意实验的访问时限（例如 1:15:00）并确保能在相应时间段内完成实验。
系统不提供暂停功能。如有需要，您可以重新开始实验，不过必须从头开始。
准备就绪时，点击开始实验。
请记好您的实验凭据（用户名和密码）。您需要使用这组凭据来登录 Google Cloud 控制台。
点击打开 Google 控制台。
点击使用其他账号，然后将此实验的凭据复制并粘贴到相应提示框中。
如果您使用其他凭据，将会收到错误消息或产生费用。
接受条款并跳过恢复资源页面。

任务 1. 创建搜索数据存储区和搜索应用

在此任务中，您将在 Google Cloud 控制台中使用 AI Applications 创建搜索数据存储区和搜索应用，以实现 Flutter 应用的搜索功能。

创建搜索数据存储区

在 Cloud 控制台中，点击查看所有产品。在所有产品页面上，滚动到人工智能部分，然后点击 AI Applications。
点击继续并激活 API。
在左侧窗格中，点击数据存储区，然后在数据存储区页面上点击创建数据存储区。

在此页面上，您可以配置要用于提供搜索结果的数据源。本实验预配置了一个 Cloud Storage 存储桶，其中包含一个 .csv 文件，该文件包含有关 Google 官方商店内商品的数据。
若要选择 Cloud Storage 作为数据源，请点击 Cloud Storage 下的选择。
对于要导入的数据种类，请选择聊天应用的结构化常见问题解答数据 (CSV)。
在选择要导入的文件夹或文件时，请点击文件。
为了提供 CSV 文件的 Cloud Storage 网址，请点击浏览。
点击，查看 Cloud Storage 存储桶中的内容。
选择 goog_merch.csv 文件，然后点击选择。

系统会自动填充相应文件夹的 gs:// URI。
点击继续。
输入数据存储区名称 goog-merch-ds。
点击创建。

系统会创建数据存储区，并启动从 CSV 文件注入数据的操作。
在数据存储区页面上，点击您新建的数据存储区的名称。
文档标签页会显示已导入文档的列表。如需查看与某个文档关联的数据，请点击查看文档。

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

创建搜索应用

若要使用搜索数据存储区，需要在 Vertex AI Agent Builder 中将其与一个搜索应用相关联。

在 Cloud 控制台中，点击 AI Applications，然后点击应用。
点击创建应用。
在创建应用页面的网站搜索下方，点击创建。
在搜索应用配置页面，使用以下设置来配置网站搜索应用，并将其余设置保留为默认值：

属性值（输入或选择）

企业版功能停用

您的应用名称 gms-search-app

贵公司或组织的外部名称 gms-company

您的应用的位置 global（全球）
点击继续。
页面会显示现有数据存储区的列表。选择您在上一个子任务中创建的 goog_merch_ds 数据存储区。
点击创建来创建搜索应用。

现在，您已创建搜索应用，并已将数据存储区与该应用相关联。
如需测试该搜索应用，请点击 AI Applications 导航菜单中的预览。
在搜索字段中，输入 dino（恐龙）。

系统会显示相关搜索结果列表，这些结果来自导入到数据存储区的文档。

注意：如果您看到一条错误消息指示搜索预览尚未就绪，请等待几分钟，然后重试。如果您不想等待，可继续执行下一个实验任务。

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

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

任务 2. 构建并部署后端

Flutter 应用的后端将在 Google Cloud 上作为一个 Cloud Run 服务运行。该后端服务将与您在上一步中创建的搜索应用集成，以便根据官方商店数据生成搜索回答。该后端还将与 Reasoning Engine 智能体集成，以便针对 Flutter 应用的搜索查询，获取 Gemini 的生成式 AI 内容作为回答。

在此任务中，您将构建后端 Python 应用并将其部署到 Cloud Run。

配置并查看后端应用

本实验已预配置了一个基于 VSCode 的 IDE。如需访问该 IDE，请复制本实验 Qwiklabs 凭据面板中的 IDE 服务网址，然后将其粘贴到一个新的无痕式浏览器窗口。

注意：该 IDE 服务网址是专为本实验预配置的 Cloud Run 服务端点。该 Cloud Run 服务会作为代理，将请求转发到 code-server 虚拟机。该 IDE 使用 Code Server 构建，并包含 Flutter、Dart 和 Vim 扩展程序。
在 IDE 中打开一个终端：在 IDE 导航菜单 () 中，依次点击终端 > 新建终端。
注意：请在 IDE 终端窗口中运行以下步骤中的命令。
本实验已预配置后端应用的初始版本和相关文件。请从 Cloud Storage 中复制后端应用文件夹的初始版本及其内容：
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ 注意：如果系统提示，请点击允许以粘贴剪贴板中的文字和图片，然后按 Enter 键。
若要列出该文件夹的内容，请在 IDE 终端窗口中运行以下命令：
ls ~/ag-web/app
ag-web/app 文件夹包含构建后端应用并将其部署到 Cloud Run 所需的应用源代码和其他文件。
为应用设置 PROJECT_ID、LOCATION 和 STAGING_BUCKET 配置。
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py
将该后端应用配置为使用您之前创建的搜索数据存储区。

在下方命令中，将字符串 {YOUR_SEARCH_DATA_STORE_ID} 替换为搜索数据存储区 ID 的值。

请务必移除 sed 命令中的大括号。
注意：为获取搜索数据存储区 ID 的值，请在 Cloud 控制台中前往 AI Applications > 数据存储区，然后点击您之前创建的搜索数据存储区的名称。复制数据存储区 ID 的值，该值与搜索引擎 ID 相同。 sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py
若要在 IDE 中查看代码，请在 IDE 导航菜单中点击，然后点击打开文件夹。
从列表中选择 IDE-DEV/ag-web/ 文件夹，然后点击确定。
若要信任代码的作者，请点击是，我信任此作者。
在资源管理器窗格中，展开 app 文件夹，然后点击 app.py 以在编辑器中打开该文件。

后端应用代码会执行以下操作：
- 使用您的实验 Google Cloud 项目 ID、区域和 Cloud Storage 存储桶初始化 Vertex AI。
- search_gms() 函数会使用 discoveryengine.googleapis.com API 数据存储区端点发起搜索请求。您之前创建的数据存储区 ID 将体现在网址中。
- 该函数会使用用户提供的搜索查询对数据存储区的内容执行搜索，并将结果转换为 JSON 格式的回答。
- 该应用会使用 flask 将请求路由到各个函数。/ 端点是用于验证应用是否成功加载的默认页面，而 /ask_gms 端点则会调用使用 Vertex AI Search 的 search_gms() 函数。

构建应用并将其部署到 Cloud Run

现在，您可以使用一个部署脚本来构建后端应用并将其部署到 Cloud Run。

在 IDE 中打开一个终端窗口，并切换至后端应用文件夹：
cd ~/ag-web/app
通过 gcloud CLI 进行 Google Cloud 身份验证：
gcloud auth login
若要继续，请输入 Y
为了启动登录流程，在按下 Ctrl 键（对于 Windows 和 Linux）或 Command 键（对于 MacOS）的同时点击终端内的链接。
如果系统要求您确认是否打开外部网站，请点击打开。
点击在实验中使用的学员电子邮件地址。
看到要求您继续操作的提示时，点击继续。
若要允许 Google Cloud SDK 访问您的 Google 账号并同意条款，请点击允许。

您的验证码会显示在浏览器标签页中。
点击复制。
回到 IDE 终端窗口，将验证码粘贴到 Enter authorization code（输入授权代码）的位置，然后按 Enter 键。

您现已登录 Google Cloud。
将 deploy.sh 脚本设为可执行脚本，然后运行该脚本以在指定的 Cloud Run 区域中部署应用：
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
成功构建应用并将其部署到 Cloud Run 后，脚本输出端会显示应用的端点网址。该网址由脚本中执行的 gcloud run deploy 命令生成。
注意：此命令的执行需要一些时间，因此请等到其执行完毕后再继续执行下一个任务。

测试后端应用

您可以通过访问应用的 Cloud Run 端点来测试应用功能。

复制上一步中生成的应用端点网址，并在新的浏览器标签页中前往该网址。
应用加载后，首页会显示 Welcome to the ag-web backend app（欢迎使用 ag-web 后端应用）。
在浏览器的网址栏中，将以下路径附加至网址末尾：
/ask_gms?query=dino
验证应用是否会使用您之前创建的搜索数据存储区中的结果进行回答。

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

任务 3. 配置 Firebase

为了调用 Gemini API，前端 Flutter 应用会使用 Vertex AI for Firebase Dart SDK。此 SDK 可作为 firebase_vertexai 软件包从 pub.dev 获取，pub.dev 是 Dart 和 Flutter 应用的官方软件包库。

Firebase 是 Google 推出的后端应用开发平台，可为 Android、iOS 等各种平台提供服务。

在此任务中，您将设置 Firebase 并登录 Firebase CLI。在此实验的后续环节，您要将 Flutter 应用关联到 Firebase。

设置 Firebase

为了使用上述 SDK，您首先需要设置一个 Firebase 项目。

在无痕式窗口标签页中，访问 https://console.firebase.google.com 以打开 Firebase 控制台。
点击创建项目。
如需将 Firebase 添加至实验的现有 Google Cloud 项目，请在页面底部点击将 Firebase 添加到 Google Cloud 项目。
点击选择一个 Google Cloud 项目，然后从列表中选择实验项目。
接受相关条款，然后点击继续。
如需使用默认结算方案，请点击确认方案。
点击继续。
在此项目中停用 Google Analytics，然后点击添加 Firebase。
等待 Firebase 项目准备就绪，然后点击继续。

Firebase 现在已可用于您的实验 Google Cloud 项目。

登录 Firebase

在 IDE 终端窗口中，登录 Firebase CLI：
firebase login --no-localhost
如需允许 Firebase 收集 CLI 和模拟器报告信息，请输入 Y，然后按 Enter 键。
记下您的会话 ID，然后按照相应步骤启动登录流程。在按住 Ctrl 键（对于 Windows 和 Linux）或 Command 键（对于 macOS ）的同时点击终端中的网址。
在系统提示您打开外部网站时，点击打开。
点击您在实验中使用的学员电子邮件 ID。
点击继续。
若要向 Firebase CLI 授予相关权限，请点击允许。
点击是，我刚才运行了此命令。
验证您的会话 ID，然后点击是，这是我的会话 ID。
若要复制授权代码，请点击复制。
将授权代码粘贴到 IDE 终端窗口内的相应位置，然后按 Enter 键。

您现已登录 Firebase CLI。

任务 4. 创建 Reasoning Engine AI 智能体

AI 智能体是一种应用，它利用大语言模型 (LLM) 的强大功能，结合外部工具进行推理和编排，以实现其目标。Vertex AI Agent Builder 是 Google 提供的一套用于构建 AI 智能体的产品和工具，具体而言，是可帮助您将 AI 智能体关联到信任的数据源。

Vertex AI Reasoning Engine（也称为 LangChain on Vertex AI）可帮助您使用 Vertex AI Agent Builder 构建并部署推理智能体。LangChain 是一种用于构建聊天机器人和 RAG 系统的常用 OSS 工具。

通过 Reasoning Engine，开发者可以使用函数调用将 LLM (Gemini) 的输出映射到 Python 函数。Reasoning Engine 与 Vertex AI 中的 Gemini 模型 Python SDK 紧密集成，并且能够兼容 LangChain 和其他 Python 框架。

在此任务中，您将使用 Vertex AI Workbench 和 Jupyter 笔记本来部署采用 Python 函数的 Reasoning Engine 智能体。在本实验的下一个任务中，我们将在生成式 AI 后端应用中使用此智能体。

创建 Vertex AI Workbench 实例

Vertex AI Workbench 是一种基于 Jupyter 笔记本的开发环境，适用于整个数据科学和机器学习工作流。您可以从 Vertex AI Workbench 实例的 Jupyter 笔记本中与 Vertex AI 和其他 Google Cloud 服务进行交互。例如，借助 Vertex AI Workbench，您可以通过 BigQuery 和 Cloud Storage 的集成从 Jupyter 笔记本访问并浏览数据。

Vertex AI Workbench 实例预安装了一套深度学习软件包，其中包含对 TensorFlow 和 PyTorch 框架的支持。

Vertex AI Workbench 笔记本提供了灵活且可扩缩的解决方案，可帮助在 Google Cloud 上开发和部署机器学习模型。

若要创建 Workbench 实例，请在 Cloud 控制台中点击导航菜单 ()，然后依次选择 Vertex AI > Workbench。
如果 Cloud 控制台中出现提示，请点击启用 Notebooks API。
确保在实例标签页中选中实例，然后点击新建。
在“新建实例”页面的名称部分，输入 my-instance
其余设置均保留默认值，然后点击创建。

您的新实例会在“实例”部分启动。等待实例创建完毕，然后继续执行下一步。
注意：在实例可供使用后，实例旁边会出现绿色的对勾标记。
在实例准备就绪后，点击打开 Jupyterlab。
若要启动 Python 3 Jupyter 笔记本，请点击 Python 3 笔记本。

复制笔记本文件

本实验预配置了用于构建和部署 Reasoning Engine 智能体的笔记本。

若要将该笔记本复制到您的 JupyterLab 实例，请将以下代码复制到新笔记本的第一个单元中：
!gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .
选择该单元，然后点击单元菜单中的运行来运行该单元：

此命令会将笔记本从 Cloud Storage 复制到您的 JupyterLab 实例。命令完成后，该笔记本文件会列在顶级根文件夹下。
若要打开该笔记本，请双击文件夹列表中的笔记本文件。此时将会创建一个显示该笔记本内容的单独标签页。

构建并部署 Reasoning Engine 智能体

按顺序从头开始运行笔记本中的所有代码单元。若要运行某个单元，请点击该单元中的任意位置以选中该单元，然后在单元菜单或顶部笔记本菜单中点击运行。
注意：在运行某个单元中的命令时，请等待命令完成后再转到下一个单元。命令执行完毕后，单元编号字段中的星号 (*) 会替换为该单元的编号。 注意：在运行一个单元之前，请查看下面的说明，了解是否有任何针对该单元的特定说明或步骤。这些说明会使用 CELL INSTR 前缀来标记。
a. [CELL INSTR] 重启当前运行时

如果系统提示，请在内核重启对话框中点击确定。

b. [CELL INSTR] 设置 Google Cloud 项目信息并初始化 Vertex AI SDK：

在运行此单元以初始化 Vertex AI SDK 之前，请更新实验项目 ID、位置和暂存存储桶的配置值：
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
包含示例配置设置的已更新单元：

c. [CELL INSTR] 为 Vertex AI Search 定义工具函数：

在运行此单元之前，请将 GOOGLE_SHOP_VERTEXAI_SEARCH_URL 的值替换为您后端应用的 Cloud Run 端点网址。

若要获取该端点网址，请在 Cloud 控制台中前往 Cloud Run，然后点击后端应用的名称：ag-web。复制端点网址的值，并在相应单元中进行替换。

包含后端应用的 Cloud Run 端点网址示例的已更新单元：

注意：您还可以通过点击笔记本菜单栏中的运行来运行一个单元。
运行 Deploy the Agent to the Reasoning Engine runtime（将智能体部署到 Reasoning Engine 运行时）单元后，请等待命令完成以及创建 Reasoning Engine 智能体。然后，复制 Reasoning Engine ID：

您将在下一个任务中使用此 ID 来配置和重新部署后端应用。
注意：此单元最多可能需要 10 分钟才能完成。请等待系统显示最终输出（即指示已创建 ReasoningEngine），然后再继续执行下一步。
若要测试 Reasoning Engine 智能体是否成功运行，请运行接下来的两个单元并观察输出。

Reasoning Engine 智能体根据搜索查询输入和 Gemini 模型的输出成功调用了 Wikipedia 或 Vertex AI Search 数据存储区。

如需验证是否已完成以下目标，请点击检查我的进度：部署 Reasoning Engine 智能体。

任务 5. 增强后端应用

现在，我们来增强后端应用，以调用您在上一个任务中部署的 Reasoning Engine 智能体。

后端应用的初始版本仅能够从 Vertex AI Search 直接提取结果。在新版本中，该应用会调用 Reasoning Engine 智能体，而智能体会使用来自 Gemini 的输出和自身的工具，根据输入提示生成基于 Vertex AI Search 或 Wikipedia 的回答。

在此任务中，您将更新后端应用代码，添加一个额外的入口点。该入口点将使用请求查询来调用 Reasoning Engine 智能体，并返回智能体的回答。

更新后端应用

在 IDE 终端窗口中运行以下命令，将新的入口点代码附加至 app.py 文件中：
cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF
将后端应用配置为使用您之前创建的 Reasoning Engine 智能体。

将下方命令中的字符串 {YOUR_REASONING_ENGINE_ID} 替换为您在上一个任务中从笔记本单元复制的 Reasoning Engine ID 值，并在 IDE 终端窗口中运行以下命令。

请务必移除 sed 命令中的大括号。
sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py
若要在 IDE 中查看代码，请在 IDE 导航菜单中点击，然后选择 IDE-DEV/ag-web/app/app.py 文件。

增强版的后端应用将执行以下操作：
- 使用您在上一个任务中所创建智能体的 REASONING_ENGINE_ID，从 Reasoning Engine 运行时检索 remote_agent 上的句柄。
- 定义新的 /ask_gemini 端点，该端点用于定义 ask_gemini() 函数。
- 该函数将用户提供的 query 参数从请求传递给 Reasoning Engine (remote_agent)，并返回该智能体的回答。

构建后端应用并将其重新部署到 Cloud Run

切换到后端应用文件夹：
cd ~/ag-web/app
运行以下脚本，在指定的 Cloud Run 区域中重新部署应用：
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

测试后端应用

您可以通过访问应用的 Cloud Run 端点来测试应用功能。

复制上一步中生成的应用端点网址，并在新的浏览器标签页中前往该网址。
应用加载后，首页会显示 Welcome to the ag-web backend app（欢迎使用 ag-web 后端应用）。
在浏览器的网址栏中，将以下路径附加至网址末尾：
/ask_gemini?query=where can I buy the dino pin
该应用将会在回答中使用智能体从您之前创建的 Vertex AI Search 数据存储区中提取的结果。
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.
在浏览器网址栏中，将路径替换为：
/ask_gemini?query=what is fallingwater
该应用将使用智能体提供的结果进行回答，即智能体从您在笔记本中配置的 Wikipedia API 中提取的回答。
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall.

任务 6. 试用 Gemini 2.0 Flash

您已经开发并部署了后端应用、Vertex AI Search 组件和 Reasoning Engine 智能体，现在可以开始设计和构建 Flutter 前端。

借助 Flutter 应用，用户可以了解他们在应用中所上传照片的详细信息。该应用可与 Gemini 集成来生成有关照片的回答，并使用 AI 智能体通过聊天界面提供回答。

在开发前端应用之前，您需要定义 Gemini 2.0 Flash 模型所返回的回答的结构。您先前在实验中部署的 AI 智能体会使用此模型。

在此任务中，您将向 Gemini 2.0 Flash 模型提供提示，并查看模型生成的 JSON 格式的回答。

您可在 Cloud 控制台的 Vertex AI Studio 中使用 Gemini 2.0 Flash。若要访问 Vertex AI Studio，请点击导航菜单 ()，然后依次选择 Vertex AI > 创建提示（在 Vertex AI Studio 下）。
若要启用使用 Vertex AI Studio 所需的 API，请点击同意并继续。
注意：Vertex AI Studio 是 Google Cloud 控制台中的一款工具，可让您快速测试生成式 AI 模型并为其开发原型，从而在应用中利用这些模型的功能。
找到提示，点击插入媒体，然后选择从 Cloud Storage 导入。
点击实验存储桶名称旁边的 >。
选择图片文件 fallingwater.jpg，然后点击选择。

此时，图片将上传到提示框。
为向模型提供提示，请在图片下方的提示框中输入 What is this?，然后点击发送 ()。

模型将提供简短的回答，恰当描述图片中的对象。
如需以 JSON 格式从模型中提取更多信息，请修改文本提示：
What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".
点击发送 ()。
查看模型生成的 JSON 回答。
{ "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }
现在，您已经有了提示和 JSON 格式的模型回答，我们可以基于此提示和格式构建 Flutter 应用。
注意：您收到的模型回答可能与上面显示的回答不同。

任务 7. 部署 Flutter 前端应用

您已经定义了模型所返回数据的结构，现在可以构建前端应用了。

Flutter 是一个开源的多平台应用开发框架。借助该框架，您只需编写一套代码即可同时支持在 Android、iOS、Web、macOS、Windows 和 Linux 上运行。Flutter 应用使用 Dart 编程语言开发。

在本实验中，您将使用 web 作为目标平台。这样，Flutter 应用就可以部署为 Web 应用并使用浏览器进行访问。

在此任务中，您将查看 Flutter 应用的代码，并以 Web 应用的形式构建和运行该应用。

查看 Flutter 应用代码库

该应用的功能之一是可供用户上传旅游景点的照片，然后向 Gemini 查询照片的相关信息。在本实验中，Flutter 应用已开发完成并保存在 Cloud Storage 中。

在 IDE 终端，下载 Flutter 应用代码：
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~
若要获取应用项目依赖项，请在 IDE 终端窗口中运行以下命令：
cd ~/app; flutter pub get
若要在 IDE 中查看代码，请在其导航菜单 () 中点击文件，然后选择打开文件夹。
从列表中选择 /home/ide-dev/app/，然后点击确定。

若要信任该文件夹中文件的作者，请点击是，我信任此作者。

以下是对 app 文件夹内容的简要概述：

文件夹/文件	说明
app	项目根文件夹，内含构成 Flutter 应用的子文件夹和文件。
android/ios/linux/macos/web/windows	内含平台特定文件，即在各受支持平台上运行 Flutter 应用所需的文件。
lib	内含核心应用 Dart 文件，包括功能、路由、数据模型和用户界面。
test	内含用于测试应用 widget 的 Dart 测试。
pubspec.yaml	内含应用依赖项、Flutter 版本和其他配置设置。
analysis_options.yaml	内含用于对应用进行静态分析的配置设置。

我们来看看这些文件夹中的一些文件。

在资源管理器菜单中，点击 /app/lib/models 文件夹，然后点击打开 metadata.dart 文件。

metadata.dart 文件包含 Flutter 应用使用的数据模型。
class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }
元数据对象属性将映射到 Gemini API 所返回回答中的 JSON 属性。fromJson 方法会在调用时初始化对象属性。
在资源管理器菜单中，点击打开 /app/lib/main.dart 文件。

这是 Flutter 应用的入口点。在执行初始化任务后，此文件中的代码会使用 Material 组件构建应用的界面，并设置应用的名称、主题和路由配置。
注意：Material 应用始于 MaterialApp widget，该 widget 会在应用的根目录构建许多实用的 widget，包括用于管理到应用内各个屏幕的路由的导航器。
若要查看应用的路由配置，请在资源管理器菜单中点击打开 /app/lib/functionality/routing.dart 文件。

此文件中的代码定义了应用的 /、/chat 和 /settings 路由。

Flutter 使用了 Widget 的概念，这是指用来构建应用的声明式类。在 Flutter 中，您可以通过组合 widget 来构建更复杂的 widget，从而形成 widget 树，打造应用布局。如需详细了解如何在 Flutter 中构建界面，请查看此文档。
我们来看看负责应用的某些界面和功能的代码。在资源管理器菜单中，点击代开 /app/lib/ui/screens/quick_id.dart 文件。

此文件包含用于构建应用 widget 的类。该文件包含 GenerateMetadataScreen 类，该类用于构建应用的主页面，并从 routing.dart 文件中定义的 / 路径调用。在应用界面中，用户可以从计算机或移动设备上传图片，也可以通过设备相机拍照。

应用中使用的其他界面将用于设置和聊天页面，分别在 app/lib/ui/screens/ 文件夹下的 settings.dart 和 chat.dart 文件中实现。

在应用初始化期间，会使用 Vertex AI for Firebase Dart SDK 来提取应用所用到的 Gemini 生成式 AI 模型实例。此操作在 _GenerateMetadataScreenState 类中实现。
void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }
在用户选择一个图片后，应用会使用该图片和文本提示调用 Vertex AI Gemini API。此处使用的文本提示与您在前面的测试任务中试用 Gemini 2.0 Flash 模型时所用的提示相同。

_sendVertexMessage() 方法含有用于发送提示的代码。以下是该方法的部分代码：
Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }
接着，系统会对模型提供的 JSON 回答进行解码，以提取其中的 name、description 和 suggestedQuestions。这些内容会保存在本地并显示在应用界面中。

将 Flutter 应用关联到 Firebase

切换到 app 根项目文件夹，并激活 flutterfire_cli 软件包：
dart pub global activate flutterfire_cli
若要将您的 Flutter 应用注册到 Firebase，请运行以下命令：
flutterfire configure --project={{{project_0.project_id|set at lab start}}}
执行该命令后，会在 Flutter 项目的 lib 文件夹中添加 firebase_options.dart 配置文件。
为应用配置支持的平台：按空格键取消选择除 web 之外的所有平台。请使用箭头键滚动选择各平台。然后按 Enter 键。

您的 Flutter Web 应用现已注册，可与 Firebase 配合使用。

配置 Flutter 应用聊天功能

Flutter 应用具有聊天功能。借助此功能，用户可在应用中找到自己所上传图片的更多信息，或者从可能包含更新信息的其他外部数据源请求信息。为此，我们需要通过一种方法来实现 Gemini 模型与这些数据源的关联或接地。

为了实现此功能，Flutter 应用会与您之前在此实验中部署的 Reasoning Engine 智能体集成。为实现集成，您需要将 Flutter 应用关联到您构建并部署到 Cloud Run 的后端应用的端点。

首先，提取后端应用的 Cloud Run 端点主机名，并将该值存储在环境变量中。在 IDE 终端窗口中运行以下命令：
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST
对于 Flutter 应用，后端应用的端点在 ~/app/lib/config.dart 文件中进行配置。请更新该文件中的配置条目：
sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart
若要验证所作更改，请在 IDE 的资源管理器菜单中点击打开 IDE-DEV/app/lib/config.dart 文件。验证 cloudRunHost 配置条目值是否已根据下方的示例进行更新。

注意：此值应与您在上一步中设置的 `BACKEND_APP_HOST` 环境变量的值一致。

查看聊天功能代码

下面我们来看看 Flutter 应用中实现聊天功能的代码。

在 IDE 的资源管理器菜单中，点击打开 /app/lib/ui/screens/chat.dart 文件。

ChatPage 类会为界面中的聊天页面构建 Flutter widget。点击 Tell me more（更多详情）按钮后，此页面会在界面中显示。

为了构建聊天界面，该应用使用了 flutter_chat_ui_package 软件包。该软件包实现了大部分聊天样板代码，可供您进行自定义。build() 方法使用 Chat 类来构建 widget。
Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }
listBottomWidget 用于显示上次调用 Gemini 时返回的回答中包含的建议问题列表，用户可以从中选择一个问题作为聊天消息。

用户在聊天窗口中点击 Send（发送）时，系统将调用 _handleSendPressed() 回调方法。该方法可构建一条新消息，将该消息添加到消息列表，然后使用 askAgent() 方法将消息发送至后端。
滚动浏览代码，找到 askAgent() 方法。

为了使用 Reasoning Engine 智能体调用 Gemini，askAgent() 方法会向后端应用的 Cloud Run 端点的 /ask_gemini 网址发送请求。请求查询参数包括上次调用 Gemini 时返回的图片 name 和 description，以及用户的消息。
Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }
然后，通过调用 _sendMessageToAgent() 函数，将来自后端的回答添加到聊天窗口中的消息列表中。

部署 Flutter 应用

现在，Flutter 应用配置已完成，您可以构建和部署该应用了。在本实验中，为了以 Web 应用的形式运行该应用，我们将使用 Flutter Web 的开发服务器 Fwr。

确保您位于 Flutter 应用文件夹中。在 IDE 终端窗口中运行以下命令：
cd ~/app
为了提取应用项目依赖项，请运行以下命令：
flutter pub get
为了构建项目并启动 Web 服务器，请运行以下命令：
fwr
等待服务器启动并部署 Flutter 应用。启动后，该命令的输出应类似于以下内容：

如需验证是否已完成以下目标，请点击检查我的进度：配置 Firebase 项目和 Flutter 应用

任务 8. 测试 Flutter 应用

我们来测试一下 Flutter 应用的功能。

下载测试图片

为了测试该应用，请先下载一张图片并将其保存至计算机。复制以下网址可在另一个浏览器标签页中查看图片：

Fallingwater 图片
右键点击该图片，将其保存到您的计算机。
重复上述步骤，从以下网址下载 Google Chrome 恐龙游戏徽章的图片：

Google Chrome 恐龙游戏徽章图片

测试该应用

为访问 Flutter 应用，请从 Qwiklabs 凭据面板复制实时服务器网址，并将其粘贴到新的浏览器标签页中。
等待几秒钟，直到应用加载完毕。然后，点击 Choose from Library（从库中选择），上传 Fallingwater 图片。

上传图片后，该应用会调用 Vertex AI Gemini API 来生成回答，其中包含将会在应用界面中显示的图片名称和说明。

在应用界面中，可能要等待几秒钟，才能看到应用使用 Gemini 模型回答中的内容填充名称和说明字段。
注意：如果您收到权限遭拒错误，请忽略该错误，然后点击“OK”（确定）按钮继续。点击 Remove image（移除图片），然后重新上传图片。
点击 Tell me more（更多详情）。

聊天页面会加载并显示上次调用 Gemini API 时返回的回答中包含的建议问题。

注意：如果未显示建议问题，请刷新页面，然后重复前面的两个步骤来上传图片。
点击其中一个建议问题，查看聊天智能体的回答。

该智能体会向后端应用的 Cloud Run 端点发出 HTTPS 调用，后端应用随后会调用 Reasoning Engine 智能体，通过 Gemini 返回基于 Wikipedia 得出的回答。

使用商品数据来测试应用

在聊天界面中，点击 Remove image（移除图片）。
若要上传 Google Chrome 恐龙游戏徽章的图片，请点击 Choose from Library（从库中选择），然后上传您之前保存的图片。

上传图片后，该应用会调用 Vertex AI Gemini API 来生成回答，其中包含将会在应用界面中显示的图片名称和说明。
点击 Tell me more（更多详情）。
在聊天消息框中输入以下内容：
Where can I buy this pin?
该智能体会向后端应用的 Cloud Run 端点发出 HTTPS 调用，后端应用随后会调用 Reasoning Engine 智能体，通过 Gemini 返回基于 Vertex AI Search 数据存储区得出的回答。
（可选）如需查看将 Flutter 应用切换到移动设备布局的效果，请将浏览器窗口调整为与移动设备大致相同的大小：

这表明 Flutter 应用可根据屏幕或窗口大小做出相应调整。Flutter 提供了一些 widget 和软件包，可帮助您的应用根据设备配置对变更做出响应和调整。

结束实验

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

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

星级的含义如下：

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

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

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

恭喜！

在此实验中，您执行了以下操作：

在 Google Cloud 控制台中使用 Vertex AI Agent Builder 创建搜索数据存储区和搜索应用。
使用 Vertex AI Workbench 部署 Reasoning Engine 智能体。
构建与 Vertex AI Search 和 Reasoning Engine 智能体集成的 Python 应用。
将该应用部署到 Cloud Run，并将其作为 Flutter 应用的后端。
设置 Firebase 项目并将其关联到 Flutter 应用。
查看 Flutter 应用代码，了解其中部分功能。
运行并测试 Flutter 应用。

使用 Vertex AI 和 Flutter 构建生成式 AI 智能体

检查点

使用 AI Applications 将 AI 智能体与 Flutter 应用进行集成

概览

目标

设置