运行 Live API 演示 Web 应用

本教程介绍了如何针对 Live API 设置和运行基于 React 的演示应用。该应用支持实时音频和视频流式传输，并使用 Python WebSocket 代理来处理与Google Cloud的安全身份验证。

下图展示了该项目的结构：

Live API 演示 Web 应用项目结构
展示 Live API 演示 Web 应用的目录和文件结构的图表。

准备工作

确保您的系统上已安装以下软件：

  • Python 3.9 或更高版本
  • pip

设置环境

如需设置本地环境，请按照以下步骤操作。

  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 以查看应用。

后续步骤