arXiv:2509.12159cs.SEcs.AI2025-09被引 2

压缩视觉与代码冗余,让大模型生成界面代码更快更准

EfficientUICoder: A Bidirectional Token Compression Framework for Efficient MLLM-Based UI Code Generation

  • 通过检测元素区域构建树结构,保留关键视觉信息
  • 根据注意力分数删减低关注区域,融合高关注区域特征
  • 动态抑制重复代码生成,显著降低计算开销

多模态大模型在UI转代码任务中表现优异,显著提升网页开发效率。然而,由于输入图像标记和输出代码标记数量庞大,计算开销远超传统代码生成。我们发现图像与代码标记存在显著冗余,加剧计算复杂度并弱化对关键UI元素的关注,导致生成的HTML文件过长且常无效。为此提出EfficientUICoder压缩框架,包含三部分:1)基于元素与布局感知的标记压缩,通过检测元素区域并构建UI元素树保留关键信息;2)基于区域感知的标记精炼,利用注意力得分剔除选定区域的低关注度标记,同时整合未选区域的高关注度标记;3)自适应重复标记抑制,通过追踪HTML/CSS结构频率并施加指数惩罚来减少重复生成。大量实验表明,EfficientUICoder实现55%-60%的压缩率,不降低网页质量,且在34B级多模态大模型上,计算成本降低44.9%,生成标记减少41.4%,预填充时间缩短46.6%,推理时间减少48.8%。代码已开源。

原文摘要 · Abstract (English)

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. Code is available at https://github.com/WebPAI/EfficientUICoder.

UI生成模型压缩多模态

Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品;中文卡片由大模型生成,请以原文为准。