夕小瑶科技 AI 模型对比平台

匿名 AI 模型对比平台 - 让数据说话

一个现代化的 AI 模型匿名对比测试平台，支持 A/B 测试、连续对话、长文本评测和标准数据集基准测试。

✨ 核心功能

🎭 双模式设计

AB 对比模式

匿名双模型对比: 两个模型并行生成，完全匿名显示为"模型 A"和"模型 B"
选择后揭晓: 只有在选择优胜者后才显示真实模型名称
消除品牌偏见: 让回答质量而非品牌影响判断
实时速度对比: 显示两个模型的 tokens/s 生成速度
差异高亮: 自动标注两个回答的关键差异点

💬 连续对话模式

上下文记忆: 支持多轮对话，系统记住之前的对话内容
实时流式输出: 逐字显示 AI 回复，体验更流畅
Markdown 渲染: 支持代码高亮、表格、列表等格式
时间戳记录: 每条消息都标注时间
清空对话: 一键清除历史，开始新对话

📊 智能统计分析

量化仪表板: 实时统计每个模型的胜率、平均速度
测试历史记录: 完整记录每次对比的问题、回答、速度、选择
密码保护导出: 导出 JSON 格式的测试数据，可设置密码保护
胜率排行: 自动计算各模型的胜率并排序
本地存储: 所有数据保存在浏览器本地，保护隐私

📏 长文本理解评测

多层次测试: 生成 1k-50k tokens 的测试用例
"大海捞针"评估: 在长文本中插入关键信息，测试模型检索能力
准确率曲线: 可视化展示模型在不同上下文长度下的准确率
实时曲线更新: 批量测试时，准确率曲线实时更新
PNG 导出: 一键导出高清准确率曲线图（1600x800px）

🎯 标准数据集基准测试

RULER Benchmark（英文）

变量追踪 (VT): 测试模型追踪多个变量值变化的能力
多跳追踪 (MHT): 测试多步推理和信息串联能力
信息聚合 (AGG): 测试从多个位置聚合信息的能力
测试长度: 4k-16k tokens

LongBench Benchmark（中文）

单文档问答: 基于单篇长文档回答问题
多文档问答: 综合多篇文档的信息回答问题
摘要生成: 提取长文档的核心内容
测试长度: 5k-10k tokens

自定义数据集

JSON 格式上传: 支持上传自定义测试集
模板下载: 提供标准 JSON 模板
灵活配置: 自定义问题、答案、上下文长度

🚀 批量测试功能

并发测试: 支持 5x 并发，快速完成大规模测试
顺序测试: 逐个测试，适合调试和细致分析
进度监控: 实时显示测试进度条和当前状态
失败追踪: 记录失败的测试用例，完成后汇总报告

🎯 推荐测试用例

逻辑推理

北方人与学生的逻辑关系
自由之门（政治哲学）
爱因斯坦难题（经典逻辑推理）

概率分析

魔法骰子作弊检测

数字推理

五位密码破解
七位密码推理

⚡ 性能特性

实时速度测量: 计算每个模型的 tokens/s 生成速度
并行 API 调用: 双模型同时请求，缩短等待时间
流式渲染: Server-Sent Events (SSE) 实时流式输出
自动重试: API 失败时自动重试机制

🎨 界面设计

现代渐变 UI: 粉色-紫色-蓝色渐变主题
深色模式支持: 自适应系统主题
响应式设计: 完美适配桌面、平板、手机
流畅动画: 按钮、卡片、进度条的丝滑过渡效果
3 栏布局: 输入区、对比区、统计区清晰分离

🚀 支持的模型

Gemini 3 Pro Preview - Google 最新预览版模型
Gemini 2.5 Pro - 稳定的生产版本
GPT-5 Chat Latest - OpenAI 最新聊天模型

🛠️ 技术栈

框架: Next.js 14 (App Router)
语言: TypeScript
样式: Tailwind CSS
UI 组件: React 18
Markdown 渲染: react-markdown + remark-gfm
图表: 原生 SVG + Canvas API
数据存储: LocalStorage
API 协议: OpenAI Compatible Streaming API

📦 快速开始

本地开发

克隆仓库:

git clone https://github.com/147228/gemini3.0-.git
cd gemini3.0-

安装依赖:

npm install

启动开发服务器:

npm run dev

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

配置 API

在界面中配置您的 API 信息：

