WebSocket を使用して Gemini Live API を使ってみる

このチュートリアルでは、WebSocket を使用して Gemini Live API に接続する方法について説明します。このチュートリアルでは、プレーンな JavaScript フロントエンドと、認証とプロキシ処理を行う Python サーバーを使用して、リアルタイムのマルチモーダル アプリケーションを構築します。

始める前に

環境を設定するには、次の手順を実行します。

  1. In the Cloud de Confiance console, on the project selector page, select or create a Cloud de Confiance project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  2. Verify that billing is enabled for your Cloud de Confiance project.

  3. Enable the Agent Platform API, if it is not already enabled.

    Roles required to enable APIs

    To enable APIs, you need the serviceusage.services.enable permission. If you created the project, then you likely already have this permission through the Owner role (roles/owner). Otherwise, you can get this permission through the Service Usage Admin role (roles/serviceusage.serviceUsageAdmin). Learn how to grant roles.

    Enable the API

  4. Install the Google Cloud CLI.

  5. Configure the gcloud CLI to use your federated identity.

    For more information, see Sign in to the gcloud CLI with your federated identity.

  6. To initialize the gcloud CLI, run the following command: 

    gcloud init
  7. Git のインストール。
  8. Python 3 をインストールします。

デモアプリのクローンを作成する

デモアプリ リポジトリのクローンを作成し、そのディレクトリに移動します。

git clone https://github.com/GoogleCloudPlatform/generative-ai.git &&
cd generative-ai/gemini/multimodal-live-api/native-audio-websocket-demo-apps/plain-js-demo-app

プロジェクトの構造

このアプリケーションには次のファイルが含まれています。

/
├── server.py            # WebSocket proxy + HTTP server
├── requirements.txt     # Python dependencies
└── frontend/
    ├── index.html       # UI
    ├── geminilive.js    # Gemini API client
    ├── mediaUtils.js    # Audio/video streaming
    ├── tools.js         # Custom tool definitions
    └── script.js        # App logic

バックエンド サーバーを実行する

バックエンド（server.py）は認証を処理し、クライアントと Gemini Live API 間の WebSocket プロキシとして機能します。

次のコマンドを実行して、バックエンド サーバーを実行します。

  1. 依存関係をインストールします。

    pip3 install -r requirements.txt

  2. Cloud de Confiance by S3NSで認証します。

    gcloud auth application-default login

  3. サーバーを開始します。

    python3 server.py

フロントエンド UI を開き、Gemini に接続する

フロントエンドは、音声と動画のキャプチャと再生を管理します。geminilive.js ファイルは、バックエンドへの WebSocket 接続を処理します。

const client = new GeminiLiveAPI(proxyUrl, projectId, model);
client.addFunction(toolInstance); // Add custom tools
client.connect(accessToken); // Connect (token optional with proxy)

フロントエンド UI を開いて Gemini に接続する手順は次のとおりです。

  1. ブラウザを開き、http://localhost:8000 に移動します。
  2. [プロジェクト ID] フィールドに、 Cloud de Confiance プロジェクトの ID を入力します。
  3. [接続] をクリックします。

Gemini とやり取りする

次の手順をお試しください。

  • テキスト入力: メッセージ フィールドにメッセージを入力して [送信] をクリックすると、Gemini にテキスト メッセージを送信できます。Gemini が音声でメッセージに返信します。
  • 音声入力: Gemini に話しかけるには、[マイクを開始] をクリックします。Gemini が音声でプロンプトに応答します。
  • 動画入力: Gemini がカメラを通して見えるようにするには、[カメラを開始] をクリックします。カメラに映っているものについて Gemini に話しかけることができます。

次のステップ