💻 computer science

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

Questo articolo introduce MT-Web2Code, il primo benchmark multimodale progettato per valutare gli agenti di codifica su compiti realistici di interfaccia utente web multi-turno che coinvolgono la ricostruzione regionale e le modifiche localizzate, rivelando significative limitazioni nella capacità degli attuali agenti di mantenere la fedeltà e prevenire l'accumulo di errori attraverso i turni iterativi.

Autori originali: Qiming Li, Shujie Hu, Haohan Liu, Xiaocheng Feng, Songxiang Liu, Guanglu Wan

Pubblicato 2026-08-05

📖 4 min di lettura☕ Lettura da pausa caffè

CC BY 4.0

Autori originali: Qiming Li, Shujie Hu, Haohan Liu, Xiaocheng Feng, Songxiang Liu, Guanglu Wan

Articolo originale sotto licenza CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Questa è una spiegazione generata dall'IA dell'articolo qui sotto. Non è stata scritta né approvata dagli autori. Per precisione tecnica, consulta l'articolo originale. Leggi il disclaimer completo

Immagina di insegnare a un robot come diventare un maestro del web design. In passato, testavamo questi robot consegnando loro una tela bianca e l'immagine di un sito web, chiedendo loro di costruire l'intera struttura da zero in un colpo solo. Era come chiedere a uno chef di cucinare istantaneamente un intero pasto di cinque portate. Ma nel mondo reale, il web design è raramente così drammatico. Di solito, uno sviluppatore apre un sito web esistente, trova un pulsante rotto, sistema un carattere strano o aggiunge una foto mancante, il tutto assicurandosi di non cancellare accidentalmente il resto della pagina. È più simile a un gioco di "trova le differenze" e "ripara il guasto" giocato ripetutamente. Questo è il mondo della "codifica iterativa", dove il robot deve ricordare cosa ha fatto cinque minuti fa e non fare danni mentre risolve il nuovo problema. La grande domanda che i ricercatori si pongono è: i nostri robot IA più intelligenti sono in grado di gestire questa realtà disordinata e passo dopo passo, o funzionano bene solo quando ricevono una tela pulita?

Questo è esattamente ciò che indaga il documento "MT-Web2Code". Gli autori hanno creato un nuovo test super impegnativo chiamato MT-Web2Code per vedere quanto siano davvero bravi gli agenti di programmazione IA in questo stile di lavoro "ripara-mentre-procedi". Inveve di chiedere all'IA di costruire un'intera pagina, hanno fornito 102 pagine web diverse appartenenti a 16 categorie differenti (come siti di shopping, notizie e siti governativi) e hanno chiesto di eseguire due tipi specifici di compiti su più turni. Il primo compito è la "Ricostruzione Regionale", che è come dire al robot: "Ehi, questa intera sezione della pagina è mancante; ecco un'immagine di come dovrebbe apparire, per favore ricostruisci solo quella parte senza toccare il resto". Il secondo è la "Modifica Localizzata", che è ancora più complicato: "Ecco tre piccole cose che sembrano sbagliate (magari un pulsante ha il colore errato o una linea è troppo spessa); per favore correggi solo quei piccoli punti".

Per rendere questo test equo e impossibile da aggirare, i ricercatori hanno inventato un ingegnoso motore di "Corruzione Inversa". Immaginate che abbiano preso un sito web perfetto e dorato e poi l'abbiano deliberatamente danneggiato in modi specifici — nascondendo un'intera sezione o rovinando alcuni caratteri. Poi, hanno registrato esattamente come lo hanno danneggiato. Il compito dell'IA è quello di invertire quel processo: guardare la pagina danneggiata, capire cosa c'è che non va e ripararla per riportarla allo stato perfetto. Poiché i ricercatori sanno esattamente come la pagina è stata danneggiata, possono misurare il successo dell'IA con estrema precisione. Hanno scoperto che, sebbene questi robot IA stiano migliorando, faticano ancora moltissimo in questo gioco a più turni.

