FullFront: Benchmarking MLLMs Across the Full Front-End Engineering Workflow

Haoyu Sun; Huichen Will Wang; Jiawei Gu; Linjie Li; Yu Cheng

cs.CLMay 23, 2025

FullFront: Benchmarking MLLMs Across the Full Front-End Engineering Workflow

Authors: Haoyu Sun, Huichen Will Wang, Jiawei Gu, Linjie Li, Yu Cheng

Organizations: Tongji University · University of Washington · Sun Yat-sen University · Microsoft · The Chinese University of Hong Kong

Abstract

Front-end engineering involves a complex workflow where engineers conceptualize designs, translate them into code, and iteratively refine the implementation. While recent benchmarks primarily focus on converting visual designs to code, we present FullFront, a benchmark designed to evaluate Multimodal Large Language Models (MLLMs) \textbf{across the full front-end development pipeline}. FullFront assesses three fundamental tasks that map directly to the front-end engineering pipeline: Webpage Design (conceptualization phase), Webpage Perception QA (comprehension of visual organization and elements), and Webpage Code Generation (implementation phase). Unlike existing benchmarks that use either scraped websites with bloated code or oversimplified LLM-generated HTML, FullFront employs a novel, two-stage process to transform real-world webpages into clean, standardized HTML while maintaining diverse visual designs and avoiding copyright issues. Extensive testing of state-of-the-art MLLMs reveals significant limitations in page perception, code generation (particularly for image handling and layout), and interaction implementation. Our results quantitatively demonstrate performance disparities across models and tasks, and highlight a substantial gap between current MLLM capabilities and human expert performance in front-end engineering. The FullFront benchmark and code are available in https://github.com/Mikivishy/FullFront.

Figures & tables

Figure 1: Mapping the full front-end workflow to FullFront’s tasks: (1) Conceptualization assessed by Webpage Design, (2) Comprehension by Webpage Perception QA, and (3) Implementation by Webpage Code Generation.

Figure 2: Overview of the eight subtasks FullFront covers and our data construction pipeline.

Figure 3: Comparison of the screenshots used in FullFront for webpage code generation tasks with those of other benchmarks. We are the first to not use a single image placeholder or random images.

Model	Gemini Visual Score	CLIP Score	DINOv2 Score	Human Score
GPT-4o	5.0450	0.7445	0.5598	6.9600
gemini-2.0-flash-exp- image-generation	2.0190	0.6901	0.4798	6.0400

Table 1: Evaluation results of Webpage Design task. We mark the better results with bold font.

Model	Real-world	Synthetic	Multi-window
Qwen2.5-VL-72B-Instruct	0.4696	0.4950	0.4267
InternVL2.5-78B	0.4696	0.5050	0.4267
InternVL3-78B	0.4816	0.5375	0.4600
LLaVA-Onevision-72B	0.3296	0.3275	0.2733
Claude 3.7 Sonnet	0.5464	0.5325	0.4533
Gemini 2.5 Flash	0.4800	0.4250	0.3867

Table 2: Evaluation results on three Webpage Perception QA tasks. Most models are evaluated on FullFront . Models marked with ∗ (e.g., o1, Gemini 2.5 Pro, Human Expert) are evaluated on FullFront-mini .

Model	Code Score				Gemini Visual Score				CLIP Score				DINOv2 Score
Model	Ref	Img	Inter	Text	Ref	Img	Inter	Text	Ref	Img	Inter	Text	Ref	Img	Inter	Text
Qwen2.5-VL-72B-Instruct	0.53	0.40	0.40	0.49	6.21	4.48	6.22	5.18	0.79	0.72	0.76	0.73	0.63	0.49	0.67	0.47
InternVL2.5-78B	0.36	0.33	0.30	0.50	5.03	4.01	3.51	5.44	0.74	0.74	0.69	0.74	0.67	0.57	0.58	0.48
InternVL3-78B	0.49	0.42	0.38	0.50	5.87	4.47	4.48	4.91	0.77	0.73	0.73	0.72	0.61	0.53	0.60	0.44
LLaVA-Onevision-72B	0.33	0.14	0.06	0.41	4.90	1.89	0.45	5.13	0.73	0.65	0.58	0.74	0.66	0.42	0.17	0.50
Claude 3.7 Sonnet	0.63	0.64	0.55	0.64	8.36	8.93	9.18	8.14	0.88	0.89	0.86	0.87	0.80	0.81	0.82	0.78

