发布时间:2025 年 5 月 20 日
内置的 Prompt API 从 Chrome 138 稳定版开始可供 Windows、macOS 和 Linux 上的 Chrome 扩展程序使用。该 API 即将在 Chrome 的源试用中推出。
其他浏览器、ChromeOS 或移动操作系统(例如 Android 或 iOS)不支持此 API。即使浏览器支持此 API,也可能因未满足硬件要求而无法运行。
为了满足用户的需求(无论他们使用的是哪种平台或硬件),您可以使用 Firebase AI Logic 设置云端回退。
打造混合 AI 体验
- 在本地处理敏感数据:如果您处理敏感数据,可以通过端到端加密向用户提供 AI 功能。
- 离线 AI 使用:即使用户处于离线状态或网络连接中断,也能使用 AI 功能
虽然这些优势不适用于云应用,但您可以确保为无法访问内置 AI 的用户提供流畅的体验。
Firebase 使用入门
首先,创建 Firebase 项目并注册您的 Web 应用。然后,按照 Firebase 文档继续设置 Firebase JavaScript SDK。
安装 SDK
此工作流使用 npm,并且需要模块打包器或 JavaScript 框架工具。Firebase AI Logic 经过优化,可与模块打包器配合使用,以消除未使用的代码(摇树优化)并缩减 SDK 大小。
npm install firebase@eap-ai-hybridinference
使用 Firebase AI Logic
安装 Firebase 后,您需要初始化 SDK 才能开始使用 Firebase 服务。
配置和初始化 Firebase 应用
一个 Firebase 项目可以拥有多个 Firebase 应用。Firebase 应用是一种类似于容器的对象,用于存储常见配置,并在各种 Firebase 服务之间共享身份验证凭据。
您的 Firebase 应用将充当混合 AI 功能的云端部分。
import { initializeApp } from 'firebase/app';
import { getAI, getGenerativeModel } from 'firebase/vertexai';
// TODO: Replace the following with your app's Firebase project configuration.
const firebaseConfig = {
apiKey: '',
authDomain: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
};
// Initialize `FirebaseApp`.
const firebaseApp = initializeApp(firebaseConfig);
向模型提示
初始化完成后,您可以使用文本或多模态输入来提示模型。
文本提示
您可以使用纯文本向模型发出指令。例如,您可以要求模型给您讲个笑话。
为确保在 getGenerativeModel
函数中使用内置 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 个请求。
在其他浏览器或不支持内置 AI 的操作系统中,系统会向 Firebase 端点 https://firebasevertexai.googleapis.com
发出额外请求。
参与并分享反馈
Firebase AI Logic 是将 AI 功能集成到 Web 应用的绝佳选择。通过在 Prompt API 不可用时提供云端回退,该 SDK 可确保 AI 功能的广泛可用性和可靠性。
请注意,云应用对隐私和功能提出了新的要求,因此请务必告知用户其数据的处理地点。