Exécuter une application Web de démonstration de l'API Live

Ce tutoriel vous explique comment configurer et exécuter une application de démonstration basée sur React pour l'API Live. L'application propose le streaming audio et vidéo en temps réel, et utilise un proxy WebSocket Python pour gérer l'authentification sécurisée avecGoogle Cloud.

Le schéma suivant montre la structure du projet :

Diagramme représentant la structure de fichiers de l'application de démonstration. À la racine se trouve un répertoire intitulé "/", avec deux sous-répertoires intitulés "src/" et "public/", ainsi qu'un seul fichier intitulé "server.py" avec le sous-libellé "Gestionnaire d'authentification et de proxy WebSocket". Dans le sous-répertoire src/, vous trouverez un fichier singleton intitulé "App.jsx", qui est le composant racine, et deux sous-répertoires. Le premier sous-répertoire est intitulé "components/" et contient un fichier : "LiveAPIDemo.jsx", qui est le fichier de logique d'application principal. L'autre sous-répertoire est intitulé "utils/" et contient deux fichiers : "gemini-api.js", qui est le client WebSocket Gemini, et "media-utils.js", qui est destiné au traitement audio/vidéo. Dans le sous-répertoire public/, il contient un autre sous-répertoire intitulé "audio-processors/", qui contient les worklets audio.
Diagramme montrant la structure des répertoires et des fichiers de l'application Web de démonstration de l'API Live.

Avant de commencer

Assurez-vous que les éléments suivants sont installés :

  • Python 3.9 ou version ultérieure
  • pip
  • git

Configurer l'environnement

Pour configurer votre environnement local :

  1. Clonez le dépôt.

    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. Créez et activez un environnement virtuel 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. Installez les dépendances Python requises.

    pip install -r requirements.txt

  4. S'authentifier avec Google Cloud.

    gcloud auth application-default login

Exécuter l'application

Une fois l'environnement configuré, exécutez l'application :

  1. Démarrez le serveur proxy Python.

    python server.py

  2. Dans un nouveau terminal, installez les modules Node et démarrez le serveur de développement React.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Ouvrez http://localhost:5173 dans votre navigateur pour afficher l'application.

Étapes suivantes