华东师范大学学报(自然科学版)

作者：葛进, 陆雪松

关键词：UI图像,Web前端代码生成,注意力机制,智能Web开发,

基金：国家自然科学基金 (62277017)

用户界面 (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等代表性模型.

来源：2023年第5期

《华东师范大学学报(自然科学版)》期刊编辑部

查看华东师范大学学报(自然科学版)杂志2023年第5期