使用 Firebase Genkit 构建基于您的数据的生成式 AI 功能

1. 准备工作

在此 Codelab 中,您将学习如何使用 Firebase Genkit 将生成式 AI 集成到您的应用中。Firebase Genkit 是一个开源框架,可帮助您构建、部署和监控可用于生产用途的 AI 赋能的应用。

Genkit 专为应用开发者设计,可帮助您使用熟悉的模式和范式轻松将强大的 AI 功能集成到应用中。该工具由 Firebase 团队打造,依托我们在打造全球数百万开发者所用工具方面的经验。

前提条件

  • 熟悉 Firestore、Node.js 和 TypeScript。

学习内容

  • 如何利用 Firestore 的高级矢量相似度搜索功能构建更智能的应用。
  • 如何使用 Firebase Genkit 在应用中实际实现生成式 AI。
  • 让您的解决方案做好部署和集成的准备。

您需要满足的条件

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

2. 查看所使用的 Web 应用和云服务

在本部分中,您将了解将通过此 Codelab 构建的 Web 应用,以及将使用的云服务。

Web 应用

在此 Codelab 中,您将在名为 Compass 的应用代码库中进行操作。Compass 是一款休假规划应用,用户可以选择目的地、查看目的地活动,以及为行程创建行程。

在此 Codelab 中,您将实现两个新功能,旨在提高用户与应用首页的互动度。这两项功能均由生成式 AI 提供支持:

  • 该应用目前显示的是静态目的地列表。您将将其更改为动态!
  • 您将实现自动填充的行程,以期提高黏度。

d54f2043af908fb.png

使用的服务

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

服务

使用原因

Firebase Genkit

您可以使用 Genkit 将生成式 AI 引入 Node.js / Next.js 应用。

Cloud Firestore

您将数据存储在 Cloud Firestore 中,然后系统会使用这些数据进行向量相似性搜索。

Google Cloud 的 Vertex AI

您可以使用 Vertex AI 中的基准模型(例如 Gemini)来为 AI 功能提供支持。

Firebase App Hosting

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

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-ai-genkit-rag 中的模板创建一个新代码库65ef006167d600ab.png
  2. 创建您刚刚创建的 Codelab 的 GitHub 代码库的本地克隆:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
    

如果您未安装 git 或不想创建新的代码库,请执行以下操作

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

查看文件夹结构

在本地机器上,找到克隆的代码库并查看文件夹结构:

文件夹

说明

genkit-functions

后端 Genkit 代码

load-firestore-data

用于快速预先填充 Firestore 集合的辅助命令行工具

*everything else

Next.js Web 应用代码

根文件夹包含一个 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. 在终端中,登录 Firebase:
    firebase login
    
    如果您的终端显示您已登录 Firebase,您可以跳至此 Codelab 的设置 Firebase 项目部分。
  2. 在终端中,根据您是否希望 Firebase 收集数据,输入 YN。(对于此 Codelab,这两种方式均可)
  3. 在浏览器中,选择您的 Google 账号,然后点击允许

安装 Google Cloud 的 gcloud CLI

  1. 安装 gcloud CLI
  2. 在终端中,登录 Google Cloud:
    gcloud auth login
    

4. 设置您的 Firebase 项目

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

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

创建 Firebase 项目

  1. 使用您在上一步中使用的 Google 账号登录 Firebase 控制台
  2. 点击创建项目,然后输入项目名称(例如 Compass Codelab)。
    请记住为您的 Firebase 项目自动分配的项目 ID(也可以点击修改图标设置自己偏好的项目 ID)。您稍后需要此 ID 才能在 Firebase CLI 中识别您的 Firebase 项目。如果您忘记了 ID,可以随时在项目设置中查找。
  3. 点击继续
  4. 如果看到相关提示,请查看并接受 Firebase 条款,然后点击继续
  5. 对于此 Codelab,您不需要使用 Google Analytics,因此请关闭 Google Analytics 选项。
  6. 点击创建项目,等待项目完成预配,然后点击继续

