Mulai menggunakan Gemini Live API menggunakan WebSockets

Tutorial ini menunjukkan cara terhubung ke Gemini Live API menggunakan WebSockets. Dalam tutorial ini, Anda akan membangun aplikasi multimodal real-time dengan frontend JavaScript vanilla dan server Python yang menangani autentikasi dan proxy.

Sebelum memulai

Selesaikan langkah-langkah berikut untuk menyiapkan lingkungan Anda.

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

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

  5. Jika Anda menggunakan penyedia identitas (IdP) eksternal, Anda harus login ke gcloud CLI dengan identitas gabungan Anda terlebih dahulu.

  6. Untuk melakukan inisialisasi gcloud CLI, jalankan perintah berikut: 

    gcloud init

  7. 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

  8. Verify that billing is enabled for your Google Cloud project.

  9. Install the Google Cloud CLI.

  10. Jika Anda menggunakan penyedia identitas (IdP) eksternal, Anda harus login ke gcloud CLI dengan identitas gabungan Anda terlebih dahulu.

  11. Untuk melakukan inisialisasi gcloud CLI, jalankan perintah berikut: 

    gcloud init
  12. Instal Git.
  13. Instal Python 3.

    14. Meng-clone aplikasi demo

    Buat clone repositori aplikasi demo dan buka direktori tersebut:

    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

    Struktur project

    Aplikasi ini mencakup file berikut:

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

    Menjalankan server backend

    Backend (server.py) menangani autentikasi dan bertindak sebagai proxy WebSocket antara klien dan Gemini Live API.

    Untuk menjalankan server backend, jalankan perintah berikut:

    1. Instal dependensi:

      pip3 install -r requirements.txt

    2. Mengautentikasi dengan Google Cloud:

      gcloud auth application-default login

    3. Mulai server:

      python3 server.py

    Buka UI frontend dan hubungkan dengan Gemini

    Frontend mengelola perekaman dan pemutaran audio dan video. File geminilive.js menangani koneksi WebSocket ke backend.

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

    Untuk membuka UI frontend dan terhubung dengan Gemini, lakukan hal berikut:

    1. Buka browser Anda dan buka http://localhost:8000.
    2. Di kolom Project ID, masukkan ID project Google Cloud Anda.
    3. Klik Hubungkan.

    Berinteraksi dengan Gemini

    Coba lakukan hal berikut:

    • Input teks: Anda dapat menulis pesan teks ke Gemini dengan memasukkan pesan Anda di kolom pesan, lalu mengklik Kirim. Gemini merespons pesan menggunakan audio.
    • Input suara: Untuk berbicara dengan Gemini, klik Mulai mikrofon. Gemini merespons perintah menggunakan audio.
    • Input video: Agar Gemini dapat melihat melalui kamera Anda, klik Mulai kamera. Anda dapat berbicara dengan Gemini tentang apa yang dilihatnya melalui kamera Anda.

    Langkah berikutnya