💻 computer science

MT-Web2Code: Benchmarking Coding Agents on Multi-Turn Regional Reconstruction and Localized Modification

Dit artikel introduceert MT-Web2Code, de eerste multimodale benchmark die is ontworpen om coderingsagenten te evalueren op realistische multi-turn web UI-taken die regionale reconstructie en gelokaliseerde modificaties omvatten, wat significante beperkingen onthult in het vermogen van huidige agenten om getrouwheid te behouden en foutaccumulatie over iteratieve beurten te voorkomen.

Oorspronkelijke auteurs: Qiming Li, Shujie Hu, Haohan Liu, Xiaocheng Feng, Songxiang Liu, Guanglu Wan

Gepubliceerd 2026-08-05

📖 4 min leestijd☕ Koffiepauze-leesvoer

CC BY 4.0

Oorspronkelijke auteurs: Qiming Li, Shujie Hu, Haohan Liu, Xiaocheng Feng, Songxiang Liu, Guanglu Wan

Oorspronkelijk artikel gelicentieerd onder CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Dit is een AI-gegenereerde uitleg van het onderstaande artikel. Het is niet geschreven of goedgekeurd door de auteurs. Raadpleeg het oorspronkelijke artikel voor technische nauwkeurigheid. Lees de volledige disclaimer

Stel je voor dat je een robot leert om een meester webdesigner te worden. In het verleden testten we deze robots door ze een leeg canvas en een afbeelding van een website te geven, en hen te vragen om het hele ding in één keer vanaf nul op te bouwen. Het was alsof je een chef-kok vroeg om direct een volledig vijfgangenmenu te bereiden. Maar in de echte wereld is webdesign zelden zo dramatisch. Meestal opent een ontwikkelaar een bestaande website, vindt een kapotte knop, repareert een vreemd lettertype of voegt een ontbrekende foto toe, terwijl hij er ook voor zorgt dat hij niet per ongelak de rest van de pagina verwijdert. Het is meer een spelletje "zoek de verschillen" en "los de glitch op" dat steeds opnieuw wordt gespeeld. Dit is de wereld van "iteratieve codering", waarbij de robot moet onthouden wat hij vijf minuten geleden heeft gedaan en het niet moet verpesten terwijl hij het nieuwe probleem oplost. De grote vraag die onderzoekers stellen is: kunnen onze slimste AI-robots met deze rommelige, stap-voor-stap realiteit omgaan, of werken ze alleen goed wanneer ze een schone lei krijgen?

Dit is precies waar het artikel "MT-Web2Code" onderzoek naar doet. De auteurs hebben een gloednieuwe, super uitdagende test genaamd MT-Web2Code gecreëerd om te zien hoe goed AI-coderingsagenten echt zijn in deze "fix-het-gaandeweg"-stijl van werken. In plaats van de AI te vragen om een hele pagina te bouwen, gaven ze het 102 verschillende webpagina's uit 16 verschillende categorieën (zoals winkel-, nieuws- en overheidswebsites) en vroegen ze het om twee specifieke soorten taken uit te voeren over meerdere beurten. De eerste taak is "Regionale Reconstructie", wat is alsof de robot wordt verteld: "Hé, dit hele gedeelte van de pagina ontbreekt; hier is een afbeelding van hoe het eruit zou moeten zien, bouw alsjeblieft alleen dat deel opnieuw op zonder de rest aan te raken." De tweede taak is "Gelokaliseerde Modificatie", wat nog lastiger is: "Hier zijn drie piepkleine dingen die er niet goed uitzien (misschien is een knop de verkeerde kleur of is een lijn te dik); pas alsjeblieft alleen die kleine plekjes aan."

Om deze test eerlijk en onmogelijk te omzeilen te maken, hebben de onderzoekers een slimme "Reverse-Corruption" engine uitgevonden. Stel je voor dat ze een perfecte, gouden website namen en deze vervolgens doelbewust op specifieke manieren kapot maakten—door een heel gedeelte te verbergen of een paar lettertypes te verpesten. Daarna legden ze precies vast hoe ze het kapot hadden gemaakt. De taak van de AI is om dat proces om te keren: kijken naar de kapotte pagina, ontdekken wat er mis is, en het repareren naar de perfecte staat. Omdat de onderzoekers precies weten hoe de pagina kapot is gemaakt, kunnen ze het succes van de AI met extreme precisie meten. Ze ontdekten dat hoewel deze AI-robots beter worden, ze nog steeds enorm worstelen met dit multi-turn spel.

