オンデバイス モデルとクラウドホスト モデルを使用してウェブアプリでハイブリッド エクスペリエンスを構築する

ハイブリッド推論を使用して AI を活用したウェブアプリや機能を構築できます Firebase AI Logic。ハイブリッド推論では、デバイス上のモデルが使用可能な場合はそれを使用して推論を実行し、使用できない場合はクラウド ホスト型モデルにシームレスにフォールバックします（逆も同様です）。

このページでは、クライアント SDK の使用を開始する方法について説明します。この標準 設定が完了したら、 追加の構成オプションと機能（ 構造化出力など）を確認してください。

デバイス上での推論は、デスクトップの Chrome で実行されるウェブアプリ でサポートされています。

コード例に移動

おすすめのユースケースとサポートされている機能

おすすめのユースケース:

• デバイス上のモデルを推論に使用すると、次のメリットがあります。

  • プライバシーの強化
  • ローカル コンテキスト
  • 推論を無料で使用できる
  • オフライン機能

• ハイブリッド機能を使用すると、次のメリットがあります。

  • デバイス上のモデルの可用性やインターネット接続に関係なく、オーディエンスの 100% にリーチできる

デバイス上での推論でサポートされている機能:

デバイス上での推論では、ストリーミング出力または非ストリーミング出力を使用して、シングルターン テキスト生成（チャットではない） のみがサポートされています。次のテキスト生成機能がサポートされています。

• テキストのみの入力からテキストを生成する

• テキストと画像の入力からテキストを生成する（特に JPEG と PNG の入力画像タイプ）

JSON や列挙型などの構造化出力を生成することもできます。

始める前に

次の点に注目してください。

• デバイス上のモデルを使用した推論では Chrome の Prompt 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 v139 以降で利用できます。

2. 次のフラグを [**有効**]に設定して、デバイス上のマルチモーダル モデルを有効にします。

   • 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: [**Google Cloud プロジェクトに Firebase を追加**]（ページ下部）をクリックして、既存の Google Cloud プロジェクトに「Firebase を追加」します。ワークフローの最初のステップで、既存のプロジェクトのプロジェクト名 の入力を開始し、表示されたリストからプロジェクトを選択します。

   画面上のワークフローの残りの手順を完了して、Firebase プロジェクトを作成します。プロンプトが表示されたら、設定する必要はありません Google Analytics を使用するために Firebase AI Logic SDK。

2. Firebase コンソールで、AI サービス > 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 を追加します。

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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

ステップ 5: デバイス上のモデルを初期化する

エンドユーザー ページ 操作（ボタンクリックなど）の後または操作時、モデルにプロンプト リクエストを送信する前に、initializeDeviceModel() を呼び出す必要があります。ユーザー アクティベーション要件について詳しくは、 Chrome のドキュメント をご覧ください。

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
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

ステップ 6: モデルにプロンプト リクエストを送信する

このセクションでは、さまざまな種類の入力を送信して、次のようなさまざまな種類の出力を生成する方法について説明します。

• テキストのみの入力からテキストを生成する
• テキストと画像（マルチモーダル）の入力からテキストを生成する

構造化出力（JSON や列挙型など）を生成する場合は、 次のいずれかの「テキストを生成する」の例を使用し、さらに 指定されたスキーマに従って応答するようにモデルを構成します。

テキストのみの入力からテキストを生成する

generateContent() を使用すると、テキストを含むプロンプトからテキストを生成できます。

// 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();

Firebase AI Logic では、 generateContentStream ではなく generateContent を使用して、テキスト レスポンスのストリーミングもサポートしています。

テキストと画像（マルチモーダル）の入力からテキストを生成する

generateContent() を使用すると、テキストと画像ファイルを含むプロンプトからテキストを生成できます。各 入力ファイルのmimeTypeとファイル自体を指定します。

デバイス上での推論でサポートされている入力画像タイプは PNG と JPEG です。

// 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();

Firebase AI Logic では、 generateContentStream ではなく generateContent を使用して、テキスト レスポンスのストリーミングもサポートしています。

エンドユーザーが機能を試せるようにする

エンドユーザーがアプリで機能を試せるようにするには、 Chrome オリジン トライアルに登録する必要があります。 これらのトライアルには期間と使用量の制限があります。

1. Prompt API Chrome オリジン トライアルに登録します。トークンが発行されます。

2. トライアル機能を有効にするウェブページごとにトークンを指定します。以下のいずれかの方法を選択します。

   • トークンを <head> タグのメタタグとして指定します: <meta http-equiv="origin-trial" content="TOKEN">

   • トークンを HTTP ヘッダーとして指定します: Origin-Trial: TOKEN

   • トークンを プログラムで指定します。

その他の機能

ハイブリッド エクスペリエンスには、さまざまな追加の構成オプションと機能を使用できます。

• 推論モードを設定する

• デフォルトのクラウド ホスト型フォールバック モデルをオーバーライドする

• モデル構成を使用してレスポンスを制御する（温度など）

• 構造化出力（JSON など）を生成する

デバイス上での推論でまだ利用できない機能

プレビュー リリースでは、ウェブ SDK のすべての機能がデバイス上 での推論で使用できるわけではありません。次の機能は、デバイス上での推論ではまだサポートされていません（通常はクラウドベースの推論で使用できます）。

• JPEG と PNG 以外の画像ファイル入力タイプからテキストを生成する

  • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

• 音声、動画、ドキュメント（PDF など）の入力からテキストを生成する

  • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

• Gemini または Imagen モデルを使用して画像を生成する

  • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

• マルチモーダル リクエストで URL を使用してファイルを提供する。デバイス上のモデルには、インライン データとしてファイルを提供する必要があります。

• マルチターン チャット

  • クラウド ホスト型モデルにフォールバックできますが、ONLY_ON_DEVICE モードではエラーがスローされます。

• Gemini Live API を使用した双方向ストリーミング

• レスポンスの生成に役立つツールをモデルに提供する （関数呼び出し、コード実行、URL コンテキスト、 Google Searchによる Grounding、Google Mapsによる Grounding など）

• トークンのカウント

  • 常にエラーがスローされます。カウントはクラウド ホスト型モデルとデバイス上のモデルで異なるため、直感的なフォールバックはありません。

• Firebase コンソールでのデバイス上での推論の AI モニタリング。

  • クラウド ホスト型モデルを使用した推論は、ウェブ用の Firebase AI Logic クライアント SDK を使用した他の推論と同様に モニタリングできます。

フィードバックを送信する Firebase AI Logicの使用に関する