このチュートリアルでは、WebSocket を使用して Gemini Live API に接続する方法について説明します。このチュートリアルでは、プレーンな JavaScript フロントエンドと、認証とプロキシ処理を行う Python サーバーを使用して、リアルタイムのマルチモーダル アプリケーションを構築します。
始める前に
環境を設定するには、次の手順を実行します。
- アカウントにログインします。 Google Cloud を初めて使用する場合は、 アカウントを作成して、 実際のシナリオでプロダクトがどのように機能するかを評価してください。 Google Cloud新規のお客様には、ワークロードの実行、テスト、デプロイに利用できる $300 分の無料クレジットも提供されます。
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud 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 theresourcemanager.projects.createpermission. Learn how to grant roles.
-
Verify that billing is enabled for your Google Cloud project.
Enable the Agent Platform API.
Roles required to enable APIs
To enable APIs, you need the Service Usage Admin IAM role (
roles/serviceusage.serviceUsageAdmin), which contains theserviceusage.services.enablepermission. Learn how to grant roles.-
Google Cloud CLI をインストールします。
-
外部 ID プロバイダ（IdP）を使用している場合は、まず連携 ID を使用して gcloud CLI にログインする必要があります。
-
gcloud CLI を初期化するには、次のコマンドを実行します:
gcloud init -
In the Google Cloud console, on the project selector page, select or create a Google Cloud 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 theresourcemanager.projects.createpermission. Learn how to grant roles.
-
Verify that billing is enabled for your Google Cloud project.
Enable the Agent Platform API.
Roles required to enable APIs
To enable APIs, you need the Service Usage Admin IAM role (
roles/serviceusage.serviceUsageAdmin), which contains theserviceusage.services.enablepermission. Learn how to grant roles.-
Google Cloud CLI をインストールします。
-
外部 ID プロバイダ（IdP）を使用している場合は、まず連携 ID を使用して gcloud CLI にログインする必要があります。
-
gcloud CLI を初期化するには、次のコマンドを実行します:
gcloud init - Git のインストール。
- 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 プロキシとして機能します。
次のコマンドを実行して、バックエンド サーバーを起動します。
依存関係をインストールします。
pip3 install -r requirements.txtで認証します Google Cloud：
gcloud auth application-default loginサーバーを開始します。
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 に接続する手順は次のとおりです。
- ブラウザを開き、http://localhost:8000 に移動します。
- [プロジェクト ID] フィールドに、 Google Cloud プロジェクトの ID を入力します。
- [接続] をクリックします。
Gemini を操作する
次の操作を試してください。
- テキスト入力: メッセージ フィールドにメッセージを入力して [送信] をクリックすると、 Gemini にテキスト メッセージを送信できます。Gemini は音声でメッセージに応答します。
- 音声入力: Gemini に話しかけるには、[マイクを開始] をクリックします。 Gemini は音声でプロンプトに応答します。
- 動画入力: Gemini がカメラを通して見えるようにするには、[カメラを開始] をクリックします。カメラを通して見えるものについて Gemini に話しかけることができます。
次のステップ
- 言語と音声を構成する方法を確認する。
- Gemini の機能を構成する方法を確認する。
- Gemini Live API のベスト プラクティスを確認する。