🤖 AI

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

Este artículo presenta LongWebBench, un benchmark exhaustivo diseñado para evaluar la fidelidad estructural y la ejecutabilidad funcional de la generación de páginas web de largo alcance por parte de modelos de lenguaje-visión, revelando que los sistemas actuales de vanguardia tienen dificultades con la coherencia de largo alcance y las capacidades interactivas a pesar de su plausibilidad visual.

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

Publicado 2026-06-17

📖 3 min de lectura☕ Lectura para el café

CC BY 4.0

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

Artículo original bajo licencia CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Esta es una explicación generada por IA del artículo a continuación. No ha sido escrita ni avalada por los autores. Para mayor precisión técnica, consulte el artículo original. Leer descargo de responsabilidad completo

Imagina que estás contratando a un arquitecto talentoso para construir una casa basada en una única y masiva fotografía de una mansión.

El Problema:
Hasta ahora, la mayoría de las pruebas para los "arquitectos" de IA (llamados Modelos de Lenguaje-Visión) solo les pedían construir pequeñas cabañas de una sola habitación. Estas pruebas verificaban si la puerta principal se veía bien o si el color de la pintura coincidía. Pero los sitios web reales son como mansiones masivas con docenas de habitaciones, múltiples pisos y un cableado complejo. Si le pides a una IA que construya una mansión entera a partir de una sola foto, podría lograr que la puerta principal se vea bien, pero olvidaría cómo conectar las escaleras con el segundo piso, o construiría una cocina que parece real pero que no tiene un fregadero funcional.

La Solución: LongWebBench
Los autores de este artículo crearon una nueva y más difícil prueba llamada LongWebBench. En lugar de solo verificar si la casa se parece a la foto, verifican dos cosas:

El Plano (Estructura): ¿Tiene todo el edificio sentido? ¿Están las habitaciones en el orden correcto? ¿Está el techo conectado a las paredes?
La Fontanería y la Electricidad (Función): Si abres el grifo, ¿sale agua? Si accionas el interruptor de la luz, ¿se enciende la luz?

Cómo Construyeron la Prueba:
Reunieron dos enormes colecciones de "fotos de mansiones" del mundo real (páginas web largas):

490 Pruebas de "Parecido Visual": Tomaron fotos de sitios web muy largos (algunos tan largos que tendrías que desplazarte por 30 pantallas para ver el final). Les pidieron a los modelos de IA que recrearan el código de estas páginas. La prueba verificaba si la IA podía mantener la consistencia del diseño desde la parte superior de la página hasta el mismísimo fondo.
507 Pruebas de "Hacerlo": Seleccionaron 129 sitios web y le dieron a la IA tareas específicas, como "Buscar un vuelo a Tokio", "Añadir un artículo al carrito" o "Filtrar los resultados de búsqueda". La IA tenía que escribir código que realmente hiciera estas cosas en un navegador web real, no solo fingir que las hacía.

Los Resultados: La "Brecha de Realidad"
Cuando sometieron a los mejores modelos de IA a esta nueva prueba, encontraron cosas sorprendentes:

El Problema del "Desplazamiento Largo": A medida que los sitios web se hacían más largos, la capacidad de la IA para mantener la estructura correcta empeoraba. Es como un arquitecto que puede diseñar una primera planta perfecta, pero olvida cómo se conecta con la segunda planta.
El Problema de la "Casa Falsa": Muchas IA construyeron sitios web que se veían hermosos y realistas (como un set de filmación), pero cuando intentabas hacer clic en un botón o llenar un formulario, nada sucedía. La "fontanería" estaba rota.
El Problema de la Entrada: Incluso cuando los investigadores dividieron la foto larga en piezas más pequeñas para que fuera más fácil de ver para la IA, la IA seguía teniendo dificultades para unir las piezas en un todo funcional.

La Conclusión
El artículo concluye que no podemos juzgar a la IA solo por lo bonitos que son sus dibujos. Para ser verdaderamente útil, una IA debe ser capaz de construir sitios web largos y complejos que realmente funcionen cuando interactúas con ellos. LongWebBench es la nueva regla que están utilizando para medir esto, demostrándonos que, aunque la IA se está volviendo buena dibujando, aún tiene un largo camino por recorrer antes de poder construir una casa digital totalmente funcional.

Resumen Técnico: LongWebBench

Planteamiento del Problema
Los avances recientes en los Modelos de Visión y Lenguaje (VLM) han demostrado la capacidad de generar código front-end (HTML, CSS, JavaScript) a partir de entradas visuales como capturas de pantalla de páginas web. Sin embargo, los benchmarks de evaluación existentes se centran principalmente en páginas web cortas, de una sola pantalla y mayoritariamente estáticas, midiendo el éxito mediante la similitud visual local. Esto crea una "brecha de realidad" significativa cuando se aplican a páginas web del mundo real, que a menudo abarcan múltiples pantallas, contienen componentes repetidos, requieren consistencia de estilo en secciones distantes y admiten interacciones de usuario complejas y de múltiples pasos. Las evaluaciones actuales no logran evaluar si los modelos pueden preservar la estructura global en contextos largos o generar lógica ejecutable para tareas orientadas a objetivos.

Metodología
Para abordar esta brecha, los autores presentan LongWebBench, un benchmark diseñado para evaluar la generación de páginas web de largo alcance desde perspectivas tanto estructurales como funcionales. El benchmark consta de dos tareas complementarias:

