使用适用于 Gemini API 的 Firebase Extensions 构建 AI 赋能的 Web 应用

1. 准备工作

借助 Firebase Extensions，您只需编写极少的代码即可向应用添加预封装的功能，甚至是 AI 赋能的功能。此 Codelab 将向您展示如何在 Web 应用中集成两个 Firebase 扩展程序，以便您可以利用 Gemini API 根据提供的上下文和最终用户输入生成图片说明、摘要，甚至个性化推荐。

在此 Codelab 中，您将了解如何使用 Firebase Extensions 构建 AI 赋能的 Web 应用，以提供富有吸引力的用户体验。

前提条件

• 了解 Node.js、Next.js 和 TypeScript。

学习内容

• 如何使用 Firebase Extensions for the Gemini API 处理语言。
• 如何使用 Cloud Functions for Firebase 为语言模型构建增强型上下文。
• 如何使用 JavaScript 访问 Firebase Extensions 生成的输出。

您需要满足的条件

• 您所选的浏览器（例如 Google Chrome）
• 包含代码编辑器和终端的开发环境
• 一个用于创建和管理 Firebase 项目的 Google 账号

注意：此 Codelab 使用需要 Cloud 结算账号的 Firebase 和 Google 服务。如果您是 Firebase 和 Google Cloud 新手，请确认您是否有资格获得 $300 赠金和免费试用 Cloud Billing 账号，以试用我们的服务。否则，您需要提供付款方式（例如信用卡）来设置 Cloud Billing 账号（如需详细了解付款方式，请参阅 Cloud Billing 文档）。

2. 查看 Web 应用、Firebase 服务和扩展程序

在本部分中，您将查看在此 Codelab 中构建的 Web 应用，并了解您将使用的 Firebase 服务和 Firebase 扩展程序。

Web 应用

在此 Codelab 中，您将构建一个名为 Friendly Conf 的 Web 应用。

Friendly Conference 的工作人员决定使用 AI 为参会者打造令人愉悦的个性化用户体验。完成后的会议应用为参会者提供了一个对话式 AI 聊天机器人，该聊天机器人依托多模态生成式 AI 模型（也称为大语言模型或 LLM），可以回答有关一般主题的问题，并根据会议日程和主题量身定制回答。这款聊天机器人留有历史情况，并且了解当前日期/时间和 Friendly Conf 的主题和日程，因此其回答可将所有这些背景信息考虑在内。

注意：这是一个包含许多步骤的大型 Codelab。如需充分利用此 Codelab，请执行以下操作：

• 通过休息来调整自己的节奏。
• 在使用代码时，请花些时间了解代码是什么及其工作原理，而不是不加思考地进行复制和粘贴。
• 如果遇到困难，请将步骤追溯到上次的工作状态，然后确保自己已准确完成每个步骤。
• 如果您发现此 Codelab 或其代码存在 bug，请在 GitHub 上提交问题。

Firebase 服务

在此 Codelab 中，您将使用多项 Firebase 服务和功能，并且我们已为您提供了大部分起始代码。下表列出了您将使用的服务以及使用这些服务的原因。

服务	使用原因
Firebase Authentication	您为 Web 应用使用“使用 Google 账号登录”功能。
Cloud Firestore	您将文本数据存储在 Cloud Firestore 中，然后由 Firebase 扩展程序进行处理。
Cloud Storage for Firebase	您从 Cloud Storage 读取数据并向其中写入数据，以在 Web 应用中显示图片库。
Firebase 安全规则	您可部署安全规则，以帮助保护对 Firebase 服务的访问权限。
Firebase Extensions	您需要配置并安装与 AI 相关的 Firebase 扩展程序，并在 Web 应用中显示结果。
奖励：Firebase 托管	您可以选择使用 Firebase Hosting 来提供 Web 应用（无需 GitHub 代码库）。
奖励：Firebase App Hosting	您可以选择使用新的精简版 Firebase App Hosting 来提供动态 Next.js Web 应用（已关联到 GitHub 代码库）。

Firebase Extensions

您将在此 Codelab 中使用的 Firebase 扩展程序包括：

