评估系统

相关源文件

• Evaluation.md
• backend/evals/core.py
• backend/evals/runner.py
• backend/routes/evals.py
• backend/run_evals.py
• frontend/src/components/evals/RunEvalsPage.tsx

评估系统提供了一个框架，用于评估和比较不同 AI 模型从屏幕截图生成代码的性能。它允许用户使用各种 AI 模型和技术栈对一组测试图像运行评估，然后比较结果，以确定哪个模型能为特定的 UI 实现生成最佳代码。

有关后端中 LLM 服务集成方式的信息，请参阅 LLM 集成。

系统架构

评估系统由几个核心组件组成，它们协同工作以运行评估、生成代码并促进跨模型结果的比较。

评估系统概览图

来源：backend/routes/evals.py backend/evals/runner.py backend/evals/core.py frontend/src/components/evals/RunEvalsPage.tsx

前端组件

前端通过 `RunEvalsPage` 组件提供了一个用户界面，用于运行评估和查看结果。

RunEvalsPage 组件

`RunEvalsPage` 组件允许用户

• 选择多个 AI 模型进行评估
• 选择技术栈（例如，HTML+Tailwind、React+Tailwind）
• 并行运行评估
• 在评估过程中查看实时状态更新

该实现通过 `/models` 端点从后端获取可用的模型和技术栈，并将其显示在用户友好的界面中。运行评估时，组件会将 POST 请求发送到 `/run_evals` 端点，请求中包含所选的模型和技术栈。

来源：frontend/src/components/evals/RunEvalsPage.tsx11-186

后端组件

API 端点

评估系统提供了几个用于运行评估和比较结果的 API 端点

端点	方法	目的	关键参数
/evals	GET	查看单个模型的评估结果	folder：输出文件夹的路径
/pairwise-evals	GET	并排比较两个模型	folder1, folder2：输出文件夹的路径
/best-of-n-evals	GET	比较多个模型	folder1, folder2, ...：输出文件夹的路径
/run_evals	POST	对选定的模型运行评估	models：模型名称列表，stack：技术栈
/models	GET	获取可用的模型和技术栈	无

来源：backend/routes/evals.py14-187

评估运行器

评估系统的核心是 `run_image_evals` 函数，该函数处理一组测试图像并使用指定的 AI 模型生成代码。

来源：backend/evals/runner.py backend/evals/core.py13-66

代码生成

代码生成过程与主应用程序使用相同的底层机制，但以批处理模式进行。

1. 每张图片都转换为数据 URL
2. 根据图像和选定的技术栈创建提示
3. 调用适当的 AI 模型（OpenAI、Claude 或 Gemini）来生成代码
4. 生成的代码将保存到输出文件中

代码生成器是主应用程序代码生成系统的轻量级版本，为批处理移除了流式传输功能。

来源：backend/evals/core.py13-66

评估文件结构

评估系统使用特定的目录结构来组织输入和输出。

backend/evals_data/
├── inputs/                               # Contains test screenshots
│   ├── screenshot1.png
│   ├── screenshot2.png
│   └── ...
└── outputs/                              # Contains generated code
    ├── Jun_10_2023_gpt_4o_html_tailwind/ # Date_Model_Stack format
    │   ├── screenshot1_0.html            # Format: inputname_variant.html
    │   ├── screenshot2_0.html
    │   └── ...
    ├── Jun_10_2023_claude_3_html_tailwind/
    │   ├── screenshot1_0.html
    │   ├── screenshot2_0.html
    │   └── ...
    └── ...

输出文件组织在子目录中，这些子目录的命名模式为 `{date}_{model}_{stack}`，方便查找和比较不同评估运行的结果。

来源：backend/evals/runner.py backend/evals/config.py

比较工具

成对评估

成对评估系统允许并排比较由两个不同模型生成的代码

该系统定位来自两个输出文件夹的匹配文件，找到相应的输入图像，并返回包含输入和两个输出的对象，以便进行并排比较。

来源：backend/routes/evals.py83-152

N个最佳评估

N个最佳评估系统将比较扩展到同时比较多个模型

此系统特别有助于识别在各种测试用例中哪些模型表现最佳，并允许用户就使用哪个模型做出明智的决定。

来源：backend/routes/evals.py195-271

使用指南

运行评估

要运行评估

1. 将测试截图放入 `backend/evals_data/inputs`
2. 在前端导航到评估页面（`/evals`）
3. 从可用选项中选择一个或多个 AI 模型
4. 从下拉菜单中选择技术栈
5. 点击“运行评估”开始评估过程
6. 监控评估运行时的状态
7. 完成后，生成的代码将保存到 `backend/evals_data/outputs`

查看结果

该系统提供三种查看和比较结果的方式：

1. 单模型视图：查看一个模型/文件夹的结果
2. 成对比较：并排比较两个模型
3. N个最佳比较：同时比较多个模型

每个视图都显示输入截图和生成的代码，便于直观地比较模型的性能。

来源：frontend/src/components/evals/RunEvalsPage.tsx11-186 backend/routes/evals.py25-72 Evaluation.md1-20

实现细节

评估系统通过以下方式实现：

• 前端：用于用户界面的 React 组件
• 后端：用于 API 端点的 FastAPI 路由
• 核心逻辑：用于运行评估和生成代码的 Python 模块
• 文件系统：用于组织输入和输出的目录结构

该系统设计为可扩展的，允许根据需要添加新的模型和技术栈，并为评估不同 AI 模型在代码生成任务中的性能提供了一个健壮的框架。

来源：backend/routes/evals.py backend/evals/runner.py frontend/src/components/evals/RunEvalsPage.tsx