Replicación de la Fidelidad Visual de la Página Web (W-VFR):
- Objetivo: Evaluar si un modelo puede reproducir la estructura visual global de una página web larga.
- Conjunto de Datos: 490 páginas web reales de largo alcance (definidas como aquellas que exceden tres alturas de viewport en una resolución de 1920×1080) a través de siete categorías estructurales (por ejemplo, artículos informativos, páginas de productos, páginas gubernamentales).
- Protocolo de Evaluación: Una métrica multidimensional basada en VLM (utilizando GPT-4o) califica las representaciones generadas frente a las capturas de pantalla de referencia en una escala de 0 a 10 en cinco dimensiones: escala de la página/consistencia de desplazamiento, diseño global, jerarquía de secciones, estilo visual local e densidad de información. El estilo local se aumenta adicionalmente mediante la similitud de características basada en DINO.
- Configuración de Entrada: Soporta tanto entrada de imagen única (captura de pantalla completa) como de múltiples imágenes (dividida en teselas del tamaño del viewport) para distinguir entre restricciones de resolución y razonamiento de contexto largo.
Realización de la Fidelidad Funcional de la Página Web (W-FFR):
- Objetivo: Evaluar si un modelo puede generar una página web ejecutable que soporte objetivos de usuario específicos.
- Conjunto de Datos: 507 tareas de interacción orientadas a objetivos distribuidas en 129 páginas web, cubriendo 13 categorías funcionales (por ejemplo, comercio electrónico, viajes, visualización de datos).
- Protocolo de Evaluación: Un pipeline basado en agentes aumentado con DOM ejecuta el código generado en un entorno de navegador. Un controlador coordina a un agente "actor" para realizar acciones prescritas y un agente "crítico" (impulsado por Gemini-3-Pro) para verificar si el DOM resultante y el estado de la página satisfacen la especificación de la tarea.
- Métricas: Tasa de Éxito de Paso (SSR), Tasa de Éxito de Tarea (TSR) y Tasa de Éxito de Página (PSR).

Contribuciones Clave

Creación de Benchmark: La introducción de LongWebBench, el primer benchmark que evalúa conjuntamente la coherencia estructural de largo alcance y las interacciones ejecutables de múltiples pasos para la generación de páginas web.
Construcción de Conjunto de Datos: La curación de 490 páginas web largas para fidelidad estructural y 507 tareas de interacción para verificación funcional, asegurando diversidad en diseño, densidad de contenido y complejidad de interacción.
Protocolos de Evaluación: El diseño de protocolos complementarios: una métrica basada en VLM para la fidelidad estructural y un pipeline de ejecución basado en agentes para la verificación funcional, validados mediante análisis de acuerdo humano y comprobaciones de robustez de jueces cruzados.
Análisis Empírico: Una evaluación exhaustiva de modelos VLM de código abierto y propietarios de última generación bajo configuraciones de imagen única y de múltiples imágenes.

Resultados Experimentales
Los experimentos realizados en modelos como GPT-5.2, Gemini-3-Pro, Claude-Opus-4.5 y varios modelos de código abierto (por ejemplo, GLM-4.6V, Qwen3-VL) revelan lo siguiente:

Fidelidad Estructural: El rendimiento generalmente se degrada a medida que aumenta la longitud de la página web. Aunque las entradas de múltiples imágenes alivian las restricciones de resolución, no resuelven completamente los desafíos en la planificación del diseño global y la integración entre segmentos. Incluso los modelos con mejor desempeño logran puntuaciones de fidelidad estructural moderadas en páginas muy largas.
Fidelidad Funcional: La interacción ejecutable es significativamente más desafiante que la reconstrucción visual. Los modelos con altas Tasas de Éxito de Paso (SSR) a menudo exhiben Tasas de Éxito de Tarea (TSR) y Tasas de Éxito de Página (PSR) mucho menores, lo que indica la acumulación de errores en flujos de trabajo de múltiples pasos. Por ejemplo, los mejores modelos alcanzaron SSRs superiores al 86%, pero TSRs alrededor del 58–59%, con PSRs que permanecieron por debajo del 22%.
Sensibilidad a la Longitud: Tanto la fidelidad estructural como las tasas de éxito funcional disminuyen a medida que aumenta el número de viewports (para la estructura) o los pasos de interacción (para la función), resaltando la dificultad de mantener el estado y la lógica en horizontes largos.
Fiabilidad de la Evaluación: Los protocolos de evaluación automática mostraron un fuerte acuerdo con los juicios humanos (Pearson $r = 0.83$ para W-VFR; consistencia >0.89 para W-FFR) y una alta robustez a través de diferentes modelos de juez.

Significancia y Reivindicaciones
El artículo afirma que LongWebBench resalta una limitación crítica en las capacidades de los VLM actuales: la incapacidad de generar páginas web largas que sean estructuralmente coherentes y funcionalmente ejecutables. Los autores argumentan que evaluar la generación de páginas web basándose únicamente en la similitud visual estática es insuficiente. En su lugar, la interacción ejecutable debe tratarse como un criterio central. El benchmark sirve como un banco de pruebas de diagnóstico para revelar que, si bien los modelos pueden producir salidas visualmente plausibles, frecuentemente fallan en soportar los objetivos de usuario complejos y de múltiples pasos requeridos en aplicaciones web del mundo real. El trabajo subraya la necesidad de que los futuros modelos mejoren el razonamiento estructural de largo alcance y la síntesis de lógica de interacción.

Limitaciones
Los autores señalan que LongWebBench se centra en front-ends renderizados y estabilizados, y excluye la autenticación, la personalización, los servicios de backend en vivo y el desplazamiento infinito sin límites. En consecuencia, el benchmark evalúa la estructura del front-end y el comportamiento observable en lugar de la complejidad total de las aplicaciones web desplegadas que involucran bases de datos externas o lógica del lado del servidor.

Más como este