Table 3: Evaluation results of different models on four Webpage Code Generation tasks. Ref: Code Refinement; Img: Image to Code; Inter: Interaction Authoring; Text: Text to Code. We mark the best results with bold font and the second best with underline.

Model	Ref	Image	Inter	Text
Qwen2.5-VL-72B-Instruct	6.18	5.72	7.02	4.90
InternVL2.5-78B	5.36	4.78	5.04	4.24
InternVL3-78B	6.32	5.56	5.44	4.62
LLaVA-Onevision-72B	5.64	2.96	0.58	4.42
Claude 3.7 Sonnet	8.00	8.48	8.80	8.10
Gemini 2.5 Flash	8.44	8.40	7.86	8.24

Table 4: Human Evaluation of MLLM-generated webpages on FullFront-mini.

Figure 4: MLLM Errors in Webpage Perception QA. (a) Distribution of error types for 200 questions. (b) An illustrative example of a Positioning Error. (c) An illustrative example of a Size Error.

Model	$p\checkmark c\checkmark$	$p\checkmark c\times$	$p\times c\checkmark$	$p\times c\times$
Qwen2.5-VL-72B-Instruct	22	28	10	40
InternVL3-78B	25	23	8	44
GPT-4o	32	13	21	34
Claude 3.7 Sonnet	44	3	36	17
Gemini 2.5 Flash	39	5	25	31
GPT-5	48	6	31	15

Table 5: Confusion matrix of Perception accuracy vs. Code Implementation accuracy on 100 samples from Synthetic QA.

p

: Perception correctness;

c

: Code implementation correctness.

Model	Perc.	Code Score	G-Vis Score	CLIP Score	DINO Score
Qwen2.5-VL -72B-Instruct	Cor. (46)	0.386	4.430	0.705	0.409
Qwen2.5-VL -72B-Instruct	Wrg. (48)	0.405	5.117	0.753	0.529
InternVL3-78B	Cor. (59)	0.418	4.444	0.736	0.554
InternVL3-78B	Wrg. (42)	0.409	4.422	0.715	0.486
GPT-4o	Cor. (43)	0.336	6.007	0.799	0.672
GPT-4o	Wrg. (56)	0.342	5.896	0.809	0.697

Table 6: Detailed breakdown by perception accuracy. Perc. : Perception Group ( Cor. : Correct; Wrg. : Wrong; value in parentheses denotes

N

); G-Vis Score : Gemini Visual Score.

Figure 5: Three common errors in Webpage Code Generation. (a) Abnormal Image Size, where an image within the rendered page is disproportionately large. (b) Blank Page, showing an entirely blank rendered output. (c) Isolation Error, an output consisting only of an isolated interactive element.

Model	Size				Blank				Isolation
Model	Ref	Img	Inter	Text	Ref	Img	Inter	Text	Inter
Qwen2.5-VL-72B-Instruct	38	62	11	84	8	4	2	3	2
InternVL2.5-78B	5	20	2	76	2	14	12	4	11
InternVL3-78B	6	20	5	95	5	14	10	1	1
LLaVA-Onevision-72B	1	22	3	64	5	45	1	9	88
Claude 3.7 Sonnet	2	1	0	3	3	0	0	0	0

Table 7: Counts of three error types in Webpage Code Generation tasks. Size: Abnormal Image Size; Blank: Blank Page; Isolation: Isolation Error.

Model	Structure	Text	Image	Form
Qwen2.5-VL-72B-Instruct	0.51	0.19	0.54	0.41
InternVL2.5-78B	0.43	0.11	0.52	0.34
InternVL3-78B	0.49	0.15	0.61	0.42
LLaVA-Onevision-72B	0.29	0.06	0.38	0.23
Claude 3.7 Sonnet	0.72	0.39	0.65	0.53
Gemini 2.5 Flash	0.70	0.40	0.71	0.51

Table 8: Average code-level performance metrics across four Webpage Code Generation subtasks.

Appendix figures & tables50 assets

Supplementary material from the paper’s appendix.

Appendix

Figure 6: Comparative Webpage Designs: Ground Truth (“Label Image”) vs. gemini-2.0-flash-exp-image-generation and GPT-4o.

Figure 7: Results of GPT-4o and gemini-2.0-flash-exp-image-generation on the Webpage Design task.

Figure 8: A sample case in Real-world QA.

Figure 9: A sample case in Synthetic QA.

Figure 10: A sample case in Multi-window QA.

