Live API-Demo-Webanwendung ausführen

In dieser Anleitung erfahren Sie, wie Sie eine React-basierte Demoanwendung für die Live API einrichten und ausführen. Die Anwendung bietet Audio- und Videostreaming in Echtzeit und verwendet einen Python-WebSocket-Proxy zur Verarbeitung der sicheren Authentifizierung mitGoogle Cloud.

Das folgende Diagramm zeigt die Struktur des Projekts:

Diagramm mit der Dateistruktur für die Demo-App. Im Stammverzeichnis befindet sich ein Verzeichnis mit der Bezeichnung „/“ mit zwei Unterverzeichnissen mit der Bezeichnung „src/“ und „public/“ sowie einer einzelnen Datei mit der Bezeichnung „server.py“ mit der Unterbezeichnung „WebSocket proxy & auth handler“. Im Unterverzeichnis „src/“ befindet sich eine Singleton-Datei mit dem Namen „App.jsx“, die die Stammkomponente darstellt, sowie zwei Unterverzeichnisse. Das erste Unterverzeichnis heißt „components/“ und enthält eine Datei: „LiveAPIDemo.jsx“. Das ist die Datei mit der Hauptanwendungslogik. Das andere Unterverzeichnis heißt „utils/“ und enthält zwei Dateien: „gemini-api.js“, den Gemini-WebSocket-Client, und „media-utils.js“ für die Audio-/Videoverarbeitung. Im Unterverzeichnis „public/“ befindet sich ein weiteres Unterverzeichnis mit der Bezeichnung „audio-processors/“, das die Audio-Worklets enthält.
Diagramm mit der Verzeichnis- und Dateistruktur der Live API-Demo-Web-App.

Hinweise

Prüfen Sie, ob Folgendes installiert ist:

  • Python 3.9 oder höher
  • pip
  • git

Umgebung einrichten

So richten Sie Ihre lokale Umgebung ein:

  1. Klonen Sie das Repository.

    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. Erstellen und aktivieren Sie eine virtuelle Python-Umgebung.

    # 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. Installieren Sie die erforderlichen Python-Abhängigkeiten.

    pip install -r requirements.txt

  4. Authentifizieren Sie sich mit Google Cloud.

    gcloud auth application-default login

Anwendung ausführen

Nachdem Sie die Umgebung eingerichtet haben, führen Sie die Anwendung aus:

  1. Starten Sie den Python-Proxyserver.

    python server.py

  2. Installieren Sie in einem neuen Terminal die Node-Module und starten Sie den React-Entwicklungsserver.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Öffnen Sie http://localhost:5173 in Ihrem Browser, um die Anwendung aufzurufen.

Nächste Schritte