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

EfficientUICoder is an efficient UI code generation framework via token compression.

Check our paper Paper.

📜 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 EfficientUICoder achieves 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.

🛠️ Installation

1. Prepare the base environment
   Install the official LLaVA or Qwen environment first, depending on which backbone you plan to use.

2. Install EfficientUICoder dependencies
   From the root directory of EfficientUICoder, run:

   pip install -e ".[extra]"
   pip install flash-attn --no-build-isolation

🧪 Evaluation

1. Go to the scripts directory:

   cd scripts

2. Modify the following variables in run_eval_llava.sh or run_eval_qwen.sh according to your setup:

   MODEL_PATH=${MODEL_PATH:-"Your_model_path"}
   EVAL_DIR=${EVAL_DIR:-"Your_eval_dir"}
   RESULT_DIR=${RESULT_DIR:-"Your_result_dir"}
   KEEP_INDICES_DIR=${KEEP_INDICES_DIR:-"Your_keep_indices_dir"}

3. Start evaluation by running the corresponding script:

   bash run_eval_llava.sh
   # or
   bash run_eval_qwen.sh

🧩 Examples

• Case study of webpages generated by Vanilla, EfficientUICoder and VisionZip

  EfficientUICoder preserves key UI elements and structures, achieving quality comparable to Vanilla while outperforming VisionZip.

  

• Token selection results

  EfficientUICoder covers nearly all UI elements, while VisionZip misses important tokens and adds redundant ones.

  

• Output redundancy case study

  EfficientUICoder avoids repetitive outputs that Vanilla often produces, ensuring complete code synthesis.

  

🔥 Citation

@misc{xiao2025efficientuicoder,
      title={EfficientUICoder: Efficient MLLM-based UI Code Generation via Input and Output Token Compression}, 
      author={Jingyu Xiao and Zhongyi Zhang and Yuxuan Wan and Yintong Huo and Yang Liu and Michael R. Lyu},
      year={2025},
      eprint={2509.12159},
      archivePrefix={arXiv},
      primaryClass={cs.SE},
      url={https://arxiv.org/abs/2509.12159}, 
}