Figure 11: OmniParser extracting UI elements from a webpage screenshot. (a) Original webpage screenshot. (b) Webpage screenshot with UI elements detected and bounded by OmniParser.

Figure 12: The 15 predefined image categories used in FullFront for standardized image representation.

Figure 13: A sample case in Image to Code.

Figure 14: A sample case in Image to Code.

Figure 15: A sample case in Code Refinement.

Figure 16: A sample case in Code Refinement.

Figure 17: A sample case in Text to Code.

Figure 18: A sample case in Text to Code.

Model	Interaction Success Rate	Interaction Success Rate (mini)
Qwen2.5-VL-72B-Instruct	57.00	64.00
InternVL2.5-78B	47.00	54.00
InternVL3-78B	48.00	56.00
LLaVA-Onevision-72B	16.00	24.00
Claude 3.7 Sonnet	78.00	86.00
Gemini 2.5 Flash	70.00	72.00

Appendix

Table 9: Interaction success rate (%). “(mini)” indicates the results on the FullFront-mini.

Model	C1	C2	C3	C4	C5	C6	H1	H2	H3	H4
Qwen2.5-VL-72B-Instruct	9	7	6	7	5	8	3	2	2	8
InternVL2.5-78B	7	6	6	8	4	6	0	2	4	4
InternVL3-78B	7	3	5	7	6	4	1	7	1	7
LLaVA-Onevision-72B	8	0	7	0	0	0	0	0	0	1
Claude 3.7 Sonnet	9	8	5	10	9	9	6	3	9	10
Gemini 2.5 Flash	7	9	6	9	8	9	6	1	8	7

Appendix

Table 10: Performance of MLLMs across ten distinct interaction categories (C1-C6 for click-based, H1-H4 for hover-based) in the Interaction Authoring subtask. Each category comprises 10 test cases.

Figure 19: A sample case in Interaction Authoring.

Figure 20: A sample case in Interaction Authoring.

Model	Gemini Visual Score $\uparrow$	Clip Score $\uparrow$	Code Score $\uparrow$	DINOv2 Score $\uparrow$
Qwen2.5-VL-72B-Instruct	5.1750	0.7313	0.4854	0.4665
InternVL2.5-78B	5.4444	0.7366	0.4989	0.4824
InternVL3-78B	4.9144	0.7204	0.4969	0.4405
LLaVA-Onevision-72B	5.1273	0.7365	0.4129	0.5006
Claude 3.7 Sonnet	8.1358	0.8655	0.6436	0.7790
Gemini 2.5 Flash	8.0111	0.8660	0.5927	0.7929

Appendix

Table 11: Performance Comparison of MLLMs and Text-Only LLMs on the Text to Code Subtask.

Figure 22: A qualitative comparison of webpages generated by leading text-only LLMs on the Text to Code subtask.

Figure 23: A qualitative comparison of webpages generated by leading text-only LLMs on the Text to Code subtask.

Figure 24: Rendered outputs from various MLLMs for the “NAVI PILLAY” webpage section. Despite failing the perceptual QA task regarding the tag’s position relative to the title, all these MLLMs correctly implement the “Human Rights Advocate” tag above the main “NAVI PILLAY” title in their generated code.

Figure 25: Quadrant 1 ( $p\checkmark c\checkmark$ ): Examples where GPT-5 correctly perceives spatial relationships (top: vertical alignment; bottom: left alignment) and successfully implements them in code.

Figure 26: Quadrant 2 ( $p\checkmark c\times$ ): Examples of Coding Bottlenecks. Qwen2.5-VL (top) and InternVL3 (bottom) correctly answer the perceptual questions but fail to translate this understanding into the correct layout or element arrangement.

Figure 27: Quadrant 3 ( $p\times c\checkmark$ ): Examples of Grounding Failure / Implicit Correction. GPT-5 hallucinates non-existent spacing (top) or alignment issues (bottom) in the QA phase but relies on strong priors to generate the correct, standard design patterns in the final code.

Figure 28: Quadrant 4 ( $p\times c\times$ ): Examples of total failure. GPT-4o fails to perceive button styles (top) and element positioning (bottom), leading to code that either applies incorrect styles or omits key elements entirely.

Panel of Figure 29 — Figure 29: Gemini Visual Score Prompt.