De resultaten waren een harde realiteitscrisis. Wanneer de AI probeerde een ontbrekend gebied te reconstrueren, deed het vaak een redelijke job op het nieuwe deel, maar verpestte het per ongeluk de omliggende inhoud, zoals de achtergrondkleur van de hele pagina te veranderen terwijl het alleen de bedoeling was om een menu te repareren. Wanneer gevraagd werd om kleine, precieze aanpassingen te maken, faalden de robots vaak in het perfect uitlijnen van de code met de visuele fix, wat laat zien dat ze een gebrek hebben aan fijnmazige controle. Misschien nog zorgwekkender is dat het artikel een "error snowball" effect vond. Als de AI in de eerste beurt een kleine fout maakte, werd die fout meegenomen en versterkt in de volgende beurten, waardoor het eindresultaat veel slechter werd dan wanneer het elke keer weer vanaf nul was begonnen. Interessant genoeg ontdekten de onderzoekers dat het geven van een schriftelijke beschrijving van hoe het kapotte deel eruitzag niet altijd hielp; soms maakte het de robot juist in de war, waardoor de robot te veel op de woorden vertrouwde en de eigenlijke afbeelding negeerde.

Kortom, dit artikel suggereert dat hoewel AI geweldig is in het bouwen van websites vanaf een schone lei, het nog steeds leert hoe het een voorzichtige, iteratieve editor moet zijn. Het laat zien dat goed zijn in het één niet automatisch betekent dat je ook goed bent in het ander. De auteurs hopen dat ze, door hun nieuwe, super-precieze scoresysteem te gebruiken—dat zowel het gerepareerde deel als de onaangetaste delen controleert—toekomstige AI kunnen helpen om betrouwbaardere, stap-voor-stap webdesigners te worden die niet de rest van het huis slopen terwijl ze slechts één raam repareren.

Technische Samenvatting: MT-Web2Code

Probleemstelling

Recente vooruitgang in Large Vision-Language Models (LVLMs) heeft significante capaciteiten aangetoond in het genereren van web-UI's vanaf nul. Echter, bestaande benchmarks richten zich voornamelijk op single-turn, full-page generatie, waarbij elke taak wordt behandeld als een onafhankelijk input-output probleem. Deze formulering slaagt er niet in de realiteit van frontend engineering te vatten, waarbij ontwikkelaars betrokken zijn bij iteratieve workflows: het reconstrueren van ontbrekende regio's en het modificeren van gelokaliseerde elementen binnen bestaande codebases, terwijl ongeaffecteerde inhoud behouden blijft. Huidige benchmarks kunnen niet evalueren of een model betrouwbaar een evoluerende pagina kan bewerken, consistentie over meerdere beurten kan handhaven, of foutpropagatie kan voorkomen. Er is een kritieke kloof tussen statische UI-generatie benchmarks en de dynamische, multi-turn vereisten van real-world UI coding.

Methodologie

1. Benchmark Constructie: MT-Web2Code

De auteurs introduceren MT-Web2Code, de eerste multimodale coding benchmark die is ontworpen voor multi-turn interacties. Het omvat 102 taken verspreid over 16 verticale domeinen (bijv. CRM, ERP, Retail, Overheid). De benchmark definieert twee complementaire taakgranulariteiten:

Macro-Niveau Regionale Reconstructie: De agent moet een volledige ontbrekende semantische regio reconstrueren op basis van een visuele referentie en deze integreren in de omliggende paginastructuur zonder de rest van de pagina te wijzigen.
Micro-Niveau Gelokaliseerde Modificatie: De agent moet fijnmazige structurele en stilistische defecten (bijv. kleur, spatiëring, tekstuitlijning) repareren binnen specifieke bounding boxes, terwijl de omliggende lay-out strikt wordt behouden.

2. Datageneratie: Reverse-Corruption Trajectory Engine

Om hoogwaardige, deterministische multi-turn reparatie-trajecten te construeren zonder kostbare menselijke annotatie op turn-niveau, hebben de auteurs een Reverse-Corruption Trajectory Engine ontwikkeld:

Proces: Startend vanaf een "Golden Page" ( $H_0$ ), injecteert de engine iteratief deterministische structurele en stilistische defecten om een sequentie van gecorrumpeerde staten te creëren ( $H_1, \dots, H_T$ ). De taak van de agent is om dit traject autoregressief om te keren.
Element Fingerprinting: Om elementen over opeenvolgende modificaties heen te volgen ondanks DOM-reflows, wijst het systeem positioneel-onafhankelijke Element Fingerprints (hashes van tag, tekst en attributen) toe aan HTML-nodes. Deze identificatoren stellen het systeem in staat om doelregio's en hun dichtstbijzijnde overlevende siblings deterministisch te volgen, waardoor de "ground truth" voor elke beurt uniek gedefinieerd is.
Defect Taxonomie: Micro-niveau defecten worden gegenereerd met behulp van 9 atomaire operatoren over 5 perceptuele dimensies (Layout, Elementen, Tekst, Kleur, Spatiëring), wat zorgt voor topologische onafhankelijkheid tussen de doelgerichte nodes om cascade-reparatiefouten te voorkomen.

3. Evaluatieprotocol: Dual-Axis Metrics

