發布日期：2025 年 5 月 20 日
無論使用者使用哪種平台或硬體，您都可以透過 Firebase AI Logic，為內建的 Prompt API 設定雲端備援，滿足使用者的需求。
打造混合式 AI 體驗
- 在本機處理敏感資料：如果處理敏感資料，您可以為使用者提供端對端加密的 AI 功能。
- 離線使用 AI：即使使用者處於離線狀態或連線中斷，仍可存取 AI 功能
雖然這些優點不適用於雲端應用程式，但您可以確保無法存取內建 AI 的使用者享有流暢體驗。
開始使用 Firebase
瞭解如何建立 Firebase 專案，並將 Firebase 新增至網頁應用程式。
Firebase 專案是 Google Cloud 專案，具有 Firebase 專屬的設定和服務。進一步瞭解 Google Cloud 和 Firebase。
安裝 SDK
這個工作流程使用 npm，且需要模組整合工具或 JavaScript 架構工具。Firebase AI Logic 經過最佳化，可與模組打包工具搭配使用，藉此排除未使用的程式碼並縮減 SDK 大小。
安裝 Firebase JS SDK：
npm install firebase
設定及保護 Firebase AI Logic
按一下「開始使用」，啟動設定工作流程。
系統要求選擇「Gemini API 供應商」時，建議選取 Gemini Developer API，即可快速開始使用，不必付費。
您隨時可以設定 Vertex AI Gemini API (以及帳單相關規定)。
繼續在控制台的工作流程中，設定 Firebase AI Logic 的必要 API 和相關服務。
自 2026 年 7 月初起，工作流程的此階段會自動對 AI Logic 強制執行 Firebase App Check，這項重要服務可協助保護 Gemini API，避免從應用程式直接存取時遭到濫用。開始使用時 (請參閱本指南後續步驟)，您必須在強制執行 App Check 時，為本機開發環境設定 App Check 偵錯提供者。
這樣使用者才能在強制執行 App Check 時使用該功能。請繼續閱讀本指南的下一個部分，為本機開發環境設定 App Check 偵錯提供者，然後向 Gemini API 發出第一項要求。
為本機開發環境設定 App Check 偵錯提供者
以下說明如何從 localhost 互動式執行應用程式時 (例如在本機開發期間)，使用偵錯供應器：
在偵錯版本中，請先將
self.FIREBASE_APPCHECK_DEBUG_TOKEN設為true，再初始化 App Check，以啟用偵錯模式。例如：self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; initializeAppCheck(app, { /* App Check options */ });在本地端造訪網路應用程式，然後開啟瀏覽器的開發人員工具。在偵錯控制台中，您會看到偵錯權杖：
AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678". You will need to safelist it in the Firebase console for it to work.向 App Check 註冊偵錯權杖：
如要進一步瞭解偵錯供應商 (包括如何取得新的偵錯權杖)，請參閱官方 App Check 說明文件。
傳送要求至 Gemini API
使用文字或多模態輸入內容提示模型。請參閱本指南下列子節中的範例。
文字提示
您可以對模型下達純文字指令。例如，你可以要求模型說笑話。
您可以選擇要求的轉送方式：
如要預設使用內建 AI (如有)，請在
getGenerativeModel()函式中將mode設為'prefer_on_device'。如果內建模型無法使用，要求會順暢地改用雲端模型 (如果裝置已連上網路)。在
getGenerativeModel()函式中將mode設為'prefer_in_cloud'，即可在連線時預設使用雲端模型。如果處於離線狀態，要求會順暢地改用內建 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 個要求。
如果使用其他瀏覽器或沒有內建 AI 支援的作業系統，系統會向 Firebase 端點 https://firebasevertexai.googleapis.com 發出額外要求。
參與計畫並分享意見
Firebase AI Logic 是將 AI 功能整合至網路應用程式的絕佳選擇。如果 Prompt API 無法使用，SDK 會改用雲端服務，確保 AI 功能的可用性和可靠性。
請注意，雲端應用程式會對隱私權和功能提出新的要求，因此請務必告知使用者資料的處理位置。