Zenn
🤖

Firebase Extensions で Gemini の Multimodal 機能を簡単に実装する方法

2024/06/27に公開
AI
Firebase
Google Cloud
Gemini
tech

はじめに

こんにちは、クラウドエース株式会社の美波です。
最近、AI 技術の進化により、現代のアプリケーションは新たな次元へと進化しています。先日、Google が提供する Firebase プラットフォームに新たな標準として追加された「 Vertex AI for Firebase 」など、AI の活用がますます盛んになっています。

この記事では、Firebase Extensions の Multimodal Tasks with the Gemini API を使用して、簡単に AI を活用する方法やその性能の特徴、実際の導入手順について解説します。

Firebase Extensions とは

Firebase Extensions は、Firebase プロジェクトに新しい機能を簡単に追加できる便利なツールです。これらの拡張機能は、特定のタスクを自動化したり、アプリの機能を強化したりするために設計されています。以下に、Firebase Extensions の主な特徴を紹介します。

  • 主な特徴:
    • 簡単にインストール
      Firebase Extensions は、数クリックでインストールでき、コードを書き換える必要がありません。これにより、開発者は時間を節約しながら新しい機能を素早く追加できます。
    • 多様な機能
      データのバックアップ、画像のリサイズ、メールの送信など、さまざまなタスクに対応する拡張機能が揃っています。
    • 自動スケーリング
      拡張機能は Firebase のインフラ上で動作するため、トラフィックが増えた場合でも自動でスケールアップして対応します。
    • セキュリティと管理の簡便さ
      拡張機能は Firebase のセキュリティルールにしたがって動作するため、セキュリティ面でも安心です。また、管理も Firebase コンソールから簡単に行えます。

Multimodal Tasks with the Gemini API とは

Firebase Extensions の一部として提供される拡張機能で、Google Cloud の Vertex AI Gemini API を利用して マルチモーダル（テキスト、画像、音声など） なタスクを簡単に処理できるようにします。このエクステンションを使用することで、アプリケーションに高度な AI 機能を迅速に追加できます。

  • 主な機能:

    • テキスト、画像、音声などのマルチモーダルデータの処理
      多様なデータ形式をシームレスに処理し、複雑なタスクを簡単に実行できます。
    • 簡単にインストールしてすぐに利用可能
      事前に設定された拡張機能をインストールするだけで、すぐに利用開始できます。コードの変更は最小限です。
    • Firebase プロジェクトとシームレスに統合
      Firebase の他のサービスと簡単に統合でき、既存のプロジェクトにスムーズに組み込むことができます。
    • セキュリティ
      Firebase のセキュリティ機能を活用することで、安全なアプリケーションを開発できます。

  • 説明:

    • Gemini API を利用して Firestore 上のデータに基づいた生成タスクを実行するものです。

    • インストール時には、使用する Gemini API プロバイダー（ Google AI または Vertex AI ）、具体的な Gemini モデル、監視する Firestore コレクションのパス、そして API に応答させたいプロンプトを設定します。

    • また、指定された Firestore コレクションに新しいドキュメントが追加されると、そのドキュメントの内容をプロンプトに組み込み、Gemini API にクエリを送信して応答を生成します。その後、この応答を元のドキュメントにレスポンスフィールドとして書き戻します。

    • 製品レビューの星評価予測、顧客フィードバックの分類、記事の要約、テキストからの名前付きエンティティの抽出、創造的なテキストの生成など、様々なタスクに利用できます。各タスクには別々のインスタンスを設定する必要があります。

  • 紹介動画はこちら

https://www.youtube.com/watch?v=HIi-DuLKff8

Multimodal Tasks with the Gemini API 導入方法

Multimodal Tasks with the Gemini API を使用した構成や、導入方法を紹介します。

今回は、ユーザーが入力または画像をアップロードして Gemini API 分析・解析を行う例を紹介します。

導入手順は以下の通りです

インストール

Firebase コンソールの Extensions から検索し、Multimodal Tasks with the Gemini API を選択してインストールします。

管理設定

Multimodal Tasks with the Gemini APIの管理設定を行うためには、
Firebase コンソールの Extensions を選択し、インストールした管理設定から設定を行います。

管理画面項目
alt text

  1. Gemini API プロバイダーの設定
    インストール時に Gemini API プロバイダー（ Google AI または Vertex AI ）を選択します。
    今回は「 Vertex AI 」を選択しています。

  2. Gemini モデルの設定
    使用する Gemini モデルを指定します。
    今回は画像分析も確認するため「 gemini-1.0-pro-vision 」を選択しています。

  3. Google AI API Key の設定
    Google AI を選択した場合は、API Key は必須です。
    Vertex AI を選択した場合は、アプリケーションのデフォルトの認証情報が使用されます。
    今回は「 Vertex AI 」選択していますので省略可

  4. Firestore コレクションの設定
    監視する Firestore コレクションのパスを指定します。
    今回はコレクションパスを「 generate 」としています。

  5. プロンプトの設定
    APIに応答させたいプロンプトフィールドを設定します。
    今回は「 inputText 」フィールドとします。

  6. 画像の設定
    APIに応答させたい画像フィールドを設定します。
    今回は「 image 」フィールドとします。

  7. 結果の設定
    Gemini API を使用して分析結果を応答するためのフィールドを設定します。
    今回は「 output 」フィールドとします。

