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

1. 准备工作

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

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

前提条件

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

学习内容

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

您需要满足的条件

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

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

在本部分中，您将了解将通过此 Codelab 构建的 Web 应用，还会了解您将使用的 Firebase 服务和 Firebase Extensions。

Web 应用

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

友好会议的工作人员决定利用 AI 为参与者打造令人愉悦的个性化用户体验。完成后的会议应用为与会者提供一个由多模态生成式 AI 模型（也称为大语言模型 (LLM)）提供支持的对话式 AI 聊天机器人，它可以根据会议日程和主题回答有关一般主题的问题。聊天机器人具有历史上下文和与当前日期/时间以及友好会议主题和时间表有关的知识，因此其响应会考虑所有这些上下文。

5364a56a230ff075

Firebase 服务

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

服务

使用原因

Firebase Authentication

您为 Web 应用使用“使用 Google 账号登录”功能。

Cloud Firestore

您将文本数据存储在 Cloud Firestore 中，然后由 Firebase Extensions 进行处理。

Cloud Storage for Firebase

您可以从 Cloud Storage 读取和写入数据，以便在 Web 应用中显示图片库。

Firebase 安全规则

您可以部署安全规则，以帮助保护对 Firebase 服务的访问。

Firebase Extensions

您可以配置和安装与 AI 相关的 Firebase Extensions，并在 Web 应用中显示结果。

附赠：Firebase Local Emulator Suite

您可以选择使用 Local Emulator Suite 在本地运行应用，而无需连接到云端的众多实时 Firebase 服务。

奖励：Firebase Hosting

您可以选择使用 Firebase Hosting 来提供 Web 应用（无需 GitHub 代码库）。

奖励：Firebase App Hosting

您可以选择使用经过简化的全新 Firebase App Hosting 来提供您的动态 Next.js Web 应用（与 GitHub 代码库关联）。

Firebase Extensions

您将在此 Codelab 中使用的 Firebase Extensions 包括：

扩展程序会对您的 Firebase 项目中发生的事件做出反应。当您在 Cloud Firestore 中的预配置集合中创建新文档时，此 Codelab 中使用的这两个扩展程序都会做出响应。

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 中提供的模板创建新的代码库65ef006167d600ab.png
  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 项目自动分配的项目 ID（也可以点击修改图标设置自己偏好的项目 ID）。您稍后需要此 ID 才能在 Firebase CLI 中识别您的 Firebase 项目。如果您忘记了 ID，可以随时在项目设置中查找。
  3. 点击继续。
  4. 如果出现提示，请查看并接受 Firebase 条款，然后点击继续。
  5. 对于此 Codelab，您不需要使用 Google Analytics，因此请关闭 Google Analytics 选项。
  6. 点击创建项目，等待项目预配完成，然后点击继续。

向 Firebase 项目添加 Web 应用

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

在 Firebase 项目中创建的 Web 应用

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

升级您的 Firebase 结算方案

如需使用 Firebase Extensions 及其底层云服务，您需要升级 Firebase 项目以启用结算功能。

另请注意，如果您的 Firebase 项目启用了结算功能，则系统会对该扩展程序对 Gemini API 的调用收费（无论您选择的是 Google AI 还是 Vertex AI 提供商）。详细了解 Google AI 和 Vertex AI 的价格。

如需升级项目的结算方案，请按以下步骤操作：

  1. 前往 Firebase 项目中的 Firebase 结算方案。
  2. 在 Firebase 结算方案对话框中，选择 Blaze 方案并进行购买。

启用 Firebase Authentication

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

37e54f32f8133be3

启用 Cloud Firestore

  1. 使用左侧导航窗格前往 Firestore。
  2. 依次点击创建数据库 > 以测试模式开始 > 下一步。本 Codelab 后面会介绍如何部署更强大的 Firebase 安全规则。
  3. 选择您的首选 Cloud Firestore 位置（或直接保留默认位置）。
  4. 点击启用。

启用 Cloud Storage for Firebase

  1. 使用左侧导航窗格前往 Storage。
  2. 点击开始使用 >以测试模式开始 >下一步。稍后在此 Codelab 中，您将部署更强大的 Firebase 安全规则。
  3. 由于您先在项目中设置了 Firestore，因此您的默认 Cloud Storage 存储分区的位置也已设置。
  4. 点击完成。

在此 Codelab 的下一部分中，您将安装并配置两个 Firebase Extensions，并在本 Codelab 的整个过程中在 Web 应用中使用它们。

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

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

  1. 前往“Build Chatbot with the Gemini API”扩展程序”。
  2. 点击在 Firebase 控制台中安装。
  3. 选择您的 Firebase 项目，然后点击下一步。
  4. 在“查看已启用的 API 和已创建的资源”部分中，点击任何为您推荐的服务旁边的启用，然后点击下一步。“8e58e717da8182a2”
  5. 对于系统建议的任何权限，请选择授予，然后点击下一步。269e1c3c4123425c.png
  6. 配置扩展程序：
    1. 在 Gemini API Provider 菜单中，选择要使用 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 的目标是与“Build Chatbot with the Gemini API”交互扩展程序，最好先在 Firebase 控制台中试用，了解该扩展程序的工作原理。

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

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

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

