Interactive webpages underpin modern applications, but reproducing both their visual appearance and multi-step behavior remains challenging for multimodal large language models. Scalable training data must capture user actions, state transitions, and expected outcomes, while real-world webpage code is often entangled with irrelevant scripts and external dependencies. Moreover, existing GUI-agent-based verification provides slow and potentially unstable functional feedback. To address these challenges, this article proposes InterWebCoder, an efficient framework for interactive webpage code generation. InterWebCoder introduces a Test-Specification-Guided and Execution-Verified Data Synthesis pipeline that records real-world interaction trajectories and synthesizes self-contained webpage code with executable test scripts. A failure-attributed repair mechanism uses runtime evidence to locate and iteratively fix errors in either the webpage code or test script. The pipeline then combines test-ID-weighted supervised fine-tuning with group-relative policy optimization, directly optimizing functional correctness and visual fidelity using test pass rates and state-level visual similarity. This replaces costly GUI-agent verification with fast, reproducible executable feedback. The pipeline produces 1,736 verified samples from 2,058 tasks, achieving an 84.35% synthesis success rate. On IWR-Bench and Vision2Web, InterWebCoder achieves final scores of 48.54 and 48.42 with a 9B backbone, outperforming 30B-level models and Gemini-3.7-Flash while remaining competitive with Claude-Sonnet-5. It reduces reward-computation latency by over 97%, eliminates external MLLM verification costs, and accelerates end-to-end training by up to 1.4x.
Challenges in Interactive Webpage Generation from Model Outputs
Modern web applications depend on interactive pages that respond to user input, maintain state across sessions, and transition between visual configurations. Generating such pages from scratch requires a model to simultaneously produce correct HTML markup, CSS styling, and JavaScript behavior. Multimodal large language models have made strides in code generation, but interactive webpages introduce compounding difficulties. A model must not only write syntactically valid code; it must also ensure that user interactions produce the expected visual and behavioral outcomes. Real-world webpages often embed third-party widgets, analytics scripts, and framework-specific boilerplate that obscure the core logic a generator needs to reproduce. Furthermore, verification of generated pages traditionally relies on GUI agents that simulate clicks, scrolls, and form submissions. These agents are computationally expensive, non-deterministic in their rendering, and slow to provide feedback, which limits the volume of training signal that can be generated within a reasonable time frame.
Another bottleneck is the lack of scalable datasets that pair interaction traces with clean, self-contained webpage code. Existing datasets either contain raw browser recordings with excessive noise, or synthetic examples that do not reflect the diversity of genuine user workflows. Without high-quality training data, models cannot learn the mapping from intended functionality to the code structures that realize it. The research community has therefore sought methods that can extract usable signals from noisy interaction logs while discarding irrelevant framework overhead.
Test-Specification-Guided and Execution-Verified Data Synthesis
InterWebCoder addresses the data scarcity problem through a pipeline that first records real-world interaction trajectories. These trajectories capture the sequence of user actions—clicks, text entries, navigation events—and the corresponding page state snapshots after each action. The system also records the final outcome that the user or test suite expects, such as a successful form submission or a specific visual arrangement. From these raw logs, the pipeline synthesizes self-contained webpage code. The generated code includes only the minimal HTML, CSS, and JavaScript necessary to reproduce the observed interactions, stripping away external dependencies and framework chatter. Each synthesized page is bundled with an executable test script that encodes the expected state transitions and outcome checks.
Crucially, the synthesis step is guided by the test specification. The test script defines the assertions that must pass for a generation to be considered successful. During code synthesis, the pipeline evaluates candidate webpages against these assertions, retaining only those that satisfy all checks. This test-aware filtering ensures that the resulting code is not merely syntactically correct but also functionally aligned with the desired behavior. The pipeline iterates over many random initializations and parameter configurations, each time measuring how well the generated page satisfies the test suite. Over repeated attempts, the system converges on code that both looks and behaves as intended.
Failure-Attributed Repair via Runtime Evidence
Even with guided synthesis, the initial generation may contain errors. These may manifest as missing event handlers, incorrect state mutations, or visual mismatches that only appear under specific user actions. InterWebCoder incorporates a failure-attributed repair mechanism that uses runtime evidence to pinpoint the source of an error. When a test fails, the mechanism captures the exact point of failure—the line of JavaScript that threw an exception, the CSS rule that produced an unexpected layout, or the missing attribute that prevented an interaction from proceeding. This runtime trace is then fed back into the repair loop, which attempts targeted fixes such as adding a missing event listener, adjusting a selector, or reordering state update statements.
The repair process is iterative. Each iteration applies a small edit, re-executes the test script, and checks whether the failure point has moved or been resolved. If the failure persists, the mechanism records the new runtime evidence and proposes another edit. This hill-climbing style search continues until all test assertions pass or a maximum number of iterations is reached. Because the repair operates on self-contained code units, it can be parallelized across many generated samples, accelerating the overall data generation rate.
Policy Optimization for Functional Correctness and Visual Fidelity
Beyond one-off repair, InterWebCoder trains a generative policy that can produce high-quality webpage code from scratch. The training objective combines two complementary signals. The first is test-ID-weighted supervised fine-tuning. In this phase, the model receives generated webpage-test pairs as training examples. Each pair carries a test ID that indicates the difficulty or category of the test. The weighting scheme gives higher importance to examples where the model previously struggled, forcing the policy to allocate more capacity to challenging scenarios.
The second signal is group-relative policy optimization. This reinforcement-learning-style objective evaluates a batch of generated webpages and assigns rewards based on test pass rates and visual similarity metrics. The group-relative comparison ensures that the policy is optimized relative to its own recent performance, rather than against an absolute threshold that may be too strict or too lenient for a given training stage. The reward function combines a functional correctness term—derived from whether all test assertions pass—and a visual fidelity term—derived from pixel-level or perceptual similarity between the generated page's state and the target state. By jointly optimizing these signals, the policy learns to produce pages that are both functionally correct and visually faithful to the desired output.
The combined objective directly optimizes the metrics that matter for interactive webpage generation: test pass rates and state-level visual similarity. Earlier approaches that relied on separate supervised and reinforcement learning stages often produced models that were strong in one area but weak in the other. InterWebCoder's joint training ensures that the generator receives gradient updates from both signals simultaneously, leading to a more balanced capability.
Benchmark Results and Model Capability Scaling
The InterWebCoder pipeline was evaluated on two established benchmarks: IWR-Bench and Vision2Web. Both benchmarks provide a set of tasks, each with a description of the desired webpage behavior and a set of test scripts that validate the output. On IWR-Bench, InterWebCoder achieved a final score of 48.54 using a 9-billion-parameter model backbone. On Vision2Web, the same configuration achieved a final score of 48.42. These scores place InterWebCoder above models with 30 billion parameters and above Gemini-3.7-Flash, a prominent multimodal model. The 9B model also remains competitive with Claude-Sonnet-5, which is regarded as a strong performer in code and reasoning tasks.
The strong performance of a 9B model relative to much larger counterparts is notable. It suggests that the test-specification-guided data synthesis and the joint policy optimization produce a more effective learning signal than simple next-token prediction on massive web corpora. The 84.35% synthesis success rate—computed as the fraction of 2,058 tasks for which the pipeline produced at least one fully passing generation—demonstrates that the majority of tasks are solvable within the framework. The verified sample count of 1,736 out of 2,058 tasks further confirms that the approach covers a broad range of webpage generation scenarios, from simple landing pages to multi-step forms with client-side validation.
Computational Efficiency and Cost Reduction
One of the most tangible benefits of InterWebCoder is the reduction in computational cost. Traditional GUI-agent verification requires running a headless browser for each generated page, executing the interaction sequence, and capturing screenshots or DOM diffs for comparison. This process is not only slow but also consumes significant GPU and CPU resources. InterWebCoder replaces this with executable test scripts that can be run in a lightweight interpreter. The framework reduces reward-computation latency by over 97% compared to GUI-agent-based verification, because test execution involves running assertions in-process rather than rendering and interacting with a full browser environment.
In addition to lower latency, the approach eliminates the need for external multimodal large model verification. Prior work often required a separate MLLM to evaluate whether a generated page matched a description or behaved correctly. That extra model inference step adds both monetary cost and latency. InterWebCoder's self-contained test scripts provide deterministic pass/fail feedback without calling an external model, effectively removing that cost category from the training pipeline.
The efficiency gains extend to end-to-end training time. By accelerating the data generation and verification steps, the total wall-clock time for a full training run is reduced by up to 1.4x. This means that researchers can iterate on model architectures and hyperparameters more quickly, which is particularly valuable in the early stages of a project where many experiments are run. The 1.4x acceleration is achieved without sacrificing generation quality; the same 84.35% success rate and benchmark scores are maintained.
Related Considerations and Open Directions
The success of InterWebCoder opens several avenues for future work. One area is the extension of the pipeline to more complex web applications that involve server-side state, authentication flows, and dynamic content loading from APIs. The current framework focuses on client-side interactive pages, but the same principles—test-guided synthesis, runtime repair, and policy optimization—could be adapted to capture and reproduce more of the full web application stack.
Another direction is the integration of more sophisticated visual similarity metrics. While the current approach uses state-level comparison that checks whether expected DOM elements are present and correctly styled, perceptual similarity models such as CLIP-based encoders could provide richer feedback about layout and styling nuances that are not captured by DOM-level checks alone. Combining DOM-level test pass with perceptual similarity could further raise the visual fidelity of generated pages.
The failure-attributed repair mechanism could also be enhanced with more structured edit operations. Currently, the mechanism applies low-level code edits such as inserting or removing a single statement. Future work could explore higher-level program transformations, such as refactoring a handler function or restructuring a state machine, which might achieve correct behavior in fewer iterations. Additionally, the repair could leverage code context from the broader repository to suggest edits that are consistent with the project's coding patterns and conventions.
On the benchmark side, the open-source validation framework specified in the paper provides a foundation for standardized evaluation. The framework measures not only root-cause identification accuracy but also the degree of graph pruning and the token efficiency of the LLM stage. Similar standardized metrics for webpage generation—such as measuring the proportion of generated code that can be executed without external dependencies, or the average number of repair iterations needed per task—would enable more direct comparison between different approaches.
Concluding Summary
InterWebCoder presents a cohesive framework for generating interactive webpages from executable test specifications. By coupling a test-specification-guided synthesis pipeline with a failure-attributed repair mechanism and a jointly optimized policy, the approach produces self-contained webpage code that passes functional tests and preserves visual state. The evaluation on IWR-Bench and Vision2Web demonstrates that a 9B model can outperform 30B models and strong commercial offerings, while the computational efficiencies—over 97% reduction in reward-computation latency, elimination of external MLLM verification costs, and up to 1.4x faster end-to-end training—make the approach practical for large-scale model development. The 1,736 verified samples from 2,058 tasks at 84.35% success rate establish a new baseline for data-driven webpage generation. Future work will likely extend the methods to more complex application scenarios and refine the repair and optimization signals, but the core contributions—test-guided code synthesis, runtime repair, and joint policy optimization—provide a robust foundation for the next generation of interactive web generation models.