模型比较工具

相关源文件

• frontend/src/components/evals/AllEvalsPage.tsx
• frontend/src/components/evals/BestOfNEvalsPage.tsx
• frontend/src/components/evals/EvalsPage.tsx
• frontend/src/components/evals/PairwiseEvalsPage.tsx
• frontend/src/components/evals/RatingPicker.tsx
• frontend/src/main.tsx

本文档详细介绍了Screenshot-to-Code应用程序中用于比较不同AI模型代码生成结果的评估工具。这些工具是更广泛的评估系统（请参阅评估系统）的一部分，能够对模型输出进行定量和定性评估。

目的与范围

模型比较工具提供了一个系统化的框架，用于评估和比较不同LLM模型生成的代码的质量。这些工具允许开发者和研究人员

1. 对单个模型进行详细评估
2. 对两个模型进行并排比较
3. 同时比较多个模型
4. 生成用于性能分析的定量指标

来源: frontend/src/components/evals/AllEvalsPage.tsx3-58

比较工具架构

来源

• frontend/src/main.tsx13-27
• frontend/src/components/evals/AllEvalsPage.tsx3-58

评估组件

模型比较工具由四个主要组件组成

组件	目的	文件路径
单模型评估	对单个模型输出进行详细评估	frontend/src/components/evals/EvalsPage.tsx
成对比较	两个模型的并排比较	frontend/src/components/evals/PairwiseEvalsPage.tsx
N项最佳比较	同时比较多个模型	frontend/src/components/evals/BestOfNEvalsPage.tsx
评估仪表盘	访问所有评估工具的中心枢纽	frontend/src/components/evals/AllEvalsPage.tsx

来源: frontend/src/components/evals/AllEvalsPage.tsx3-58

评估数据流

来源

• frontend/src/components/evals/EvalsPage.tsx77-110
• frontend/src/components/evals/PairwiseEvalsPage.tsx49-81
• frontend/src/components/evals/BestOfNEvalsPage.tsx60-94

单模型评估

单模型评估工具（EvalsPage）提供对单个模型在多个标准下的输出的详细评估。

评估标准

该工具根据五个关键标准评估输出

1. 堆栈遵循度：输出在多大程度上遵循请求的技术堆栈
2. 准确性：输出在多大程度上精确地再现了屏幕截图中的视觉设计
3. 代码质量：生成代码的整洁度和可维护性
4. 移动响应性：生成的界面在多大程度上适应不同的屏幕尺寸
5. 图片字幕质量：生成代码中图片字幕的准确性和相关性

每个标准都使用RatingPicker组件以1-5的等级进行评分。

来源

• frontend/src/components/evals/EvalsPage.tsx22-75
• frontend/src/components/evals/EvalsPage.tsx134-260
• frontend/src/components/evals/RatingPicker.tsx1-32

单项评估界面

界面显示

• 输入截图
• 生成的代码输出（预览或源码视图）
• 每个评估标准的评分控件
• 各类别总分

来源: frontend/src/components/evals/EvalsPage.tsx134-260

成对模型比较

成对比较工具（PairwiseEvalsPage）允许对两个不同模型对同一输入的输出进行直接比较。

比较工作流程

1. 用户输入包含评估数据的两个文件夹的路径
2. 系统加载并并排显示输出对
3. 用户投票选择哪个输出更好（左、右或平局）
4. 系统计算并显示胜场统计数据

来源

• frontend/src/components/evals/PairwiseEvalsPage.tsx10-81
• frontend/src/components/evals/PairwiseEvalsPage.tsx116-132

成对评估统计

该工具跟踪

• 总投票数
• 每种模型的获胜次数
• 平局次数
• 每种模型的获胜百分比

来源: frontend/src/components/evals/PairwiseEvalsPage.tsx34-47

N项最佳模型比较

N项最佳比较工具（BestOfNEvalsPage）将比较扩展到同时处理多个模型。

多模型设置

1. 用户为每个模型文件夹添加输入字段（添加模型按钮）
2. 系统加载所有指定文件夹中的输出
3. 所有模型的输出并排显示
4. 用户选择每个输入图像的最佳输出

来源

• frontend/src/components/evals/BestOfNEvalsPage.tsx18-58
• frontend/src/components/evals/BestOfNEvalsPage.tsx60-94

N向比较界面

界面特性

• 输入截图显示
• 所有模型输出，带模型名称标签
• 每个输出的全屏查看选项
• 每个模型和“平局”选项的投票按钮
• 显示胜场数和百分比的统计数据

来源: frontend/src/components/evals/BestOfNEvalsPage.tsx104-247

实现细节

常见数据结构

所有比较工具都使用相似的数据结构

API 集成

比较工具与后端API端点进行交互

1. /evals - 用于单模型评估
2. /pairwise-evals - 用于成对模型比较
3. /best-of-n-evals - 用于多模型比较

这些端点将文件夹路径作为查询参数，并返回结构化的评估数据。

来源

• frontend/src/components/evals/EvalsPage.tsx85-90
• frontend/src/components/evals/PairwiseEvalsPage.tsx57-63
• frontend/src/components/evals/BestOfNEvalsPage.tsx68-77

使用说明

加载评估数据

所有工具都需要指定下载文件夹中评估数据的存储位置。标准格式为

1. 在输入字段中提供文件夹路径
2. 点击“加载评估”或“开始比较”按钮
3. 等待系统加载评估数据

查看和比较输出

1. 输入截图显示在顶部
2. 模型输出显示在下方（单个、成对或多个）
3. 使用提供的按钮在预览和源代码视图之间切换
4. 使用全屏选项进行详细检查

记录评估

1. 对于单模型：为每个标准以1-5的等级对每个输出进行评分
2. 对于成对：为每次比较选择“左胜”、“右胜”或“平局”
3. 对于N项最佳：选择生成最佳输出的模型或“平局”

来源

• frontend/src/components/evals/RatingPicker.tsx1-32
• frontend/src/components/evals/PairwiseEvalsPage.tsx186-217
• frontend/src/components/evals/BestOfNEvalsPage.tsx219-243