Web Codegen Scorer报告查看器完全指南：如何高效对比不同模型、框架与Prompt的生成质量？
Web Codegen Scorer报告查看器完全指南如何高效对比不同模型、框架与Prompt的生成质量【免费下载链接】web-codegen-scorerWeb Codegen Scorer is a tool for evaluating the quality of web code generated by LLMs.项目地址: https://gitcode.com/gh_mirrors/we/web-codegen-scorerWeb Codegen Scorer 是一款专门用于评估大语言模型LLM生成 Web 代码质量的开源评测工具而它的**报告查看器Report Viewer**是整个工具最直观的成果展示台你可以用它快速对比不同模型、框架与 Prompt 下的代码生成表现查看构建成功率、运行时报错、无障碍、安全等维度的评分从而做出有数据依据的技术选型决策。无论你是想迭代系统提示词System Prompt、挑选最优代码生成模型还是监测生成质量随时间的变化这份指南都会带你从启动到深度对比完整掌握报告查看器的每个核心功能。 5分钟启动 Web Codegen Scorer 报告查看器报告查看器是内置的 Web 应用无需额外安装三步即可打开全局安装工具需要 Node.js 环境npm install -g web-codegen-scorer运行一次评测生成报告数据。以最简单的 Angular 示例环境为例web-codegen-scorer eval --envangular-example启动报告查看器在浏览器打开本地页面默认端口 4200web-codegen-scorer report启动命令的核心逻辑位于 runner/report-cli.ts支持通过--reports-directory指定本地报告目录、--port修改服务端口还支持--reports-loader加载远程报告方便团队共享评测结果。 报告列表页一眼定位每次评测打开查看器首页就是报告列表页report-app/src/app/pages/report-list/report-list.html每次评测Run都会生成一张报告卡片包含总分Score按百分制展示该次评测的整体得分分数越高分色越亮眼模型 / 框架 / Runner 标签清晰标注本次评测使用的模型如 Gemini、Claude、Web 框架和运行器分数段分布条形图直观呈现优秀 / 良好 / 合格 / 较差各区间的应用数量。使用筛选器缩小范围列表顶部的报告筛选器report-app/src/app/shared/report-filters/report-filters.html提供四类筛选维度只有当对应维度存在多个选项时才会显示筛选维度典型用途All Frameworks只看 Angular 或 Solid 框架的评测All Models对比某一家模型厂商的历史表现All Runners区分 ai-sdk、Claude Code 等不同执行器Filter by labels按自定义标签批量筛选支持多选小技巧运行评测时用--labels打上语义化标签例如prompt-v2、baseline后续筛选和复盘会省力很多web-codegen-scorer eval --envangular-example --labels baseline 单份报告详情页深入每一份评测点击任意报告卡片进入报告详情页report-app/src/app/pages/report-viewer/report-viewer.html这是信息最密集的页面自上而下分为四大板块总览卡片总分、评测名称、时间戳以及模型、框架、Runner 三大配置项维度分布图构建Build、自动修复尝试次数Repair、测试Tests、运行时Runtime、安全Security、无障碍Accessibility各维度的通过率条形图耗时与成本生成 / 构建 / 修复的均值与中位数耗时以及输入、输出、思考 Token 用量——评估性价比时必不可少应用级结果列表逐条展示每个 Prompt 生成的应用可展开查看构建错误详情、Lighthouse 分类得分、生成的源码文件还能一键下载调试压缩包排查问题甚至内置 AI 助手帮你解读报告。按失败项过滤应用详情页提供了失败检查项多选过滤系统会自动统计本次评测中所有未通过的检查如无障碍、运行时报错你可以勾选感兴趣的检查项只看相关的应用结果快速定位薄弱环节。⚖️ 对比页面横向对比多份报告的核心功能这是回答哪个模型 / 框架 / Prompt 更好的关键页面report-app/src/app/pages/comparison/comparison.ts使用流程非常简单在报告列表页点击Compare按钮进入对比模式勾选 2 份及以上的想要对比的报告再次点击 Compare 进入对比页也可以在对比页里自由增删对比对象并给每份报告重命名比如改成Gemini AngularClaude Solid让图表更易读。对比页会自动渲染三组核心图表分数分布对比Score Distribution不同分数段应用数量的堆叠对比构建结果对比Build Distribution一次构建通过、修复后通过、构建失败的比例差异运行时表现对比Runtime Distribution运行时报错率等运行时指标的横向比较。 建议配合--model与--prompt-filter参数分别跑出多份报告再对比例如先固定模型换框架再固定框架换模型就能把模型 vs 框架的贡献分离开来web-codegen-scorer eval --modelgemini-2.5-flash --envangular-example 轨迹页面监测生成质量随时间的变化除了单次对比查看器还内置了轨迹Trajectory页面report-app/src/app/pages/trajectory/trajectory.html同样支持按框架、模型、Runner 和标签筛选帮助你观察同一配置下评测分数随时间的演变趋势。当你升级了 Prompt 或模型版本后这里是最直观的回归监测看板。✅ 高效使用工作流清单迭代 Prompt用--report-name为每版 Prompt 命名对比页面量化每一版的提升模型选型固定环境与 Prompt只变--model看构建成功率和运行时错误率差异省钱调参加--local参数复用已生成的代码重跑构建与修复流程不产生 LLM 费用环境配置想自定义系统指令或模型时参考 docs/environment-reference.md 与 docs/model-setup.md 两份官方文档。常见问题报告查看器只能看本地报告吗不是。web-codegen-scorer report支持--reports-loader传入 JS 文件加载远程报告方便团队集中查看。这个工具只支持 Angular 吗支持任意 Web 框架甚至无框架项目内置了 Angular 和 Solid 两套示例环境可在 examples/environments/ 目录下查看其配置结构。评分颜色代表什么分数按区间着色98 分以上为优秀Excellence85 分以上为优秀Great71 分以上为良好Good其余为较差Poor规则实现在 report-app/src/app/shared/scoring.ts。掌握了报告查看器的列表、详情、对比与轨迹四大板块你就能把凭感觉选模型升级为用数据说话让每一次 Prompt 迭代和模型升级都留下可追溯的质量证据。【免费下载链接】web-codegen-scorerWeb Codegen Scorer is a tool for evaluating the quality of web code generated by LLMs.项目地址: https://gitcode.com/gh_mirrors/we/web-codegen-scorer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考