基于UI图像的Web前端代码自动生成

摘要

用户界面(user interface, UI)在应用程序与用户的交互中扮演了至关重要的角色.当前移动互联网的普及,已经使得基于Web (world wide web)的应用大规模从桌面端迁移到移动端, Web前端开发在应用程序的开发中愈加广泛和深入.传统Web前端开发首先依赖设计人员给出设计稿,然后由程序员编写相应的UI代码.这种方式行业壁垒高、开发速度慢,不利于产品的快速迭代.深度学习的发展使得基于UI图像自动生成Web前端代码成为可能.现有方法对于UI图像特征的捕捉能力较弱,生成代码的准确性较低.为了改善这些问题,提出了基于Swin Transformer的Encoder-Decoder模型image2code,用于从UI图像生成Web前端代码. image2code将从UI图像生成Web前端代码的过程视为图像描述任务的一种形式,将包含滑动窗口设计的Swin Transformer作为模型编码器和解码器的骨干网络.其中滑窗操作将注意力计算限制在一个窗口内,减少了注意力机制的计算量,同时保证了不同窗口间仍然有特征关联.另外,image2code生成可以直接转换为HTML (hyper text markup language)代码的Emmet代码,利用Emmet代码的简洁性提高模型训练的效率.实验结果表明,在已有公开数据集和新构建的数据集上,image2code在Web前端代码生成任务上的表现要优于pix2code和image2emmet等代表性模型.

关键词

UI图像 / Web前端代码生成 / 注意力机制 / 智能Web开发