執行 Live API 試用版網頁應用程式

本教學課程說明如何設定及執行以 React 為基礎的 Live API 試用版應用程式。這個應用程式提供即時音訊和視訊串流功能，並使用 Python WebSocket Proxy 處理與Google Cloud的安全驗證。

下圖顯示專案結構：

圖表：示範應用程式的檔案結構。根目錄標示為「/」，其中有兩個子目錄分別標示為「src/」和「public/」，以及一個標示為「server.py」的檔案，子標籤為「WebSocket proxy & auth handler」。src/ 子目錄中包含一個名為「App.jsx」的單例檔案 (根元件)，以及兩個子目錄。第一個子目錄標示為「components/」，內含一個檔案：「LiveAPIDemo.jsx」，這是主要的應用程式邏輯檔案。另一個子目錄標示為「utils/」，內含兩個檔案：「gemini-api.js」(Gemini WebSocket 用戶端) 和「media-utils.js」(用於音訊/影片處理)。在 public/ 子目錄中，它包含另一個標示為「audio-processors/」的子目錄，其中包含音訊 worklet。
圖表：顯示 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 Proxy 伺服器。

    python server.py

  2. 在新的終端機中，安裝 Node 模組並啟動 React 開發伺服器。

    # Install Node modules
npm install

# Start development server
npm run dev

  3. 在瀏覽器中開啟 http://localhost:5173，即可查看應用程式。

後續步驟