Het paper stelt een dual-axis evaluatieprotocol voor dat apart de target-region fidelity (in-box) en de preservation of unaffected content (out-of-box) meet:

Macro-Niveau (Regionaal): Gebruikt een 5-dimensionale VLM-gebaseerde rubric (Layout, Elementen, Tekst, Kleur, Spatiëring) om de gereconstrueerde regio perceptueel te scoren. De omliggende pagina wordt geëvalueerd op collaterale reflow of herstyling.
Micro-Niveau (Gelokaliseerd): Gebruikt deterministische pixel-gegronde uitlijning. De reparatie-footprint wordt gedefinieerd als de pixel-verschilmasker tussen de golden en gecorrumpeerde pagina's. Nauwkeurigheid wordt gemeten via Structural Similarity (SSIM) binnen de footprint, terwijl preservatie wordt gemeten via SSIM buiten de footprint, aangevuld met een kleurgevoelige penalty.
Unified Scoring: De definitieve score combineert in-box en out-of-box metrieken met een weging van $0.8 \times S_{inbox} + 0.2 \times S_{outbox}$ .

Belangrijkste Resultaten

De auteurs evalueerden 13 frontier coding agents (inclusief Gemini, Claude, GPT, Kimi, GLM, Qwen, en Doubao series) op MT-Web2Code. De experimenten onthullen drie consistente beperkingen:

Strijd met Getrouwe Regionale Reconstructie: Hoewel agents veelbelovend zijn, falen ze vaak in het getrouw reconstrueren van doelregio's terwijl ze de consistentie buiten het doelgebied handhaven. Grotere modellen introduceren soms onnodige globale lay-outwijzigingen, zelfs wanneer ze expliciet zijn geïnstrueerd om ongeaffecteerde regio's te behouden.
Gebrek aan Fijnmazige Visuele-Code Alignment: In micro-niveau taken behalen agents over het algemeen hoge scores voor het behoud van omliggende content (vaak >0.95), maar vertonen ze aanzienlijke variantie bij het repareren van de specifieke defecten. Dit duidt op een zwakte in precieze visuele grounding en code-alignment.
Error Snowballing: In multi-turn settings worden fouten die in vroege beurten optreden, overgenomen en versterkt door daaropvolgende edities. Wanneer modellen worden gedwongen te editen op basis van hun eigen (potentieel gebrekkige) eerdere outputs, degradeert de prestatie aanzienlijk vergeleken met scenario's waarin ze editen vanaf een correcte golden state.

Opmerkelijke Bevindingen:

Taakspecificiteit: Sterke prestaties in macro-reconstructie garanderen geen sterke prestaties in micro-modificatie (en vice versa). Zo leidde Gemini-3.5-Flash in Macro-Niveau (65.5), terwijl Doubao-Seed-2.0-Pro leidde in Micro-Niveau (83.5).
Impact van Captions: Het verstrekken van tekstuele captions voor visuele referenties leverde inconsistente resultaten op; het verbeterde sommige modellen (bijv. Gemini-3.5-Flash) maar degradeerde anderen (bijv. Kimi-K2.6), wat suggereert dat tekstuele priors soms kunnen conflicteren met visueel bewijs.
Betrouwbaarheid van de Judge: Hoogpresterende coding agents zijn niet noodzakelijkerwijs betrouwbare judges; sommige top coding modellen gaven overly optimistische scores vergeleken met mens-gealigneerde evaluaties.

Betekenis en Claims

Het paper claimt dat MT-Web2Code de kloof overbrugt tussen statische UI-generatie benchmarks en de iteratieve aard van real-world frontend development. De primaire bijdragen zijn:

Eerste Multi-Turn Benchmark: Het is de eerste benchmark die gewijd is aan iteratieve web UI coding, met dekking van zowel regionale reconstructie als gelokaliseerde modificatie.
Schaalbare Dataconstructie: De Reverse-Corruption Trajectory Engine maakt de creatie van deterministische reparatie-trajecten mogelijk zonder dure menselijke annotatie, wat reproduceerbare ground truths biedt.
Granulaire Evaluatie: Het dual-axis protocol biedt fijnmazige feedbacksignalen die onderscheid maken tussen succesvolle reparaties en collaterale schade, een capaciteit die ontbreekt in bestaande globale metrieken.
Fundament voor Training: Naast benchmarking bieden de deterministische, pixel-gegronde en rubric-gebaseerde metrieken een natuurlijk fundament voor verifieerbare reward signalen in Reinforcement Learning (RL), wat potentieel de training van toekomstige iteratieve UI coding agents faciliteert zonder afhankelijk te zijn van menselijke voorkeurdata.

De auteurs concluderen dat huidige agents, ondanks sterk visueel begrip, de consistentie en fijnmazige alignment missen die vereist zijn voor betrouwbare, long-horizon multi-turn UI coding, wat een duidelijke richting geeft voor toekomstig onderzoek.