基于深度学习的GUI代码自动生成方法与流程

基于深度学习的gui代码自动生成方法
技术领域
1.本发明涉及图形用户界面技术领域，具体地说，涉及一种基于深度学习的gui代码自动生成方法。


背景技术：

2.如今，几乎所有的应用程序都是以图形用户界面(graphical user interface,gui)为面向用户的中心，依靠简洁的用户界面和直观的用户体验来吸引客户；前端开发人员基于设计师创建的图形用户界面设计稿实现gui的过程非常耗时，这会缩减他们用于实现所构建软件的实际功能和逻辑的时间。此外，当要构建的软件需要在多个平台上运行时将会带来大量重复的工作。因此，gui设计稿到可执行代码的自动化转换将能大大提高开发人员的工作效率。使用深度学习技术自动将gui设计稿生成代码是一个目前相对较新的研究领域。此过程涉及机器理解设计稿截图并从其中提取逻辑信息的问题，因此这个任务可以看作是计算机视觉的问题。目前的gui代码自动生成中，准确性和视觉理解方面表现不佳。


技术实现要素：

3.本发明的内容是提供一种基于深度学习的gui代码自动生成方法，其能够克服现有技术的某种或某些缺陷。
4.根据本发明的基于深度学习的gui代码自动生成方法，其包括以下步骤：
5.一、使用cspdarknet65进行特征提取；
6.二、添加spp模块以增加感受野，从而分离出上下文特征；
7.三、panet特征聚合；
8.四、yolo检测头使用提取的特征进行预测；
9.五、densenet在边界框区域执行文本识别；
10.六、使用code生成器从识别得到的ui对象中生成代码。
11.作为优选，cspdarknet65在根阶段具有三个3
×
3卷积，5个csp模块前分别添加了步幅为2的2
×
2平均池化层和1
×
1卷积层以替换下采样层，并将1
×
1卷积的步幅设置为1。
12.作为优选，spp模块具有内核大小k
×
k的最大池输出的级联，其中k＝[1，5，9，13]，步幅等于1。
[0013]
作为优选，panet包括fpn层，fpn层后面添加了一个自底向上的特征金字塔，特征金字塔包含两个pan结构；fpn层自顶向下传达强语义特征，而特征金字塔则自底向上传达强定位特征，这样从不同的主干层对不同的检测层进行特征聚合。
[0014]
作为优选，code生成器将ui表示对象中存在的ui元素转换为可在目标平台上执行的编码应用程序；生成的文件是一个xml或html文档，生成的文件包含ui组件。
[0015]
作为优选，code生成器的算法为：
[0016]
输入：检测网络输出中的边界框与文本对p(b,t)，ui匹配图map(class,code)；
[0017]
输出：生成的xml或html文件f；
[0018]
根据位置信息对p进行排序；
[0019][0020][0021]
本发明提供的生成方法结合了对象检测和文本识别方法，可从大量的移动应用程序或渲染的网站截图中学习大量的ui图像知识和组件位置信息；本发明与其他方法相比，本发明在准确性和视觉理解方面具有更好的表现。
附图说明
[0022]
图1为实施例1中基于深度学习的gui代码自动生成方法的流程图；
[0023]
图2为实施例1中guicga的体系结构示意图；
[0024]
图3为实施例1中cspdarknet65和cspdarknet53骨干结构示意图；
[0025]
图4为实施例1中使用csp的darknet结构示意图；
[0026]
图5为实施例1中ui界面的类型和数量的统计图；
[0027]
图6为实施例1中数据集标注格式示意图；
[0028]
图7为实施例1中经由检测网络处理后的gui屏幕截图。
具体实施方式
[0029]
为进一步了解本发明的内容，结合附图和实施例对本发明作详细描述。应当理解的是，实施例仅仅是对本发明进行解释而并非限定。
[0030]
实施例1
[0031]
本实施例将整个任务分为两个步骤.第一步包括目标检测和文本识别技术，第二步是代码生成器.当前的目标检测器通常由几部分组成，分别是骨架网络(backbonenetwork)，用来预测对象的类和边界框的检测头(head)，以及更好的利用backbone部分所提取特征的颈部(neck)。其中，骨架网络大多时候指的是提取特征的网络，其作用就是提取图片中的信息，供后面的网络使用。这些网络经常使用的是resnet等，因为已经证明了这些网络在分类等问题上的特征提取能力是很强的.颈部是放在骨架网络和检测头之间的部分，其是为了更好的利用骨架网络提取的特征而添加的部分。最后，检测头是获取模型输出内容的网络，它利用之前提取的特征做出预测。
[0032]
本实施例在数据集中测试了当前主流目标检测算法的性能，最后本实施例选择了yolov3的检测部分作为本模型的检测头.受yolov4的启发，本实施例的骨架网络使用修改自cspdarknet53的cspdarknet65。对于文本识别模块，本本实施例选择densenet作为识别网络。接下来，开发了一个code生成器来生成代码。
[0033]
本文提供了一种基于深度学习的生成工具：guicga，用于克服将ui图像转换为代码的障碍；guicga的体系结构如图2所示，其方法如图1所示，首先使用cspdarknet65进行特征提取，然后添加spp(spatial pyramid pool)模块以增加感受野，从而分离出最重要的上下文特征；然后使用路径聚合网络(pathaggregationnetwork,panet)进行特征聚合；之后，yolo检测头使用先前提取的特征进行预测，然后densenet在边界框区域执行文本识别；最后，使用code生成器从识别得到的ui对象中生成代码。
[0034]
cspdarknet65：guicga的骨架网络是cspdarknet65，它基于yolov4骨干网cspdarknet53，其中包含5个跨阶段局部网络(cross stage partial network,csp)模块和两种类型的修改以提高cspdarknet53的性能，如图3所示。图3中每个矩形都包含卷积层，批归一化层和mish激活函数。cspn中的n表示带有csp结构的重复n次的残差块。
[0035]
附加的根块：通过大量的输入，具有三个3
×
3卷积的根阶段可以利用图像中更多的本地信息，从而为ui组件检测提取强大的特征。因此，附加块在根阶段被添加。
[0036]
平均池化块：csp模块前面的卷积内核大小为3
×
3，步长为2，因此可以起到下采样的作用。为了加强梯度在网络中的传播，本实施例用平均池化块代替了这个下采样层。在此类块的投影快捷方式(projection shortcutts)路径中，添加了步幅为2的2
×
2平均池化层和1
×
1卷积层以替换下采样层，并将1
×
1卷积的步幅设置为1.与cspdarknet53中的下采样块相比，改进的结构可以避免投影快捷方式中的信息丢失。
[0037]
cspnet主要从网络结构设计的角度解决推理中从计算量很大的问题。推理计算过
高的问题是由于网络优化中的梯度信息重复导致的，先将基础层的特征映射划分为两部分，然后通过跨阶段层次结构将它们合并，这样在减少了计算量的同时可以保证准确率。如图4所示，本实施例在darknet的基础上采用了cspnet的结构。csp模块前面的卷积核的大小都是3
×
3，步长为2，因此可以起到下采样的作用。因为本实施例的backbone有5个csp模块，同时输入图像是608
×
608，所以经过5次csp模块后得到19
×
19大小的特征图。
[0038]
spatial pyramid pooling：本实施例将spp块添加到模型中是因为它显著增加了感受野，将最重要的上下文功能提取出来，并且几乎没有降低网络速度。spp模块起源于空间金字塔匹配(spatial pyramid matching,spm)，spm的原始方法是将特征图分割为几个d
×
d个相等的块，其中d可以为[1,2,3，...]，因此形成空间金字塔，然后提取词袋(bagofwords)特征。spp将spm集成到cnn中，并使用最大池操作而不是bag ofwords操作。本实施例将spp模块改进为具有内核大小k
×
k的最大池输出的级联，其中k＝[1，5，9，13]，步幅等于1.在这种设计下，相对较大的k
×
k最大池化有效地增加了骨干网络特征的接受范围.在实验中，本实施例在数据集中测试了spp的性能。与没有spp相比，本实施例的模型在添加spp之后改善了ap，如评估部分所示，同时计算成本也很小.因此，本实施例的方法在颈部也采用了spp模块。
[0039]
panet：本文使用panet作为来自不同主干级别、用于不同检测器级别的参数聚合方法。fpn使用自下而上和自上而下的路径以及与1
×
1卷积滤波器的横向连接。自底向上的路径是通过在语义值上升时降低空间分辨率来构造的。自上而下的途径是通过利用较高的语义特征并将其吸收到较高的分辨率层中来构造的。由于下采样和上采样会影响对象检测的精度，因此需要自上而下的重构层与特征图之间的横向连接以更好地预测位置。和yolov3的fpn层不同，本实施例在fpn层的后面还添加了一个自底向上的特征金字塔，其中包含两个pan结构。这样结合操作，fpn层自顶向下传达强语义特征，而特征金字塔则自底向上传达强定位特征，两两联手，从不同的主干层对不同的检测层进行特征聚合。
[0040]
code生成器
[0041]
最后，本实施例使用传统的编译方法将前面提到的网络生成的结果编译为所需的目标语言。代码生成器是本文方法中的最后一步，其中将ui表示对象中存在的ui元素转换为可在目标平台上执行的编码应用程序。生成的文件是一个xml或html文档，其中包含可以轻松运行的ui组件。在本实施例的实验中，生成的ios和android是xml格式的ui，而web是用html/css实现的基于web的ui。算法中显示了代码生成器的算法。
[0042]
具体的算法如算法1所示.
[0043]
算法1.codeparser算法.
[0044]
输入：检测网络输出中的边界框与文本对p(b,t)，ui匹配图map(class,code)；
[0045]
输出：生成的xml或html文件f.
[0046]
[0047][0048]
实验
[0049]
数据集
[0050]
本实施例的数据集中ui界面的屏幕快照使用pix2code数据集中的图片。表1与图5中显示了此数据集中包含的ui界面的类型和数量。
[0051]
同时本实施例对每张ui界面截图中的ui组件进行了人工标注，数据集标注格式如图6所示。
[0052]
表1数据集统计
[0053][0054]
本实施例的实验标准基于ms coco，各种iou阈值用于更全面的计算。评估检测性能的指标是平均精度均值(mean average precision，map)。本实施例提出的网络基于tensorflow框架。图中的结果是在具有cuda深度神经网络库(cudnn)加速功能的nvidia tesla 16gb gpu上生成的.使用的处理器是intel xeon e5-2640和centos 7.5操作系统。
[0055]
在本实施例的数据集对象检测实验中，默认的超参数如下：训练步骤为500,500；训练步骤为500,500.采用步阶衰减学习率调度策略，初始学习率为0.01，并分别以400,000步和450,000步乘以系数0.1。动量和权重衰减分别设置为0.9和0.0005。所有架构都使用单个gpu以8或4的小批量大小执行多尺度训练，具体取决于架构和gpu内存限制。对于所有实验，本实施例仅使用一个teslav100 gpu进行训练，未使用多个gpu并行训练的诸如syncbn之类的技术。
[0056]
消融实验及评估结果
[0057]
消融实验旨在验证网络修改的效果。实验的结果展示在表2中。
[0058]
表2消融实验
[0059][0060]
cspdarknet53的性能为81.9％.如表2的第二行和第三行显示，对“附加根”块和“平均池化”块的修改分别将性能提高到83.1％和84.4％。此外，通过上述两个修改，cspdarknet65可以达到85.3％。
[0061]
ui对象检测模型的最终性能在map中达到85.3％，在ap
75
中达到98.6％。图7展示了经由检测网络处理后的gui屏幕截图。通过使用经过训练的guicga模型对输入进行采样，即可以获得这些输出的gui屏幕截图。
[0062]
本实施例提出了一种基于深度神经网络的方法，该方法使用ui设计草稿的屏幕截图作为输入来转换并生成不同语言的相应代码。本实施例的方法使用对象检测技术，可以提高ui组件的识别率.同时，本实施例考虑组件上的文本问题，并通过文本识别技术对其进行恢复。它已成功在三种不同的平台(即ios，android和web)上生成代码。通过评估，本文的方法达到了95.04％的精度，所生成的代码可以最大程度地复原源ui。
[0063]
现在，internet上有大量可用的网页以及android和ios gui。因此，本实施例可以获得几乎无限的训练数据，从而增强了模型的功能，甚至可以完全从gui自动生成代码。
[0064]
以上示意性的对本发明及其实施方式进行了描述，该描述没有限制性，附图中所示的也只是本发明的实施方式之一，实际的结构并不局限于此。所以，如果本领域的普通技术人员受其启示，在不脱离本发明创造宗旨的情况下，不经创造性的设计出与该技术方案相似的结构方式及实施例，均应属于本发明的保护范围。