论文部分内容阅读
随着互联网和HTML5技术的飞速发展,Web应用在整个软件与互联网市场中占据的份额越来越大。目前,Web应用开发普遍采用前后端分离的开发模式,前端开发技术随之兴起。但是,前端开发过程中充斥着很多简单却重复繁琐的工作,如何更快的把前端页面原型图转化成对应的网站布局一直是前端开发者们关注的问题。过去,开发者们基本上是借助于软件工程类的方法来实现计算机代码自动生成。随着深度学习技术的高速发展,和其在多个领域的成功应用,越来越多的开发者们尝试使用深度学习来实现计算机代码自动生成。然而如何利用深度学习技术从图像生成计算机代码仍然是一个几乎未被探索的领域,其在自动化前端开发上的应用也鲜有人涉足。本文设计并实现了一个应用深度学习的Web页面生成系统,主要的工作量分为两部分。第一部分,基于深度学习的HTML代码生成模型的研究设计与实现。该部分使用深度学习的方法训练了一个神经网络,它能够从输入的图形用户界面(Graphical User Interface,GUI)原型图自动生成对应的HTML代码,BLEU得分为0.81。同时,笔者构建了训练该模型所使用的数据集,该数据集包含15382张GUI原型图和与其对应的源码。第二部分,笔者设计并实现了一个可视化Web页面布局系统。该系统将第一部分工作中训练的神经网络加以实际应用,为用户提供了导入GUI原型图返回HTML代码的服务,并且允许用户通过拖拽组件等可视化的方式来修改Web页面布局,最后生成完整可用的HTML代码。本文实现的Web页面生成系统创新性地将深度学习技术应用到前端开发领域,结合可视化布局功能,有效地缩短了前端开发中GUI原型图到Web页面的转化时间,减少了前端开发中重复繁琐的工作,让开发人员能够将更多的时间用于Web应用的页面交互和功能实现等方面。