Firestore 文档中的语言模型回答

通过将另一个文档添加到 messages 集合中，再次触发扩展程序：

  1. 在 messages 集合中，点击 12 月 3188dd2d1aa02 添加文档。
  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

为 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. 向下滚动到您的应用部分，然后选择您已注册的 Web 应用。
    3. 在 SDK 设置和配置窗格中，复制完整的 initializeApp 代码，包括 firebaseConfig 常量。
  2. 将您的 Firebase 配置添加到 Web 应用的代码库中：
    1. 在代码编辑器中，打开 src/app/lib/firebase/firebase.config.js 文件。
    2. 选择文件中的所有项，并替换为您复制的代码。
    3. 保存文件。

在浏览器中预览 Web 应用

  1. 在终端中，安装依赖项，然后运行 Web 应用：
    npm install
npm run dev
  2. 在浏览器中，前往本地托管的 Hosting 网址以查看 Web 应用。例如，在大多数情况下，网址为 http://localhost:3000/ 或类似网址。

使用 Web 应用的聊天机器人

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

应用中的聊天机器人会返回一个通用响应。

1929b9f465053ae7.png

为应用专门定制聊天机器人

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

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

6fbe972296fcb4d8

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

这个扩展的上下文对聊天机器人很重要，但您不应向 Web 应用的用户显示它。隐藏方法如下：

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

您还可以尝试在有历史上下文的情况下与聊天机器人对话：

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

聊天机器人提供历史信息作为响应。由于聊天记录现在是情境的一部分，因此聊天机器人可以理解后续问题。

额外知识点：使用 Firebase Local Emulator Suite 运行 Web 应用

借助 Firebase Local Emulator Suite，您可以在本地测试 Web 应用的大多数功能。

  1. 在终端中，确保您位于 Web 应用的根目录中。
  2. 运行以下命令以安装并运行 Firebase Local Emulator Suite：
    firebase init emulators
firebase emulators:start

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

“使用 Gemini API 执行多模态任务”扩展程序会使用包含文本提示以及受支持的文件网址或 Cloud Storage 网址的多模态提示调用 Gemini API（请注意，即使 Google AI Gemini API 也使用 Cloud Storage 网址作为其底层文件网址基础架构）。该扩展程序还支持使用标记变量替换 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 Provider 菜单中，选择要使用 Google AI 还是 Vertex AI 中的 Gemini API。对于使用 Firebase 的开发者，我们建议使用 Vertex AI。
    2. 在 Firestore 集合路径文本框中，输入：gallery
    3. 在 Prompt（提示）文本框中，输入：Please describe the provided image; if there is no image, say "no image"
    4. 在图片字段文本框中，输入：image
    5. 在 Cloud Functions 位置菜单中，选择您的首选位置（例如 Iowa (us-central1) 或您之前为 Firestore 数据库指定的位置）。
    6. 请将其他所有值保留为默认值。
  5. 点击安装扩展程序，然后等待扩展程序安装完毕。

试用“使用 Gemini API 实现多模态任务”扩展程序

此 Codelab 的目标是与“通过 Gemini API 实现多模态任务”进行交互扩展程序，最好先在 Firebase 控制台中试用，了解该扩展程序的工作原理。

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

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

  1. 在 Firebase 项目中，转到存储。
  2. 点击 17eeb1712828b84f.png创建文件夹。
  3. 在 Folder name 文本框中，输入 galleryba63b07a7a04f055
  4. 点击添加文件夹。
  5. 在 gallery 文件夹中，点击上传文件。
  6. 选择要上传的 JPEG 图片文件。

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

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

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

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

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

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. 依次点击 Get started（开始）> Connect to GitHub（关联到 GitHub）。
  4. 选择您的 GitHub 账号和代码库。点击下一步。
  5. 在部署设置 >根目录下，输入包含源代码的文件夹的名称（如果您的 package.json 不在代码库的根目录中）。
  6. 对于活动分支，请选择 GitHub 代码库的主分支。点击下一步。
  7. 为您的后端输入 ID（例如 chatbot）。
  8. 点击完成并部署。

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

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

9. 总结

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

安装和配置扩展程序

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

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

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

构建 AI 赋能的 Web 应用

您构建了一个 AI 赋能的 Web 应用，该应用使用 Firebase Extensions 仅可访问 Gemini 模型的部分功能。

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

该 Web 应用还使用了“Multimodal Tasks with the Gemini API”扩展程序可为上传的图片自动生成图片说明。

后续步骤