WebCompass: Rumo a uma Avaliação Multimodal de Codificação Web para Modelos de Linguagem de Código
WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models
April 20, 2026
Autores: Xinping Lei, Xinyu Che, Junqi Xiong, Chenchen Zhang, Yukai Huang, Chenyu Zhou, Haoyang Huang, Minghao Liu, Letian Zhu, Hongyi Ye, Jinhua Hao, Ken Deng, Zizheng Zhan, Han Li, Dailin Li, Yifan Yao, Ming Sun, Zhaoxiang Zhang, Jiaheng Liu
cs.AI
Resumo
Os grandes modelos de linguagem estão evoluindo rapidamente para agentes de codificação interativos capazes de programação web de ponta a ponta, no entanto, os benchmarks existentes avaliam apenas fatias estreitas dessa capacidade, tipicamente a geração condicionada por texto com métricas de correção estática, deixando a fidelidade visual, a qualidade da interação e o raciocínio em nível de base de código amplamente não mensurados. Apresentamos o WebCompass, um benchmark multimodal que fornece avaliação unificada do ciclo de vida da capacidade de engenharia web. Reconhecendo que a codificação web do mundo real é um ciclo iterativo de geração, edição e correção, o WebCompass abrange três modalidades de entrada (texto, imagem, vídeo) e três tipos de tarefas (geração, edição, reparo), resultando em sete categorias de tarefas que espelham fluxos de trabalho profissionais. Por meio de um pipeline multiestágio com intervenção humana, curamos instâncias que cobrem 15 domínios de geração, 16 tipos de operação de edição e 11 tipos de defeito para reparo, cada um anotado em níveis Fácil/Médio/Difícil. Para avaliação, adotamos um protocolo de LLM-como-Juiz guiado por checklist para edição e reparo, e propomos um novo paradigma de Agente-como-Juiz para geração que executa autonomamente os websites gerados em um navegador real, explora comportamentos interativos via Model Context Protocol (MCP) e sintetiza iterativamente casos de teste direcionados, aproximando-se estreitamente dos testes de aceitação humana. Avaliamos modelos representativos de código fechado e aberto e observamos que: (1) os modelos de código fechado permanecem substancialmente mais fortes e equilibrados; (2) edição e reparo exibem perfis de dificuldade distintos, com o reparo preservando melhor a interatividade, mas permanecendo desafiador em termos de execução; (3) a estética é o gargalo mais persistente, especialmente para modelos de código aberto; e (4) a escolha do framework afeta materialmente os resultados, com Vue sendo consistentemente desafiador, enquanto React e Vanilla/HTML apresentam desempenho mais forte dependendo do tipo de tarefa.
English
Large language models are rapidly evolving into interactive coding agents capable of end-to-end web coding, yet existing benchmarks evaluate only narrow slices of this capability, typically text-conditioned generation with static-correctness metrics, leaving visual fidelity, interaction quality, and codebase-level reasoning largely unmeasured. We introduce WebCompass, a multimodal benchmark that provides unified lifecycle evaluation of web engineering capability. Recognizing that real-world web coding is an iterative cycle of generation, editing, and repair, WebCompass spans three input modalities (text, image, video) and three task types (generation, editing, repair), yielding seven task categories that mirror professional workflows. Through a multi-stage, human-in-the-loop pipeline, we curate instances covering 15 generation domains, 16 editing operation types, and 11 repair defect types, each annotated at Easy/Medium/Hard levels. For evaluation, we adopt a checklist-guided LLM-as-a-Judge protocol for editing and repair, and propose a novel Agent-as-a-Judge paradigm for generation that autonomously executes generated websites in a real browser, explores interactive behaviors via the Model Context Protocol (MCP), and iteratively synthesizes targeted test cases, closely approximating human acceptance testing. We evaluate representative closed-source and open-source models and observe that: (1) closed-source models remain substantially stronger and more balanced; (2) editing and repair exhibit distinct difficulty profiles, with repair preserving interactivity better but remaining execution-challenging; (3) aesthetics is the most persistent bottleneck, especially for open-source models; and (4) framework choice materially affects outcomes, with Vue consistently challenging while React and Vanilla/HTML perform more strongly depending on task type.