Execute uma app Web de demonstração da API Live

Este tutorial mostra como configurar e executar uma aplicação de demonstração baseada em React para a API Live. A aplicação inclui streaming de áudio e vídeo em tempo real e usa um proxy WebSocket do Python para processar a autenticação segura com oGoogle Cloud.

O diagrama seguinte mostra a estrutura do projeto:

Diagrama que representa a estrutura de ficheiros da app de demonstração. Na raiz, encontra-se um diretório com a etiqueta "/", com dois subdiretórios com as etiquetas "src/" e "public/", bem como um único ficheiro com a etiqueta "server.py" e a subetiqueta "WebSocket proxy & auth handler". No subdiretório src/, existe um ficheiro único etiquetado como "App.jsx", que é o componente raiz, e dois subdiretórios. O primeiro subdiretório tem a etiqueta "components/" e contém um ficheiro: "LiveAPIDemo.jsx", que é o ficheiro de lógica da aplicação principal. O outro subdiretório está etiquetado como "utils/" e contém dois ficheiros: "gemini-api.js", que é o cliente WebSocket do Gemini; e "media-utils.js", que é para o processamento de áudio/vídeo. No subdiretório public/, contém mais um subdiretório com a etiqueta "audio-processors/", que contém os worklets de áudio.
Diagrama que mostra a estrutura de diretórios e ficheiros da app Web de demonstração da API Live.

Antes de começar

Certifique-se de que tem o seguinte instalado:

  • Python 3.9 ou posterior
  • pip
  • git

Configure o ambiente

Para configurar o seu ambiente local:

  1. Clone o repositório.

    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. Crie e ative um ambiente virtual do 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. Instale as dependências do Python necessárias.

    pip install -r requirements.txt

  4. Autentique com Google Cloud.

    gcloud auth application-default login

Execute a aplicação

Depois de configurar o ambiente, execute a aplicação:

  1. Inicie o servidor proxy Python.

    python server.py

  2. Num novo terminal, instale os módulos do Node e inicie o servidor de desenvolvimento do React.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Abra http://localhost:5173 no navegador para ver a aplicação.

O que se segue?