發布日期:2025 年 5 月 20 日
無論使用者採用哪種平台或硬體,您都可以透過 Firebase AI Logic,為內建的 Prompt API 設定雲端後備機制,滿足使用者需求。
打造混合式 AI 體驗
- 在本地處理敏感資料:如果處理敏感資料,您可以為使用者提供端對端加密的 AI 功能。
- 離線使用 AI:即使使用者處於離線狀態或連線中斷,仍可存取 AI 功能
雖然這些優點不適用於雲端應用程式,但您可以確保無法存取內建 AI 的使用者享有流暢體驗。
開始使用 Firebase
- 建立 Firebase 專案,並註冊您的網頁應用程式。
- 請參閱 Firebase JavaScript SDK 說明文件,繼續設定網頁應用程式。
Firebase 專案會建立 Google Cloud 專案,並提供 Firebase 專用的設定和服務。進一步瞭解 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 可用時使用該功能,請將 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 功能整合至網頁應用程式的絕佳選擇。如果 Prompt API 無法使用,SDK 會改用雲端服務,確保 AI 功能的可用性和可靠性。
請注意,雲端應用程式會對隱私權和功能提出新的要求,因此請務必告知使用者資料的處理位置。