Speed Battle — Step-3.5-Flash 极速对比挑战

一个实时对比 AI 模型生成速度的 Web Demo。用户输入 Prompt 后，3 个模型同时流式输出，实时显示 tok/s、首字延迟、总耗时，最先完成的模型获得「最快」徽章。

效果

• 暗色主题，3 个模型面板并排展示
• 流式输出 + 实时速度指标
• 预设 Prompt 一键开始
• Step-3.5-Flash 居中高亮，蓝色发光边框

先决条件

• Node.js v18+（下载）
• Python 3.9+
• API Key：至少需要阶跃星辰的 Key

快速开始

1. 配置 API Key

cd backend
cp .env.example .env
# 编辑 .env，填入你的 API Key

2. 启动后端

cd backend
pip install -r requirements.txt
python main.py

后端默认运行在 http://localhost:8000。

3. 启动前端（新开一个终端）

cd frontend
npm install
npm run dev

前端默认运行在 http://localhost:5173。

4. 打开浏览器

访问 http://localhost:5173 ，选一个预设 Prompt 或自己输入，点击「开始对比」。

支持的模型

模型	环境变量	必填
Step-3.5-Flash	STEPFUN_API_KEY	必填
DeepSeek V3	DEEPSEEK_API_KEY	选填
Qwen-Plus	QWEN_API_KEY	选填

未配置 API Key 的模型会在面板中显示提示信息。

添加更多模型

1. 在 backend/main.py 的 MODELS 字典中添加新配置（需要 OpenAI 兼容 API）
2. 在 backend/.env 中添加对应的 API Key
3. 在 frontend/src/App.tsx 的 MODELS 数组中添加前端配置

技术栈

• 后端：Python FastAPI + OpenAI SDK + SSE 流式传输
• 前端：React + TypeScript + Vite + Tailwind CSS
• 通信：Server-Sent Events (SSE)

项目结构

speed-battle/
├── backend/
│   ├── main.py            # FastAPI 服务端
│   ├── requirements.txt   # Python 依赖
│   └── .env.example       # API Key 模板
├── frontend/
│   ├── src/
│   │   ├── App.tsx                 # 主应用
│   │   ├── components/
│   │   │   ├── ModelPanel.tsx      # 模型对比面板
│   │   │   └── PromptBar.tsx       # 输入栏 + 预设
│   │   ├── hooks/
│   │   │   └── useModelStream.ts   # SSE 流式 Hook
│   │   └── types.ts                # TypeScript 类型
│   ├── index.html
│   ├── vite.config.ts
│   └── package.json
└── README.md