• 使用 Gemini API 构建聊天机器人
• 使用 Gemini API 执行多模态任务

扩展程序非常实用，因为它们可以对 Firebase 项目中发生的事件做出反应。在此 Codelab 中使用的两个扩展程序都会在您于 Cloud Firestore 中预配置的集合中创建新文档时做出响应。

3. 设置您的开发环境

验证您的 Node.js 版本

1. 在终端中，验证是否已安装 Node.js 20.0.0 版或更高版本：

   node -v
   

2. 如果您没有 Node.js 20.0.0 版或更高版本，请下载最新的 LTS 版本并安装。

获取 Codelab 的源代码

如果您有 GitHub 账号：

1. 使用 github.com/FirebaseExtended/codelab-gemini-api-extensions 中的模板创建新代码库
2. 克隆您刚刚创建的 Codelab 的 GitHub 代码库：

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

如果您未安装 git 或不想创建新代码库：

以 zip 文件的形式下载 GitHub 代码库。

查看文件夹结构

根文件夹包含一个 README.md 文件，可让您按照精简的说明快速开始运行 Web 应用。不过，如果您刚开始接触，则应完成此 Codelab（而不是快速入门），因为此 Codelab 包含最全面的说明。

如果您不确定是否按照此 Codelab 中的说明正确应用了代码，可以在 end git 分支中找到解决方案代码。

安装 Firebase CLI

1. 验证您是否已安装 Firebase CLI 且版本为 13.6 或更高版本：

   firebase --version
   

2. 如果您安装了 Firebase CLI，但其版本不是 13.6 或更高版本，请进行更新：

   npm update -g firebase-tools
   

3. 如果您没有安装 Firebase CLI，请进行安装：

   npm install -g firebase-tools
   

如果由于权限错误而无法更新或安装 Firebase CLI，请参阅 npm 文档或使用其他安装选项。

登录 Firebase

1. 在终端中，前往 codelab-gemini-api-extensions 文件夹并登录 Firebase：

   cd codelab-gemini-api-extensions
   firebase login
   

   如果您的终端显示您已登录 Firebase，您可以跳到此 Codelab 的设置 Firebase 项目部分。
2. 在终端中，根据您是否希望 Firebase 收集数据，输入 Y 或 N。（任一选项均适用于此 Codelab）
3. 在浏览器中，选择您的 Google 账号，然后点击允许。

4. 设置您的 Firebase 项目

在本部分中，您将设置一个 Firebase 项目，并在其中注册一个 Firebase Web 应用。您还将在本 Codelab 的后面部分启用示例 Web 应用使用的几项 Firebase 服务。

本部分中的所有步骤都在 Firebase 控制台中执行。

创建 Firebase 项目

1. 使用您在上一步中使用的同一 Google 账号登录 Firebase 控制台。
2. 点击相应按钮以创建新项目，然后输入项目名称（例如 AI Extensions Codelab）。
   

   此项目名称将用作 Firebase 界面中的显示名称，Firebase 会基于该项目名称自动生成唯一的项目 ID。请注意，您现在可以点击修改图标设置首选项目 ID，但在项目创建后将无法再更改此 ID。

   请记下您的项目 ID，因为稍后您需要在 Firebase CLI 中使用该 ID 来标识您的 Firebase 项目。如果您忘记了 ID，以后可以随时在项目设置中找到它。

3. 点击继续。
4. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。
5. （可选）在 Firebase 控制台中启用 AI 辅助功能（称为“Gemini in Firebase”）。
6. 在此 Codelab 中，您不需要使用 Google Analytics，因此请关闭 Google Analytics 选项。
7. 点击创建项目，等待项目完成预配，然后点击继续。

升级您的 Firebase 定价方案

如需使用 Firebase Extensions（及其底层云服务）以及 Cloud Storage for Firebase，您的 Firebase 项目必须采用随用随付 (Blaze) 定价方案，这意味着该项目需要与一个 Cloud Billing 账号相关联。

