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 vanilla 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 compte Google Cloud . 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 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. 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 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. 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 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'UI 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 projet Google Cloud .
  3. Cliquez sur Se connecter.

Interagir avec Gemini

Essayez ce qui suit :

  • 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 en utilisant l'audio.
  • Saisie vocale : pour parler à Gemini, cliquez sur Démarrer le micro. Gemini répond à la requête à l'aide d'un message audio.
  • Entrée vidéo : pour permettre à Gemini de voir ce que filme 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