点击"⚙️ API 配置"展开设置面板
填写 API Base URL: 您的 API 端点地址（例如：http://192.168.1.100:3000）
填写 API Key: 您的认证密钥
可选：调整高级设置
- Temperature (0-2): 控制输出随机性，0=确定，2=创造
- Max Tokens (100-4000): 最大生成长度

🌐 部署到 Zeabur

方法一：从 GitHub 部署

访问 Zeabur
点击 "New Project"
选择 "Deploy from GitHub"
选择本仓库
Zeabur 会自动检测 Next.js 并部署

方法二：使用 Zeabur CLI

# 安装 Zeabur CLI
npm install -g @zeabur/cli

# 登录
zeabur auth login

# 部署
zeabur deploy

📖 使用方法

1. AB 对比模式使用流程

快速开始

配置 API: 首次使用需点击"⚙️"按钮配置 API 信息
选择测试用例:
- 从"🎯 推荐测试用例"中选择预设问题
- 或在输入框中输入自定义问题
开始对比: 点击"🚀 开始对比"按钮
等待生成: 两个随机模型并行生成回答，显示为"模型 A"和"模型 B"
对比分析:
- 查看两个回答的内容质量
- 观察生成速度（tokens/s）
- 注意差异高亮标注
选择优胜者: 点击"✓ 选择 A"或"✓ 选择 B"
查看结果: 系统揭晓真实模型名称，结果自动保存

批量测试

选择批量模式: 在"🔥 批量测试"区域选择测试用例
选择执行模式:
- 并发模式: 5 个测试同时进行，速度快
- 顺序模式: 逐个测试，结果更可控
开始测试: 点击"开始批量测试"
实时监控:
- 查看进度条显示完成情况
- 准确率曲线实时更新（如果是长文本测试）
查看报告: 测试完成后弹窗显示成功/失败统计

长文本测试

点击"📏 长文本理解能力测试": 展开长文本测试区域
点击"🚀 开始长文本测试": 运行 31 个测试用例（1k-50k tokens）
查看曲线: 右侧自动展开"📈 长文本准确率曲线"
导出图表: 点击"📥 导出 PNG"保存高清曲线图

标准数据集测试

选择数据集: 在"🎯 标准数据集测试"中选择：
- RULER Benchmark: 英文，变量追踪/多跳推理/信息聚合
- LongBench: 中文，单文档QA/多文档QA/摘要
- 自定义数据集: 上传 JSON 格式测试集
点击"运行": 批量执行所有测试用例
查看结果: 在准确率曲线和统计面板中分析结果

2. 连续对话模式使用流程

开始对话

切换模式: 点击顶部"💬 连续对话模式"按钮
输入问题: 在底部输入框输入您的问题
发送: 点击"发送"按钮或按 Enter 键
查看回复: AI 回复实时流式显示在当前界面
继续对话: 继续提问，系统会记住之前的对话内容

功能说明

Shift+Enter: 在输入框中换行（不发送）
Enter: 发送消息
清空对话: 点击右上角"清空对话"重新开始
Markdown 支持: 回答支持代码块、表格、列表等格式
自动滚动: 新消息自动滚动到最底部

3. 统计分析功能

查看量化仪表板

展开仪表板: 点击右侧"📊 量化分析"
查看胜率: 每个模型的胜场数和胜率百分比
查看速度: 平均生成速度（tokens/s）
排序: 自动按胜率从高到低排序

查看测试历史

展开历史: 点击"📜 测试历史"
查看详情: 每条记录包含：
- 问题内容
- 模型名称
- 回答摘要
- 速度和优胜者
- 时间戳
导出数据: 点击"📥 导出数据"
设置密码: 输入密码保护导出文件
下载: JSON 文件自动下载到本地

清空历史

点击"🗑️ 清空历史"
确认操作
所有历史记录将被永久删除

4. 长文本准确率分析

查看准确率曲线

展开图表: 点击"📈 长文本准确率曲线"
解读曲线:
- X 轴: 上下文长度（k tokens）
- Y 轴: 准确率（%）
- 蓝色线: 模型 A 的准确率
- 紫色线: 模型 B 的准确率
查看数据点: 鼠标悬停在圆点上查看具体数值
对比趋势: 观察两个模型在不同长度下的表现差异

导出准确率图表

点击图表右上角"📥 导出 PNG"
系统自动生成 1600x800px 高清图片
文件名格式：long-context-accuracy-YYYY-MM-DD.png
图片包含完整坐标轴、图例和数据点

