关键词

LLM代码评估Web开发质量AI生成代码代码基准测试模型能力评估

项目简介 Web Codegen Scorer（Web代码生成评估工具）旨在帮助开发者和研究人员量化评估大型语言模型（LLM）生成的Web代码的质量。它提供了一套全面的检查机制，包括构建成功率、运行时错误、可访问性、安全性以及LLM自动评分等，帮助用户做出基于证据的代码质量决策，例如迭代系统提示、比较不同模型代码质量或监控代码质量随时间的变化。

主要功能点

  • 多模型与框架支持： 可配置不同的LLM模型、Web框架和工具进行代码生成与评估。
  • 全面质量检查： 内置构建成功、运行时错误、可访问性（Axe）、安全性（CSP、SafetyWeb）、LLM自动代码评分和UI视觉评分等多种检查项。
  • 问题自动修复： 能够自动尝试修复代码生成过程中检测到的构建错误或测试失败（如可访问性违规）。
  • MCP服务器集成： 可以在评估过程中启动一个MCP服务器，以便LLM可以访问特定的上下文资源和工具，增强LLM的生成能力。
  • 直观报告界面： 提供用户友好的报告查看器UI，方便用户查看和比较评估结果。
  • 本地运行与调试： 支持本地模式运行，可在不调用LLM的情况下重新运行评估或调试。

安装步骤

  1. 安装软件包： 打开您的命令行工具，运行以下命令安装'web-codegen-scorer'： 
    npm install -g web-codegen-scorer
  2. 设置API密钥： 为确保评估工具能与LLM提供商（如Gemini, OpenAI, Anthropic, xAI Grok）通信，需要将相应的API密钥设置为环境变量。请将 'YOUR_API_KEY_HERE' 替换为您的实际密钥。 
    export GEMINI_API_KEY="YOUR_API_KEY_HERE" # 如果您使用Gemini模型
export OPENAI_API_KEY="YOUR_API_KEY_HERE" # 如果您使用OpenAI模型
export ANTHROPIC_API_KEY="YOUR_API_KEY_HERE" # 如果您使用Anthropic模型
export XAI_API_KEY="YOUR_API_KEY_HERE" # 如果您使用xAI Grok模型
  3. 运行首次评估： 使用工具内置的Angular示例运行您的首次代码生成评估： 
    web-codegen-scorer eval --env=angular-example
  4. （可选）设置自定义评估环境： 如果您想创建自己的评估环境配置，可以运行以下命令，工具将引导您完成配置过程： 
    web-codegen-scorer init
  5. （可选）在本地运行评估后的应用程序： 评估完成后，您可以使用以下命令在本地浏览器中运行生成的应用程序。'<要运行的提示名称>' 应替换为评估时使用的具体提示的名称。 
    web-codegen-scorer run --env=angular-example --prompt=<要运行的提示名称>

MCP服务器配置 Web Codegen Scorer 可以在评估过程中启动一个集成的MCP服务器。这个MCP服务器不是一个独立部署的服务，而是作为评估工具的一部分在其内部运行。它的主要目的是在LLM生成代码时，允许LLM通过Model Context Protocol（MCP）调用外部工具和访问上下文资源。

MCP客户端（即LLM）通常需要配置MCP服务器的启动命令、参数、以及可能的资源和服务声明。在Web Codegen Scorer中，当您通过'--mcp'命令行参数启用MCP功能时，工具会自动启动并管理这个MCP服务器。

虽然您不需要手动配置这个服务器，但了解其工作原理有助于理解评估过程：

  • MCP服务器名称： 在评估报告中，通常会有一个由工具生成的或环境配置中定义的服务器名称。
  • 启动命令 (command) 和参数 (args)： 这些由Web Codegen Scorer根据您的评估配置（例如Genkit集成）动态生成和执行，以启动MCP服务器。
  • 工具 (tools) 和资源 (resources)： 评估报告中会列出MCP服务器向LLM暴露的工具和资源，这些是LLM在生成代码时可以调用的外部功能和数据。

MCP客户端（即被评估的LLM）通过Web Codegen Scorer提供的接口与此内部启动的MCP服务器进行通信。如果您需要查看详细的服务器信息和其暴露的能力，可以在评估运行结束后，查阅生成的报告文件（'summary.json'或其他报告格式中的'mcp'字段）。

基本使用方法 通过命令行参数，您可以灵活定制评估过程：

  • 指定评估环境： 使用 '--env=<path>' 参数指定您的评估配置文件路径，或者直接使用内置示例，例如 '--env=angular-example'。
  • 选择LLM模型： 使用 '--model=<name>' 参数来指定用于代码生成的LLLL模型，例如 '--model=gemini-2.5-flash'。
  • 启用MCP服务器： 在运行评估时，添加 '--mcp' 标志即可启动一个MCP服务器，允许LLM在代码生成过程中利用外部功能和上下文信息。例如：'web-codegen-scorer eval --env=my-env.mjs --mcp'。
  • 限制评估数量： 使用 '--limit=<number>' 参数限制处理的应用程序提示数量，默认为5个。
  • 生成评估报告： 评估完成后，工具会自动生成详细的报告文件。您可以使用 'web-codegen-scorer report' 命令在浏览器中查看这些报告，以便直观地比较和分析结果。

信息

分类

开发者工具

访问项目