Premiers pas avec l'API Gemini Live à l'aide de WebSockets

Ce tutoriel vous explique comment vous connecter à l'API Gemini Live à l'aide de WebSockets. Dans ce tutoriel, vous allez créer une application multimodale en temps réel avec un frontend JavaScript vanilla et un serveur Python gérant l'authentification et le proxy.

Avant de commencer

Pour configurer votre environnement, procédez comme suit :

  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. Installez Git.
  8. Installez Python 3.

Cloner l'application de démonstration

Clonez le dépôt de l'application de démonstration et accédez à ce répertoire :

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

Structure du projet

L'application inclut les fichiers suivants :

/
├── 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

Exécuter le serveur backend

Le backend (server.py) gère l'authentification et sert de proxy WebSocket entre le client et l'API Gemini Live.

Pour exécuter le serveur backend, exécutez les commandes suivantes :

  1. Installez les dépendances :

    pip3 install -r requirements.txt

  2. S'authentifier avec Cloud de Confiance by S3NS :

    gcloud auth application-default login

  3. Démarrez le serveur :

    python3 server.py

Ouvrir l'UI frontend et se connecter à Gemini

L'interface utilisateur gère la capture et la lecture audio et vidéo. Le fichier geminilive.js gère la connexion WebSocket au backend.

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

Pour ouvrir l'interface utilisateur du frontend et vous connecter à Gemini :

  1. Ouvrez votre navigateur et accédez à http://localhost:8000.
  2. Dans le champ ID du projet, saisissez l'ID de votre projet Cloud de Confiance .
  3. Cliquez sur Se connecter.

Interagir avec Gemini

Essayez les solutions suivantes :

  • Saisie de texte : vous pouvez écrire un message à Gemini en le saisissant dans le champ de message, puis en cliquant sur Envoyer. Gemini répond au message à l'aide d'un message audio.
  • Saisie vocale : pour parler à Gemini, cliquez sur Démarrer le micro. Gemini répond au prompt à l'aide d'un message audio.
  • Entrée vidéo : pour permettre à Gemini de voir ce que vous voyez grâce à votre caméra, cliquez sur Démarrer la caméra. Vous pouvez parler à Gemini de ce qu'il voit grâce à votre caméra.

Étapes suivantes