WebSocket을 사용하여 Gemini Live API 시작하기

이 튜토리얼은 WebSocket을 사용하여 Gemini Live API에 연결하는 방법을 보여줍니다. 이 튜토리얼에서는 일반 JavaScript 프런트엔드와 인증 및 프록시를 처리하는 Python 서버를 사용하여 실시간 멀티모달 애플리케이션을 빌드합니다.

시작하기 전에

다음 단계에 따라 환경 설정을 완료합니다.

  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. 외부 ID 공급업체(IdP)를 사용하는 경우 먼저 제휴 ID로 gcloud CLI에 로그인해야 합니다.

  6. gcloud CLI를 초기화하려면, 다음 명령어를 실행합니다. 

    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. 외부 ID 공급업체(IdP)를 사용하는 경우 먼저 제휴 ID로 gcloud CLI에 로그인해야 합니다.

  11. gcloud CLI를 초기화하려면, 다음 명령어를 실행합니다. 

    gcloud init
  12. Git를 설치합니다.
  13. Python 3를 설치합니다.

    14. 데모 앱 클론

    데모 앱 저장소를 클론하고 해당 디렉터리로 이동합니다.

    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 프록시 역할을 합니다.

    백엔드 서버를 실행하기 위해 다음 명령어를 실행합니다.

    1. 종속 항목을 설치합니다.

      pip3 install -r requirements.txt

    2. Google Cloud로 인증:

      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. 프로젝트 ID 필드에 Google Cloud 프로젝트의 ID를 입력합니다.
    3. 연결을 클릭합니다.

    Gemini와 상호작용하기

    다음을 시도해 보세요.

    • 텍스트 입력: 메시지 필드에 메시지를 입력하고 보내기를 클릭하여 Gemini에게 문자 메시지를 작성할 수 있습니다. Gemini는 오디오를 사용하여 메시지에 응답합니다.
    • 음성 입력: Gemini에게 말하려면 마이크 시작을 클릭합니다. Gemini가 오디오를 사용하여 프롬프트에 응답합니다.
    • 동영상 입력: Gemini가 카메라를 통해 볼 수 있게 하려면 카메라 시작을 클릭합니다. 카메라를 통해 보이는 내용에 관해 Gemini와 대화할 수 있습니다.

    다음 단계