Erste Schritte mit der Gemini Live API über WebSockets

In diesem Tutorial erfahren Sie, wie Sie mithilfe von WebSockets eine Verbindung zur Gemini Live API herstellen. In dieser Anleitung erstellen Sie eine multimodale Echtzeitanwendung mit einem Vanilla JavaScript-Frontend und einem Python-Server, der die Authentifizierung und das Proxying übernimmt.

Hinweis

Führen Sie die folgenden Schritte aus, um Ihre Umgebung einzurichten:

  1. In the Cloud de Confiance console, on the project selector page, select or create a Cloud de Confiance project.

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  2. Verify that billing is enabled for your Cloud de Confiance project.

  3. Enable the Agent Platform API, if it is not already enabled.

    Roles required to enable APIs

    To enable APIs, you need the serviceusage.services.enable permission. If you created the project, then you likely already have this permission through the Owner role (roles/owner). Otherwise, you can get this permission through the Service Usage Admin role (roles/serviceusage.serviceUsageAdmin). Learn how to grant roles.

    Enable the API

  4. Install the Google Cloud CLI.

  5. Configure the gcloud CLI to use your federated identity.

    For more information, see Sign in to the gcloud CLI with your federated identity.

  6. To initialize the gcloud CLI, run the following command: 

    gcloud init
  7. Installieren Sie Git.
  8. Installieren Sie Python 3.

Demo-App klonen

Klonen Sie das Repository der Demo-App und wechseln Sie in dieses Verzeichnis:

git clone https://github.com/GoogleCloudPlatform/generative-ai.git &&
cd generative-ai/gemini/multimodal-live-api/native-audio-websocket-demo-apps/plain-js-demo-app

Projektstruktur

Die Anwendung enthält die folgenden Dateien:

/
├── server.py            # WebSocket proxy + HTTP server
├── requirements.txt     # Python dependencies
└── frontend/
    ├── index.html       # UI
    ├── geminilive.js    # Gemini API client
    ├── mediaUtils.js    # Audio/video streaming
    ├── tools.js         # Custom tool definitions
    └── script.js        # App logic

Backend-Server starten

Das Backend (server.py) übernimmt die Authentifizierung und fungiert als WebSocket-Proxy zwischen dem Client und der Gemini Live API.

Führen Sie die folgenden Befehle aus, um den Backend-Server zu starten:

  1. Installieren Sie die Abhängigkeiten:

    pip3 install -r requirements.txt

  2. Authentifizieren mit Cloud de Confiance by S3NS:

    gcloud auth application-default login

  3. Starten Sie den Server:

    python3 server.py

Frontend-Benutzeroberfläche öffnen und Verbindung zu Gemini herstellen

Das Frontend verwaltet die Aufnahme und Wiedergabe von Audio- und Videodaten. Die Datei geminilive.js verarbeitet die WebSocket-Verbindung zum Backend.

const client = new GeminiLiveAPI(proxyUrl, projectId, model);
client.addFunction(toolInstance); // Add custom tools
client.connect(accessToken); // Connect (token optional with proxy)

So öffnen Sie die Frontend-Benutzeroberfläche und stellen eine Verbindung zu Gemini her:

  1. Öffnen Sie Ihren Browser und rufen Sie http://localhost:8000 auf.
  2. Geben Sie im Feld Projekt-ID die ID Ihres Cloud de Confiance -Projekts ein.
  3. Klicken Sie auf Verbinden.

Mit Gemini interagieren

Versuchen Sie Folgendes:

  • Texteingabe: Sie können eine SMS an Gemini schreiben, indem Sie Ihre Nachricht in das Nachrichtenfeld eingeben und auf Senden klicken. Gemini antwortet auf die Nachricht mit Audio.
  • Spracheingabe: Wenn Sie mit Gemini sprechen möchten, klicken Sie auf Mikrofon starten. Gemini antwortet auf den Prompt mit Audio.
  • Videoeingabe: Wenn Gemini über Ihre Kamera sehen soll, klicken Sie auf Kamera starten. Sie können sich mit Gemini darüber unterhalten, was die Kamera sieht.

Nächste Schritte