• Cloud Billing 账号要求提供付款方式，例如信用卡。
• 如果您刚开始接触 Firebase 和 Google Cloud，请确认您是否有资格获得 $300 赠金和免费试用 Cloud Billing 账号。
• 如果您是在活动中完成此 Codelab，请询问活动组织者是否有可用的 Cloud 积分。

另请注意，在 Firebase 项目中启用结算功能后，您需要为扩展程序对 Gemini API 进行的调用付费（无论您选择哪个提供商，Google AI 还是 Vertex AI）。详细了解 Google AI 和 Vertex AI 的价格。

如需将项目升级到 Blaze 方案，请按以下步骤操作：

1. 在 Firebase 控制台中，选择升级您的方案。
2. 选择 Blaze 方案。按照屏幕上的说明将 Cloud Billing 账号与您的项目相关联。
   如果您需要在此升级过程中创建 Cloud Billing 账号，则可能需要返回 Firebase 控制台中的升级流程以完成升级。

注意：完成此 Codelab 后，您可以将项目降级为免费 (Spark) 定价方案。

向 Firebase 项目添加 Web 应用

1. 前往 Firebase 项目中的项目概览界面，然后点击 Web。
2. 在应用别名文本框中，输入一个容易记住的应用别名，例如 My AI Extensions
3. 点击注册应用 > 下一步 > 下一步 > 继续前往控制台。
   您可以跳过 Web 应用流程中与“托管”相关的所有步骤，因为您将在本 Codelab 的后续部分中选择性地设置托管服务。

太棒了！您现在已在新 Firebase 项目中注册了一个 Web 应用。

设置 Firebase Authentication

1. 使用左侧导航窗格前往身份验证。
2. 点击开始使用。
3. 在其他提供商列中，点击 Google > 启用。
4. 在项目的公开名称文本框中，输入一个有用的名称，例如 My AI Extensions Codelab。
5. 在项目的支持电子邮件地址菜单中，选择您的电子邮件地址。
6. 点击保存。

设置 Cloud Firestore

1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择 Firestore 数据库。
2. 点击创建数据库。
3. 将数据库 ID 保留为 (default)。
4. 为数据库选择一个位置，然后点击下一步。
   对于真实应用，您需要选择靠近用户的位置。
5. 点击以测试模式开始。阅读有关安全规则的免责声明。
   在本 Codelab 的后面部分，您将添加安全规则来保护您的数据。在没有为数据库添加安全规则的情况下，请不要公开分发或公开应用。
6. 点击创建。

设置 Cloud Storage for Firebase

1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择存储。
2. 点击开始使用。
3. 为默认存储分区选择位置。
   US-WEST1、US-CENTRAL1 和 US-EAST1 中的存储分区可为 Google Cloud Storage 使用“始终免费”层级。所有其他位置的存储分区都遵循 Google Cloud Storage 价格和用量。
4. 点击以测试模式开始。阅读有关安全规则的免责声明。
   在本 Codelab 的后面部分，您将添加安全规则来保护您的数据。在未为您的存储桶添加安全规则的情况下，请不要公开分发或公开应用。
5. 点击创建。

在此 Codelab 的下一部分中，您将安装并配置两个 Firebase 扩展程序，您将在整个 Codelab 中在 Web 应用中使用这两个扩展程序。

5. 设置“Build Chatbot with the Gemini API”扩展程序

注意：此 Codelab 中使用的 Firebase 扩展程序有完善的文档。如需了解详情，请参阅每个扩展程序的相应页面，尤其是其使用入门、可配置的参数和结算页面。

安装“Build Chatbot with the Gemini API”扩展程序

1. 前往 “Build Chatbot with the Gemini API”扩展程序。
2. 点击 Firebase 控制台中的“安装”。
3. 选择您的 Firebase 项目，然后点击下一步。
4. 在“查看已启用的 API 和已创建的资源”部分中，点击任何为您推荐的服务旁边的启用，然后点击下一步。
5. 对于系统向您建议的任何权限，请选择授予，然后点击下一步。
6. 配置扩展程序：
   1. 在 Gemini API 提供方菜单中，选择要使用 Google AI 还是 Vertex AI 中的 Gemini API。对于使用 Firebase 的开发者，我们建议使用 Vertex AI。
   2. 在 Firestore 集合路径文本框中，输入：users/{uid}/messages。
      在此 Codelab 的后续步骤中，向此集合添加文档将触发扩展程序调用 Gemini API。
   3. 在 Cloud Functions 位置菜单中，选择您的首选位置（例如 Iowa (us-central1) 或您之前为 Firestore 数据库指定的位置）。
   4. 请将其他所有值保留为默认值。
