发布时间:2025 年 5 月 20 日
为了满足用户的需求(无论他们使用什么平台或硬件),您可以设置回退到云端,并使用 Firebase AI Logic 来调用内置的 Prompt API。
打造混合 AI 体验
- 敏感数据的本地处理:如果您处理敏感数据,可以向用户提供端到端加密的 AI 功能。
- 离线使用 AI:即使处于离线状态或连接中断,用户也可以使用 AI 功能
虽然这些福利不适用于云应用,但您可以确保无法访问内置 AI 的用户获得顺畅的体验。
Firebase 使用入门
- 创建 Firebase 项目并注册您的 Web 应用。
- 请参阅 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 个请求。
当在其他浏览器或没有内置 AI 支持的操作系统中使用时,系统会向 Firebase 端点 https://firebasevertexai.googleapis.com
发出额外请求。
参与并分享反馈
Firebase AI Logic 是一种将 AI 功能集成到 Web 应用中的绝佳选择。通过在 Prompt API 不可用时回退到云端,该 SDK 可确保 AI 功能具有更广泛的可访问性和可靠性。
请注意,云应用对隐私权和功能提出了新的要求,因此务必告知用户其数据在何处处理。