5. 自定义数据集上传

JSON 格式说明

[
  {
    "id": "test-1",
    "title": "测试标题",
    "contextLength": 5000,
    "content": "长文本内容...",
    "question": "问题？",
    "correctAnswer": "正确答案",
    "category": "类别"
  }
]

上传步骤

点击"📂 自定义数据集"中的"上传"按钮
点击"下载模板"获取 JSON 模板
按格式编辑您的测试用例
点击"点击选择文件"上传 JSON 文件
系统自动验证并加载测试用例
点击"运行选中的基准测试"开始测试

📂 项目结构

├── app/
│   ├── layout.tsx              # 根布局
│   ├── page.tsx                # 主页面（双模式入口）
│   └── globals.css             # 全局样式
├── components/
│   ├── Logo.tsx                # 夕小瑶科技 Logo
│   ├── ABComparison.tsx        # AB 测试对比组件
│   ├── ChatMode.tsx            # 连续对话模式组件 ✨
│   ├── QuantitativeDashboard.tsx # 量化统计仪表板
│   ├── TestCaseSelector.tsx    # 单个测试用例选择器
│   ├── BatchTestSelector.tsx   # 批量测试选择器
│   ├── BenchmarkSelector.tsx   # 标准数据集选择器 ✨
│   ├── TestHistory.tsx         # 测试历史记录
│   ├── LongContextChart.tsx    # 长文本准确率曲线 ✨
│   └── ...
├── lib/
│   ├── api.ts                  # API 客户端（SSE 流式）
│   ├── longContext.ts          # 长文本测试生成器 ✨
│   ├── benchmarks.ts           # 标准数据集定义 ✨
│   └── diff.ts                 # 文本差异分析 ✨
├── types/
│   └── chat.ts                 # TypeScript 类型定义
└── public/                     # 静态资源

🔒 API 格式

使用 OpenAI 兼容的流式 API 格式：

POST /v1/chat/completions
{
  "model": "gemini-3-pro-preview-11-2025",
  "messages": [
    {
      "role": "user",
      "content": [
        { "type": "text", "text": "你的问题" }
      ]
    }
  ],
  "stream": true,
  "stream_options": {
    "include_usage": true
  }
}

响应格式（SSE）：

data: {"choices":[{"delta":{"content":"回答内容"}}]}

data: [DONE]

📊 数据格式

导出的测试数据格式

{
  "version": "1.0",
  "exportDate": "2025-01-07T12:00:00.000Z",
  "password": "base64EncodedPassword",
  "totalTests": 50,
  "data": [
    {
      "id": "1234567890",
      "prompt": "测试问题",
      "modelA": "gemini-3-pro-preview-11-2025",
      "modelB": "gemini-2.5-pro",
      "responseA": "模型 A 的回答",
      "responseB": "模型 B 的回答",
      "speedA": 25.5,
      "speedB": 30.2,
      "winner": "B",
      "timestamp": "2025-01-07T12:00:00.000Z",
      "testCaseId": "logic-1"
    }
  ],
  "summary": {
    "models": [
      {
        "modelId": "gemini-3-pro-preview-11-2025",
        "modelName": "Gemini 3 Pro Preview",
        "totalTests": 25,
        "wins": 15,
        "winRate": "60.00"
      }
    ]
  }
}

🎯 测试用例详解

逻辑推理类

北方人 vs 学生

类型: 集合关系推理
难度: ⭐⭐
考察: 命题逻辑、集合包含关系

自由之门

类型: 政治哲学推理
难度: ⭐⭐⭐⭐
考察: 抽象思维、多角度分析

爱因斯坦难题

类型: 约束满足问题
难度: ⭐⭐⭐⭐⭐
考察: 复杂逻辑推理、信息整合

概率分析类

魔法骰子

类型: 概率统计
难度: ⭐⭐⭐
考察: 贝叶斯推断、统计分析

数字推理类

五位密码破解

类型: 数字逻辑
难度: ⭐⭐⭐
考察: 约束推理、排除法

七位密码推理

类型: 复杂数字逻辑
难度: ⭐⭐⭐⭐
考察: 多步推理、逻辑链

🔍 技术实现细节

流式输出实现

// 使用 Server-Sent Events (SSE) 实现流式输出
const response = await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(requestBody)
})

const reader = response.body?.getReader()
const decoder = new TextDecoder()