向 Firebase 项目添加 Web 应用

  1. 前往 Firebase 项目中的项目概览界面,然后点击 一个包含左尖括号、斜线和右尖括号的图标,表示 Web 应用 WebFirebase 控制台“Project Overview”(项目概览)顶部的“Web”(网站)按钮
  2. 应用别名文本框中,输入一个容易记住的应用别名,例如 My Compass Codelab App。您可以不选中用于设置 Firebase Hosting 的复选框,因为您可以在本 Codelab 的最后一步中选择是否设置托管服务。
    注册 Web 应用
  3. 依次点击注册应用 > 继续前往控制台

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

升级您的 Firebase 定价方案

如需使用 Firebase Genkit 和 Vertex AI(及其底层云服务),您的 Firebase 项目必须采用按需付费 (Blaze) 定价方案,这意味着该项目需要与一个 Cloud Billing 账号相关联。

  • Cloud Billing 账号要求提供付款方式,例如信用卡。
  • 如果您刚开始接触 Firebase 和 Google Cloud,请确认您是否有资格获得 $300 赠金和免费试用 Cloud Billing 账号
  • 如果您是在某个活动中学习本 Codelab,请询问组织者是否有 Cloud 抵用金。

详细了解 Vertex AI 的价格。

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

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

设置 Cloud Firestore

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

启用 Vertex AI

使用 gcloud CLI 设置 Vertex AI。对于本页中的所有命令,请务必将 YOUR_PROJECT_ID 替换为您的 Firebase 项目 ID。

  1. 在终端中,为 Google Cloud SDK 设置默认项目:
    gcloud config set project YOUR_PROJECT_ID
    
  2. 如果您看到一条警告消息,内容为“WARNING: Your active project does not match the quota project in your local Application Default Credentials file. 这可能会导致意外的配额问题。”,然后运行以下命令来设置配额项目:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
    
  3. 在项目中启用 Vertex AI 服务:
    gcloud services enable aiplatform.googleapis.com
    

5. 设置 Web 应用

如需运行 Web 应用,您需要在终端中运行命令,并在代码编辑器中添加代码。对于本页中的所有命令,请务必将 YOUR_PROJECT_ID 替换为您的 Firebase 项目 ID。

配置 Firebase CLI 以定位到您的项目

  1. 在终端中,导航到 Codelab 项目的根目录。
  2. 如需让 Firebase CLI 针对您的 Firebase 项目执行所有命令,请运行以下命令:
    firebase use YOUR_PROJECT_ID
    

将示例数据导入 Firestore

为了让您能够快速上手,此 Codelab 为您提供了预生成的 Firestore 示例数据。

  1. 如需允许本地代码库运行通常使用服务账号的代码,请在终端中运行以下命令:
    gcloud auth application-default login
    
    这会在浏览器中打开一个新标签页。使用您在上一步中使用的 Google 账号登录。
  2. 如需导入示例 Firestore 数据,请运行以下命令:
    cd load-firestore-data
    npm ci
    node index.js YOUR_PROJECT_ID
    cd ..
    
  3. 在 Firebase 控制台中,前往 Firebase 项目的 Firestore 部分,验证数据是否已成功添加到数据库。您应该会看到导入的数据架构及其内容。Firebase 控制台中的罗盘示例数据

将您的 Web 应用关联到 Firebase 项目