Metric	Ref	Img	Inter	Text	Average
Gemini Visual Score	0.9394	0.9273	0.9394	0.9394	0.9364
Code Score	0.8909	0.9152	0.9515	0.9030	0.9152
Clip Score	0.9394	0.9152	0.9879	0.7333	0.8939
DINOv2 Score	0.9030	0.9030	0.9394	0.8061	0.8879

Appendix

Table 12: Spearman’s Correlation Coefficient (

\rho

) between Automatic Metrics and Human Preference Rankings. A higher value indicates a stronger alignment with human judgment. The best-performing metric in each column is marked in bold , and the second-best is underlined .

Model	Parameter Setting	Source	URL
Qwen2.5-VL-72B-Instruct	temperature = 0.0	local checkpoint	https://huggingface.co/Qwen/Qwen2.5-VL-72B-Instruct
InternVL2.5-78B	temperature = 0.0	local checkpoint	https://huggingface.co/OpenGVLab/InternVL2_5-78B
InternVL3-78B	temperature = 0.0	local checkpoint	https://huggingface.co/OpenGVLab/InternVL3-78B
LLaVA-Onevision-72B	temperature = 0.0	local checkpoint	https://huggingface.co/llava-hf/llava-onevision-qwen2-72b-ov-hf
R1-Distill-Llama-8b	temperature = 0.0	local checkpoint	https://huggingface.co/deepseek-ai/DeepSeek-R1-Distill-Llama-8B
Claude 3.7 Sonnet	temperature = 0.0	claude-3-7-sonnet-20250219	https://www.anthropic.com/

Appendix

Table 13: The sources of models used in the experiments and the hyperparameters configuration.

Figure 31: Human evaluation comparing MLLM-generated and Real-World webpages.

Model	Aes(w)	Aes(t)	Aes(l)	Inf(w)	Inf(t)	Inf(l)
Qwen2.5-VL-72B-Instruct	15.2	34.4	50.4	13.8	38.4	47.8
InternVL2.5-78B	18.6	28.8	52.6	29.8	38.2	32.0
InternVL3-78B	23.6	33.4	43.0	34.6	34.0	31.4
LLaVA-Onevision-72B	6.0	10.8	83.2	7.6	25.0	67.4
Claude 3.7 Sonnet	80.0	15.6	4.4	62.8	29.0	8.2
Gemini 2.5 Flash	75.4	16.6	8.0	63.2	27.8	9.0

Appendix

Table 14: Human Preference for MLLM vs. Real-World Webpages on Aesthetic and Informational Criteria.

Model	Code Score			Gemini Visual Score			CLIP Score			DINOv2 Score			Human Score
Model	Ref	Img	Text	Ref	Img	Text	Ref	Img	Text	Ref	Img	Text	Ref	Img	Text
Qwen2.5-VL-72B-Instruct	0.27	0.35	0.34	4.05	4.85	5.83	0.69	0.69	0.76	0.48	0.47	0.57	6.16	4.16	5.62
InternVL3-78B	0.27	0.34	0.26	5.93	5.96	5.08	0.72	0.72	0.73	0.45	0.51	0.54	5.97	5.03	5.75
Claude 3.7 Sonnet	0.54	0.51	0.41	8.79	8.60	6.24	0.80	0.79	0.74	0.68	0.67	0.54	8.30	8.52	6.46
Gemini 2.5 Flash	0.48	0.48	0.38	8.07	8.27	6.20	0.80	0.79	0.78	0.69	0.67	0.62	7.87	7.62	6.15
GPT-4o	0.53	0.47	0.33	7.17	6.78	6.19	0.76	0.74	0.75	0.53	0.52	0.59	6.38	5.76	5.69

Appendix

Table 15: Performance of six representative models on the new Grok-4 constructed dataset (300 samples). We report detailed scores across three subtasks: Code Refinement ( Ref ), Image to Code ( Img ), and Text to Code ( Text ). The last row, Spearman

\rho

(IRR) , represents the rank correlation between the specific metric and Human Score across the 6 models for that subtask.

