Live API デモ ウェブアプリを実行する

このチュートリアルでは、Live API の React ベースのデモ アプリケーションを設定して実行する方法について説明します。このアプリケーションは、リアルタイムの音声と動画のストリーミングを特徴としており、Python WebSocket プロキシを使用してGoogle Cloudによる安全な認証を処理します。

次の図は、プロジェクトの構造を示しています。

デモアプリのファイル構造を示す図。ルートには「/」というラベルのディレクトリがあり、その下に「src/」と「public/」というラベルの 2 つのサブディレクトリと、「server.py」というラベルの 1 つのファイルがあります。このファイルには「WebSocket プロキシと認証ハンドラ」というサブラベルが付いています。src/ サブディレクトリ内には、ルート コンポーネントである「App.jsx」というラベルの付いたシングルトン ファイルが 1 つと、2 つのサブディレクトリがあります。最初のサブディレクトリには「components/」というラベルが付けられており、メイン アプリケーション ロジック ファイルである「LiveAPIDemo.jsx」というファイルが 1 つ含まれています。もう 1 つのサブディレクトリは「utils/」というラベルが付けられており、Gemini WebSocket クライアントである「gemini-api.js」と、音声/動画処理用の「media-utils.js」の 2 つのファイルが含まれています。public/ サブディレクトリには、audio-processors/ というラベルの付いたサブディレクトリがさらに 1 つ含まれており、このサブディレクトリにはオーディオ ワークレットが含まれています。
Live API デモ ウェブアプリのディレクトリとファイル構造を示す図。

始める前に

以下がインストールされていることを確認します。

  • Python 3.9 以降
  • pip
  • git

環境を設定する

ローカル環境を設定するには:

  1. リポジトリのクローンを作成します。

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

  2. Python 仮想環境を作成して有効にします。

    # Create the virtual environment
python -m venv .venv

# Activate the virtual environment in each new terminal
# For macOS or Linux:
source .venv/bin/activate

# For Windows CMD:
.venv\Scripts\activate.bat

# For Windows PowerShell:
.venv\Scripts\Activate.ps1

  3. 必要な Python 依存関係をインストールします。

    pip install -r requirements.txt

  4. Google Cloudを使用して認証します。

    gcloud auth application-default login

アプリケーションを実行する

環境を設定したら、アプリケーションを実行します。

  1. Python プロキシ サーバーを起動します。

    python server.py

  2. 新しいターミナルで、Node モジュールをインストールして React 開発サーバーを起動します。

    # Install Node modules
npm install

# Start development server
npm run dev

  3. ブラウザで http://localhost:5173 を開いてアプリケーションを表示します。

次のステップ