Resumo Técnico: MT-Web2Code

Declaração do Problema

Avanços recentes em Modelos de Linguagem de Visão-Linguagem (LVLMs) demonstraram capacidades significativas na geração de interfaces de usuário (UIs) web do zero. No entanto, os benchmarks existentes concentram-se predominantemente na geração de página completa em turno único, tratando cada tarefa como um problema independente de entrada-saída. Essa formulação falha em capturar a realidade da engenharia de frontend, onde desenvolvedores se envolvem em fluxos de trabalho iterativos: reconstruindo regiões ausentes e modificando elementos localizados dentro de bases de código existentes enquanto preservam o conteúdo não afetado. Os benchmarks atuais não conseguem avaliar se um modelo pode editar uma página em evolução de forma confiável, manter a consistência entre turnos ou prevenir a propagação de erros. Existe uma lacuna crítica entre os benchmarks de geração de UI estática e os requisitos dinâmicos de múltiplos turnos do desenvolvimento de UI do mundo real.

Metodologia

1. Construção do Benchmark: MT-Web2Code

Os autores introduzem o MT-Web2Code, o primeiro benchmark de codificação multimodal projetado para interações de múltiplos turnos. Ele abrange 102 tarefas distribuídas em 16 domínios verticais (ex: CRM, ERP, Varejo, Governo). O benchmark define dois níveis de granularidade de tarefa complementares:

• Reconstrução Regional de Nível Macro: O agente deve reconstruir uma região semântica inteira ausente a partir de uma referência visual e integrá-la à estrutura da página circundante sem alterar o restante da página.
• Modificação Localizada de Nível Micro: O agente deve reparar defeitos estruturais e estilísticos refinados (ex: cor, espaçamento, alinhamento de texto) dentro de caixas delimitadoras específicas, preservando estritamente o layout ao redor.

2. Geração de Dados: Mecanismo de Trajetória de Corrupção Reversa

Para construir trajetórias de reparo de múltiplos turnos de alta qualidade e determinísticas sem a necessidade de anotação humana dispendiosa por nível de turno, os autores desenvolveram um Mecanismo de Trajetória de Corrupção Reversa:

• Processo: Partindo de uma "Página de Ouro" ($H_0$), o mecanismo injeta iterativamente defeitos estruturais e estilísticos determinísticos para criar uma sequência de estados corrompidos ($H_1, \dots, H_T$). A tarefa do agente é reverter essa trajetória de forma autorregressiva.
• Impressão Digital de Elementos (Element Fingerprinting): Para rastrear elementos através de modificações sequenciais, apesar dos reflows do DOM, o sistema atribui Impressões Digitais de Elementos (hashes de tag, texto e atributos) aos nós HTML. Esses identificadores permitem que o sistema rastreie deterministicamente as regiões alvo e seus irmãos sobreviventes mais próximos, garantindo que o "ground truth" para cada turno seja unicamente definido.
• Taxonomia de Defeitos: Os defeitos de nível micro são gerados usando 9 operadores atômicos através de 5 dimensões perceptuais (Layout, Elementos, Texto, Cor, Espaçamento), garantindo a independência topológica entre os nós visados para evitar falhas de reparo em cascata.

3. Protocolo de Avaliação: Métricas de Eixo Duplo

O artigo propõe um protocolo de avaliação de eixo duplo que mede separadamente a fidelidade da região alvo (dentro da caixa) e a preservação do conteúdo não afetado (fora da caixa):

• Nível Macro (Regional): Utiliza uma rubrica baseada em VLM de 5 dimensões (Layout, Elementos, Texto, Cor, Espaçamento) para pontuar a região reconstruída perceptualmente. A página circundante é avaliada quanto a reflow ou reestilização colateral.
• Nível Micro (Localizado): Utiliza alinhamento determinístico baseado em pixels. A pegada de reparo é definida como a máscara de diferença de pixels entre as páginas de ouro e corrompidas. A precisão é medida via Similaridade Estrutural (SSIM) dentro da pegada, enquanto a preservação é medida por SSIM fora da pegada, complementada por uma penalidade sensível à cor.
• Pontuação Unificada: A pontuação final combina métricas de dentro e fora da caixa com um peso de $0,8 \times S_{inbox} + 0,2 \times S_{outbox}$.

