Live API 데모 웹 앱 실행

이 튜토리얼에서는 Live API용 React 기반 데모 애플리케이션을 설정하고 실행하는 방법을 보여줍니다. 이 애플리케이션은 실시간 오디오 및 동영상 스트리밍을 제공하며 Python WebSocket 프록시를 사용하여Google Cloud와의 보안 인증을 처리합니다.

다음 다이어그램은 프로젝트의 구조를 보여줍니다.

데모 앱의 파일 구조를 보여주는 다이어그램입니다. 루트에는 '/'라는 디렉터리가 있고, 'src/' 및 'public/'이라는 두 개의 하위 디렉터리와 'WebSocket proxy & auth handler '라는 하위 라벨이 있는 'server.py'라는 단일 파일이 있습니다. src/ 하위 디렉터리에는 루트 구성요소인 'App.jsx'라는 싱글톤 파일 하나와 두 개의 하위 디렉터리가 있습니다. 첫 번째 하위 디렉터리는 'components/'로 라벨이 지정되어 있으며 기본 애플리케이션 로직 파일인 'LiveAPIDemo.jsx' 파일이 하나 포함되어 있습니다. 다른 하위 디렉터리에는 'utils/'라는 라벨이 지정되어 있으며 Gemini WebSocket 클라이언트인 'gemini-api.js'와 오디오/동영상 처리를 위한 'media-utils.js'라는 두 개의 파일이 포함되어 있습니다. public/ 하위 디렉터리에는 오디오 워클릿이 포함된 'audio-processors/'라는 하위 디렉터리가 하나 더 있습니다.
Live API 데모 웹 앱의 디렉터리 및 파일 구조를 보여주는 다이어그램

시작하기 전에

다음이 설치되어 있는지 확인합니다.

  • Python 3.9 이상
  • pip
  • git

환경 설정

로컬 환경을 설정하려면 다음 단계를 따르세요.

  1. 저장소를 클론합니다.

    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. 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. 필수 Python 종속 항목을 설치합니다.

    pip install -r requirements.txt

  4. Google Cloud로 인증합니다.

    gcloud auth application-default login

애플리케이션 실행

환경을 설정한 후 애플리케이션을 실행합니다.

  1. Python 프록시 서버를 시작합니다.

    python server.py

  2. 새 터미널에서 Node 모듈을 설치하고 React 개발 서버를 시작합니다.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. 브라우저에서 http://localhost:5173을 열어 애플리케이션을 확인합니다.

다음 단계