您的 Web 应用的代码库需要与正确的 Firebase 项目相关联,才能使用其服务(例如数据库)。为此,您需要将 Firebase 配置添加到应用的代码库中。此配置包括项目 ID、应用的 API 密钥和应用 ID 等基本值,以及让应用能够与 Firebase 交互的其他值。

  1. 获取应用的 Firebase 配置:
    1. 在 Firebase 控制台中,前往您的 Firebase 项目。
    2. 在左侧面板中,点击项目概览旁边的齿轮图标,然后选择项目设置
    3. 在“您的应用”卡片中,选择您的 Web 应用。
    4. 在“SDK 设置和配置”部分下,选择 Config 选项。
    5. 复制代码段。它以 const firebaseConfig ... 开头。
  2. 将 Firebase 配置添加到 Web 应用的代码库中:
    1. 在代码编辑器中,打开 src/lib/genkit/genkit.config.ts 文件。
    2. 将相关部分替换为您复制的代码。
    3. 保存文件。

在浏览器中预览 Web 应用

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

罗盘应用主屏幕

Compass 是一个使用 React 服务器组件的 Next.js 应用,这是其首页。

点击查找我的理想行程。您可以看到,它目前会显示一些固定目的地的硬编码数据:

找到“寻找我的理想行程”界面

欢迎随意探索。准备好继续后,点击 首页 主屏幕按钮(位于右上角)。

6. 使用 Genkit 深入了解生成式 AI

现在,您已准备好在应用中利用生成式 AI 的强大功能了!此 Codelab 的此部分将引导您实现一项功能,该功能可根据用户提供的灵感建议目的地。您将使用 Firebase Genkit 和 Google Cloud 的 Vertex AI 作为生成式模型(您将使用 Gemini)的提供程序。

Genkit 可以存储轨迹和流状态(以便您检查执行 Genkit 流的结果)。在此 Codelab 中,您将使用 Firestore 存储这些轨迹。

此 Codelab 的最后一步是将 Genkit 应用部署到 Firebase App Hosting。

将 Genkit 应用与 Firebase 项目相关联

在启动 Genkit 之前,您的代码库需要与正确的 Firebase 项目相关联,才能使用其服务(例如数据库)。为此,您需要将 Firebase 配置添加到 Genkit 应用的代码库中。此配置包括项目 ID、应用的 API 密钥和应用 ID 等基本值,以及让应用能够与 Firebase 交互的其他值。

  1. 获取应用的 Firebase 配置:
    1. 在 Firebase 控制台中,前往您的 Firebase 项目。
    2. 在左侧面板中,点击项目概览旁边的齿轮图标,然后选择项目设置
    3. 在“您的应用”卡片中,选择您的 Web 应用。
    4. 在“SDK 设置和配置”部分下,选择 Config 选项。
    5. 复制代码段。它以 const firebaseConfig ... 开头。
  2. 将应用的 Firebase 配置添加到 Genkit 应用的代码库中:
    1. 在代码编辑器中,打开 genkit-functions/src/lib/genkit.config.ts 文件。
    2. 将相关部分替换为您复制的代码。
    3. 保存文件。

启动 Genkit 开发者界面

Genkit 附带一个基于 Web 的界面,可让您与 LLM、Genkit 流、检索器和其他 AI 组件进行交互。

  1. 启动 Genkit 开发者界面:
    1. 打开一个新终端窗口。
    2. 前往 genkit-functions 目录的根目录。
    3. 运行以下命令启动 Genkit 开发者界面:
      cd genkit-functions
      npx genkit start
      
  2. 在浏览器中,前往本地托管的 Genkit 网址。大多数情况下是 http://localhost:4000/

与 Gemini 互动

现在,您可以使用 Genkit 的开发者界面与任何受支持的模型或任何其他 AI 组件(例如提示、检索器和 Genkit 流程)进行交互。

例如,不妨尝试让 Gemini 推荐一个节日休假地点。请注意,您可以如何根据自己的具体需求使用系统说明来控制模型的行为。这也适用于不原生支持系统指令的模型。

在 Genkit 开发者界面中与 Gemini 模型互动

管理提示

Firebase Genkit 引入了 Dotprompt,这是一种插件和文本格式,旨在简化生成式 AI 提示的创建和管理。Dotprompt 背后的核心理念是将提示视为代码,让您能够与应用代码一起编写、维护和进行版本控制。