その他の項目もありますが、今回はデフォルトのままとしますので省略します。

これらの設定を行うことで、Gemini API を使用してデータの生成タスクを実行し、結果を Firestore に保存することができます。

動作確認

今回の動作確認は、GCPコンソール、Firebase コンソールを操作し、Gemini API を使用して分析・解析されているか確認を行います。

Firestoreのフィールド構成は以下となります。

フィールド名 内容 例)入力/出力 内容
image 分析する画像URL ( png / jpeg / gif ) Base64 文字列
gs://{バケット名}/image_cat001.png
inputText ユーザーが入力したプロンプト 画像は何の動物ですか
output 自動出力: Gemini API の結果 猫です
status 自動出力:ステータス状況 state の種類
PROCESSING :リクエスト処理中
COMPLETED :リクエスト正常完了
ERRORED :エラー

テキストを分析してみる

  1. ユーザーのテキスト入力

    • Firestore の「 generate 」コレクションに直接ドキュメントを追加しいます。
    • ドキュメントには「 inputText 」フィールドを追加し「こんにちは」と入力し保存します。
      alt text

  2. 保存データ元に自動でプロンプトを生成し、Gemini API にクエリを送信

  3. Gemini API によって応答が生成され、結果を Firestore の「 output 」フィールドに保存します。

    • 「 output 」フィールドにはあいさつを回答する文章が返ってきます。
      alt text

画像を分析してみる

  1. 画像をアップロードします。

    • 画像を準備する

      内容 画像 URL
      猫の画像 alt text gs://{バケット名}/image_cat001.png

    • Cloud Storageにアップロードする
      alt text

  2. テキストを入力します。

    • Firestore の「 generate 」コレクションに直接ドキュメントを追加しています。
    • ドキュメントには「 inputText 」フィールドを追加し「画像は何の動物ですか」と入力し保存します。

  3. 保存されたデータ(画像含む)を元にプロンプトを生成し、Gemini API にクエリを送信します。

  4. Gemini APIによって応答が生成され、結果を Firestore の「 output 」フィールドに保存します。

  • 「 output 」フィールドには猫であることを回答する文章が返ってきます。
    alt text

以上が Multimodal Tasks with the Gemini API の導入と動作についての概要です。この拡張機能を活用することで、簡単にマルチモーダルなタスクを処理できるようになります。

アーキテクチャ

今回確認した内容をもとに Web アプリケーションのアーキテクチャを考えてみました。
※アーキテクチャではユーザーが操作する UI を含んでいます。
alt text

各プロダクトについて簡単にご紹介します。

  • Firebase Hosting
    ウェブアプリや静的コンテンツのホスティングを提供します。
    今回はウェブアプリのホスティングに使用します。

  • Cloud Storage
    大量のデータを安全かつスケーラブルに保存するためのストレージサービスです。画像、動画、音声ファイルなどの大容量データを保存し、後続の処理や分析のトリガーとして使用します。
    今回は画像分析時のデータ保存に使用し、ユーザーがアップロードした画像を Cloud Storage に保存します。その後、保存された画像を元に Gemini API を利用して画像解析を行い、結果を Firestore に保存します。

  • Cloud Functions
    バックエンドのコードを自動的に実行するサーバーレスフレームワークです。
    Firebase の機能や HTTP リクエストなどによってトリガーされた様々なイベントをトリガーに動作します。
    ※Multimodal Tasks with the Gemini API インストール時に必要な Function は自動で生成されるため、意識する必要はありません。

  • Firestore
    NoSQL データベースです。スケーリングを気にすることなくブラウザからも簡単にデータを保存できます。
    今回は主にユーザーの入力データとアップロードした画像 URL、生成 AI からの回答の保存に利用します。
    ユーザーの入力データ(画像の URL 含む)の保存をトリガーに Multimodal Tasks with the Gemini API 拡張機能が Gemini API を通して回答を作成、再度 Firestore に格納するので、そのデータを取得します。

まとめ

今回は、Firebase Extensions の Multimodal Tasks with the Gemini API を活用して、AI 技術を簡単にアプリケーションに統合する方法について解説しました。
Firebase Extensions は、インストールが簡単で、さまざまなタスクを自動化し、アプリの機能を強化する便利なツールです。
特に、Gemini API を利用したマルチモーダルタスクの処理は、テキスト、画像、音声など多様なデータ形式をシームレスに扱うことができ、開発者にとって非常に有用だと思います。
プレビュー版ではありますが、この拡張機能をぜひ取り入れてみてください。

Discussion