Inizia a utilizzare l'API Gemini Live con i WebSocket

Questo tutorial mostra come connettersi all'API Gemini Live utilizzando WebSocket. In questo tutorial, creerai un'applicazione multimodale in tempo reale con un frontend JavaScript vanilla e un server Python che gestisce l'autenticazione e il proxy.

Prima di iniziare

Completa i seguenti passaggi per configurare l'ambiente.

  1. Accedi al tuo account Google Cloud . Se non conosci Google Cloud, crea un account per valutare le prestazioni dei nostri prodotti in scenari reali. I nuovi clienti ricevono anche 300 $di crediti senza costi per l'esecuzione, il test e il deployment dei workload.

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

  6. Se utilizzi un provider di identità (IdP) esterno, devi prima accedere a gcloud CLI con la tua identità federata.

  7. Per inizializzare gcloud CLI, esegui questo comando: 

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

  12. Se utilizzi un provider di identità (IdP) esterno, devi prima accedere a gcloud CLI con la tua identità federata.

  13. Per inizializzare gcloud CLI, esegui questo comando: 

    gcloud init
  14. Installa Git.
  15. Installa Python 3.

Clona l'app demo

Clona il repository dell'app demo e passa a quella directory:

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

Struttura del progetto

L'applicazione include i seguenti file:

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

Esegui il server di backend

Il backend (server.py) gestisce l'autenticazione e funge da proxy WebSocket tra il client e l'API Gemini Live.

Per eseguire il server di backend, esegui i seguenti comandi:

  1. Installa le dipendenze:

    pip3 install -r requirements.txt

  2. Autenticazione con Google Cloud:

    gcloud auth application-default login

  3. Avvia il server:

    python3 server.py

Apri la UI frontend e connettiti a Gemini

Il frontend gestisce l'acquisizione e la riproduzione di audio e video. Il file geminilive.js gestisce la connessione WebSocket al backend.

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

Per aprire la UI frontend e connetterti a Gemini:

  1. Apri il browser e vai all'indirizzo http://localhost:8000.
  2. Nel campo ID progetto, inserisci l'ID del tuo progetto Google Cloud .
  3. Fai clic su Connetti.

Interagire con Gemini

Prova a fare quanto segue:

  • Inserimento di testo: puoi scrivere un messaggio di testo a Gemini inserendo il messaggio nel campo del messaggio e facendo clic su Invia. Gemini risponde al messaggio utilizzando l'audio.
  • Input vocale: per parlare con Gemini, fai clic su Avvia microfono. Gemini risponde al prompt utilizzando l'audio.
  • Input video: per consentire a Gemini di vedere attraverso la videocamera, fai clic su Avvia videocamera. Puoi parlare con Gemini di ciò che vede attraverso la tua fotocamera.

Passaggi successivi