Ejecuta una app web de demostración de la API de Live

En este instructivo, se muestra cómo configurar y ejecutar una aplicación de demostración basada en React para la API de Live. La aplicación incluye transmisión de audio y video en tiempo real, y usa un proxy de WebSocket de Python para controlar la autenticación segura conGoogle Cloud.

En el siguiente diagrama, se muestra la estructura del proyecto:

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

Antes de comenzar

Asegúrate de tener instalado lo siguiente:

  • Python 3.9 o versiones posteriores
  • pip
  • git

Configura el entorno

Para configurar tu entorno local, haz lo siguiente:

  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 requeridas.

    pip install -r requirements.txt

  4. Autentícate con Google Cloud.

    gcloud auth application-default login

Ejecuta la aplicación

Después de configurar el entorno, ejecuta la aplicación:

  1. Inicia el servidor proxy de Python.

    python server.py

  2. En una terminal nueva, instala los módulos de Node y, luego, 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.

¿Qué sigue?