Esegui un'app web demo dell'API Live

Questo tutorial mostra come configurare ed eseguire un'applicazione demo basata su React per l'API Live. L'applicazione offre lo streaming audio e video in tempo reale e utilizza un proxy WebSocket Python per gestire l'autenticazione sicura con Google Cloud.

Il seguente diagramma mostra la struttura del progetto:

Diagramma che mostra la struttura dei file per l'app demo. Alla radice si trova una directory etichettata "/", con due sottodirectory etichettate "src/" e "public/", nonché un singolo file etichettato "server.py" con la sottoetichetta "WebSocket proxy & auth handler". All'interno della sottodirectory src/ sono presenti un file singleton denominato "App.jsx", che è il componente principale, e due sottodirectory. La prima sottodirectory è etichettata "components/" e contiene un file: "LiveAPIDemo.jsx", che è il file principale della logica dell'applicazione. L'altra sottodirectory è etichettata "utils/" e contiene due file: "gemini-api.js", che è il client WebSocket Gemini, e "media-utils.js", che serve per l'elaborazione audio/video. Nella sottodirectory public/ contiene un'ulteriore sottodirectory denominata "audio-processors/", che contiene i worklet audio.
Diagramma che mostra la struttura di directory e file dell'app web demo dell'API Live.

Prima di iniziare

Assicurati di aver installato quanto segue:

  • Python 3.9 o versioni successive
  • pip
  • git

Configura l'ambiente

Per configurare l'ambiente locale:

  1. Clona il repository.

    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. Crea e attiva un ambiente virtuale 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. Installa le dipendenze Python richieste.

    pip install -r requirements.txt

  4. Autenticati con Google Cloud.

    gcloud auth application-default login

Eseguire l'applicazione

Dopo aver configurato l'ambiente, esegui l'applicazione:

  1. Avvia il server proxy Python.

    python server.py

  2. In un nuovo terminale, installa i moduli Node e avvia il server di sviluppo React.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Apri http://localhost:5173 nel browser per visualizzare l'applicazione.

Passaggi successivi