Executar um app da Web de demonstração da API Live

Neste tutorial, você vai aprender a configurar e executar um aplicativo de demonstração baseado em React para a API Live. O aplicativo apresenta streaming de áudio e vídeo em tempo real e usa um proxy WebSocket do Python para processar a autenticação segura comGoogle Cloud.

O diagrama a seguir mostra a estrutura do projeto:

Diagrama mostrando a estrutura de arquivos do app de demonstração. Na raiz, há um diretório chamado "/", com dois subdiretórios chamados "src/" e "public/", além de um único arquivo chamado "server.py" com o subrótulo "WebSocket proxy & auth handler". No subdiretório src/, há um arquivo singleton chamado "App.jsx", que é o componente raiz, e dois subdiretórios. O primeiro subdiretório é rotulado como "components/" e contém um arquivo: "LiveAPIDemo.jsx", que é o arquivo principal de lógica do aplicativo. O outro subdiretório é rotulado como "utils/" e contém dois arquivos: "gemini-api.js", que é o cliente WebSocket do Gemini, e "media-utils.js", para processamento de áudio/vídeo. No subdiretório public/, há outro subdiretório chamado "audio-processors/", que contém os worklets de áudio.
Diagrama mostrando a estrutura de diretórios e arquivos do web app de demonstração da API Live.

Antes de começar

Verifique se você tem o seguinte instalado:

  • Python 3.9 ou mais recente
  • pip
  • git

Configure o ambiente

Para configurar o 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 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 necessárias do Python.

    pip install -r requirements.txt

  4. Autentique com Google Cloud.

    gcloud auth application-default login

Execute o aplicativo

Depois de configurar o ambiente, execute o aplicativo:

  1. Inicie o servidor proxy do Python.

    python server.py

  2. Em um 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 o aplicativo.

A seguir