7. 点击安装扩展程序，然后等待扩展程序安装完成。

注意：在扩展程序安装期间，您可以随意观看自己喜爱的猫咪视频播放列表。

提示：如果安装失败，请重试安装。有时，您的项目可能会遇到与服务账号创建和权限分配相关的时间安排问题。

试用“Build Chatbot with the Gemini API”扩展程序

虽然此 Codelab 的目标是通过 Web 应用与“Build Chatbot with the Gemini API”扩展程序进行交互，但先在 Firebase 控制台中试用该扩展程序有助于了解其工作原理。

每当在集合 users/{uid}/discussion/{discussionId}/messages 下创建 Firestore 文档时（您可以在 Firebase 控制台中执行此操作），系统都会触发该扩展程序。

1. 在 Firebase 控制台中，前往 Firestore，然后点击第一列中的 开始收集。
2. 在集合 ID 文本框中，输入 users，然后点击下一步。
3. 在文档 ID 文本框中，点击自动生成的 ID，然后点击保存。
4. 在 users 集合中，点击 启动集合。
5. 在集合 ID 文本框中，输入 messages，然后点击下一步。
   1. 在文档 ID 文本框中，点击自动生成的 ID。
   2. 在字段文本框中，输入 prompt
   3. 在值文本框中，输入 Tell me 5 random fruits
6. 点击保存，然后等待几秒钟。

您添加此文档时，系统会触发扩展程序调用 Gemini API。您刚刚添加到 messages 集合中的文档现在不仅包含您的 prompt，还包含模型对您查询的 response。

通过向 messages 集合添加另一个文档来再次触发扩展程序：

1. 在 messages 集合中，点击 添加文档。
2. 在文档 ID 文本框中，点击自动生成的 ID。
3. 在字段文本框中，输入 prompt
4. 在值文本框中，输入 And now, vegetables
5. 点击保存，然后等待几秒钟。您刚刚添加到 messages 集合中的文档现在包含对您查询的response。
   
   在生成此回答时，底层 Gemini 模型使用了您之前查询的历史知识。

6. 设置 Web 应用

如需运行 Web 应用，您需要在终端中运行命令，并在代码编辑器中添加代码。

设置 Firebase CLI 以针对您的 Firebase 项目运行

在终端中，运行以下命令，告知 CLI 使用您的 Firebase 项目：

firebase use YOUR_PROJECT_ID

提示：如果您忘记了项目 ID，可以随时在 Firebase 控制台的项目设置中找到它。

为 Firestore 和 Cloud Storage 部署安全规则

此 Codelab 的代码库已为您编写了一组 Firestore 安全规则和 Cloud Storage 安全规则。部署这些安全规则后，Firebase 项目中的 Firebase 服务可以得到更好的保护，避免遭到滥用。

1. 如需部署安全规则，请在终端中运行以下命令：

   firebase deploy --only firestore:rules,storage
   

2. 如果系统询问是否向 Cloud Storage 授予使用跨服务规则的 IAM 角色，请输入 Y 或 N。（任一选项均适用于此 Codelab）

将 Web 应用关联到 Firebase 项目

Web 应用的代码库需要知道它应该使用哪个 Firebase 项目来处理数据库、存储空间等。为此，您需要将 Firebase 配置添加到应用的代码库中。

1. 获取 Firebase 配置：
   1. 在 Firebase 控制台中，前往 Firebase 项目中的项目设置。
   2. 向下滚动到您的应用部分，然后选择您已注册的网络应用。
   3. 在 SDK 设置和配置窗格中，复制完整的 initializeApp 代码，包括 firebaseConfig 常量。
