🤖 AI

LongWebBench: Evaluating Structural and Functional Webpage Generation in Long-Horizon Settings

Este artigo apresenta o LongWebBench, um benchmark abrangente projetado para avaliar a fidelidade estrutural e a executabilidade funcional da geração de páginas web de longo horizonte por modelos de visão-linguagem, revelando que os sistemas atuais de estado da arte lutam com coerência de longo alcance e capacidades interativas, apesar da plausibilidade visual.

Autores originais: Yi Zhao, Zhen Yang, Mengpan Chen, Mingde Xu, Shanghui Gong, Xijun Liu, Jibing Gong, Jie Tang

Publicado 2026-06-17

📖 3 min de leitura☕ Leitura rápida

CC BY 4.0

Autores originais: Yi Zhao, Zhen Yang, Mengpan Chen, Mingde Xu, Shanghui Gong, Xijun Liu, Jibing Gong, Jie Tang

Artigo original sob licença CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Esta é uma explicação gerada por IA do artigo abaixo. Não foi escrita nem endossada pelos autores. Para precisão técnica, consulte o artigo original. Ler aviso legal completo

Imagine que você está contratando um arquiteto talentoso para construir uma casa baseada em uma única e enorme fotografia de uma mansão.

O Problema:
Até agora, a maioria dos testes para "arquitetos" de IA (chamados de Modelos de Linguagem-Visão) apenas pedia que eles construíssem pequenas cabanas de um único cômodo. Os testes verificavam se a porta da frente parecia correta ou se a cor da tinta combinava. Mas sites reais são como mansões enormes com dezenas de cômodos, múltiplos andares e fiações complexas. Se você pedir a uma IA para construir uma mansão inteira a partir de uma foto, ela pode acertar a porta da frente, mas esquecer como conectar a escada ao segundo andar, ou construir uma cozinha que parece real, mas não tem uma pia funcionando.

A Solução: LongWebBench
Os autores deste artigo criaram um novo teste mais rigoroso chamado LongWebBench. Em vez de apenas verificar se a casa parece com a foto, eles verificam duas coisas:

A Planta Baixa (Estrutura): O edifício inteiro faz sentido? Os cômodos estão na ordem correta? O telhado está conectado às paredes?
O Encanamento e a Eletricidade (Funcionalidade): Se você abrir a torneira, a água sai? Se você apertar o interruptor, a luz acende?

Como Eles Construíram o Teste:
Eles reuniram duas grandes coleções de "fotos de mansões" do mundo real (páginas web longas):

490 Testes de "Semelhança Visual": Eles pegaram fotos de sites muito longos (alguns tão longos que você teria que rolar por 30 telas para ver o final) e pediram aos modelos de IA que recriassem o código dessas páginas. O teste verificava se a IA conseguia manter a consistência do layout do topo da página até o final.
507 Testes de "Execução": Eles escolheram 129 sites e deram tarefas específicas à IA, como "Encontrar um voo para Tóquio", "Adicionar um item ao carrinho" ou "Filtrar os resultados da busca". A IA tinha que escrever um código que realmente fizesse essas coisas em um navegador real, não apenas fingir que as fazia.

Os Resultados: O "Abismo da Realidade"
Quando rodaram os melhores modelos de IA através deste novo teste, descobriram coisas surpreendentes:

O Problema da "Rolagem Longa": À medida que os sites ficavam mais longos, a capacidade da IA de manter a estrutura correta piorava. É como um arquiteto que consegue projetar um primeiro andar perfeito, mas esquece como o segundo andar se conecta a ele.
O Problema da "Casa de Mentira": Muitas IAs construíram sites que pareciam bonitos e realistas (como um cenário de filme), mas quando você tentava clicar em um botão ou preencher um formulário, nada acontecia. O "encanamento" estava quebrado.
O Problema da Entrada: Mesmo quando os pesquisadores dividiam a foto longa em pedaços menores para facilitar a visualização pela IA, a IA ainda tinha dificuldade em juntar as peças em um todo funcional.

A Conclusão
O artigo conclui que não podemos julgar a IA apenas pelo quão bonitos são seus desenhos. Para ser verdadeiramente útil, uma IA precisa ser capaz de construir sites longos e complexos que realmente funcionem quando você interage com eles. O LongWebBench é a nova régua que eles estão usando para medir isso, mostrando-nos que, embora a IA esteja ficando boa em desenhar, ela ainda tem um longo caminho a percorrer antes de conseguir construir uma casa digital totalmente funcional.

Resumo Técnico: LongWebBench

Definição do Problema
Avanços recentes em Modelos de Visão-Linguagem (VLMs) demonstraram a capacidade de gerar código front-end (HTML, CSS, JavaScript) a partir de entradas visuais, como capturas de tela de páginas da web. No entanto, os benchmarks de avaliação existentes focam primordialmente em páginas curtas, de tela única e amplamente estáticas, medindo o sucesso por meio de similaridade visual local. Isso cria um "gap de realidade" significativo quando aplicados a páginas da web do mundo real, que frequentemente abrangem múltiplas telas, contêm componentes repetidos, exigem consistência de estilo entre seções distantes e suportam interações de usuário complexas e de múltiplas etapas. As avaliações atuais falham em avaliar se os modelos conseguem preservar a estrutura global em contextos longos ou gerar lógica executável para tarefas orientadas a objetivos.

Metodologia
Para abordar essa lacuna, os autores introduzem o LongWebBench, um benchmark projetado para avaliar a geração de páginas da web de longo horizonte tanto sob perspectivas estruturais quanto funcionais. O benchmark consiste em duas tarefas complementares:

