🤖 AI

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

Dit artikel introduceert LongWebBench, een uitgebreide benchmark die is ontworpen om de structurele getrouwheid en functionele uitvoerbaarheid van langdurige webpagina-generatie door vision-language modellen te evalueren, waarbij wordt onthuld dat huidige state-of-the-art systemen moeite hebben met langetermijncoherentie en interactieve mogelijkheden ondanks visuele plausibiliteit.

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

Gepubliceerd 2026-06-17

📖 3 min leestijd☕ Koffiepauze-leesvoer

CC BY 4.0

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

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 getalenteerde architect inhuurt om een huis te bouwen op basis van één enkele, enorme foto van een landhuis.

Het Probleem:
Tot nu toe vroegen de meeste tests voor AI-"architecten" (genaamd Vision-Language Modellen) hen alleen om kleine, eenkamerige huisjes te bouwen. Deze tests controleerden of de voordeur er goed uitzag of dat de verfkleur overeenkwam. Maar echte websites zijn als enorme landhuizen met tientallen kamers, meerdere verdiepingen en complexe bedrading. Als je een AI vraagt om een heel landhuis te bouwen op basis van één foto, kan het de voordeur wel goed krijgen, maar vergeet het hoe de trap verbonden moet worden met de tweede verdieping, of bouwt het een keuken die er echt uitziet, maar waar geen werkende kraan zit.

De Oplossing: LongWebBench
De auteurs van dit artikel hebben een nieuwe, moeilijkere test ontwikkeld genaamd LongWebBench. In plaats van alleen te controleren of het huis op de foto lijkt, controleren ze twee dingen:

De Blauwdruk (Structuur): Maakt het hele gebouw ergens zin van? Liggen de kamers in de juiste volgorde? Is het dak verbonden met de muren?
De Waterleiding & Elektriciteit (Functionaliteit): Als je de kraan opendraait, komt er dan water uit? Als je de lichtschakelaar omzet, gaat het licht dan aan?

