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. Melden Sie sich in Ihrem Google Cloud -Konto an. Wenn Sie mit Google Cloudnoch nicht vertraut sind, 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 Vertex AI 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 Vertex AI 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 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 Google Cloud:

    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 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-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 Google Cloud Projekts ein.
  3. Klicken Sie auf Verbinden.

Mit Gemini interagieren

Versuchen Sie Folgendes:

  • Texteingabe: Sie können eine SMS an Gemini senden, indem Sie Ihre Nachricht in das Nachrichtenfeld eingeben und auf Senden klicken. Gemini antwortet auf die Nachricht per 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 mit Gemini darüber sprechen, was die Kamera sieht.

Nächste Schritte