开发基于GUI的应用程序是一个快速进行原型设计、编码和用户测试的循环过程,实现代码的自动生成将有助于推进此过程。根据设计图自动生成源码是一个新的研究领域,现有的pix2code模型仅基于屏幕截图生成代码,每个时间步都将完整的图像喂入模型中训练,并且缺少对于界面结构和代码结构特性的关注。为此本文基于BootStrap框架的GUI界面布局规范和组件嵌套形式与源码嵌套形式相对应的特点,提出了不同的图像预编码方法,引入了分层注意力模型,改进了pix2code模型结构并扩展了其应用功能。本文主要工作如下:(1)提出了新的图像编码器预训练方法。自动编码器是学习数据重要特征的好方法,编码器部分通常会被导入到其他深度学习架构中,以传输它学习到的编码特征,这通常被称为迁移学习。本文通过训练自动编码器,冻结编码器部分作为图像编码器,通过实验发现,这种方式能够有效减少模型训练时长且预测的DSL代码准确率有小幅提升。(2)将分层注意力机制引入GUI源码自动生成模型中。对于包含较多组件的设计图,注意力机制可以帮助CNN重点关注图片的一些局部信息,生成更准确的DSL序列。因此,本文提出在GUI源码自动生成模型中,引入分层注意力机制,对GUI设计图进行分区域,然后得到每个区域上的重要特征,最后解码组合成DSL序列。实验结果表明,引入分层注意力机制后,模型对于GUI组件的遗漏明显减少,生成的DSL代码的准确率明显提升。(3)改进和扩展了pix2code模型的功能。如果要迅速捕捉设计灵感,快速进行版本迭代,进一步提高工程开发效率,实现从手绘图到GUI源码的转化是很有必要且具有巨大研究价值的。现有的pix2code只能通过屏幕截图生成DSL代码段,渲染成单一主题风格的GUI界面。因此本文对基础图片数据集进行了近似手绘图的转化,并且通过设计DSL简化了BootStrap框架中的HTML/CSS代码,降低了数据集的复杂度以及扩展了多种不同的页面风格。