Replicação de Fidelidade Visual de Página Web (W-VFR):
- Objetivo: Avaliar se um modelo consegue reproduzir a estrutura visual global de uma página da web longa.
- Dataset: 490 páginas da web reais e longas (definidas como excedendo três alturas de viewport na resolução 1920×1080) através de sete categorias estruturais (ex: artigos informativos, páginas de produtos, páginas governamentais).
- Protocolo de Avaliação: Uma métrica multidimensional baseada em VLM (usando GPT-4o) pontua as renderizações geradas contra capturas de tela de referência em uma escala de 0 a 10 em cinco dimensões: consistência de escala/rolagem da página, layout global, hierarquia de seção, estilização visual local e densidade de informação. A estilização local é adicionalmente aumentada por similaridade de características baseada em DINO.
- Configurações de Entrada: Suporta tanto entrada de imagem única (captura de tela completa) quanto multi-imagem (dividida em blocos do tamanho do viewport) para distinguir entre restrições de resolução e raciocínio de contexto longo.
Realização de Fidelidade Funcional de Página Web (W-FFR):
- Objetivo: Avaliar se um modelo consegue gerar uma página da web executável que suporte objetivos específicos do usuário.
- Dataset: 507 tarefas de interação orientadas a objetivos distribuídas em 129 páginas da web, cobrindo 13 categorias funcionais (ex: e-commerce, viagens, visualização de dados).
- Protocolo de Avaliação: Um pipeline baseado em agentes aumentado por DOM executa o código gerado em um ambiente de navegador. Um controlador coordena um agente "ator" para realizar ações prescritas e um agente "crítico" (alimentado pelo Gemini-3-Pro) para verificar se o DOM resultante e o estado da página satisfazem a especificação da tarefa.
- Métricas: Taxa de Sucesso de Etapa (SSR), Taxa de Sucesso de Tarefa (TSR) e Taxa de Sucesso de Página (PSR).

Principais Contribuições

Criação de Benchmark: A introdução do LongWebBench, o primeiro benchmark a avaliar conjuntamente a coerência estrutural de longo alcance e interações executáveis de múltiplas etapas para a geração de páginas da web.
Construção de Dataset: A curadoria de 490 páginas da web longas para fidelidade estrutural e 507 tarefas de interação para verificação funcional, garantindo diversidade em layout, densidade de conteúdo e complexidade de interação.
Protocolos de Avaliação: O design de protocolos complementares: uma métrica baseada em VLM para fidelidade estrutural e um pipeline de execução baseado em agentes para verificação funcional, validados através de análise de concordância humana e verificações de robustez de juízes cruzados.
Análise Empírica: Uma avaliação abrangente de VLMs proprietários e de código aberto de última geração sob configurações de imagem única e multi-imagem.

Resultados Experimentais
Experimentos conduzidos em modelos como GPT-5.2, Gemini-3-Pro, Claude-Opus-4.5 e vários modelos de código aberto (ex: GLM-4.6V, Qwen3-VL) revelam o seguinte:

Fidelidade Estrutural: O desempenho geralmente degrada conforme o comprimento da página da web aumenta. Embora as entradas multi-imagem aliviem as restrições de resolução, elas não resolvem totalmente os desafios no planejamento de layout global e integração entre segmentos. Mesmo os modelos com melhor desempenho alcançam apenas pontuações moderadas de fidelidade estrutural em páginas muito longas.
Fidelidade Funcional: A interação executável é significativamente mais desafiadora do que a reconstrução visual. Modelos com altas Taxas de Sucesso de Etapa (SSR) frequentemente exibem Taxas de Sucesso de Tarefa (TSR) e Taxas de Sucesso de Página (PSR) muito menores, indicando acúmulo de erros em fluxos de trabalho de múltiplas etapas. Por exemplo, os melhores modelos alcançaram SSRs acima de 86%, mas TSRs em torno de 58–59%, com PSRs permanecendo abaixo de 22%.
Sensibilidade ao Comprimento: Tanto a fidelidade estrutural quanto as taxas de sucesso funcional declinam conforme o número de viewports (para estrutura) ou passos de interação (para função) aumenta, destacando a dificuldade de manter o estado e a lógica em horizontes longos.
Confiabilidade da Avaliação: Os protocolos de avaliação automática mostraram forte concordância com julgamentos humanos (Pearson $r = 0.83$ para W-VFR; consistência >0.89 para W-FFR) e alta robustez entre diferentes modelos de juiz.

Significância e Alegações
O artigo alega que o LongWebBench destaca uma limitação crítica nas capacidades atuais dos VLMs: a incapacidade de gerar páginas da web longas que sejam estruturalmente coerentes e funcionalmente executáveis. Os autores argumentam que avaliar a geração de páginas da web baseando-se apenas em similaridade visual estática é insuficiente. Em vez disso, a interação executável deve ser tratada como um critério central. O benchmark serve como um banco de testes diagnóstico para revelar que, embora os modelos possam produzir saídas visualmente plausíveis, eles frequentemente falham em suportar os objetivos complexos de múltiplos passos exigidos em aplicações web do mundo real. O trabalho enfatiza a necessidade de modelos futuros melhorarem o raciocínio estrutural de longo alcance e a síntese de lógica de interação.

Limitações
Os autores observam que o LongWebBench foca em front-ends estabilizados e renderizados, e exclui autenticação, personalização, serviços de backend ao vivo e rolagem infinita sem limites. Consequentemente, o benchmark avalia a estrutura do front-end e o comportamento observável, em vez da complexidade total de aplicações web implantadas que envolvem bancos de dados externos ou lógica do lado do servidor.

Mais como este