Resultados Principais

Os autores avaliaram 13 agentes de codificação de fronteira (incluindo as séries Gemini, Claude, GPT, Kimi, GLM, Qwen e Doubao) no MT-Web2Code. Os experimentos revelam três limitações consistentes:

1. Dificuldade com a Reconstrução Fiel de Regiões: Embora os agentes mostrem promessa, eles frequentemente falham em reconstruir regiões alvo fielmente enquanto mantêm a consistência fora da área alvo. Modelos maiores às vezes introduzem mudanças de layout global desnecessárias, mesmo quando instruídos explicitamente a preservar regiões não afetadas.
2. Falta de Alinhamento Visual-Código Refinado: Em tarefas de nível micro, os agentes geralmente alcançam pontuações altas na preservação do conteúdo circundante (frequentemente >0,95), mas exibem uma variação substancial no reparo dos defeitos específicos. Isso indica uma fraqueza no alinhamento preciso de visual e código.
3. Efeito Bola de Neve de Erros (Error Snowballing): Em configurações de múltiplos turnos, erros ocorridos em turnos iniciais são herdados e amplificados por edições subsequentes. Quando os modelos são forçados a editar com base em suas próprias saídas anteriores (potencialmente falhas), o desempenho degrada significativamente em comparação com cenários onde editam a partir de um estado de ouro correto.

Descobertas Notáveis:

• Especificidade da Tarefa: Um forte desempenho na reconstrução macro não garante um forte desempenho na modificação micro (e vice-versa). Por exemplo, o Gemini-3.5-Flash liderou no Nível Macro (65,5), enquanto o Doubao-Seed-2.0-Pro liderou no Nível Micro (83,5).
• Impacto das Legendas: Fornecer legendas textuais para referências visuais rendeu resultados inconsistentes; melhorou alguns modelos (ex: Gemini-3.5-Flash), mas degradou outros (ex: Kimi-K2.6), sugerindo que os priors textuais podem às vezes conflitar com a evidência visual.
• Confiabilidade do Juiz: Agentes de codificação de alto desempenho não são necessariamente juízes confiáveis; alguns dos principais modelos de codificação atribuíram pontuações excessivamente otimistas em comparação com as avaliações alinhadas com humanos.

Significância e Alegações

O artigo afirma que o MT-Web2Code preenche a lacuna entre os benchmarks de geração de UI estática e a natureza iterativa do desenvolvimento de frontend do mundo real. Suas principais contribuições são:

1. Primeiro Benchmark de Múltiplos Turnos: É o primeiro benchmark dedicado à codificação iterativa de UI web, cobrindo tanto a reconstrução regional quanto a modificação localizada.
2. Construção de Dados Escalável: O Mecanismo de Trajetória de Corrupção Reversa permite a criação de trajetórias de reparo determinísticas sem a necessidade de anotação humana cara, fornecendo ground truths reproduzíveis.
3. Avaliação Granular: O protocolo de eixo duplo fornece sinais de feedback refinados que distinguem entre reparos bem-sucedidos e danos colaterais, uma capacidade ausente nas métricas globais existentes.
4. Fundação para Treinamento: Além do benchmarking, as métricas determinísticas, baseadas em pixels e em rubricas, oferecem uma fundação natural para sinais de recompensa verificáveis em Aprendizado por Reforço (RL), potencialmente facilitando o treinamento de futuros agentes de codificação de UI iterativos sem depender de dados de preferência humana.

Os autores concluem que os agentes atuais, apesar da forte compreensão visual, carecem da consistência e do alinhamento refinado necessários para uma codificação de UI de múltiplos turnos de longo horizonte confiável, destacando uma direção clara para pesquisas futuras.