2. 将 Firebase 配置添加到 Web 应用的代码库中：
   1. 在代码编辑器中，打开 src/lib/firebase/firebase.config.js 文件。
   2. 选择文件中的所有内容，然后将其替换为您复制的代码。
   3. 保存文件。

在浏览器中预览 Web 应用

1. 在终端中，安装依赖项，然后运行 Web 应用：

   npm install
   npm run dev
   

2. 在浏览器中，前往本地托管的 Hosting 网址以查看 Web 应用。例如，在大多数情况下，该网址为 http://localhost:3000/ 或类似网址。

使用 Web 应用的聊天机器人

注意：localhost 是 Firebase Authentication 的默认已获授权的网域。如果您想使用其他内容（例如 127.0.0.1），则必须将您的主机名添加到已获授权的网域列表中。

1. 在浏览器中，返回到本地运行的 Friendly Conf Web 应用所在的标签页。
2. 点击使用 Google 账号登录，然后根据需要选择您的 Google 账号。
3. 登录后，您会看到一个空白的聊天窗口。
4. 输入问候语（例如 hi），然后点击发送。
5. 等待几秒钟，以便聊天机器人做出回答。

应用中的聊天机器人会返回一般性回答。

针对应用专门定制聊天机器人

您需要让 Web 应用的聊天机器人所用的底层 Gemini 模型在为参会者生成回答时了解会议的具体细节。有很多方法可以控制和引导这些回答，在此 Codelab 的子部分中，我们将展示一种非常基本的方法，即在初始提示中提供“上下文”（而不仅仅是 Web 应用用户的输入）。

1. 在浏览器中的 Web 应用中，点击红色“x”按钮（位于聊天记录中的消息旁边），清除对话。
2. 在代码编辑器中，打开 src/app/page.tsx 文件。
3. 向下滚动，然后将第 93 行附近或第 93 行上的代码（即 prompt: userMsg）替换为以下代码：
   prompt: preparePrompt(userMsg, messages),
4. 保存文件。
5. 返回到浏览器中运行的 Web 应用。
6. 再次输入问候语（例如 hi），然后点击发送。
7. 等待几秒钟，以便聊天机器人做出回答。

聊天机器人会根据 src/app/lib/context.md 中提供的上下文信息做出回答。即使您没有输入具体要求，底层 Gemini 模型也会根据此上下文以及当前日期/时间生成个性化推荐。现在，您可以指定后续问题，深入了解更多信息。

这种扩展的上下文对于聊天机器人来说非常重要，但不应向 Web 应用的用户显示。以下是如何隐藏它的方法：

1. 在代码编辑器中，打开 src/app/page.tsx 文件。
2. 向下滚动，然后将第 56 行或附近的代码（即 ...doc.data(),）替换为以下代码：
   ...prepareMessage(doc.data()),
3. 保存文件。
4. 返回到浏览器中运行的 Web 应用。
5. 重新加载页面。

您还可以尝试与聊天机器人进行具有历史上下文的对话：

1. 在输入消息文本框中，提出问题，例如：Any other interesting talks about AI?。聊天机器人会返回回答。
2. 在输入消息文本框中，提出与上一个问题相关的后续问题：Give me a few more details about the last one.

聊天机器人会根据历史信息做出回答。由于聊天记录现在是上下文的一部分，因此聊天机器人可以理解后续问题。

7. 设置“Multimodal Tasks with the Gemini API”扩展程序

注意：此 Codelab 中使用的 Firebase 扩展程序有完善的文档。如需了解详情，请参阅每个扩展程序的相应页面，尤其是其使用入门、可配置的参数和结算页面。

“使用 Gemini API 执行多模态任务”扩展程序会使用包含文本提示以及受支持的文件网址或 Cloud Storage 网址的多模态提示来调用 Gemini API（请注意，即使是 Google AI Gemini API 也使用 Cloud Storage 网址作为其底层文件网址基础架构）。该扩展程序还支持 Handlebars 变量，用于替换 Cloud Firestore 文档中的值，以自定义文本提示。