I risultati sono stati una dose di realtà. Quando l'IA cercava di ricostruire una regione mancante, spesso faceva un lavoro discreto sulla nuova parte, ma rovinava accidentalmente il contenuto circostante, come cambiare il colore dello sfondo di tutta la pagina quando doveva solo sistemare un menu. Quando le veniva chiesto di effettuare modifiche piccole e precise, i robot spesso fallivano nel far coincidere perfettamente il codice con la correzione visiva, dimostrando di mancare di un controllo fine. Forse cosa più preoccupante, il documento ha scoperto un effetto "valanga di errori". Se l'IA commetteva un piccolo errore nel primo turno, quell'errore veniva portato avanti e amplificato nei turni successivi, rendendo il risultato finale molto peggiore rispetto a se avesse iniziato da zero ogni volta. Interessantemente, i ricercatori hanno scoperto che dare all'IA una descrizione scritta di come appariva la parte danneggiata non aiutava sempre; a volte, anzi, confondeva il robot, portandolo a fare troppo affidamento sulle parole e a ignorare l'immagine reale.

In breve, questo documento suggerisce che, sebbene l'IA sia brava a costruire siti web da zero, sta ancora imparando come essere un editor attento e iterativo. Dimostra che essere bravi in una cosa non significa automaticamente esserlo nell'altra. Gli autori sperano che, utilizzando il loro nuovo sistema di punteggio super preciso — che controlla sia la parte corretta che le parti non toccate — possano aiutare ad addestrare le future IA a diventare progettisti web più affidabili e capaci di procedere passo dopo passo, che non rompano il resto della casa mentre riparano una singola finestra.

Sintesi Tecnica: MT-Web2Code

Problematica

I recenti progressi nei Large Vision-Language Models (LVM) hanno dimostrato capacità significative nella generazione di interfacce web da zero. Tuttavia, i benchmark esistenti si concentrano prevalentemente sulla generazione single-turn a pagina intera, trattando ogni task come un problema di input-output indipendente. Questa formulazione non riesce a catturare la realtà dell'ingegneria frontend, dove gli sviluppatori si impegnano in workflow iterativi: ricostruire regioni mancanti e modificare elementi localizzati all'interno di codebase esistenti preservando il contenuto non influenzato. Gli attuali benchmark non possono valutare se un modello sia in grado di modificare in modo affidabile una pagina in evoluzione, mantenere la coerenza tra i turni o prevenire la propagazione degli errori. Esiste un divario critico tra i benchmark di generazione UI statica e i requisiti dinamici e multi-turn dello sviluppo UI nel mondo reale.

Metodologia

1. Costruzione del Benchmark: MT-Web2Code

Gli autori introducono MT-Web2Code, il primo benchmark di coding multimodale progettato per interazioni multi-turn. Esso comprende 102 task che spaziano su 16 domini verticali (es. CRM, ERP, Retail, Governo). Il benchmark definisce due granularità di task complementari:

Ricostruzione Regionale a Livello Macro: L'agente deve ricostruire un'intera regione semantica mancante partendo da un riferimento visivo e integrarla nella struttura della pagina circostante senza alterare il resto della pagina.
Modifica Localizzata a Livello Micro: L'agente deve riparare difetti strutturali e stilistici fini (es. colore, spaziatura, allineamento del testo) all'interno di specifici bounding box, preservando rigorosamente il layout circostante.

2. Generazione dei Dati: Reverse-Corruption Trajectory Engine

Per costruire traiettorie di riparazione multi-turn di alta qualità e deterministiche senza l'onerosa annotazione umana a livello di turno, gli autori hanno sviluppato un Reverse-Corruption Trajectory Engine:

Processo: Partendo da una "Golden Page" ( $H_0$ ), l'engine inietta iterativamente difetti strutturali e stilistici deterministici per creare una sequenza di stati corrotti ( $H_1, \dots, H_T$ ). Il compito dell'agente è invertire questa traiettoria in modo autoregressivo.
Element Fingerprinting: Per tracciare gli elementi attraverso le modifiche sequenziali nonostante i reflow del DOM, il sistema assegna Element Fingerprint (hash di tag, testo e attributi) indipendenti dalla posizione ai nodi HTML. Questi identificatori permettono al sistema di tracciare deterministicamente le regioni target e i loro fratelli superstiti più vicini, garantendo che la "ground truth" per ogni turno sia univocamente definita.
Tassonomia dei Difetti: I difetti a livello micro sono generati utilizzando 9 operatori atomici attraverso 5 dimensioni percettive (Layout, Elementi, Testo, Colore, Spaziatura), garantendo l'indipendenza topologica tra i nodi target per prevenire fallimenti di riparazione a cascata.

3. Protocollo di Valutazione: Metriche Dual-Axis

Il documento propone un protocollo di valutazione dual-axis che misura separatamente la fedeltà della regione target (in-box) e la preservazione del contenuto non influenzato (out-of-box):