如需使用 Dotprompt,请先创建一个 Hello World 程序:

  1. 在代码编辑器中,打开 genkit-functions/prompts/1-hello-world.prompt 文件。
  2. 在 Genkit 开发者界面中,打开 dotprompt/1-hello-world
  3. 使用您熟悉的任何语言名称或代码,或将其留空。
  4. 点击运行使用 Dotprompt 生成瑞典语问候语
  5. 请尝试输入几个不同的值。大语言模型擅长理解此类简单查询中经过缩写、拼写错误或不完整的提示。

使用结构化数据丰富输出

除了生成纯文本之外,Genkit 还可让您对输出进行结构化,以便在应用界面中进行增强型呈现和集成。通过定义架构,您可以指示 LLM 生成符合您所需格式的结构化数据。

探索输出架构

您还可以指定 LLM 调用的输出架构。

  1. 在代码编辑器中,检查提示文件:
    1. 打开 dotprompt/2-simple-itinerary 文件。
    2. 检查定义的输入和输出架构。
  2. 与界面交互:
    1. 在 Genkit 开发者界面中,前往 dotprompt/2-simple-itinerary 部分。
    2. 使用示例数据填充 placeinterests 字段,以提供输入:
      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      
    3. 点击运行

使用 Dotprompt 指定输出架构

了解架构驱动型输出

请注意,生成的输出如何符合定义的架构。通过指定所需的结构,您已指示 LLM 生成易于解析并集成到应用中的数据。Genkit 会自动根据架构验证输出,确保数据完整性。

此外,您可以将 Genkit 配置为在输出与架构不匹配时重试或尝试修复输出。

输出架构的主要优势

  • 简化集成:轻松将结构化数据纳入应用的界面元素中。
  • 数据验证:确保生成的输出准确无误且一致。
  • 错误处理:实现机制来解决架构不匹配问题。

利用输出架构可以提升 Genkit 体验,让您能够创建量身定制的结构化数据,从而提供更丰富、更动态的用户体验。

利用多模态输入

假设您的应用可以根据用户认为富有启发性的图片,推荐个性化的度假目的地。Genkit 结合多模态生成式模型,可助您将这一愿景变为现实。

  1. 在代码编辑器中,检查提示文件:
    1. 打开 genkit-functions/prompts/imgDescription.prompt 文件。
    2. 请注意,其中包含 {{media url=this}},这是一个 Handlebars 语法元素,有助于将图片纳入问题中。
  2. 与界面交互:
    1. 在 Genkit 开发者界面中,打开 dotprompt/imgDescription 提示。
    2. imageUrls 字段中,通过粘贴图片的网址输入图片网址。例如,您可以使用维基百科中展示埃菲尔铁塔的缩略图:
      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      
    3. 点击运行

7. 使用矢量相似度搜索实现检索

虽然使用 AI 模型生成富有创意的内容令人印象深刻,但在实际应用中,通常需要将输出结果置于特定情境中。

在此 Codelab 中,您有一个包含目的地(地点和活动)的数据库,目标是确保 Gemini 模型生成的建议仅引用此数据库中的条目。

为了弥合非结构化查询与相关内容之间的差距,您将利用生成的嵌入对向量相似度搜索的强大功能。

了解嵌入和向量相似度

  • 矢量:矢量是数据点的数字表示形式,通常用于对文本或图片等复杂信息进行建模。矢量中的每个维度都对应于数据的特定特征。
  • 嵌入模型:这些专用 AI 模型可将输入数据(例如文本)转换为高维度向量。有趣的是,类似的输入会映射到此高维空间中彼此接近的向量。
  • 矢量相似搜索:此技术利用嵌入向量的接近度来识别相关数据点。给定输入查询后,该模型会在数据库中查找具有类似嵌入矢量的条目,以指示语义相关性。

