Web Codegen Scorer环境配置实战config.js中EnvironmentConfig全选项详解手把手搭建你的评测环境【免费下载链接】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 代码质量的评测工具而一切评测的起点就是写对config.js环境配置文件。本文将手把手带你跑通官方示例环境逐一讲解EnvironmentConfig接口的全部选项帮助你快速搭建属于自己的 LLM 代码评测环境。评测报告长什么样先看目标再配环境Web Codegen Scorer 运行后会为你生成这样一份直观的评分报告总分按 Excellent / Great / Good / Poor 分档并拆分为 Build构建、Runtime运行时、Security安全、Accessibility可访问性四大维度同时展示模型、框架、Runner 与 Token 用量。理解了报告结构你就知道环境配置要解决三件事代码生成到哪里、用什么命令构建运行、用哪些评分项打分。三步快速开始用内置示例跑通第一个评测如果你只是想了解工具直接跑内置示例即可无需从零写配置安装 CLI 工具npm install -g web-codegen-scorer配置模型 API Key按你使用的提供商设置环境变量如GEMINI_API_KEY、OPENAI_API_KEY、ANTHROPIC_API_KEY、XAI_API_KEY。运行评测web-codegen-scorer eval --envangular-example其中--env指向环境目录目录中的config.js就是本文的主角。也可以克隆仓库查看完整示例git clone https://gitcode.com/gh_mirrors/we/web-codegen-scorer 提示运行web-codegen-scorer init可以进入交互式引导一步步创建你自己的评测环境。EnvironmentConfig 选项全解必填项EnvironmentConfig的完整定义见runner/configuration/environment-config.ts官方参考文档见docs/environment-reference.md。最简可用的配置只需下面几项以examples/environments/angular/config.js为例export default { displayName: Angular (example), clientSideFramework: angular, sourceDirectory: ./project, ratings: getBuiltInRatings(), generationSystemPrompt: ./system-instructions.md, executablePrompts: [../../prompts/**/*.md], packageManager: npm, };选项作用说明displayName环境显示名报告顶部展示的名字如 Solid.js (Example)id环境唯一 ID可省略默认由displayName生成clientSideFramework前端框架 ID如angular、solid仅用于展示与模板变量ratings评分项数组决定最终得分见下一节generationSystemPrompt生成代码的系统提示词路径相对路径指向.md文件executablePrompts要评测的 Prompt 列表glob 字符串如./prompts/**/*.md或对象/MultiStepPrompt实例packageManager包管理器支持npm、pnpm、yarn默认npmskipInstall跳过依赖安装已通过 pnpm workspaces 等预装依赖时设为true评分项 ratings 怎么配得分的核心ratings是环境配置中最关键的一项它决定了评测打分的规则。每个评分项有三种类型PerBuildRating基于构建结果打分例如首次构建是否成功、修复 X 次后是否成功PerFileRating基于 LLM 生成的单个文件内容打分filter设为PerFileRatingContentType.UNKNOWN可覆盖所有文件类型LLMBasedRating让 LLM 对生成代码直接打分例如这个应用是否符合 Prompt 要求。最省事的方式是调用getBuiltInRatings()引入内置评分集合包含构建成功、运行时异常、代码质量、视觉外观、CSS 有效性、可访问性、安全性等十余项检查。你也可以像examples/environments/remote_env/config.js那样在内置评分基础上追加自定义评分函数实现对特定 Prompt 的专属检查。相关可选增强项选项作用ratingOverrides按评分 ID 覆盖单个评分的字段名称、分值等categoryOverrides按分类 ID 覆盖评分分类的名称与满分值expectedRatingHash校验评分集合哈希防止两次运行间评分项被意外改动codeRatingPrompt/visualRatingPrompt自定义代码评分与截图评分使用的提示词路径项目结构配置sourceDirectory 与 projectTemplatesourceDirectoryLLM 生成文件被写入、构建、运行和评测的目录。可以是完整项目也可以只是待合并的少量文件projectTemplate项目模板目录路径。运行时工具会先复制模板再把sourceDirectory中的文件叠加合并上去目录递归合并、重名文件覆盖非常适合模板 少量生成文件的轻量环境fullStackFramework全栈框架 ID省略时与clientSideFramework相同。构建与运行命令buildCommand / serveCommand / testCommand评测过程会自动执行安装 → 构建 → 启动 → 测试的完整链路每一步都可以自定义选项默认值说明buildCommand包管理器 run build构建生成代码的命令serveCommand包管理器 run start --port 0启动本地开发服务器设为null表示应用无服务器跳过运行时测试testCommand无不跑测试测试命令退出码 0 为成功失败时其 stdout/stderr 会作为修复依据超时 4 分钟高级可选项精细控制评测行为repairSystemPrompt构建/运行时失败后LLM 自动修复所用的系统提示词路径不设置则使用内置默认修复指令editingSystemPrompt多步 Prompt 等编辑场景使用的提示词路径promptTimeoutMinutes单个 Prompt 评测的超时分钟数超时自动中止mcpServers评测期间为 LLM 启动并暴露的 MCPModel Context Protocol服务器 ID 列表classifyPrompts设为true后系统提示词不会写入最终报告适合评测保密代码executor指定执行器不设置时使用本地执行器也可以像examples/environments/remote_env/config.js那样传入自定义远程执行器analysisPrompts评测结果附加分析提示词含name、path、可选model与报告/评分过滤器augmentExecutablePrompt/augmentGeneratedFile钩子函数可在评测前增强 Prompt、在评测前改写生成文件内容。Prompt 编写技巧用模板语法减少样板executablePrompts指向的.md文件支持模板语法写 Prompt 时非常好用语法作用{{ embed file../path.md }}内嵌指定文件内容{{ contextFiles **/*.ts, **/*.html }}将匹配的源文件作为上下文传给 LLM{{CLIENT_SIDE_FRAMEWORK_NAME}}插入当前环境的前端框架名{{FULL_STACK_FRAMEWORK_NAME}}插入当前环境的全栈框架名项目自带的 29 个示例 Prompt 位于examples/prompts/如todo-app.md、minesweeper.md是学习 Prompt 写法的最佳素材。此外还支持两类进阶 Prompt 定义Prompt 专属评分在executablePrompts中放对象{ path: ./prompts/x.md, ratings: [...] }让特定 Prompt 额外执行专属评分项多步 Prompt传入new MultiStepPrompt(目录, 各步骤评分映射)目录内文件按step-1.md、step-2.md命名顺序执行工具会在每步后快照并单独评分非常适合评测多轮对话式开发工作流。验证配置检查评测报告配置完成后运行web-codegen-scorer eval --env你的环境目录验证即可。评测结束后可用报告查看器检查各维度得分也可以本地启动某个 Prompt 生成的应用web-codegen-scorer run --envangular-example --prompttic-tac-toe-game常用的调试参数--prompt-filter只跑指定 Prompt、--limit限制数量、--local复用已生成的初始代码省去 LLM 调用费用、--output-dir保留生成代码便于排查。常用文件路径速查内容路径环境配置参考文档docs/environment-reference.mdEnvironmentConfig 类型定义runner/configuration/environment-config.tsAngular 示例环境examples/environments/angular/config.jsSolid.js 示例环境examples/environments/solid/config.js远程执行器示例环境examples/environments/remote_env/config.js内置评分集合runner/ratings/built-in.ts新模型接入指南docs/model-setup.md小结搭建 Web Codegen Scorer 评测环境的思路可以概括为三句话用sourceDirectoryprojectTemplate决定代码在哪用buildCommand/serveCommand/testCommand决定怎么跑用ratings决定怎么打分。建议从内置示例环境examples/environments/复制起步再按需增改选项。配置得当后你就能对不同模型、不同系统提示词、不同框架下的代码生成质量做出可复现、可对比的量化评估。【免费下载链接】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），仅供参考 Web Codegen Scorer环境配置实战：config.js中EnvironmentConfig全选项详解，手把手搭建你的评测环境
Web Codegen Scorer环境配置实战config.js中EnvironmentConfig全选项详解手把手搭建你的评测环境【免费下载链接】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 代码质量的评测工具而一切评测的起点就是写对config.js环境配置文件。本文将手把手带你跑通官方示例环境逐一讲解EnvironmentConfig接口的全部选项帮助你快速搭建属于自己的 LLM 代码评测环境。评测报告长什么样先看目标再配环境Web Codegen Scorer 运行后会为你生成这样一份直观的评分报告总分按 Excellent / Great / Good / Poor 分档并拆分为 Build构建、Runtime运行时、Security安全、Accessibility可访问性四大维度同时展示模型、框架、Runner 与 Token 用量。理解了报告结构你就知道环境配置要解决三件事代码生成到哪里、用什么命令构建运行、用哪些评分项打分。三步快速开始用内置示例跑通第一个评测如果你只是想了解工具直接跑内置示例即可无需从零写配置安装 CLI 工具npm install -g web-codegen-scorer配置模型 API Key按你使用的提供商设置环境变量如GEMINI_API_KEY、OPENAI_API_KEY、ANTHROPIC_API_KEY、XAI_API_KEY。运行评测web-codegen-scorer eval --envangular-example其中--env指向环境目录目录中的config.js就是本文的主角。也可以克隆仓库查看完整示例git clone https://gitcode.com/gh_mirrors/we/web-codegen-scorer 提示运行web-codegen-scorer init可以进入交互式引导一步步创建你自己的评测环境。EnvironmentConfig 选项全解必填项EnvironmentConfig的完整定义见runner/configuration/environment-config.ts官方参考文档见docs/environment-reference.md。最简可用的配置只需下面几项以examples/environments/angular/config.js为例export default { displayName: Angular (example), clientSideFramework: angular, sourceDirectory: ./project, ratings: getBuiltInRatings(), generationSystemPrompt: ./system-instructions.md, executablePrompts: [../../prompts/**/*.md], packageManager: npm, };选项作用说明displayName环境显示名报告顶部展示的名字如 Solid.js (Example)id环境唯一 ID可省略默认由displayName生成clientSideFramework前端框架 ID如angular、solid仅用于展示与模板变量ratings评分项数组决定最终得分见下一节generationSystemPrompt生成代码的系统提示词路径相对路径指向.md文件executablePrompts要评测的 Prompt 列表glob 字符串如./prompts/**/*.md或对象/MultiStepPrompt实例packageManager包管理器支持npm、pnpm、yarn默认npmskipInstall跳过依赖安装已通过 pnpm workspaces 等预装依赖时设为true评分项 ratings 怎么配得分的核心ratings是环境配置中最关键的一项它决定了评测打分的规则。每个评分项有三种类型PerBuildRating基于构建结果打分例如首次构建是否成功、修复 X 次后是否成功PerFileRating基于 LLM 生成的单个文件内容打分filter设为PerFileRatingContentType.UNKNOWN可覆盖所有文件类型LLMBasedRating让 LLM 对生成代码直接打分例如这个应用是否符合 Prompt 要求。最省事的方式是调用getBuiltInRatings()引入内置评分集合包含构建成功、运行时异常、代码质量、视觉外观、CSS 有效性、可访问性、安全性等十余项检查。你也可以像examples/environments/remote_env/config.js那样在内置评分基础上追加自定义评分函数实现对特定 Prompt 的专属检查。相关可选增强项选项作用ratingOverrides按评分 ID 覆盖单个评分的字段名称、分值等categoryOverrides按分类 ID 覆盖评分分类的名称与满分值expectedRatingHash校验评分集合哈希防止两次运行间评分项被意外改动codeRatingPrompt/visualRatingPrompt自定义代码评分与截图评分使用的提示词路径项目结构配置sourceDirectory 与 projectTemplatesourceDirectoryLLM 生成文件被写入、构建、运行和评测的目录。可以是完整项目也可以只是待合并的少量文件projectTemplate项目模板目录路径。运行时工具会先复制模板再把sourceDirectory中的文件叠加合并上去目录递归合并、重名文件覆盖非常适合模板 少量生成文件的轻量环境fullStackFramework全栈框架 ID省略时与clientSideFramework相同。构建与运行命令buildCommand / serveCommand / testCommand评测过程会自动执行安装 → 构建 → 启动 → 测试的完整链路每一步都可以自定义选项默认值说明buildCommand包管理器 run build构建生成代码的命令serveCommand包管理器 run start --port 0启动本地开发服务器设为null表示应用无服务器跳过运行时测试testCommand无不跑测试测试命令退出码 0 为成功失败时其 stdout/stderr 会作为修复依据超时 4 分钟高级可选项精细控制评测行为repairSystemPrompt构建/运行时失败后LLM 自动修复所用的系统提示词路径不设置则使用内置默认修复指令editingSystemPrompt多步 Prompt 等编辑场景使用的提示词路径promptTimeoutMinutes单个 Prompt 评测的超时分钟数超时自动中止mcpServers评测期间为 LLM 启动并暴露的 MCPModel Context Protocol服务器 ID 列表classifyPrompts设为true后系统提示词不会写入最终报告适合评测保密代码executor指定执行器不设置时使用本地执行器也可以像examples/environments/remote_env/config.js那样传入自定义远程执行器analysisPrompts评测结果附加分析提示词含name、path、可选model与报告/评分过滤器augmentExecutablePrompt/augmentGeneratedFile钩子函数可在评测前增强 Prompt、在评测前改写生成文件内容。Prompt 编写技巧用模板语法减少样板executablePrompts指向的.md文件支持模板语法写 Prompt 时非常好用语法作用{{ embed file../path.md }}内嵌指定文件内容{{ contextFiles **/*.ts, **/*.html }}将匹配的源文件作为上下文传给 LLM{{CLIENT_SIDE_FRAMEWORK_NAME}}插入当前环境的前端框架名{{FULL_STACK_FRAMEWORK_NAME}}插入当前环境的全栈框架名项目自带的 29 个示例 Prompt 位于examples/prompts/如todo-app.md、minesweeper.md是学习 Prompt 写法的最佳素材。此外还支持两类进阶 Prompt 定义Prompt 专属评分在executablePrompts中放对象{ path: ./prompts/x.md, ratings: [...] }让特定 Prompt 额外执行专属评分项多步 Prompt传入new MultiStepPrompt(目录, 各步骤评分映射)目录内文件按step-1.md、step-2.md命名顺序执行工具会在每步后快照并单独评分非常适合评测多轮对话式开发工作流。验证配置检查评测报告配置完成后运行web-codegen-scorer eval --env你的环境目录验证即可。评测结束后可用报告查看器检查各维度得分也可以本地启动某个 Prompt 生成的应用web-codegen-scorer run --envangular-example --prompttic-tac-toe-game常用的调试参数--prompt-filter只跑指定 Prompt、--limit限制数量、--local复用已生成的初始代码省去 LLM 调用费用、--output-dir保留生成代码便于排查。常用文件路径速查内容路径环境配置参考文档docs/environment-reference.mdEnvironmentConfig 类型定义runner/configuration/environment-config.tsAngular 示例环境examples/environments/angular/config.jsSolid.js 示例环境examples/environments/solid/config.js远程执行器示例环境examples/environments/remote_env/config.js内置评分集合runner/ratings/built-in.ts新模型接入指南docs/model-setup.md小结搭建 Web Codegen Scorer 评测环境的思路可以概括为三句话用sourceDirectoryprojectTemplate决定代码在哪用buildCommand/serveCommand/testCommand决定怎么跑用ratings决定怎么打分。建议从内置示例环境examples/environments/复制起步再按需增改选项。配置得当后你就能对不同模型、不同系统提示词、不同框架下的代码生成质量做出可复现、可对比的量化评估。【免费下载链接】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），仅供参考