基于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开发

分类号：TP391(计算技术、计算机技术)

资助基金：国家自然科学基金62277017

在线出版日期：2023-10-09（万方平台首次上网日期，不代表论文的发表时间）

页数：共10页

页码：100-109