使用 WebSocket 開始使用 Gemini Live API

本教學課程說明如何使用 WebSocket 連線至 Gemini Live API。在本教學課程中，您將建構即時多模態應用程式，其中包含純 JavaScript 前端，以及處理驗證和 Proxy 的 Python 伺服器。

事前準備

請按照下列步驟設定環境。

  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. 安裝 Git。
  8. 安裝 Python 3。

複製試用版應用程式

複製試用版應用程式存放區，然後前往該目錄：

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

專案結構

應用程式包含下列檔案：

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

執行後端伺服器

後端 (server.py) 會處理驗證，並做為用戶端與 Gemini Live API 之間的 WebSocket Proxy。

執行下列指令，啟動後端伺服器：

  1. 安裝依附元件：

    pip3 install -r requirements.txt

  2. 使用 Cloud de Confiance by S3NS驗證：

    gcloud auth application-default login

  3. 啟動伺服器：

    python3 server.py

開啟前端 UI 並連結至 Gemini

前端會管理音訊和視訊的擷取與播放作業。geminilive.js 檔案會處理與後端的 WebSocket 連線。

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

如要開啟前端 UI 並連線至 Gemini，請按照下列步驟操作：

  1. 開啟瀏覽器並前往 http://localhost:8000。
  2. 在「Project ID」(專案 ID) 欄位中，輸入專案的 ID。 Cloud de Confiance
  3. 點選「連線」。

與 Gemini 互動

請嘗試下列做法：

  • 輸入文字：在訊息欄位輸入訊息，然後按一下「傳送」，即可撰寫傳送給 Gemini 的訊息。Gemini 會以語音回覆訊息。
  • 語音輸入：如要透過語音與 Gemini 對話，請按一下「啟動麥克風」。 Gemini 會透過語音回覆提示。
  • 視訊輸入：如要讓 Gemini 透過攝影機查看畫面，請按一下「啟動攝影機」。你可以與 Gemini 討論相機畫面中的內容。

後續步驟