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 Vanilla JavaScript-Frontend und einem Python-Server, der die Authentifizierung und das Proxying übernimmt.

Hinweise

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

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  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. Install the Google Cloud CLI.

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

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

    gcloud init

  7. 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

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

  9. Install the Google Cloud CLI.

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

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

    gcloud init
  12. Installieren Sie Git.
  13. Installieren Sie Python 3.

    14. 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 sich mit Gemini darüber unterhalten, was die Kamera sieht.

    Nächste Schritte