このチュートリアルでは、WebSocket を使用して Gemini Live API に接続する方法について説明します。このチュートリアルでは、バニラ JavaScript フロントエンドと、認証とプロキシ処理を行う Python サーバーを使用して、リアルタイムのマルチモーダル アプリケーションを構築します。
始める前に
環境を設定するには、次の手順を実行します。
- Google Cloud アカウントにログインします。 Google Cloudを初めて使用する場合は、 アカウントを作成して、実際のシナリオでの Google プロダクトのパフォーマンスを評価してください。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $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 Vertex AI 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 Vertex AI 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.txtGoogle 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 のベスト プラクティスについて学習する。