Livello Macro (Regionale): Utilizza una rubrica a 5 dimensioni basata su VLM (Layout, Elementi, Testo, Colore, Spaziatura) per valutare percettivamente la regione ricostruita. La pagina circostante viene valutata per eventuali reflow o restyling collaterali.
Livello Micro (Localizzato): Utilizza un allineamento deterministico basato sui pixel. L'impronta della riparazione è definita come la maschera di differenza dei pixel tra le pagine golden e corrotte. L'accuratezza è misurata tramite la Similarità Strutturale (SSIM) all'interno dell'impronta, mentre la preservazione è misurata tramite SSIM al di fuori dell'impronta, completata da una penalità sensibile al colore.
Scoring Unificato: Il punteggio finale combina le metriche in-box e out-of-box con un peso di $0.8 \times S_{inbox} + 0.2 \times S_{outbox}$ .

Risultati Chiave

Gli autori hanno valutato 13 agenti di coding all'avanguardia (inclusi Gemini, Claude, GPT, Kimi, GLM, Qwen e la serie Doubao) su MT-Web2Code. Gli esperimenti rivelano tre limitazioni costanti:

Difficoltà nella Ricostruzione Regionale Fedele: Sebbene gli agenti mostrino potenziale, spesso falliscono nel ricostruire fedelmente le regioni target mantenendo la coerenza al di fuori dell'area target. I modelli più grandi a volte introducono cambiamenti indesiderati al layout globale anche quando sono esplicitamente istruiti a preservare le regioni non influenzate.
Mancanza di Allineamento Visivo-Codice Fine: Nei task a livello micro, gli agenti ottengono generalmente punteggi elevati nella preservazione del contenuto circostante (spesso >0.95) ma mostrano una varianza sostanziale nella riparazione dei difetti specifici. Ciò indica una debolezza nella precisione del grounding visivo e dell'allineamento del codice.
Effetto Valanga degli Errori (Error Snowballing): Nelle impostazioni multi-turn, gli errori che si verificano nei primi turni vengono ereditati e amplificati dalle modifiche successive. Quando i modelli sono costretti a modificare basandosi sui propri output precedenti (potenzialmente errati), le prestazioni degradano significativamente rispetto agli scenari in cui modificano partendo da uno stato golden corretto.

Risultati Notevoli:

Specificità del Task: Una forte performance nella macro-ricostruzione non garantisce una forte performance nella micro-modifica (e viceversa). Ad esempio, Gemini-3.5-Flash ha guidato nel Macro-Level (65.5), mentre Doubao-Seed-2.0-Pro ha guidato nel Micro-Level (83.5).
Impatto delle Caption: Fornire didascalie testuali per i riferimenti visivi ha prodotto risultati inconsistenti; ha migliorato alcuni modelli (es. Gemini-3.5-Flash) ma ha degradato altri (es. Kimi-K2.6), suggerendo che i priori testuali possono talvolta entrare in conflitto con l'evidenza visiva.
Affidabilità del Judge: Gli agenti di coding ad alte prestazioni non sono necessariamente giudici affidabili; alcuni dei migliori modelli di coding hanno assegnato punteggi eccessivamente ottimistici rispetto alle valutazioni allineate agli umani.

Significato e Rivendicazioni

Il documento afferma che MT-Web2Code colma il divario tra i benchmark di generazione UI statica e la natura iterativa dello sviluppo frontend reale. I suoi principali contributi sono:

Primo Benchmark Multi-Turn: È il primo benchmark dedicato al coding UI web iterativo, che copre sia la ricostruzione regionale che la modifica localizzata.
Costruzione Dati Scalabile: Il Reverse-Corruption Trajectory Engine consente la creazione di traiettorie di riparazione deterministiche senza costose annotazioni umane, fornendo ground truth riproducibili.
Valutazione Granulare: Il protocollo dual-axis fornisce segnali di feedback granulari che distinguono tra riparazioni di successo e danni collaterali, una capacità assente nelle metriche globali esistenti.
Fondamenta per l'Addestramento: Oltre al benchmarking, le metriche deterministiche, basate sui pixel e sulla rubrica, offrono una base naturale per segnali di ricompensa verificabili nel Reinforcement Learning (RL), facilitando potenzialmente l'addestramento di futuri agenti di coding UI iterativi senza dipendere dai dati di preferenza umana.

Gli autori concludono che gli attuali agenti, nonostante la forte comprensione visiva, mancano della coerenza e dell'allineamento fine necessari per un coding UI multi-turn a lungo termine affidabile, evidenziando una chiara direzione per la ricerca futura.