Ejecutar una aplicación web de demostración de la API Live

En este tutorial se muestra cómo configurar y ejecutar una aplicación de demostración basada en React para la API Live. La aplicación incluye streaming de audio y vídeo en tiempo real y usa un proxy WebSocket de Python para gestionar la autenticación segura conGoogle Cloud.

En el siguiente diagrama se muestra la estructura del proyecto:

Diagrama que muestra la estructura de archivos de la aplicación de demostración. En la raíz hay un directorio llamado "/", con dos subdirectorios llamados "src/" y "public/", así como un archivo llamado "server.py" con la etiqueta secundaria "Proxy WebSocket y controlador de autenticación". En el subdirectorio src/, hay un archivo singleton llamado "App.jsx", que es el componente raíz, y dos subdirectorios. El primer subdirectorio se llama "components/" y contiene un archivo: "LiveAPIDemo.jsx", que es el archivo principal de la lógica de la aplicación. El otro subdirectorio se llama "utils/" y contiene dos archivos: "gemini-api.js", que es el cliente WebSocket de Gemini, y "media-utils.js", que se usa para procesar audio y vídeo. En el subdirectorio public/, contiene otro subdirectorio llamado "audio-processors/", que contiene los worklets de audio.
Diagrama que muestra la estructura de directorios y archivos de la aplicación web de demostración de la API Live.

Antes de empezar

Asegúrate de que tienes instalado lo siguiente:

  • Python 3.9 o versiones posteriores
  • pip
  • git

Configurar el entorno

Para configurar tu entorno local, sigue estos pasos:

  1. Clona el repositorio.

    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 y activa un entorno virtual de 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. Instala las dependencias de Python necesarias.

    pip install -r requirements.txt

  4. Autentícate con Google Cloud.

    gcloud auth application-default login

Ejecutar la aplicación

Una vez que hayas configurado el entorno, ejecuta la aplicación:

  1. Inicia el servidor proxy de Python.

    python server.py

  2. En un terminal nuevo, instala los módulos de Node e inicia el servidor de desarrollo de React.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Abre http://localhost:5173 en tu navegador para ver la aplicación.

Siguientes pasos