在应用中，每当您将图片上传到 Cloud Storage 存储分区时，都可以生成一个网址，并将该网址添加到新 Cloud Firestore 文档中，从而触发扩展程序创建多模态提示并调用 Gemini API。在此 Codelab 的源代码中，我们已提供用于上传图片并将网址写入 Firestore 文档的代码。

安装“Multimodal Tasks with the Gemini API”扩展程序

1. 前往 “Multimodal Tasks with the Gemini API”扩展程序。
2. 点击 Firebase 控制台中的“安装”。
3. 选择您的 Firebase 项目。
4. 点击下一步 > 下一步 > 下一步，直到看到配置扩展程序部分。
   1. 在 Gemini API 提供方菜单中，选择要使用 Google AI 还是 Vertex AI 中的 Gemini API。对于使用 Firebase 的开发者，我们建议使用 Vertex AI。
   2. 在 Firestore 集合路径文本框中，输入：gallery
   3. 在提示文本框中，输入：Please describe the provided image; if there is no image, say "no image"
   4. 在图片字段文本框中，输入：image
   5. 在 Cloud Functions 位置菜单中，选择您的首选位置（例如 Iowa (us-central1) 或您之前为 Firestore 数据库指定的位置）。
   6. 请将其他所有值保留为默认值。
5. 点击安装扩展程序，然后等待扩展程序安装完成。

注意：在扩展程序安装期间，您可以随意去观看您第二喜欢的猫视频播放列表。

试用“Multimodal Tasks with the Gemini API”扩展程序

虽然此 Codelab 的目标是通过 Web 应用与“Multimodal Tasks with the Gemini API”扩展程序进行交互，但先在 Firebase 控制台中试用该扩展程序有助于了解其工作原理。

每当在集合 users/{uid}/gallery 下创建 Firestore 文档时（您可以在 Firebase 控制台中执行此操作），系统都会触发该扩展程序。然后，扩展程序会获取 Cloud Firestore 文档中的 Cloud Storage 图片网址，并将其作为多模态提示的一部分传递给 Gemini API。

首先，将图片上传到 Cloud Storage 存储分区：

1. 前往 Firebase 项目中的 Storage。
2. 点击 创建文件夹。
3. 在文件夹名称文本框中，输入 gallery
4. 点击添加文件夹。
5. 在 gallery 文件夹中，点击上传文件。
6. 选择要上传的 JPEG 图片文件。

接下来，将图片的 Cloud Storage 网址添加到 Firestore 文档（这是扩展程序的触发器）：

1. 前往 Firebase 项目中的 Firestore
2. 点击第一列中的 启动集合。
3. 在集合 ID 文本框中，输入 gallery，然后点击下一步。
4. 向集合中添加文档：
   1. 在文档 ID 文本框中，点击自动生成的 ID。
   2. 在字段文本框中，输入：image。在值框中，输入您刚刚上传的图片的存储位置 URI。
5. 点击添加字段。
6. 在字段文本框中，输入：published。在类型框中，选择 boolean。在值框中，选择 true。
7. 点击保存，然后等待几秒钟。

gallery 集合现在包含一个文档，其中包含对您查询的回答。

使用 Web 应用的图片库

1. 在浏览器中，返回到本地运行的 Friendly Conf Web 应用所在的标签页。
2. 点击图库导航标签页。
3. 您将看到一个包含上传的图片和 AI 生成的说明的图库。它应该包含您之前上传到存储分区中 gallery 文件夹的映像。
4. 点击“上传”按钮，然后选择另一张 JPEG 图片。
5. 等待几秒钟，图片就会显示在媒体库中。片刻之后，系统还会显示 AI 为新上传的图片生成的说明。

如果您想了解此功能的实现代码，请参阅 Web 应用代码库中的 src/app/gallery/page.tsx。

提示：如果未生成图片说明，并且您收到 PERMISSION_DENIED 错误，请卸载并重新安装该扩展程序，以允许其为所使用的服务账号设置正确的权限。

8. 奖励：部署应用

Firebase 提供多种部署 Web 应用的方式。对于此 Codelab，请选择以下选项之一：

