Erste Schritte mit der Gemini Live API über WebSockets

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

Hinweis

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

  1. Melden Sie sich in Ihrem Google Cloud Konto an. Wenn Sie noch kein Konto bei Google Cloudhaben, erstellen Sie ein Konto, um die Leistungsfähigkeit unserer Produkte in der Praxis sehen und bewerten zu können. Neukunden erhalten außerdem ein Guthaben von 300 $, um Arbeitslasten auszuführen, zu testen und bereitzustellen.

  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud 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

  3. Verify that billing is enabled for your Google Cloud project.

  4. Enable the Agent Platform API.

    Roles required to enable APIs

    To enable APIs, you need the Service Usage Admin IAM role (roles/serviceusage.serviceUsageAdmin), which contains the serviceusage.services.enable permission. Learn how to grant roles.

    Enable the API

  5. Installieren Sie die Google Cloud CLI.

  6. Wenn Sie einen externen Identitätsanbieter (IdP) verwenden, müssen Sie sich zuerst mit Ihrer föderierten Identität in der gcloud CLI anmelden.

  7. Führen Sie den folgenden Befehl aus, um die gcloud CLI zu initialisieren: 

    gcloud init

  8. In the Google Cloud console, on the project selector page, select or create a Google Cloud 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

  9. Verify that billing is enabled for your Google Cloud project.

  10. Enable the Agent Platform API.

    Roles required to enable APIs

    To enable APIs, you need the Service Usage Admin IAM role (roles/serviceusage.serviceUsageAdmin), which contains the serviceusage.services.enable permission. Learn how to grant roles.

    Enable the API

  11. Installieren Sie die Google Cloud CLI.

  12. Wenn Sie einen externen Identitätsanbieter (IdP) verwenden, müssen Sie sich zuerst mit Ihrer föderierten Identität in der gcloud CLI anmelden.

  13. Führen Sie den folgenden Befehl aus, um die gcloud CLI zu initialisieren: 

    gcloud init
  14. Installieren Sie Git.
  15. Installieren Sie Python 3.

Demo-App klonen

Klonen Sie das Demo-App-Repository 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.

Starten Sie den Backend-Server:

  1. Installieren Sie die Abhängigkeiten:

    pip3 install -r requirements.txt

  2. Authentifizieren mit Google Cloud:

    gcloud auth application-default login

  3. Starten Sie den Server:

    python3 server.py

Frontend-UI öffnen und Verbindung zu Gemini herstellen

Das Frontend verwaltet die Audio- und Videoaufnahme und -wiedergabe. 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-UI und stellen eine Verbindung zu Gemini her:

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

Mit Gemini interagieren

Versuchen Sie Folgendes:

  • Texteingabe: Sie können eine Textnachricht an Gemini senden, 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 Sie Gemini über Ihre Kamera sehen lassen möchten, klicken Sie auf Kamera starten. Sie können mit Gemini darüber sprechen, was es durch Ihre Kamera sieht.

Nächste Schritte