# 【学习工作赛道】API 模型测速台——可视化对比大模型 API 性能的 Web 工具
## 一、Demo 简介
- **是什么**：一个单页 Web 应用，用户填写 API 信息即可对大模型进行测速，实时展示首字延迟、TPS（Token/秒）等关键指标，并支持多模型历史数据对比图表。
- **面向谁**：开发者、产品经理、AI 技术选型者，以及所有需要接入和评估大模型 API 的人。
- **主要功能**：
1. 单模型测速：填写 API 地址、密钥、模型名称、测试 Prompt，一键发起请求，实时返回首字延迟、成功率、TPS、等指标。
2. 多模型对比：支持将多次测速结果保存到历史记录，以图表形式横向对比不同模型的关键性能指标。
3. 结果可视化：用图表直观呈现测试数据，避免"看 JSON"的低效方式。
## 二、Demo 创作思路
- **灵感来源**：我在测试模型 API 时写了一个 Python 脚本，但它只在终端输出 JSON，对非技术同事不友好，也无法做多模型对比。于是想把它升级成一个带 Web 界面的可视化工具。
- **想解决的问题**：开发者和产品经理在对比不同大模型 API 时，缺乏一个直观、可量化的性能测试工具，往往只能靠感觉判断，或者手动写脚本看 JSON 输出，效率低、不直观。
- **为什么做这个方向**：
-
现有工具要么是命令行脚本（对非技术用户不友好），要么功能不全；
-
缺乏统一的、可自定义的多模型对比能力；
-
测试结果（首字延迟、TPS）没有可视化展示，难以直观理解。
-
这是一个每天都在遇到的真实痛点，实用性强、落地价值高。
## 三、Demo 体验地址
因为cors跨域问题,需要后端转发,无法使用纯前端部署.提供源码压缩包
**体验地址**：
api-speed-test.zip (22.6 KB)
## 四、TRAE 实践过程
### 4.1 需求拆解与方案设计
基于报名阶段的创意，将 Demo 拆解为以下核心任务：
1. 搭建单页 Web 应用骨架（HTML + CSS + JavaScript）
2. 实现 API 测速核心逻辑（发起请求、计时、计算 TPS 等）
3. 实现结果可视化展示（图表对比）
4. 实现历史记录持久化（localStorage）
5. 界面美化与交互优化
### 4.2 开发关键步骤
**步骤 1：搭建应用骨架与测速核心逻辑**
首先让 TRAE 生成前端页面骨架和后端 Flask 服务。前端直接调用目标 API 时遇到 **CORS 跨域问题**——浏览器因同源策略拦截了向第三方 API 地址发起的请求。TRAE 分析了错误信息后，给出了解决方案：改用后端转发模式，即前端将请求发给同源的 Flask 后端，由后端代理转发到目标 API，从而绕过浏览器的 CORS 限制。具体实现为在 `app.py` 中添加 `/api/chat` 路由，接收前端请求后使用 `urllib.request` 转发到目标地址，并将响应流式返回给前端。
**步骤 2：实现结果可视化与多模型对比**
在完成测速核心逻辑后，我让 TRAE 添加对比图表功能。TRAE 选择了 **Chart.js** 作为图表库，在 `index.html` 中通过 CDN 引入。关键实现思路如下：
1. **对比面板**：在页面底部新增 `#comparePanel` 区域，包含一个 `` 用于渲染图表。
2. **数据准备**：从历史记录中提取 TTFT、TPS、总耗时、成功率四个指标，使用 Chart.js 柱状图进行展示。
3. **Tooltip 展示原始值**：鼠标悬停时，tooltip 同时显示归一化比例和原始值（带单位），兼顾可视化清晰度和数据准确性。
4. **多模型对比**：通过模拟数据（`seed_data.py`）预置了 GPT-4o、Claude-3-Opus、DeepSeek、Qwen-Max 等模型的测速记录，用户可一键切换"模拟数据"模式查看对比效果。
**步骤 3：界面优化与体验打磨**
测速和对比功能跑通后，我让 TRAE 对整体交互体验进行打磨，主要优化点包括：
1. **归一化对比**：由于 TTFT、TPS、总耗时三个指标量纲不同（秒、tokens/秒），TRAE 采用了 ****Min-Max 归一化****策略——将各指标独立归一化到 0~100 的相对比例，使不同量纲的指标可以在同一张柱状图上直观对比；成功率则保留原始百分比值（绝对值），并在 Y 轴标题和 tooltip 中明确标注区分。
2. **模拟数据开关**：在历史记录面板右上角添加了"模拟数据"开关，用户可一键切换查看预置的示例数据（GPT-4o、Claude-3-Opus、DeepSeek、Qwen-Max 等），方便快速体验对比图表功能，无需实际调用 API。
3. **筛选与批量操作**：历史记录区域增加了按模型名称和 Base URL 筛选的功能，并支持批量对比、批量重测、批量删除，方便用户管理大量测速记录。
### 4.3 开发关键步骤截图
### 4.4 关键任务对话 Session ID
Session ID 1：.3599132331880532:858a9b548ac495a728559be2efbdadd2_6a3cb105697162ca60d68403.6a3cb154697162ca60d68410.6a3cb154552181a59057bb85:Trae CN.T(2026/6/25 12:40:52)
Session ID 2：.3599132331880532:3f5daf62e52df2c9878ce2747eab40c3_6a3cb105697162ca60d68403.6a3cb105697162ca60d68405.6a3cb105697162ca60d68404:Trae CN.T(2026/6/25 12:39:33)
Session ID 3：.3599132331880532:2e4d0081fdf32fbd6a6ff06ce38014fc_6a3cab49697162ca60d68384.6a3cac55697162ca60d68386.6a3cac55552181a59057bb84:Trae CN.T(2026/6/25 12:19:33)
## 五、报名帖链接