• 方法 1：Firebase Hosting - 如果您决定不创建自己的 GitHub 代码库（并且仅将源代码存储在本地计算机上），请使用此方法。
• 方法 2：Firebase App Hosting - 如果您希望在每次将更改推送到自己的 GitHub 代码库时自动部署，请使用此方法。这项新的 Firebase 服务专门为满足动态 Next.js 和 Angular 应用的需求而构建。

方法 1：使用 Firebase Hosting 进行部署

如果您决定不创建自己的 GitHub 代码库（并且只将源代码存储在本地计算机上），请使用此选项。

1. 在终端中，运行以下命令来初始化 Firebase Hosting：

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. 对于提示：Detected an existing Next.js codebase in your current directory, should we use this?，请按 Y。
3. 对于提示：In which region would you like to host server-side content, if applicable?，请选择默认位置或您在本 Codelab 前面部分中使用的位置。然后按 Enter（在 macOS 上为 return）。
4. 对于提示：Set up automatic builds and deploys with GitHub?，请按 N。
5. 运行以下命令，将 Web 应用部署到 Hosting：

   firebase deploy --only hosting
   

全部完成了！如果您更新了应用并想部署新版本，只需重新运行 firebase deploy --only hosting，Firebase Hosting 就会构建并重新部署您的应用。

方法 2：使用 Firebase App Hosting 进行部署

如果您希望在每次将更改推送到自己的 GitHub 代码库时自动部署，请使用此选项。

1. 将更改提交到 GitHub。
2. 在 Firebase 控制台中，前往 Firebase 项目中的应用托管。
3. 依次点击开始 > 关联到 GitHub。
4. 选择您的 GitHub 账号和代码库。点击下一步。
5. 在部署设置 > 根目录中，输入包含源代码的文件夹的名称（如果 package.json 不在代码库的根目录中）。
6. 对于实时分支，请选择 GitHub 代码库的 main 分支。点击下一步。
7. 为后端输入 ID（例如 chatbot）。
8. 点击完成并部署。

新部署需要几分钟时间才能准备就绪。您可以在 Firebase 控制台的应用托管部分中查看部署状态。

从现在开始，每次您向 GitHub 代码库推送更改时，Firebase App Hosting 都会自动构建和部署您的应用。

9. 总结

恭喜！您在此 Codelab 中取得了很多成果！

安装和配置扩展程序

您已使用 Firebase 控制台配置和安装各种使用生成式 AI 的 Firebase 扩展程序。使用 Firebase 扩展程序非常方便，因为您不需要学习和编写大量样板代码来处理以下任务：向 Google Cloud 服务进行身份验证、使用后端 Cloud Functions 逻辑来监听和与 Firestore 及 Google Cloud 服务和 API 进行交互。

使用 Firebase 控制台试用扩展程序

您并没有直接开始处理代码，而是根据您通过 Firestore 或 Cloud Storage 提供的输入信息，花时间了解了这些生成式 AI 扩展程序的运作方式。在调试扩展程序的输出时，这尤其有用。

构建 AI 赋能的 Web 应用

您构建了一个 AI 赋能的 Web 应用，该应用使用 Firebase Extensions 来访问 Gemini 模型的少数功能。

在 Web 应用中，您使用“Chatbot with Gemini API”扩展程序为用户提供交互式聊天界面，其中包括对话中的应用特定上下文和历史上下文，而每条消息存储在范围限定为特定用户的 Firestore 文档中。

该 Web 应用还使用“Multimodal Tasks with the Gemini API”扩展服务自动为上传的图片生成图片描述。

后续步骤

• 在 Google AI Studio 或 Vertex AI Studio 中试用提示并利用大上下文窗口。
• 了解 AI 检索增强生成 (RAG) 搜索。
• 不妨尝试一个可按自己的进度学习的 Codelab，了解如何使用 Genkit（一种新的 AI 框架服务）将聊天机器人添加到现有的 Firebase 应用中。
• 了解 Firestore 和 Cloud SQL for PostgreSQL 中的相似性搜索功能。
• 教导聊天机器人使用函数调用来调用现有应用。