EfficientUICoder: Efficient MLLM-based UI Code Generation via Input and Output Token Compression

2025-09-15

AI Summary

To address high computational overhead, weak identification of salient UI elements, and inefficiently verbose HTML generation in multimodal large language models (MLLMs) for UI-to-code translation—caused by redundant image and code tokens—this paper proposes an end-to-end token compression and generation optimization framework. The method introduces three key innovations: (1) element-aware image token compression, (2) region-aware attention guidance, and (3) an adaptive output deduplication strategy leveraging UI tree structure and CSS/HTML token frequency modeling. Evaluated on a 34B-parameter MLLM, the approach achieves 55–60% token compression, reduces total computational cost by 44.9%, decreases generated tokens by 41.4%, and shortens prefill and decoding latency by 46.6% and 48.8%, respectively—while preserving functional correctness and visual fidelity of the generated web pages.

Technology Category

• Machine Learning: Large Multimodal Models (LMMs)
• Natural Language Processing: Generation
• Computer Vision: Multi-modal Vision

Application Category

• Economics, Online Markets and Human Computation: Cost models of using LLMs in production systems
• Graph Algorithms and Modeling for the Web: Foundation models and LLMs for Web-related graphs
• User Modeling, Personalization and Recommendation: Large Language Models (LLM) for user modeling and recommendation

Abstract

Multimodal Large Language Models have demonstrated exceptional performance in UI2Code tasks, significantly enhancing website development efficiency. However, these tasks incur substantially higher computational overhead than traditional code generation due to the large number of input image tokens and extensive output code tokens required. Our comprehensive study identifies significant redundancies in both image and code tokens that exacerbate computational complexity and hinder focus on key UI elements, resulting in excessively lengthy and often invalid HTML files. We propose EfficientUICoder, a compression framework for efficient UI code generation with three key components. First, Element and Layout-aware Token Compression preserves essential UI information by detecting element regions and constructing UI element trees. Second, Region-aware Token Refinement leverages attention scores to discard low-attention tokens from selected regions while integrating high-attention tokens from unselected regions. Third, Adaptive Duplicate Token Suppression dynamically reduces repetitive generation by tracking HTML/CSS structure frequencies and applying exponential penalties. Extensive experiments show EfficientUICoderachieves a 55%-60% compression ratio without compromising webpage quality and delivers superior efficiency improvements: reducing computational cost by 44.9%, generated tokens by 41.4%, prefill time by 46.6%, and inference time by 48.8% on 34B-level MLLMs. Code is available at https://github.com/WebPAI/EfficientUICoder.

Problem

• Reducing computational overhead in UI code generation
• Addressing redundancies in image and code tokens
• Improving efficiency of MLLM-based UI2Code tasks

Innovation

• Element and Layout-aware Token Compression
• Region-aware Token Refinement
• Adaptive Duplicate Token Suppression