基于深度学习的GUI代码自动生成方法技术

本发明专利技术涉及图形用户界面技术领域，具体地说，涉及一种基于深度学习的GUI代码自动生成方法，其包括以下步骤：一、使用CSPDarkNet65进行特征提取；二、添加SPP模块以增加感受野，从而分离出上下文特征；三、PANet特征聚合；四、YOLO检测头使用提取的特征进行预测；五、DenseNet在边界框区域执行文本识别；六、使用Code生成器从识别得到的UI对象中生成代码。本发明专利技术能较佳地自动生成代码。发明专利技术能较佳地自动生成代码。发明专利技术能较佳地自动生成代码。

【技术实现步骤摘要】
基于深度学习的GUI代码自动生成方法


[0001]本专利技术涉及图形用户界面
，具体地说，涉及一种基于深度学习的GUI代码自动生成方法。

技术介绍

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

技术实现思路

[0003]本专利技术的内容是提供一种基于深度学习的GUI代码自动生成方法，其能够克服现有技术的某种或某些缺陷。
[0004]根据本专利技术的基于深度学习的GUI代码自动生成方法，其包括以下步骤：
[0005]一、使用CSPDarkNet65进行特征提取；
[0006]二、添加SPP模块以增加感受野，从而分离出上下文特征；
[0007]三、PANet特征聚合；
[0008]四、YOLO检测头使用提取的特征进行预测；
[0009]五、DenseNet在边界框区域执行文本识别；
[0010]六、使用Code生成器从识别得到的UI对象中生成代码。
[0011]作为优选，CSPDarkNet65在根阶段具有三个3
×
3卷积，5个CSP模块前分别添加了步幅为2的2
×
2平均池化层和1
×
1卷积层以替换下采样层，并将1
×
1卷积的步幅设置为1。
[0012]作为优选，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本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于深度学习的GUI代码自动生成方法，其特征在于：包括以下步骤：一、使用CSPDarkNet65进行特征提取；二、添加SPP模块以增加感受野，从而分离出上下文特征；三、PANet特征聚合；四、YOLO检测头使用提取的特征进行预测；五、DenseNet在边界框区域执行文本识别；六、使用Code生成器从识别得到的UI对象中生成代码。2.根据权利要求1所述的基于深度学习的GUI代码自动生成方法，其特征在于：CSPDarkNet65在根阶段具有三个3
×
3卷积，5个CSP模块前分别添加了步幅为2的2
×
2平均池化层和1
×
1卷积层以替换下采样层，并将1
×
1卷积的步幅设置为1。3.根据权利要求2所述的基于深度学习的GUI代码自动生成方法，其特征在于：SPP模块具有内核大小k
×
k的最大池输...

【专利技术属性】
技术研发人员：蔡波，冯震，
申请(专利权)人：武汉大学，
类型：发明
国别省市：