Model Arena - 跨厂商 AI 模型对比平台

一个轻量级的跨厂商 AI 模型对比工具，通过阿里云百炼统一 API，同时调用 DeepSeek、Kimi、GLM、MiniMax、Qwen 等厂商的多个模型，在文本对话、图片理解、文生图三个场景下实时对比输出质量、响应速度和成本。

✨ 核心特性

• 零外部依赖 - 纯 Node.js 原生实现，无需 npm install
• SSE 流式输出 - 逐 token 实时渲染，先到先显示
• 多模型对比 - 支持 8 个厂商 38+ 模型的并行对比
• 智能健康检查 - 启动时自动探测模型可用性，不可用模型自动置灰
• 同步滚动 - 一键联动所有结果卡片，便于对比
• 成本估算 - 实时显示每个模型的预估费用
• 主题切换 - 支持深色/浅色模式
• 配置驱动 - 修改 models.json 即可增删模型，无需改代码

🚀 快速开始

前置要求

• Node.js >= 18.0.0（使用了原生 fetch API）
• 阿里云百炼 API Key（获取地址）

安装步骤

# 1. 克隆仓库
git clone https://github.com/modelstudioai/model-arena.git
cd model-arena

# 2. 配置 API Key
cp .env.example .env
# 编辑 .env 文件，填入你的 DASHSCOPE_API_KEY

运行

node server.js

打开浏览器访问：http://localhost:3000

📖 使用说明

1. 文本对话对比

1. 在顶部选择要对比的模型（可多选）
2. 输入问题或指令
3. 点击"开始对比"
4. 实时查看各模型的输出速度、质量和成本

2. 图片理解对比

1. 切换到"图片理解"标签
2. 拖拽或上传图片
3. 输入关于图片的问题
4. 对比各视觉模型的理解能力

3. 文生图对比

⚠️ 注意：需要先在百炼控制台开通"通义万相"服务

1. 切换到"文生图"标签
2. 输入图片描述
3. 选择生成尺寸（1:1、3:4、4:3、16:9）
4. 点击"生成对比"

模型选择器

点击底部的模型选择器展开面板：

• 按厂商分组 - Qwen、DeepSeek、Kimi、GLM、MiniMax 等
• 层级标识 - 旗舰、高端、专业、均衡、轻量等
• 价格标签 - 每百万 Token 或每张图的估算费用
• 全选/取消 - 快速选择某厂商的所有模型
• 健康状态 - 灰色表示模型不可用（需开通权限或 ID 变更）

🔧 配置说明

环境变量 (.env)

DASHSCOPE_API_KEY=your-api-key-here

变量	说明	必填
DASHSCOPE_API_KEY	阿里云百炼 API Key	✅ 是

模型注册表 (models.json)

{
  "groups": [
    {
      "vendor": "Qwen (阿里云)",
      "vendorKey": "qwen",
      "color": "#c4873b",
      "models": [
        {
          "id": "qwen3.7-max",
          "name": "Qwen3.7-Max",
          "tier": "旗舰",
          "capabilities": ["text", "vision"],
          "pricePerMillion": 12
        }
      ]
    }
  ]
}

字段说明：

字段	类型	说明
id	string	模型 ID（百炼 API 使用）
name	string	显示名称
tier	string	层级标签（旗舰/高端/专业/均衡/轻量等）
capabilities	array	支持的能力：text、vision、image-gen
pricePerMillion	number	每百万 Token 价格（元），文本/视觉模型使用
pricePerImage	number	每张图价格（元），生图模型使用

健康检查缓存 (.model-health.json)

启动时自动生成，缓存模型可用性状态（24小时有效）。如需重新探测，删除此文件后重启即可。

💰 费用说明

API 调用费用

• 按实际使用量计费，参考 models.json 中的估算价格
• 新用户可能有免费试用额度（以百炼官网为准）
• 详细定价请查看百炼模型广场

健康检查消耗

• 首次启动时会探测所有模型的可用性
• 产生少量 API 调用（每个模型发送简短请求）
• 探测结果缓存 24 小时，避免重复消耗
• 可通过启动参数跳过（见下方高级用法）

🛠️ 高级用法

自定义端口

编辑 server.js 第 7 行：

const PORT = 3000; // 修改为你想要的端口

跳过健康检查

如需跳过启动时的模型探测（节省 API 调用）：

# 方式一：设置环境变量
SKIP_HEALTH_CHECK=true node server.js

# 方式二：手动创建空的缓存文件
echo '{}' > .model-health.json

添加新模型

1. 在 models.json 中添加模型配置
2. 确保 capabilities 包含正确的能力标签
3. 重启服务器即可生效

❓ 常见问题

Q: 启动时报错 "缺少 DASHSCOPE_API_KEY"

A: 检查 .env 文件是否正确配置，确保格式为：

DASHSCOPE_API_KEY=sk-xxxxx

Q: 端口 3000 被占用

A: 修改 server.js 中的 PORT 常量，或关闭占用端口的程序。

Q: 部分模型返回 404 或错误

A: 可能原因：

1. 该模型在百炼上需要单独开通权限
2. 模型 ID 已变更（查看健康检查状态）
3. 该厂商在百炼上没有此模型

解决： 在百炼控制台开通对应服务，或选择其他可用模型。

Q: 文生图功能无法使用

A: 需要在百炼控制台开通"通义万相"服务。

Q: 如何查看真实的价格？

A: 项目中的价格为估算值，请以百炼模型广场的实时价格为准。

Q: 可以在生产环境使用吗？

A: 可以，但建议：

1. 添加身份验证（当前无鉴权）
2. 配置 CORS 限制（当前允许所有来源）
3. 添加速率限制（防止滥用）
4. 使用 HTTPS（当前为 HTTP）

🏗️ 技术架构

后端

• 运行时: Node.js >= 18
• 框架: 原生 http 模块（零依赖）
• API: SSE (Server-Sent Events) 流式输出
• 存储: 文件系统（健康检查缓存）

前端

• 框架: 原生 JavaScript（无框架）
• Markdown 渲染: marked.js（CDN）
• 样式: 手写 CSS（无 UI 库）
• 字体: Inter + JetBrains Mono + Noto Serif SC

目录结构

model-arena/
├── server.js              # Node.js 服务器主文件
├── model-health.js        # 健康检查模块
├── models.json            # 模型注册表
├── index.html             # 前端页面
├── .env                   # 环境变量（不提交）
├── .env.example           # 环境变量模板
├── .model-health.json     # 健康检查缓存（不提交）
├── test.ps1               # PowerShell 测试脚本
└── README.md              # 项目文档

📊 资源占用

指标	数值
磁盘占用	~150KB
内存占用	~50-100MB
CPU 占用	低（I/O 密集型）
网络带宽	取决于模型响应大小

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

• 报告 Bug: 请提供详细的复现步骤和环境信息
• 功能建议: 说明使用场景和期望效果
• 模型更新: 直接修改 models.json 并提交 PR

📄 许可证

MIT License - 详见 LICENSE 文件

🔗 相关链接

• 阿里云百炼控制台
• 百炼模型广场
• DashScope API 文档

⚠️ 免责声明

• 本项目仅供学习研究使用
• 价格数据仅供参考，以官方实时价格为准
• 模型可用性可能随时间变化，请以百炼控制台为准
• 使用本项目产生的 API 费用由用户自行承担

---

Made with ❤️ for AI enthusiasts