WebCompass: Verso una Valutazione Multimodale della Programmazione Web per Modelli Linguistici di Codice

WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models

April 20, 2026

Autori: 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

Abstract

I modelli linguistici di grandi dimensioni si stanno rapidamente evolvendo in agenti di codifica interattivi capaci di programmazione web end-to-end, tuttavia i benchmark esistenti valutano solo porzioni limitate di questa capacità, tipicamente la generazione condizionata da testo con metriche di correttezza statica, lasciando in gran parte non misurati la fedeltà visiva, la qualità dell'interazione e il ragionamento a livello di codebase. Introduciamo WebCompass, un benchmark multimodale che fornisce una valutazione unificata del ciclo di vita delle capacità di ingegneria web. Riconoscendo che la programmazione web nel mondo reale è un ciclo iterativo di generazione, modifica e riparazione, WebCompass abbraccia tre modalità di input (testo, immagine, video) e tre tipi di attività (generazione, modifica, riparazione), dando origine a sette categorie di compiti che rispecchiano i flussi di lavoro professionali. Attraverso una pipeline multi-stadio con un umano nel ciclo, curiamo istanze che coprono 15 domini di generazione, 16 tipi di operazioni di modifica e 11 tipi di difetti da riparare, ciascuna annotata a livelli Facile/Medio/Difficile. Per la valutazione, adottiamo un protocollo LLM-as-a-Judge guidato da checklist per modifica e riparazione, e proponiamo un nuovo paradigma Agent-as-a-Judge per la generazione che esegue autonomamente i siti web generati in un browser reale, esplora i comportamenti interattivi tramite il Model Context Protocol (MCP) e sintetizza iterativamente casi di test mirati, avvicinandosi molto ai test di accettazione umani. Valutiamo modelli rappresentativi closed-source e open-source e osserviamo che: (1) i modelli closed-source rimangono sostanzialmente più potenti e bilanciati; (2) modifica e riparazione mostrano profili di difficoltà distinti, con la riparazione che preserva meglio l'interattività ma rimane impegnativa a livello di esecuzione; (3) l'estetica è il collo di bottiglia più persistente, specialmente per i modelli open-source; e (4) la scelta del framework influisce materialmente sui risultati, con Vue costantemente impegnativo mentre React e Vanilla/HTML performano meglio a seconda del tipo di attività.

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.