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 une interface JavaScript simple et un serveur Python gérant l'authentification et le proxy.

Avant de commencer

Pour configurer votre environnement, procédez comme suit :

  1. Connectez-vous à votre Google Cloud compte. Si vous débutez sur Google Cloud, créez un compte pour évaluer les performances de nos produits en conditions réelles. Les nouveaux clients bénéficient également de 300 $de crédits sans frais pour exécuter, tester et déployer des charges de travail.

  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. Installez la Google Cloud CLI.

  6. Si vous utilisez un fournisseur d'identité (IdP) externe, vous devez d'abord vous connecter à la gcloud CLI avec votre identité fédérée.

  7. Pour initialiser la gcloud CLI, exécutez la commande suivante : 

    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. Installez la Google Cloud CLI.

  12. Si vous utilisez un fournisseur d'identité (IdP) externe, vous devez d'abord vous connecter à la gcloud CLI avec votre identité fédérée.

  13. Pour initialiser la gcloud CLI, exécutez la commande suivante : 

    gcloud init
  14. Installez Git.
  15. 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 Google Cloud:

    gcloud auth application-default login

  3. Démarrez le serveur :

    python3 server.py

Ouvrir l'interface utilisateur frontend et se connecter à Gemini

Le frontend 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 frontend et vous connecter à Gemini, procédez comme suit :

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

Interagissez avec Gemini

Essayez d'effectuer les opérations suivantes :

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

Étape suivante