使用 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() 函数中将 mode 设置为 'prefer_on_device',在内置 AI 可用时默认使用该 AI。如果内置模型不可用,请求将无缝回退为使用云模型(如果您处于联网状态)。

  • 在联网时,通过在 getGenerativeModel() 函数中将 mode 设置为 'prefer_in_cloud',默认使用云模型。如果您处于离线状态,系统会在内置 AI 可用时无缝回退到使用该 AI。

// 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 个请求。