このページは Cloud Translation API によって翻訳されました。

Firebase AI Logic を使用したハイブリッド AI プロンプト

Thomas Steiner

公開日: 2025 年 5 月 20 日

ユーザーのニーズを満たすため、使用しているプラットフォームやハードウェアに関係なく、Firebase AI Logic を使用して、組み込みの Prompt API のクラウドへのフォールバックを設定できます。

ハイブリッド AI エクスペリエンスを構築する

組み込み AI には、多くのメリットがあります。主なメリットは次のとおりです。

センシティブデータのローカル処理: センシティブデータを扱う場合、エンドツーエンドの暗号化を使用して AI 機能をユーザーに提供できます。
オフラインでの AI の使用: ユーザーは、オフラインの場合や接続が切断された場合でも AI 機能にアクセスできます。

これらのメリットはクラウドアプリケーションには適用されませんが、組み込み AI にアクセスできないユーザーにシームレスなエクスペリエンスを提供できます。

Firebase を使ってみる

Firebase プロジェクトを作成し、ウェブアプリケーションを登録します。
ウェブアプリケーションの設定を続行するには、Firebase JavaScript SDK のドキュメントをご覧ください。

Firebase プロジェクトは、Firebase 固有の構成とサービスを含む Google Cloud プロジェクトを作成します。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);

マルチモーダルプロンプト

テキストに加えて、画像や音声でプロンプトを入力することもできます。モデルに画像の内容の説明や音声ファイルの文字起こしを指示できます。

画像は、Firebase FileDataPart オブジェクトとして base64 でエンコードされた文字列として渡す必要があります。これは、ヘルパー関数 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 API を使用して Chrome で実行される Firebase AI ロジック。

別のブラウザまたは AI サポートが組み込まれていないオペレーティングシステムを使用している場合は、Firebase エンドポイント https://firebasevertexai.googleapis.com に追加のリクエストが送信されます。

Safari で実行されている Firebase AI Logic が Firebase サーバーにリクエストを送信している。

参加してフィードバックを共有する

Firebase AI Logic は、ウェブアプリに AI 機能を統合するのに最適なオプションです。Prompt API が利用できない場合にクラウドにフォールバックすることで、SDK は AI 機能のアクセシビリティと信頼性を高めます。

クラウドアプリケーションはプライバシーと機能に関する新たな期待を生み出すため、ユーザーにデータが処理される場所を知らせることが重要です。

Chrome の実装に関するフィードバックについては、バグレポートまたは機能リクエストを送信してください。
Firebase AI Logic に関するフィードバックについては、バグレポートを送信してください。