了解检索流程的运作方式

  1. 嵌入查询:用户的输入(例如“在巴黎浪漫晚餐”)会传递到嵌入模型,从而生成查询向量。
  2. 数据库嵌入:理想情况下,您已预处理目的地数据库,为每个条目创建嵌入向量。
  3. 相似度计算:系统会使用相似度指标(例如余弦相似度)将查询向量与数据库中的每个嵌入向量进行比较。
  4. 检索:系统会根据数据库中与查询向量最接近的条目的相似度,将这些条目检索出来作为相关建议。

通过将此检索机制纳入您的应用,您可以利用 Gemini 模型生成不仅富有创意,而且与您的特定数据集密切相关的建议。这种方法可确保生成的输出在上下文中保持相关性,并与数据库中提供的信息保持一致。

在 Firestore 中启用向量相似度搜索

在此 Codelab 的上一步中,您已在 Firestore 数据库中填充了示例地点和活动。每个地点条目都包含一个 knownFor 文本字段,用于描述其显著属性,以及一个相应的 embedding 字段,用于包含此说明的矢量表示法。

如需对这些嵌入使用强大的向量相似度搜索功能,您需要创建 Firestore 索引。借助此索引,系统可以根据地点嵌入向量与给定查询的相似度高效检索地点。

  1. 在终端中,运行以下命令以安装最新的 alpha 版组件。您需要使用 2024.05.03 或更高版本:
    gcloud components install alpha
    
  2. 创建索引,并务必将 YOUR_PROJECT_ID 替换为您的项目 ID。
    gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
    
  3. 在 Genkit 开发者界面中,打开 placesRetriever
  4. 点击运行。观察包含占位符文本的框架化对象,了解您将在何处实现检索器逻辑。
  5. 在代码编辑器中,打开 genkit-functions/src/lib/placesRetriever.ts 文件。
  6. 滚动到底部,然后将占位符 placesRetriever 替换为以下内容:
    export const placesRetriever = defineFirestoreRetriever({
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: textEmbeddingGecko,
      distanceMeasure: 'COSINE',
    });
    

测试检索器

  1. 在 Genkit 开发者界面中,打开 placesRetriever 检索器。
  2. 提供以下查询
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. 您还可以提供选项。例如,以下代码展示了如何指定检索器应返回的文档数量:
    {
        "limit": 4
    }
    
  4. 点击运行

除了相似性之外,您还可以通过向选项添加 where 子句,对数据进行进一步过滤。

8. 使用 Genkit 的检索增强生成 (RAG)

在前面的部分中,您构建了能够处理文本、JSON 和图片的各个提示,为用户生成了度假目的地和其他富有吸引力的内容。您还实现了一个提示,用于从 Firestore 数据库检索相关目的地。现在,我们需要将这些组件编排成一个协调一致的检索增强生成 (RAG) 流程。

本部分介绍了 Genkit 中的一个重要概念,称为流程Flow 是强类型、可流式传输的函数,可在本地和远程调用,并且具有完全可观测性。您可以通过 Genkit 的 CLI 和 Genkit 开发者界面管理和调用流程。

  1. 在代码编辑器中,检查行程提示:
    1. 打开 genkit-functions/prompts/itineraryGen.prompt 文件。
    2. 请注意,提示已如何扩展以接受其他输入,尤其是来自检索器的活动数据。
  2. 在 Genkit 开发者界面中,查看 genkit-functions/src/lib/itineraryFlow.ts 文件中的 Genkit 流程。
    提示:为了简化调试流程,不妨考虑将冗长的流程拆分为更小、更易于管理的步骤
  3. 通过集成“图片说明”步骤来改进流程:
    1. 找到 TODO: 2 注释(大约第 70 行)。这标记了您要改进的流程位置。
    2. 将空的 imgDescription 占位符替换为 imgDescription 提示调用生成的输出。
  4. 测试流程:
    1. 前往 itineraryFlow
    2. 使用以下输入来测试是否能使用新添加的步骤成功执行 itineraryFlow
      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      
    3. 点击运行
    4. 观察生成的输出,其中应将图片描述纳入到行程建议中。
  5. 如果您遇到任何错误或意外行为,请查看检查标签页了解详情。您还可以使用此标签页查看 Trace 存储区中的执行记录。

