使用裝置端和雲端代管模型，在網頁應用程式中建構混合式體驗

運用Firebase AI Logic，透過混合式推論建構 AI 技術輔助網頁應用程式和功能。混合式推論功能可在裝置端模型可用時，使用該模型執行推論，否則會順暢地改用雲端代管模型 (反之亦然)。

本頁說明如何開始使用用戶端 SDK。完成這項標準設定後，請查看其他設定選項和功能 (例如結構化輸出)。

請注意，在電腦版 Chrome 上執行的網頁應用程式支援裝置端推論。

直接查看程式碼範例

建議用途和支援的功能

建議用途：

• 使用裝置端模型進行推論：

  • 強化隱私權
  • 查看當地特色
  • 免付費推論
  • 離線功能

• 使用混合功能方案：

  • 無論裝置型號是否支援或網路連線狀態如何，都能觸及 100% 的目標對象

裝置端推論支援的功能：

裝置端推論僅支援單輪文字生成 (不支援對話)， 並提供串流或非串流輸出。支援的文字生成功能如下：

• 根據純文字輸入內容生成文字

• 根據文字和圖片輸入內容生成文字，具體來說，輸入的圖片類型為 JPEG 和 PNG

您也可以產生結構化輸出內容，包括 JSON 和列舉。

事前準備

請注意下列事項：

• 使用裝置端模型進行推論時，會使用 Chrome 的提示 API；使用雲端託管模型進行推論時，則會使用您選擇的Gemini API供應商 (Gemini Developer API 或 Vertex AI Gemini API)。

• 本頁說明如何開始使用 localhost 進行開發 (如要進一步瞭解如何在 localhost 上使用 API，請參閱 Chrome 說明文件)。

  完成這項標準設定後，請查看其他設定選項和功能 (例如結構化輸出)。

• 實作功能後，您可以讓使用者在實際應用程式中試用功能。

在 localhost 上開始使用

這些入門步驟說明傳送任何支援的提示要求時，所需的一般設定。

步驟 1：設定 Chrome 和 Prompt API，以便在裝置上進行推論

1. 確認你使用的是新版 Chrome。前往 chrome://settings/help 進行更新。
   Chrome 139 以上版本支援裝置端推論。

2. 將下列標記設為「Enabled」，即可啟用裝置端多模態模型：

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. 重新啟動 Chrome。

4. (選用) 在發出第一個要求前，先下載裝置端模型。

   Prompt API 已內建於 Chrome，但預設不會提供裝置端模型。如果您尚未下載模型，就首次要求進行裝置端推論，系統會自動在背景啟動模型下載作業。

   查看如何下載裝置端模型的說明

   1. 開啟「開發人員工具」>「控制台」。

   2. 執行以下指令：

      await LanguageModel.availability();
      

   3. 確認輸出內容為 available、downloading 或 downloadable。

   4. 如果輸出內容為 downloadable，請執行下列指令，開始下載模型：

      await LanguageModel.create();
      

   5. 您可以使用下列 monitor 回呼監聽下載進度，並確保模型處於 available 狀態，再提出要求：

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

步驟 2：設定 Firebase 專案，並將應用程式連結至 Firebase

1. 登入 Firebase 控制台，然後選取 Firebase 專案。

   還沒有 Firebase 專案嗎？

   如果您還沒有 Firebase 專案，請按一下按鈕建立新的 Firebase 專案，然後使用下列任一選項：

   • 選項 1：在工作流程的第一個步驟中輸入新專案名稱，即可建立全新的 Firebase 專案 (以及底層的 Google Cloud專案)。

   • 選項 2：點按「將 Firebase 新增到 Google Cloud 專案」(頁面底部)，將 Firebase「新增」到現有的 Google Cloud 專案。在工作流程的第一步，開始輸入現有專案的專案名稱，然後從顯示的清單中選取專案。

   完成畫面上的工作流程，建立 Firebase 專案。請注意，系統提示時，您不需要設定 Google Analytics 即可使用 Firebase AI Logic SDK。

2. 前往 Firebase 控制台的「Firebase AI Logic」頁面。

3. 按一下「開始使用」，啟動導覽工作流程，協助您為專案設定必要 API 和資源。

4. 設定專案以使用「Gemini API」供應商。

   建議您先使用 Gemini Developer API。 您隨時可以 設定 Vertex AI Gemini API (以及帳單的相關規定)。

   對於 Gemini Developer API，控制台會啟用必要的 API，並在專案中建立 Gemini API 金鑰。
   請勿將這個 Gemini API 金鑰新增至應用程式的程式碼庫。 瞭解詳情。

5. 如果控制台工作流程中出現提示，請按照畫面上的指示註冊應用程式並連結至 Firebase。

6. 請繼續按照本指南的下一個步驟，將 SDK 新增至應用程式。

步驟 3：新增 SDK

Firebase 程式庫提供 API，可與生成模型互動。這個程式庫是 Firebase JavaScript SDK for Web 的一部分。

1. 使用 npm 安裝適用於網頁的 Firebase JS SDK：

   npm install firebase
   

2. 在應用程式中初始化 Firebase：

   import { initializeApp } from "firebase/app";
   
   // TODO(developer) Replace the following with your app's Firebase configuration
   // See: https://firebase.google.com/docs/web/learn-more#config-object
   const firebaseConfig = {
     // ...
   };
   
   // Initialize FirebaseApp
   const firebaseApp = initializeApp(firebaseConfig);
   

步驟 4：初始化服務並建立模型例項

傳送提示要求給模型前，請先完成下列設定。

1. 為所選 API 供應商初始化服務。

2. 建立 GenerativeModel 執行個體。請務必完成以下事項：

   1. 在getGenerativeModel 使用者互動後或互動期間 (例如點選按鈕) 呼叫 這是 inferenceMode 的先決條件。

   2. 將 mode 設為下列其中一項：

      • PREFER_ON_DEVICE：如果裝置型號適用，請使用該型號；否則改用雲端代管型號。

      • ONLY_ON_DEVICE：使用裝置端模型 (如有)，否則擲回例外狀況。

      • PREFER_IN_CLOUD：如要使用雲端代管模型，請先確認是否可用，否則改用裝置端模型。

      • ONLY_IN_CLOUD：如果雲端主機代管模型可用，請使用該模型；否則擲回例外狀況。

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();