随着互联网技术的不断发展和Web开发技术的日渐成熟,Web应用在整个软件生态中的占有率日益提升。目前,Web应用开发基本采用前后端分离的模式,其中作为用户界面和交互接口的前端页面的设计过程工作量巨大且繁琐重复,随着深度学习技术在各领域应用的越加广泛和成熟,利用深度学习的方法快速地将UI设计师绘制的网页原型草图自动转化为网页代码已成为可能,成为代码自动生成领域新的研究热点。与传统的通过软件工程的启发类方法进行Web程序代码的自动生成相比,基于深度学习的Web程序代码生成方法放弃了繁琐的人为启发式定义,降低了根据特定领域知识定义规则的难度,且生成代码的可用性强,可实现二次开发,帮助前端工程师进一步提升开发效率。本文设计并实现了一个基于深度学习的前端Web程序自动生成系统,它能将手绘草图转化为网页的HTML代码。论文的主要工作分为三个部分:（1）实现了基于深度学习的Web程序生成模型。该部分首先对深度学习中的CNN和LSTM算法构造了一个编码器-解码器结构的前端程序生成模型,修改了模型的图像识别模块,加入残差结构并引入了注意力机制。构建了为训练该模型使用的手绘草图数据集,并将注意力机制引入Web程序生成模型,注意力机制将草图图像不同区域进行划分,重点提取有网页组件的图像区域特征提升模型对草图组件识别的准确率,实验证明引入注意力机制的模型相比于未加入注意力机制的模型减少了对草图图像中网页组件种类判断错误的概率,且模型在Web数据集和草图数据集上的评估指标较其他Web程序生成模型有显著提高。（2）改进了模型生成代码时的搜索策略。通过将贪婪搜索与集束搜索分别应用在前端程序生成模型中进行对比实验,实验结果表明集束搜索可以小幅提升模型的评估指标。（3）设计并实现了具有图形界面的Web前端程序自动生成系统,用户通过上传草图图像生成Web程序代码,并实现在浏览器端的预览和修改。经过测试,该系统具有较好的兼容性和系统性能,各项功能实现正常。