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


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

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

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

コード例に移動

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

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

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

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

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

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

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

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

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

始める前に

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

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 に組み込まれていますが、オンデバイス モデルはデフォルトでは使用できません。オンデバイス推論の最初のリクエストの前にモデルをダウンロードしていない場合、リクエストによってバックグラウンドでモデルのダウンロードが自動的に開始されます。

ステップ 2: Firebase プロジェクトを設定し、アプリを Firebase に接続する

  1. Firebase コンソールにログインし Firebase プロジェクトを選択します。

  2. Firebase コンソールで、Firebase AI Logic ページに移動します。

  3. [使ってみる] をクリックして、プロジェクトに必要な API とリソースを設定するガイド付きワークフローを起動します。

  4. 「Gemini API」プロバイダを使用するようにプロジェクトを設定します。

    始めるには、Gemini Developer API を使用することをおすすめします。 Vertex AI Gemini API はいつでも設定できますVertex AI Gemini API （とその請求要件）。

    Gemini Developer API の場合、コンソールで必要な API が有効になり、プロジェクトに Gemini API キーが作成されます。
    この Gemini API キーをアプリのコードベースに追加しないでください。    詳細

  5. コンソールのワークフローでプロンプトが表示されたら、画面上の手順に沿ってアプリを登録し、Firebase に接続します。

  6. このガイドの次のステップに進んで、アプリに SDK を追加します。

ステップ 3: SDK を追加する

Firebase ライブラリを使用すると、生成モデルを操作するための API にアクセスできます。このライブラリは、ウェブ用の Firebase JavaScript SDK の一部として含まれています。

  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: サービスを初期化してモデル インスタンスを作成する

Gemini API プロバイダをクリックして、このページでプロバイダ固有のコンテンツとコードを表示します。

モデルにプロンプト リクエストを送信する前に、次の設定を行います。

  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 });

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

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

構造化出力（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

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

Google アシスタントの機能

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

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

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

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

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

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

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

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

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

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

  • マルチターン チャット

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

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

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

  • トークンのカウント

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

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

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


フィードバックをお寄せください Firebase AI Logic の使用感について