Evaluated Model	Human Judge	Gemini 2.5 Flash Judge	Claude 3.7 Sonnet Judge	Grok 4 Judge	Qwen3-VL Judge
GPT-5	8.50 (R1)	8.87 (+0.37, R1)	7.67 (-0.83, R1)	9.02 (+0.52, R1)	8.92 (+0.42, R1)
Claude 3.7 Sonnet	8.35 (R2)	8.73 (+0.39, R2)	7.51 (-0.84, R2)	8.97 (+0.63, R2)	8.83 (+0.49, R2)
Gemini 2.5 Flash	8.23 (R3)	8.61 (+0.38, R3)	7.38 (-0.86, R3)	8.92 (+0.68, R3)	8.70 (+0.46, R3)
GPT-4o	6.67 (R4)	6.72 (+0.05, R4)	5.93 (-0.74, R4)	8.19 (+1.52, R4)	7.34 (+0.67, R4)
Qwen2.5-VL-72B	5.96 (R5)	5.98 (+0.02, R5)	5.31 (-0.65, R5)	8.13 (+2.17, R5)	6.51 (+0.55, R5)
InternVL3-78B	5.49 (R6)	5.34 (-0.15, R6)	4.96 (-0.53, R6)	7.98 (+2.50, R6)	6.13 (+0.65, R6)

Appendix

Table 16: Cross-Judge Validation Results. Aggregated performance across 200 representative samples. The table compares human expert scores against four automated judges. Format: Score (Bias vs. Human, Rank) . Bias indicates the average deviation from human scores. Inter-rater Reliability (IRR) is measured by Spearman

\rho

and Intraclass Correlation (ICC) against human ground truth. Kendall’s

\tau

measures the alignment of the resulting model leaderboard with the human-derived leaderboard.

Judge Model	Avg. Score $\pm$ Std Dev	Inter-Run Correlation
Gemini 2.5 Flash	7.38 $\pm$ 0.080	0.965
Claude 3.7 Sonnet	6.46 $\pm$ 0.300	0.876
Grok 4	8.53 $\pm$ 1.097	0.410
Qwen3-VL-235B-A22B-Instruct	7.74 $\pm$ 0.079	0.972

Appendix

Table 17: Test-Retest Reliability of Automated Judges. Metrics are calculated across three independent inference runs to assess the stability of the judges. High Inter-Run Correlation indicates that the judge produces consistent scores for the same input across different trials.

Experiment Condition	Gemini Visual Score $\uparrow$	Code Score $\uparrow$	CLIP Score $\uparrow$	DINOv2 Score $\uparrow$
Experiment Condition	(0-10 scale)	(0-1 scale)	(0-1 scale)	(0-1 scale)
Baseline (Original HTML)	10.00	1.00	1.00	1.00
Exp 1: Valid Alternative	9.266	0.952	0.969	0.942
Penalty ( $\Delta_{1}$ )	-0.734	-0.048	-0.031	-0.058
Exp 2: Broken Implementation	6.838	0.727	0.846	0.760
Penalty ( $\Delta_{2}$ )	-3.162	-0.273	-0.154	-0.240

Appendix

Table 18: Sensitivity Analysis of Evaluation Metrics on 50 Selected Samples. We quantify the score penalty (

\Delta

) imposed by different metrics on “Syntactic Variations” (Exp 1, valid alternatives) versus “Semantic Violations” (Exp 2, breaking errors). Code Score has the largest punishment ratio among the tested metrics, while its non-zero valid-alternative penalty confirms that it remains reference-relative.

Intervention	Model	Eligible Cases	Target Outcome	Rate
QA-relevant crop ( $p\checkmark c\times$ )	Qwen2.5-VL-72B-Instruct	28	22 corrected	78.6%
QA-relevant crop ( $p\checkmark c\times$ )	InternVL3-78B	23	18 corrected	78.3%
Counterfactual local edit ( $p\times c\checkmark$ )	Gemini 2.5 Flash	25	18 edits ignored	72.0%
Counterfactual local edit ( $p\times c\checkmark$ )	GPT-5	31	21 edits ignored	67.7%

Appendix

Table 19: Controlled interventions on the two off-diagonal perception–implementation behaviors. For the crop intervention, the target outcome is correction of the queried local implementation. For the counterfactual intervention, the reported outcome is failure to follow the newly edited local relation.

Model	Perception QA Accuracy			Image-to-Code				Text-to-Code
Model	Real	Synth.	Multi.	Code	GVS	CLIP	DINOv2	Code	GVS	CLIP	DINOv2
Qwen2.5-VL-72B-Instruct	0.4696	0.4950	0.4267	0.40	4.48	0.72	0.49	0.49	5.18	0.73	0.47
InternVL3-78B	0.4816	0.5375	0.4600	0.42	4.47	0.73	0.53	0.50	4.91	0.72	0.44
Claude 3.7 Sonnet	0.5464	0.5325	0.4533	0.64	8.93	0.89	0.81	0.64	8.14	0.87	0.78
GPT-5	0.5816	0.5775	0.5467	0.56	8.58	0.88	0.81	0.59	8.48	0.88	0.79
Qwen3.5-122B-A10B	0.5848	0.5925	0.5667	0.55	7.46	0.84	0.73	0.57	7.25	0.82	0.69

