WebCompass: Op weg naar multimodale evaluatie van webcodering voor coderende taalmodellen

WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models

April 20, 2026

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

Samenvatting

Grote taalmodellen evolueren snel naar interactieve codeeragentschappen die in staat zijn tot end-to-end webcodering, maar bestaande benchmarks evalueren slechts smalle onderdelen van deze capaciteit, doorgaans tekstgeconditioneerde generatie met statische correctheidsmetrieken, waarbij visuele nauwkeurigheid, interactiekwaliteit en redenering op codebaseniveau grotendeels ongemeten blijven. Wij introduceren WebCompass, een multimodale benchmark die een geïntegreerde levenscyclus-evaluatie van webengineering-capaciteit biedt. Erkennend dat echte webcodering een iteratieve cyclus van generatie, bewerking en reparatie is, omvat WebCompass drie invoermodaliteiten (tekst, beeld, video) en drie taaktypen (generatie, bewerking, reparatie), wat zeven taakcategorieën oplevert die professionele workflows weerspiegelen. Via een meerfasen, human-in-the-loop pipeline cureren we instanties die 15 generatiedomeinen, 16 bewerkingstypen en 11 reparatiedefecttypen beslaan, elk geannoteerd op Easy/Medium/Hard niveaus. Voor evaluatie nemen we een checklist-gestuurd LLM-as-a-Judge protocol voor bewerking en reparatie, en stellen een nieuw Agent-as-a-Judge paradigma voor generatie voor dat gegenereerde websites autonoom uitvoert in een echte browser, interactief gedrag verkent via het Model Context Protocol (MCP), en gerichte testcases iteratief synthetiseert, wat nauw aansluit bij menselijke acceptatietesten. We evalueren representatieve closed-source en open-source modellen en observeren dat: (1) closed-source modellen aanzienlijk sterker en evenwichtiger blijven; (2) bewerking en reparatie verschillende moeilijkheidsprofielen vertonen, waarbij reparatie interactiviteit beter behoudt maar uitvoeringsuitdagend blijft; (3) esthetiek de meest hardnekkige bottleneck is, vooral voor open-source modellen; en (4) frameworkkeuze de resultaten materieel beïnvloedt, waarbij Vue consistent uitdagend is terwijl React en Vanilla/HTML sterker presteren afhankelijk van het taaktype.

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.