适用于 Web 应用的 RAG

  1. 在浏览器中访问 http://localhost:3000/,确保该 Web 应用仍在运行。
  2. 如果该 Web 应用已停止运行,请在终端中运行以下命令:
    npm install
    npm run dev
    
  3. 查看 Dream Your Vacation Web 应用页面 (http://localhost:3000/gemini)。
  4. 查看其源代码 (src/app/gemini/page.tsx) 以了解 Next.js 集成示例。

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. 使用 Firebase App Hosting 部署应用

本教程的最后一步是部署 Web 应用。您将使用 Firebase App Hosting,这是一种框架感知型托管解决方案,旨在简化将 Next.js 和 Angular 应用部署到无服务器后端的流程。

  1. 将更改提交到本地 Git 代码库,然后推送到 GitHub。
  2. 在 Firebase 控制台中,前往 Firebase 项目内的应用托管
  3. 依次点击 Get started(开始)> Connect to GitHub(关联到 GitHub)。
  4. 选择您的 GitHub 账号代码库。点击下一步
  5. 部署设置 > 根目录中,保留默认值。
  6. 对于正式版分支,请选择 GitHub 代码库的主分支。点击下一步
  7. 为后端输入 ID(例如 compass)。
  8. 当系统询问您是否要创建或关联 Firebase Web 应用时,请选择选择现有的 Firebase Web 应用,然后选择您在此 Codelab 的早期步骤中创建的应用。
  9. 点击完成并部署

监控部署状态

部署过程需要几分钟时间。您可以在 Firebase 控制台的“应用托管”部分跟踪进度。

向您的服务账号授予权限

为了让 Node.js 后端能够访问 Vertex AI 资源,您需要向应用的服务账号分配 aiplatform.user 角色:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

完成后,用户便可访问您的 Web 应用。

自动重新部署

Firebase App Hosting 可简化日后的更新流程。每当您将更改推送到 GitHub 仓库的主分支时,Firebase App Hosting 都会自动重建并重新部署您的应用,确保您的用户始终体验最新版本。

10. 总结

恭喜您完成这门全面的 Codelab!

您已成功利用 Firebase Genkit、Firestore 和 Vertex AI 的强大功能,打造了一个复杂的“流程”,该流程可根据用户的偏好和灵感生成个性化的度假推荐,同时还会根据应用中的数据提供建议。

在整个过程中,您已获得了有关构建强大生成式 AI 应用至关重要的基本软件工程模式的实操经验。这些模式包括:

  • 提示管理:以代码的形式整理和维护提示,以便更好地协作和进行版本控制。
  • 多模态内容:集成图片和文本等多种数据类型,以增强 AI 互动。
  • 输入/输出架构:对数据进行结构化处理,以便在应用中无缝集成和验证。
  • 向量存储区:利用矢量嵌入高效地搜索相似项并检索相关信息。
  • 数据检索:实现机制,用于提取数据库中的数据并将其纳入 AI 生成的内容中。
  • 检索增强生成 (RAG):将检索技术与生成式 AI 相结合,以生成与上下文相关且准确的输出。
  • 流插桩:构建和编排复杂的 AI 工作流,以实现无缝可观察的执行。

掌握这些概念并将其应用到 Firebase 生态系统中后,您将能够轻松开启自己的 genAI 冒险之旅。探索无限可能,打造创新应用,不断突破生成式 AI 的应用边界。

探索替代部署选项

Genkit 提供多种部署选项,可满足您的具体需求,包括:

只需在 (package.json) 节点文件夹内运行以下命令,即可选择最适合您的模块:

npx genkit init

后续步骤