Hoe ze de test hebben gebouwd:
Ze hebben twee enorme collecties echte "foto's van landhuizen" (lange webpagina's) verzameld:

490 "Look-Alike" Tests: Ze namen foto's van zeer lange websites (sommige zo lang dat je wel 30 schermen naar beneden zou moeten scrollen om de onderkant te zien). Ze vroegen AI-modellen om de code voor deze pagina's te recreëren. De test controleerde of de AI de lay-out consistent kon houden van de bovenkant van de pagina tot aan de absolute onderkant.
507 "Do-It" Tests: Ze kozen 129 websites en gaven de AI specifieke taken, zoals "Zoek een vlucht naar Tokio", "Voeg een artikel toe aan de winkelwagen" of "Filter de zoekresultaten". De AI moest code schrijven die deze dingen daadwerkelijk deed in een echte webbrowser, in plaats van alleen maar te doen alsof.

De Resultaten: De "Reality Gap"
Toen ze de beste AI-modellen door deze nieuwe test lieten gaan, ontdekten ze enkele verrassende zaken:

Het "Lange Scroll"-probleem: Naarmate de websites langer werden, verslechterde het vermogen van de AI om de structuur correct te houden. Het is alsof een architect een perfecte eerste verdieping kan ontwerpen, maar vergeet hoe de tweede verdieping ermee verbonden moet worden.
Het "Nep Huis"-probleem: Veel AI's bouwden websites die er prachtig en realistisch uitzagen (zoals een filmset), maar wanneer je op een knop probeerde te klikken of een formulier wilde invullen, gebeurde er niets. De "waterleidingen" waren kapot.
Het Input-probleem: Zelfs toen de onderzoekers de lange foto in kleinere stukjes braken om het de AI makkelijker te maken om te zien, had de AI nog steeds moeite om de stukjes samen te voegen tot een werkend geheel.

De Conclusie
Het artikel concludeert dat we AI niet alleen kunnen beoordelen op hoe mooi hun tekeningen eruitzien. Om echt nuttig te zijn, moet een AI in staat zijn om lange, complexe websites te bouren die ook daadwerkelijk werken wanneer je ermee interacteert. LongWebBench is de nieuwe liniaal die zij gebruiken om dit te meten, en het laat ons zien dat hoewel AI goed wordt in tekenen, het nog een lange weg te gaan heeft voordat het een volledig functioneel digitaal huis kan bouwen.

Technische Samenvatting: LongWebBench

Probleemstelling
Recente vooruitgang in Vision-Language Models (VLM's) heeft aangetoond dat zij de capaciteit hebben om front-end code (HTML, CSS, JavaScript) te genereren vanuit visuele inputs zoals screenshots van webpages. Bestaande evaluatiebenchmarks richten zich echter primair op korte, enkelvoudige schermen en grotendeels statische webpages, waarbij het succes wordt gemeten via lokale visuele gelijkenis. Dit creëert een aanzienlijke "reality gap" bij toepassing op real-world webpages, die vaak meerdere schermen beslaan, herhaalde componenten bevatten, stijlconsistentie over verre secties vereisen en complexe, meerstaps gebruikersinteracties ondersteunen. Huidige evaluaties slagen er niet in om te beoordelen of modellen in staat zijn de globale structuur over lange contexten te behouden of uitvoerbare logica te genereren voor doelgerichte taken.

Methodologie
Om deze kloof te overbruggen, introduceren de auteurs LongWebBench, een benchmark die is ontworpen om langdurige webpage-generatie te evalueren vanuit zowel structurele als functionele perspectieven. De benchmark bestaat uit twee complementaire taken:

Webpage Visual Fidelity Replication (W-VFR):
- Doel: Evalueren of een model de globale visuele structuur van een lange webpage kan reproduceren.
- Dataset: 490 real-world lange webpages (gedefinieerd als langer dan drie viewport-hoogtes bij 1920×1080 resolutie) verdeeld over zeven structurele categorieën (bijv. informatieve artikelen, productpagina's, overheidswebsites).
- Evaluatieprotocol: Een multidimensionale VLM-gebaseerde metriek (gebruikmakend van GPT-4o) scoort gegenereerde weergaven tegen referentie-screenshots op een schaal van 0–10 over vijf dimensies: paginaschaal/scroll-consistentie, globale lay-out, sectiehiërarchie, lokale visuele styling en informatiedichtheid. Lokale styling wordt verder aangevuld met DINO-gebaseerde feature-gelijkenis.
- Input-instellingen: Ondersteunt zowel single-image (volledige screenshot) als multi-image (opgedeeld in viewport-grote tegels) inputs om onderscheid te maken tussen resolutiebeperkingen en long-context redeneren.
Webpage Functional Fidelity Realization (W-FFR):
- Doel: Evalueren of een model een uitvoerbare webpage kan genereren die specifieke gebruikersdoelen ondersteunt.
- Dataset: 507 doelgerichte interactietaken verdeeld over 129 webpages, dekkend over 13 functionele categorieën (bijv. e-commerce, reizen, datavisualisatie).
- Evaluatieprotocol: Een door DOM versterkte agent-gebaseerde pipeline voert de gegenereerde code uit in een browseromgeving. Een controller coördineert een "actor"-agent om voorgeschreven acties uit te voeren en een "critic"-agent (aangedreven door Gemini-3-Pro) om te verifiëren of de resulterende DOM en paginastatus voldoen aan de taakspecificatie.
- Metrieken: Step Success Rate (SSR), Task Success Rate (TSR) en Page Success Rate (PSR).

Belangrijkste Bijdragen

Benchmark Creatie: De introductie van LongWebBench, de eerste benchmark die gezamenlijk langdurige structurele coherentie en uitvoerbare meerstaps interacties voor webpage-generatie evalueert.
Dataset Constructie: De curatie van 490 lange webpages voor structurele getrouwheid en 507 interactietaken voor functionele verificatie, wat zorgt voor diversiteit in lay-out, inhoudsdichtheid en interactiecomplexiteit.
Evaluatieprotocollen: Het ontwerp van complementaire protocollen: een VLM-gebaseerde metriek voor structurele getrouwheid en een agent-gebaseerde executie-pipeline voor functionele verificatie, gevalideerd via menselijke overeenkomst-analyse en cross-judge robuustheidscontroles.
Empirische Analyse: Een uitgebreide evaluatie van state-of-the-art open-source en propriëtaire VLM's onder zowel single-image als multi-image instellingen.

Experimentele Resultaten
Experimenten uitgevoerd op modellen zoals GPT-5.2, Gemini-3-Pro, Claude-Opus-4.5 en diverse open-source modellen (bijv. GLM-4.6V, Qwen3-VL) onthullen het volgende:

Structurele Getrouwheid: Prestaties degraderen over het algemeen naarmate de webpage langer wordt. Hoewel multi-image inputs de resolutiebeperkingen verlichten, lossen ze de uitdagingen in globale lay-outplanning en cross-segment integratie niet volledig op. Zelfs de best presterende modellen behalen slechts matige structurele getrouwheidsscores op zeer lange pagina's.
Functionele Getrouwheid: Uitvoerbare interactie is aanzienlijk uitdagender dan visuele reconstructie. Modellen met hoge Step Success Rates (SSR) vertonen vaak veel lagere Task Success Rates (TSR) en Page Success Rates (PSR), wat wijst op foutaccumulatie in meerstaps workflows. Bijvoorbeeld, topmodellen behaalden SSR's boven de 86%, maar TSR's rond de 58–59%, waarbij PSR's onder de 22% bleven.
Lengtegevoeligheid: Zowel structurele getrouwheid als functionele succesrates dalen naarmate het aantal viewports (voor structuur) of interactiestappen (voor functie) toeneemt, wat de moeilijkheid benadrukt om status en logica over lange horizonten te behouden.
Evaluatiebetrouwbaarheid: Automatische evaluatieprotocollen vertoonden een sterke overeenkomst met menselijke oordelen (Pearson $r = 0.83$ voor W-VFR; consistentie >0.89 voor W-FFR) en een hoge robuustheid over verschillende judge-modellen heen.

Betekenis en Claims
Het artikel stelt dat LongWebBench een kritieke beperking in de huidige VLM-capaciteiten blootlegt: het onvermogen om lange webpages te genereren die zowel structureel coherent als functioneel uitvoerbaar zijn. De auteurs betogen dat het evalueren van webpage-generatie uitsluitend op basis van statische visuele gelijkenis onvoldoende is. In plaats daarvan moet uitvoerbare interactie worden beschouwd als een kerncriterium. De benchmark dient als een diagnostische testomgeving om aan te tonen dat hoewel modellen visueel plausibele outputs kunnen produceren, ze vaak falen in het ondersteunen van de complexe, meerstaps gebruikersdoelen die vereist zijn in real-world webapplicaties. Het werk onderstreept de noodzaak voor toekomstige modellen om de long-range structurele redenering en interactielogica-synthese te verbeteren.

Beperkingen
De auteurs merken op dat LongWebBench zich richt op gestabiliseerde, gerenderde front-ends en zaken zoals authenticatie, personalisatie, live backend-services en onbegrensde infinite scrolling uitsluit. Bij consequent evalueert de benchmark de front-end structuur en observeerbaar gedrag, in plaats van de volledige complexiteit van uitgerolde webapplicaties die betrokken zijn bij externe databases of server-side logica.

Meer zoals dit