使用 Firebase AI Logic 实现混合 AI 提示

发布时间:2025 年 5 月 20 日

为了满足用户的需求(无论他们使用什么平台或硬件),您可以设置回退到云端,并使用 Firebase AI Logic 来调用内置的 Prompt API

打造混合 AI 体验

内置 AI 具有多项优势,最值得一提的是:

  • 敏感数据的本地处理:如果您处理敏感数据,可以向用户提供端到端加密的 AI 功能。
  • 离线使用 AI:即使处于离线状态或连接中断,用户也可以使用 AI 功能

虽然这些福利不适用于云应用,但您可以确保无法访问内置 AI 的用户获得顺畅的体验。

Firebase 使用入门

  1. 创建 Firebase 项目并注册您的 Web 应用。
  2. 请参阅 Firebase JavaScript SDK 文档,继续设置您的 Web 应用。

Firebase 项目会创建一个具有 Firebase 特定配置和服务的 Google Cloud 项目。详细了解 Google Cloud 和 Firebase

安装 SDK

此工作流使用 npm,并且需要模块打包器或 JavaScript 框架工具。Firebase AI Logic 经过优化,可与模块打包器配合使用,以消除未使用的代码并缩减 SDK 大小。

npm install firebase

安装完成后,在应用中初始化 Firebase

使用 Firebase AI Logic

安装并初始化 Firebase 后,选择 Gemini Developer API 或 Vertex AI Gemini API,然后进行初始化并创建实例

初始化后,您可以使用文本或多模态输入来提示模型。

文本提示

您可以使用纯文本向模型提供指令。例如,您可以让模型讲个笑话。

如需确保在 getGenerativeModel 函数中内置 AI 可用时使用该 AI,请将 mode 设置为 prefer_on_device

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

多模态提示

除了文本之外,您还可以使用图片或音频进行提示。您可以让模型描述图片内容或转写音频文件。

图片需要作为 base64 编码的字符串以 Firebase FileDataPart 对象的形式传递,您可以使用辅助函数 fileToGenerativePart() 来实现此目的。

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

    // To generate text output, call generateContent with the text and image
    const result = await model.generateContentStream([prompt, imagePart]);

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

演示

在不同的设备和浏览器上访问 Firebase AI Logic 演示版。您可以看到模型回答来自内置 AI 模型还是云端。

在 Chrome 中使用受支持的硬件时,演示会使用 Prompt API 和 Gemini Nano。仅针对主文档、JavaScript 文件和 CSS 文件发出了 3 个请求。

在 Chrome 中运行的 Firebase AI 逻辑,使用内置的 AI API。

当在其他浏览器或没有内置 AI 支持的操作系统中使用时,系统会向 Firebase 端点 https://firebasevertexai.googleapis.com 发出额外请求。

在 Safari 中运行的 Firebase AI Logic 向 Firebase 服务器发出请求。

参与并分享反馈

Firebase AI Logic 是一种将 AI 功能集成到 Web 应用中的绝佳选择。通过在 Prompt API 不可用时回退到云端,该 SDK 可确保 AI 功能具有更广泛的可访问性和可靠性。

请注意,云应用对隐私权和功能提出了新的要求,因此务必告知用户其数据在何处处理。