Menjalankan aplikasi web demo Live API

Tutorial ini menunjukkan cara menyiapkan dan menjalankan aplikasi demo berbasis React untuk Live API. Aplikasi ini memiliki fitur streaming audio dan video real-time serta menggunakan proxy WebSocket Python untuk menangani autentikasi yang aman denganGoogle Cloud.

Diagram berikut menunjukkan struktur project:

Diagram yang menggambarkan struktur file untuk aplikasi demo. Di root ada direktori berlabel '/', dengan dua subdirektori berlabel 'src/' dan 'public/', serta satu file berlabel 'server.py' dengan sublabel 'WebSocket proxy & auth handler'. Dalam subdirektori src/, ada satu file singleton berlabel 'App.jsx', yang merupakan komponen root, dan dua subdirektori. Subdirektori pertama diberi label 'components/' dan berisi satu file: 'LiveAPIDemo.jsx', yang merupakan file logika aplikasi utama. Subdirektori lainnya diberi label 'utils/' dan berisi dua file: 'gemini-api.js', yang merupakan klien WebSocket Gemini; dan 'media-utils.js', yang digunakan untuk pemrosesan audio/video. Di subdirektori public/, terdapat satu subdirektori lagi berlabel 'audio-processors/', yang berisi worklet audio.
Diagram yang menunjukkan struktur direktori dan file aplikasi web demo Live API.

Sebelum memulai

Pastikan Anda telah menginstal berikut:

  • Python 3.9 atau yang lebih baru
  • pip
  • git

Menyiapkan lingkungan

Untuk menyiapkan lingkungan lokal Anda:

  1. Buat cloning repositori:

    git clone https://github.com/GoogleCloudPlatform/generative-ai.git
cd generative-ai/gemini/multimodal-live-api/native-audio-websocket-demo-apps/react-demo-app

  2. Buat dan aktifkan lingkungan virtual Python.

    # Create the virtual environment
python -m venv .venv

# Activate the virtual environment in each new terminal
# For macOS or Linux:
source .venv/bin/activate

# For Windows CMD:
.venv\Scripts\activate.bat

# For Windows PowerShell:
.venv\Scripts\Activate.ps1

  3. Instal dependensi Python yang diperlukan.

    pip install -r requirements.txt

  4. Lakukan autentikasi dengan Google Cloud.

    gcloud auth application-default login

Menjalankan aplikasi

Setelah Anda menyiapkan lingkungan, jalankan aplikasi:

  1. Mulai server proxy Python.

    python server.py

  2. Di terminal baru, instal modul Node dan mulai server pengembangan React.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Buka http://localhost:5173 di browser Anda untuk melihat aplikasi.

Langkah berikutnya