使用 Firebase AI Logic 提供混合式 AI 提示

發布日期:2025 年 5 月 20 日

無論使用者採用哪種平台或硬體,您都可以透過 Firebase AI Logic,為內建的 Prompt API 設定雲端後備機制,滿足使用者需求。

打造混合式 AI 體驗

內建 AI 具有多項優點,最顯著的包括:

  • 在本地處理敏感資料:如果處理敏感資料,您可以為使用者提供端對端加密的 AI 功能。
  • 離線使用 AI:即使使用者處於離線狀態或連線中斷,仍可存取 AI 功能

雖然這些優點不適用於雲端應用程式,但您可以確保無法存取內建 AI 的使用者享有流暢體驗。

開始使用 Firebase

  1. 建立 Firebase 專案,並註冊您的網頁應用程式。
  2. 請參閱 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 個要求。

在 Chrome 中執行的 Firebase AI 邏輯,使用內建的 AI API。

如果使用其他瀏覽器或沒有內建 AI 支援的作業系統,系統會向 Firebase 端點 https://firebasevertexai.googleapis.com 發出額外要求。

在 Safari 中執行的 Firebase AI Logic,向 Firebase 伺服器發出要求。

參與並分享意見

Firebase AI Logic 是將 AI 功能整合至網頁應用程式的絕佳選擇。如果 Prompt API 無法使用,SDK 會改用雲端服務,確保 AI 功能的可用性和可靠性。

請注意,雲端應用程式會對隱私權和功能提出新的要求,因此請務必告知使用者資料的處理位置。