Appendix

Table 20: Results for four newer frontier models and four representative original models on the shared full evaluation sets. GVS denotes Gemini Visual Score. QA accuracy, Code Score, CLIP, and DINOv2 range from 0 to 1; GVS ranges from 0 to 10. Bold indicates the best value in each column.

Panel of Figure 32 — Figure 32: Prompt – GPT-4o Generate QA Pairs.

Panel of Figure 33 — Figure 33: Prompt – GPT-4o Generate HTML-v1.

Panel of Figure 34 — Figure 34: Prompt – Claude 3.7 Sonnet Generate HTML-v2.

Panel of Figure 35 — Figure 35: Prompt – Claude 3.7 Sonnet Generate Webpage Description.

Panel of Figure 36 — Figure 36: Prompt – Webpage Design Evaluation.

Panel of Figure 37 — Figure 37: Webpage Perception QA Evaluation.

Panel of Figure 38 — Figure 38: Prompt – Image to Code Evaluation.

Panel of Figure 39 — Figure 39: Prompt – Interaction Authoring Evaluation.

Panel of Figure 40 — Figure 40: Prompt – Click Interaction

Panel of Figure 41 — Figure 41: Prompt – Hover Interaction.

Panel of Figure 42 — Figure 42: Prompt – Text to Code Evaluation.

Panel of Figure 43 — Figure 43: Prompt – Code Refinement Evaluation.

Explore similar work

Benchmarking Multimodal LLMs on Code Generation for Complex Interactive Webpages
May 29, 2026Fan Wu, Lishuai Dong, Cuiyun Gao +4Web Code Generation
Computer Science and Technolog, Harbin Institute of Technology. · Institute of Information Engineering, Chinese Academy of Sciences.
WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models
Apr 20, 2026Xinping Lei, Xinyu Che, Junqi Xiong +16Multimodal Evaluation Evaluation Benchmarks
Nanjing University · Kuaishou Technology
LiveEvalBench: Toward Open-World Evaluation for Web Generation
Aug 4, 2026Yiyao Wang, Zhen Wen, Yinghao Tang +5Evaluation Benchmarks Diversity
State Key Lab of CAD&CG, Zhejiang University · Ant Group · State Key Lab of CAD&CG, Zhejiang University; Laboratory of Art and Archaeology Image (Zhejiang University), Ministry of Education, China

May 29, 2026, cs.SEJ/K move · Enter open · S save

Benchmarking Multimodal LLMs on Code Generation for Complex Interactive Webpages

Fan Wu, Lishuai Dong, Cuiyun Gao, Yujia Chen+3

Computer Science and Technolog, Harbin Institute of Technology. · Institute of Information Engineering, Chinese Academy of Sciences.

Web Code Generation Multimodal Reasoning

Open paper AskPDF arXiv

Recent advancements in multimodal large language models (MLLMs) have achieved remarkable progress in multimodal reasoning and code generation, catalyzing a new paradigm for front-end development. In particular, these models can directly transform visual designs into executable code, significantly improving the efficiency and adaptability of web development. Modern web applications are dynamic and interactive, featuring frequent user-page interactions. However, existing benchmarks largely evaluate the code generation of static webpages, ignoring the complex interactive behaviors in real-world applications. Besides, their evaluation criteria remain confined to visual fidelity and code structure, overlooking the interaction consistency between the generated and the reference webpages. To address these limitations, we introduce WebIGBench, the first benchmark designed to evaluate code generation for interactive webpages with complex interactions. By combining manually designed interaction paths with UI automation, we collected 103 complex webpages from real-world websites. This benchmark covers 5 popular interactive action types (e.g., click, input) involving 871 distinct interactive actions. Moreover, we propose a novel evaluation pipeline to address the gap in automated assessment of interactive actions. Extensive experiments on several representative MLLMs reveal the performance boundaries of current models in interactive webpage code generation using WebIGBench. The proposed benchmark is available at https://github.com/anoa12159-hue/WebIGBench_eval.

Abstract

Explore similar work

Benchmarking Multimodal LLMs on Code Generation for Complex Interactive Webpages

WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models

LiveEvalBench: Toward Open-World Evaluation for Web Generation