while (true) {
  const { done, value } = await reader.read()
  if (done) break

  const chunk = decoder.decode(value)
  const lines = chunk.split('\n').filter(line => line.startsWith('data: '))

  for (const line of lines) {
    const json = JSON.parse(line.slice(6))
    const content = json.choices[0]?.delta?.content
    if (content) onChunk(content)
  }
}

准确率计算

// 基于关键词匹配计算准确率
function calculateAccuracy(response: string, correctAnswer: string): number {
  const keywords = correctAnswer.toLowerCase().split(/\s+/)
  const responseText = response.toLowerCase()

  const matchedKeywords = keywords.filter(kw =>
    responseText.includes(kw)
  ).length

  return (matchedKeywords / keywords.length) * 100
}

SVG 导出为 PNG

// 使用 Canvas API 转换 SVG 到 PNG
const svg = svgRef.current
const svgData = new XMLSerializer().serializeToString(svg)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

canvas.width = 1600  // 高清分辨率
canvas.height = 800

const img = new Image()
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
const url = URL.createObjectURL(svgBlob)

img.onload = () => {
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

  canvas.toBlob((blob) => {
    // 触发下载
    const link = document.createElement('a')
    link.download = 'chart.png'
    link.href = URL.createObjectURL(blob)
    link.click()
  }, 'image/png')
}

img.src = url

🐛 故障排查

API 连接问题

问题: 无法连接到 API

检查 API Base URL 是否正确（包含协议 http:// 或 https://）
检查 API Key 是否有效
检查网络连接和防火墙设置
查看浏览器控制台的错误信息

历史记录不显示

问题: 测试历史不显示

检查浏览器 LocalStorage 是否被禁用
清除浏览器缓存后重试
检查是否有隐私模式限制

图表无法导出

问题: PNG 导出失败

确保浏览器支持 Canvas API
检查浏览器权限设置
尝试在不同浏览器中导出

批量测试中断

问题: 批量测试中途停止

检查网络连接稳定性
减少并发数量（从 5 降到 2）
使用顺序模式代替并发模式
检查 API 速率限制

🎨 自定义主题

修改主题色

编辑 app/globals.css:

:root {
  --primary-50: #fdf2f8;   /* 粉色 */
  --primary-500: #ec4899;
  --secondary-500: #a855f7; /* 紫色 */
  --accent-500: #6366f1;    /* 靛蓝 */
}

修改 Logo

替换 components/Logo.tsx 中的内容或图片路径。

📈 性能优化建议

减少并发数: 如遇 API 限流，将批量测试并发数从 5 降至 2-3
使用缓存: 相同问题会自动从历史记录中查找
调整 Max Tokens: 缩短回答长度可加快速度
选择性测试: 优先测试关键用例，避免全量测试

🔮 未来计划

支持更多 AI 模型（Claude, Llama, etc.）
添加图片上传和多模态测试
团队协作功能（共享测试结果）
更多标准数据集（MMLU, HumanEval, etc.）
自动化评分（GPT-4 作为评判）
测试结果云端同步
移动端 App

🎨 夕小瑶科技

本项目由 夕小瑶科技 开发和维护。

我们致力于打造优质的 AI 工具和应用，让 AI 技术更易用、更透明、更值得信赖。

📄 开源协议

MIT License

💬 支持与反馈

如有问题或建议，请访问：

GitHub Issues: https://github.com/147228/gemini3.0-/issues
讨论区: GitHub Discussions

📝 更新日志

v2.0.0 (2025-01-07)

✨ 新增连续对话模式
📏 新增长文本理解能力测试（1k-50k tokens）
🎯 新增标准数据集支持（RULER, LongBench）
📈 新增准确率曲线可视化和 PNG 导出
🚀 批量测试并发优化（5x 并发）
🎨 差异高亮显示
🔐 测试结果密码保护导出

v1.0.0 (2024-12-XX)

🎭 AB 匿名对比测试
📊 智能统计分析
🎯 推荐测试用例
⚡ 实时速度监控
🎨 现代化界面设计

Made with ❤️ by 夕小瑶科技

🌐 部署到 Zeabur | ⭐ GitHub Star

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
.claude		.claude
app		app
components		components
lib		lib
public		public
types		types
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
zeabur.json		zeabur.json
微信图片_2025-11-06_133840_055.jpg		微信图片_2025-11-06_133840_055.jpg

Folders and files

Latest commit

History

Repository files navigation