CN115080051A - 一种基于计算机视觉的gui代码自动生成方法 - Google Patents

Abstract

本发明涉及GUI图像技术领域，具体地说，涉及一种基于计算机视觉的GUI代码自动生成方法，其包括以下步骤：一、输入一张图像；二、并行运行图像处理模块、深度学习模块和文本检测与识别模块，分别得到图像处理方法和深度学习方法提取的边界框；三、集成图像处理方法和深度学习方法并融合两者的检测结果，随后综合文本检测与识别模块的结果；四、使用Code生成器根据检测结果生成相应的代码。本发明能较佳地自动生成GUI代码。

Description

一种基于计算机视觉的GUI代码自动生成方法

技术领域

本发明涉及GUI图像技术领域，具体地说，涉及一种基于计算机视觉的GUI代码自动生成方法。

背景技术

前端开发人员在工作中需要理解设计师提供的图形用户界面(graphical userinterface,GUI)设计稿中的组件及其在图像中的布局，然后将这种理解转化为适当的组件及其组成，并将其转换为源代码。对于前端开发人员，这一工作是重复且枯燥的，因此自动化这种理解和转换将避免大量简单重复性的劳动，解放开发人员的时间，使其更专注于GUI背后的交互体验和操作逻辑。但图形用户界面设计的多样性和生成代码过程的复杂性，使得图形用户界面代码自动生成成为了一项具有挑战性的任务。

近年来在GUI图像生成代码的研究工作中，主流的技术之一是应用计算机视觉领域的成熟方法，使用从大规模数据中学习GUI组件特征的深度学习目标检测模型或者传统图像处理方法(如光学字符识别、边缘检测)来检测GUI图像中的组件元素，再将识别结果通过一定的规则转换为最终需要的代码。但是，这些计算机视觉方法是面向自然图像的，其在设计之初并未单独考虑GUI图像以及GUI组件的独特特征，并且没有考虑到GUI代码生成任务所必须的高定位精度问题。

发明内容

本发明的内容是提供一种基于计算机视觉的GUI代码自动生成方法，其能够克服现有技术的某种或某些缺陷。

根据本发明的一种基于计算机视觉的GUI代码自动生成方法，其包括以下步骤：

一、输入一张图像；

二、并行运行图像处理模块、深度学习模块和文本检测与识别模块，分别得到图像处理方法和深度学习方法提取的边界框；

三、集成图像处理方法和深度学习方法并融合两者的检测结果，随后综合文本检测与识别模块的结果；

四、使用Code生成器根据检测结果生成相应的代码。

作为优选，图像处理方法中，采用自上而下从粗到细的方法GUICG-IP来检测GUI组件区域，具体包括以下步骤：

1)检测GUI的布局块；在输入GUI的灰度图上使用漫水填充算法，不同的颜色被填充到原始图像中具有相似颜色的区域，然后这些不同颜色的区域将被形状识别算法确定其是否为矩形，如果是矩形则此区域将被视为一个块；然后，使用轮廓追踪方法来计算这些块的边界，并产生一个块图；

2)生成一个输入GUI图像的二进制图，使用块图在二进制图的相应区域分割出来每个检测到的块。

作为优选，深度学习方法中，采用组件检测算法GUICG-OD；GUICG-OD骨干网络为CSPDarknet65，添加SPP附加模块和PANet聚合颈部，检测头部直接使用YOLOv4检测头。

作为优选，SPP附加模块中，使用四个具有内核大小k×k步长为1的最大池化层处理特征图，然后对四个输出进行级联作为输出，其中k＝[1,3,9,5]。

作为优选，PANet用于聚合不同层级的骨干网络提取的特征图，其包括原始结构的特征金字塔，在原始结构的特征金字塔之后，添加了一个由下至上的特征金字塔结构。

作为优选，集成处理中，使用GUICG-OD和GUICG-IP分别得到两种方法提取的边界框odbox和ipbox；然后，使用一种集成方法从这两种边界框中得到最终的边界框结果，集成方法包括以下步骤：

第一步、对GUICG-IP得到的边界框ipbox进行处理，当ipbox与GUICG-OD得到的边界框odbox的交并比IoU大于预设的IoU阈值时，保留ipbox，否则丢弃，这样得到ipbox1；

第二步、处理odbox，当odbox和ipbox1的IoU小于预先设定的IoU阈值时，保留odbox，否则将其丢弃，这样得到odbox1；

第三步、利用ipbox1对odbox1的位置进行更正，将odbox1的每条边移动至最近的边缘线上，每次移动使用一个预先设定的阈值限制其移动距离，同时保证其不和ipbox1产生交集，从而得到odbox2；

第四步、ipbox1和odbox2的集合就是最终结果。

作为优选，文本检测与识别中，使用端到端文本识别方法FOTS作为文本组件检测及识别的网络。

本发明设计了一种基于融合方法的GUI代码自动生成方法(简称为GUICG)，其仅以GUI图像作为输入便可生成对应的代码。本发明把整个任务设置为一个两阶段架构，第一阶段，运用目标检测与图像处理的融合方法检测GUI组件并将其分类为各种类型(如按钮、图片等)，并且表示为特定的对象；第二步，将第一阶段得出的对象通过Code生成器生成相对应的代码。对于GUI组件检测部分，考虑到深度学习方法具有较高的召回率而图像处理方法具有更高的边界框检测精度，本发明提出了一种融合两种方法的GUI组件检测方法。本发明针对GUI组件独特的形状、纹理、边界和布局特征，对深度学习目标检测及图像处理方法均进行了改进，使其符合GUI代码生成中的组件检测要求。对于GUI文本检测，本发明采用了成熟的端到端场景文本检测和识别模型FOTS来检测文本组件和识别组件中的文本。本发明所提出的基于融合方法的GUI组件检测方法在超过10,000张GUI图像的评估中，所有GUI组件的F1分数达到54.32％，超过了目前基于计算机视觉的以及基于图像处理的算法，F1分数比当前最先进的方法高出2.17％。

本发明的主要贡献如下4个方面：

本发明首先研究了将通用目标检测及图像处理方法应用于GUI组件检测的有效性，总结出GUI图像、GUI组件的独特特征和GUI组件检测任务的独特要求，然后提出了通用目标检测面对这些GUI的独特特征时的问题。根据探究实验总结出这几种方法的有效性及其限制，本发明提出了一种集成图像处理和深度学习目标检测的GUI代码自动生成方法(GUICG)。

对于非文本组件的检测，针对GUI和GUI组件的独特边界、形状、纹理和布局特征，本发明改进了现有目标检测模型，使其能够有效地学习GUI组件特征及其组成，其次提出了一种由浅入深的图像处理方法提高了组件检测的性能。基于“深度学习目标检测方法具有较高召回率的特点，但其对组件边界框坐标的回归精度不够，而传统图像处理方法对于组件位置的定位准确，但召回率不高”的结论，本发明用一种集成算法融合图像处理和目标检测方法，达到高精确率、高召回率、高组件边界框回归精度的GUI组件检测性能。

针对文本组件的检测问题，本发明集成端到端的文本识别方法FOTS到GUICG中，不仅能够检测文本组件，还能识别组件中的文本并将其作为该组件的一项文本属性在代码中进行还原。

本发明在两个主流数据集上对GUICG进行了广泛的实验评估。分别在两个数据集上对比了本领域当前最先进的方法，然后针对网络的每一项改动进行了消融实验以确定每项改动所带来的作用及提升效果。实验结果证明本发明方法在多项评价指标上显著的优于现有工作，并且GUICG很好的结合了图像处理和目标检测方法的优势，使得GUICG的性能超越了当前最先进的方法。

附图说明

图1为实施例中一种基于计算机视觉的GUI代码自动生成方法的流程图；

图2为实施例中骨干网络的结构示意图；

图3(a)为实施例中CSP结构示意图；

图3(b)为实施例中SPP结构示意图；

图4为实施例中PANet结构示意图。

具体实施方式

为进一步了解本发明的内容，结合附图和实施例对本发明作详细描述。应当理解的是，实施例仅仅是对本发明进行解释而并非限定。

实施例

如图1所示，本实施例提供了一种基于计算机视觉的GUI代码自动生成方法，其包括以下步骤：

一、输入一张图像；

二、并行运行图像处理模块、深度学习模块和文本检测与识别模块，分别得到图像处理方法和深度学习方法提取的边界框；

三、集成图像处理方法和深度学习方法并融合两者的检测结果，随后综合文本检测与识别模块的结果；

四、使用Code生成器根据检测结果生成相应的代码。

图像处理方法

基于数字图像处理方法的区域检测，针对GUI图像的特点，开发了一种新颖的图像处理方法(简称为GUICG-IP)，其采用自上而下从粗到细的策略来检测GUI组件区域。通用的深度学习目标检测模型Faster RCNN、FCOS、YOLOv4需要足够多的训练数据，而且不同的模型设计需要不同规模的训练数据来达到稳定的性能。此外，即使有大量的训练数据集，这些模型对于GUI组件检测的高定位精确度需求仍不太理想，而且不同的模型设计也有差异。其次，基于统计回归的区域检测的性质不能满足GUI组件检测的高定位精确度要求。与自然场景下的目标检测中宽松的(例如，IoU>0.5)正确检测定义不同，检测GUI组件是一个细粒度的识别任务，它要求正确的检测尽可能准确地覆盖GUI组件的全部区域，但非GUI组件和其他接近的GUI组件的区域尽可能少。不幸的是，无论是基于锚框的模型还是无锚模型都无法实现这一目标，因为它们在面对组件尺寸和纹理的大类内差异、高跨类形状相似性以及邻近GUI组件的存在时，要么太严格，要么太灵活。

本发明的组件检测方法首先检测GUI的布局块，本发明认为，GUI将其中的组件组织成不同的块，而这些块通常具有矩形的形状。首先在输入GUI的灰度图上使用漫水填充算法，不同的颜色被填充到原始图像中具有相似颜色的区域，然后这些不同颜色的区域将被形状识别算法确定其是否为矩形，如果是矩形则此区域将被视为一个块。然后，使用Suzuki提出的轮廓追踪方法来计算这些块的边界，并产生一个块图。每一个块通常包含多个GUI组件，但有些块可能只对应于一个特定的GUI组件。

接下来，本发明的方法生成一个输入GUI图像的二进制图，使用块图在二进制图的相应区域分割出来每个检测到的块。图像二进制化会将输入图像简化为黑白图像，在该图像上，可以较容易地将前景GUI组件与背景分开。现有的方法REMAUI和UI2CODE通过Canny边缘检测和Sobel边缘检测进行二值化，而这些方法旨在保持自然场景图像中的精细纹理细节。但是这种保留细节的能力与GUI组件检测的目标相矛盾，因为检测GUI组件的形状才是最重要的，而不是检测其内容和纹理细节。例如，无论图像中显示什么内容检测出来的均是一个ImageView组件。因此本发明根据GUI图像的梯度图开发了一种简单而有效的二值化方法。梯度图可以捕捉到相邻像素之间的梯度大小的变化，如果一个像素与相邻的像素有小的梯度，它在二进制地图上就会变成黑色，否则就是白色。如图2所示，GUI组件在二进制图中会很容易从背景中显现出来，其要么是黑色背景上的白色区域，要么是带有白色边缘的黑色区域。

本发明的方法使用连接组件标记来识别每个二进制块段中的GUI组件区域。它将二值化的图像作为输入，并进行两遍扫描来标记连接的像素。由于GUI组件可以是任何形状，它确定了一个覆盖检测到的区域的最小矩形框作为边界框。尽管二值化方法没有保留许多非GUI对象的纹理细节，但非GUI对象的形状(例如，图片中的那些建筑物)仍然可能存在于二值图中。这些嘈杂的形状导致了GUI组件的过度分割，干扰了Canny边缘检测和REMAUI等现有的自下而上的GUI组件检测的聚合方法。相比之下，本发明所提出的自上而下的检测策略将这些非GUI对象的影响降到最低，因为本发明方法使用宽松的灰度图来检测大块，然后使用严格的二进制图来检测GUI组件轮廓。另外值得说明的是，如果一个块被归类为图像，本发明的方法将不会进一步检测这个块中的GUI组件。

深度学习目标检测方法

基于YOLOv4方法，针对GUI组件的独特特征对其进行改进，提出了CSPDarknet65作为主干网络的组件检测算法(简称为(GUICG-OD)。

CSPDarknet65：GUICG的骨架网络是CSPDarknet65，它基于Yolov4骨干网CSPDarknet53生成的主干结构，其中包含5个跨阶段局部网络(Cross Stage PartialNetwork,CSP)模块和两种类型的修改以提高CSPDarknet53的性能，如图2所示。图2中每个矩形都包含CNN层，批归一化(Batch Normalization，BN)层和Mish激活函数。CSPN中的N表示带有CSP结构的重复N次的残差块，如图2所示。其中(a)CSPDarknet53：在YOLOv4中提出的原始结构；(b)CSPDarknet65：附加的残差块和替代的下采样残留块。

附加的根块：大量实验表明，通过使用3×3卷积滤波器的堆栈可以提高性能。一个有用但简单的方案是将一个3×3卷积增加到三个3×3卷积。通过大量的输入，具有三个3×3卷积的根阶段可以利用图像中更多的本地信息，从而为UI组件检测提取强大的特征。因此，在根阶段添加附加块，这些卷积层步长为1。

平均池化块：CSP模块前面的卷积层内核大小为3×3，步长为2，因此可以起到下采样的作用。为了加强梯度在网络中的传播，本发明用平均池化块代替了这个下采样层。在此类块的投影快捷方式(Projection Shortcutts)路径中，添加了步长为2的2×2平均池化层，以及在原来的3×3卷积层前添加了一个步长为1的3×3卷积层来替换下采样层。与CSPDarknet53中的下采样块相比，改进的结构可以避免下采样过程中的信息丢失。

CSPNet将网络输出的特征图通过一个1×1的卷积核划分为两部分，其中一部分输入至原来的网络，得出的结果与另一不做处理部分直接合并，如图3(a)所示。这样CSP结构既保证了特征图信息的不丢失，还大大减少了计算量。如本发明在DarkNet的基础上采用了CSPNet的结构。如图3(a)所示，本发明骨干网络中每个CSP模块前的都是具有下采样功能的平均池化块，经过其处理，特征图大小会缩小一倍，输入图像被归一化为608×608大小，经过骨干网络的处理，最终得到的特征图大小为19×19。

Spatial Pyramid Pooling：本发明将SPP块添加到模型中是因为它显著增加了感受野，将最重要的上下文功能提取出来，并且几乎没有降低网络速度。SPP将空间金字塔匹配(Spatial Pyramid Matching,SPM)结构集成到卷积神经网络中中，并使用最大池化方法，但是其最终的输出是一维向量，这无法在本发明的结构中应用。因此，本发明将SPP模块进行改进，使用四个具有内核大小k×k步长为1的最大池化层处理特征图，然后对四个输出进行级联作为输出，其中k＝[1,3,9,5]，如图3(b)所示。在这种设计下，相对较大的k×k池化有效地增加了骨干网络特征的感受野范围。在实验中，本发明在数据集中测试了SPP的性能。与没有SPP相比，本发明的模型在添加SPP之后改善了AP，如评估部分所示，同时计算成本也很小。因此，本发明的方法在颈部也采用了SPP模块。

PANet：本发明使用PANet来聚合不同层级的主干网络提取的特征图，以为不同层级的检测器提供广泛的特征。FPN结构包含自底向上的路径和自顶向下的路径以及它们之间的横向连接。自底向上的路径是通过在语义值上升时降低空间分辨率来构造的。自上而下的路径是通过利用较高的语义特征并将其吸收到较高的分辨率层中来构造的。由于下采样和上采样会影响目标检测的精度，因此需要自上而下的重构层与特征图之间的横向连接以更好地预测位置。但是，本发明为了达到对小目标检测更好的支持，在原始结构的特征金字塔之后，添加了一个由下至上的特征金字塔结构，如图4所示。自底向上的结构能够将底层特征图中丰富的位置信息传递给上层结构，自顶向下的结构能够将上层特征图中丰富的语义信息向下传递，因此，通过这种方法，GUICG-OD能够同时获得丰富的GUI组件语义特征和GUI组件位置特征，从而达到对GUI组件检测和识别的性能提升。

边界框回归损失函数：本实施例采用CIoU作为边界框损失函数。

最后，本发明GUI代码生成的组件检测部分的目标检测方法在骨干网络部分使用CSPDarknet65网络，在颈部添加SPP附加模块和PANet路径聚合颈部以更好地利用骨干网络提取的特征信息，最后检测头部直接使用YOLOv4检测头，本发明将这部分简称为GUICG-OD。

集成处理

一张GUI图像被输入到模型中，GUICG分别调用GUICG-OD和GUICG-IP对其进行处理，分别得到两种方法提取的边界框(odbox和ipbox)。然后，GUICG使用一种集成方法从这两种边界框中得到最终的边界框结果。如算法1所示，第一步，对GUICG-IP得到的边界框(即ipbox)进行处理，当ipbox与GUICG-OD得到的边界框(即odbox)的IoU大于预设的IoU阈值时，保留ipbox，否则丢弃，这样得到ipbox1；第二步，处理odbox，当odbox和ipbox1的IoU小于预先设定的IoU阈值时，保留odbox，否则将其丢弃，这样得到odbox1。最后，利用ipbox1对odbox1的位置进行更正，将odbox1的每条边移动至最近的边缘线上，每次移动使用一个预先设定的阈值限制其移动距离，同时保证其不和ipbox1产生交集，从而得到odbox2。最后，ipbox1和odbox2的集合就是最终结果。最后，ipbox1和odbox2的合集即是最终结果。

文本检测与识别

GUI文本组件应该被视为场景文本，并且将文本组件与非文本组件分开进行检测更能提高整体的检测性能，因此，本实施例选用在探究实验中文本组件检测性能最好的端到端文本识别方法FOTS作为文本组件检测及识别的网络。在GUI图像中有两种文本，一种是文本组件(如TextView)，另一种是组件中的文本(如Button中的文本)。FOTS可以轻易地检测到文本组件以及属于GUI组件的文本。UIED认为，如过果检测到的GUI文本是在非图像GUI部件的区域内，其就会放弃这个文本。本发明认为这是不正确的做法，本发明同时考虑了组件中的文本的识别问题，这些组件中的被认为是组件的一部分，GUICG也将其识别出来，并将这些结果作为该组件的一项文本属性。在最终的代码生成任务中，这些文本属性会在最终的代码中得到还原，能够保证整个GUI代码的还原度。

代码生成算法

最后，本发明使用传统的编译方法将前面提到的网络生成的结果编译为所需的目标语言。代码生成器是本发明方法中的最后一步，其中将UI表示对象中存在的UI组件转换为可在目标平台上执行的编码应用程序。生成的文件是一个XML或HTML文档，其中包含可以轻松运行的UI组件。在本发明的实验中，生成的iOS和Android是XML格式的GUI代码，而Web则是用HTML/CSS实现的GUI。算法2展示了本发明方法中的代码生成算法。

实验数据集

Rico数据集：该数据集来自于27个类别超过9300个免费的常见Android应用程序。Rico数据集包含超过66000个GUI结构对，对于每对GUI结构，其包含一个屏幕截图(PNG文件)和一个详细的视图层次结构(JSON文件)。GUI中的所有组件都可以通过遍历从根节点["activity":"root"]开始的视图层次结构来访问。对于每个组件，class属性指定其类名，ancestors属性包含其超类的列表，bounds属性指定某分辨率(如1440×2560)屏幕窗口中组件的边界框。

实验设置

本发明提出的网络基于Pytorch框架。实验中的结果是在具有CUDA深度神经网络库(cuDNN)加速功能的NVIDIA Tesla 16GB GPU上测试得出的。使用的是Intel Xeon E5-2640处理器和CentOS 7.5操作***。

本发明对于GUICG-OD部分的训练默认超参数如下：

对于pix2code数据集，进行200次迭代训练，采用多步长学习率衰减策略，初始学习率为0.01，并在150和175次迭代时分别衰减为原来的十分之一。对于Rico，进行1000次迭代训练，同样将学习率初始化为0.01，然后分别在650、800和900次迭代时衰减为原来的十分之一。两个数据集的动量均设置为0.9，权重衰减均设置为0.0005。对于不同的方法，本发明使用使用16或32的批次大小在四个Tesla V100 GPU上进行并行训练。

对比试验

表1和表2展示了整体GUI图像的目标检测结果，即在所有检测到的组件区域上具有正确区域分类的真实边界框。当IoU>0.9时，在六个基线模型中，REMAUI和UI2CODE表现最差，其精度、召回率及F1分数几乎没有超过20％。在三种基于图像处理的方法中，UIED检测非文本组件(F1分数为44.96％)和所有组件(F1分数为52.15％)的F1分数都取得了优良的表现。而在三种基于深度学习的方法中，YOLOv4对非文本组件的表现最好(其F1分数为43.61％)，FCOS次之(F1分数为41.17％)，但FCOS在所有组件的情况下取得了最好的F1分数44.79％，这是因为FCOS在文本组件的检测中更具优势。最后，由于本发明模型GUICG是针对GUI组件特殊特征而设计的，其具有较为强大的GUI组件检测能力，最终在非文本组件上实现了46.33％的F1分数，而在所有组件检测中也实现了高达54.32％的F1分数。这超出了当前最好方法UIED(F1分数为52.15％)2.17％。

表1 GUICG对比实验(IoU>0.9)

表2 GUICG对比实验(IoU>0.95)

当本发明把IoU阈值设置为0.95时，如表2所示，所有的模型均有一定的性能下降。但是，由于本发明方法融合了图像处理方法，其拥有相对强大的组件定位精度，因此即使阈值越发严格，其仍拥有较为强劲的性能，精度仅下降6.21，相比之下UIED下降了8.85，其他方法均下降了接近20的精度。同时，由于目标检测方法具有更高的召回率，这也体现在了本发明的GUICG上，如表1所示，在IoU阈值较为宽松的情况下，基于目标检测的方法基本能获得更高的召回率，这说明其能检测出GUI图像中更多的组件。同时，对于非文本组件，对比两种IoU阈值下个各方法的召回率，基于图像处理的方法召回率平均下降7.2，相比之下目标检测方法平均下降仅仅2.3。因此，GUICG因为继承了目标检测方法，在所有组件检测的情况下，其召回率仅下降4.15，而最先进的方法UIED下降高达10.16。在此项实验中，本发明所提出的方法取得了更明显的优势，在所有组件上实现了48.96％的F1分数，这超出了其他方法中最好的UIED(F1分数为42.69)6.27％。

消融实验

本实施例将对GUICG-OD和GUICG-IP的有效性通过消融实验进行验证，实验的结果展示在表3和4中，表中的每个模型表示在GUI非文本组件检测阶段仅使用此方法，除此之外其余全部结构及设置均相同。其中GUICG-IP表示GUICG中用于GUI组件检测的图像处理部分，GUICG-OD表示GUICG中用于GUI组件检测的目标检测部分。

如表3所示，相较于基线模型YOLOv4，基于其进行改进的GUICG-OD在精度、召回率和F1分数三个指标上都超过了YOLOv4。在两个IoU阈值的实验中，GUICG-IP均取得了比GUICG-OD更高的精度，这更进一步说明了图像处理方法在GUI组件检测边界框预测准确度上的优势。但其召回率相对更低，进一步说明了基于深度学学习的目标检测方法相比之下能够检测到GUI图像中更多的组件。最后，集成两种方法的GUICG在精度及召回率两个指标上都保持了两种方法的优势，并且在F1分数上取得了大幅度优于单种方法的成绩，这说明结合两种不同方法优势的策略取得了成功。

表3 GUICG消融实验(IoU>0.9)

表4 GUICG消融实验(IoU>0.95)

区域分类结果

表5展示了本发明的融合模型GUICG、三个深度学习基线模型和UIED的区域分类结果。本实施例的结果只考虑了真正例边界框，即给定准确组件区域的分类性能。由于文本组件由FOTS直接检测输出，本实施例分别展示了非文本组件和所有组件的结果。从表中可以看到，GUICG相比除UIED外的其他方法能够输出更多的真正例GUI组件区域，同时，鉴于GUICG集成了目标检测方法获得了其召回率更高的优点，取得了最多的组件边界框。同时，CGICG实现了更高的分类准确率(非文本组件为0.87，所有组件为0.91)。这些结果证实了GUICG模型对GUI组件检测的准确性。

表5 真正例区域分类结果

小结

图形用户界面设计的多样性和生成代码过程的复杂性，使得图形用户界面代码自动生成成为了一项具有挑战性的任务。近年来在GUI图像生成代码的研究工作中，主流的技术之一是使用光学字符识别、边缘检测等图像处理技术检测GUI图像中的组件元素，再将识别结果通过一定的规则转换为最终需要的代码。但是，这些计算机视觉方法是面向自然图像的，其在设计之初并未单独考虑GUI图像以及GUI组件的独特特征，并且没有考虑到GUI代码生成任务所必须的高定位精度问题。针对这些问题，本发明深入研究了当前方法的优点和不足，并针对GUI组件的特征设计了一种集成图像处理和目标检测方法的GUI代码自动生成模型(GUICG)。本发明主要完成的工作总结如下：

本发明首先研究了将通用目标检测及图像处理方法应用于GUI组件检测的有效性，总结出GUI图像、GUI组件的独特特征和GUI组件检测任务的独特要求，然后提出了通用目标检测面对这些GUI的独特特征时的问题。进一步地，本发明设计了一个探究实验来探讨几种典型GUI组件检测方法的有效性及其限制，对接下来设计新方法提供有效的设计思路。

进一步地，本发明针对探究实验得出的“图像处理方法具有更高的组件边界框预测精确度，深度学习目标检测方法具有更高的组件检测召回率”的结论，融合图像处理和目标检测方法提出了GUICG方法。根据探究实验得出的GUI非文本组件和文本组件分开处理的原则，针对非文本组件的检测，本发明改进了目标检测方法使其能够针对性的进行GUI组件检测，其次提出了一种由浅入深的图像处理方法提高了组件检测的性能，进一步的将两个方法集成到同一方法中。然后，本发明考虑了文本组件的检测问题，集成端到端的文本识别方法FOTS到GUICG中，同时将非文本组件中的文本识别出来并作为该组件的一项文本属性将其在代码中进行还原。最后本发明开发了一种基于规则的代码生成算法以将检测结果转换成对应的源代码。

最后，本发明针对GUICG方法，在两个主流数据集上进行评估。分别进行了与现有方法的对比实验和验证每一种改动的消融实验。对比实验结果证明了GUICG优于当前基础方案和现有工作，并且消融实验证明了融合图像处理和目标检测的方法很好的结合了两者的优点，使得GUICG的性能超越了当前最先进方法。

以上示意性的对本发明及其实施方式进行了描述，该描述没有限制性，附图中所示的也只是本发明的实施方式之一，实际的结构并不局限于此。所以，如果本领域的普通技术人员受其启示，在不脱离本发明创造宗旨的情况下，不经创造性的设计出与该技术方案相似的结构方式及实施例，均应属于本发明的保护范围。

Claims (7)

1.一种基于计算机视觉的GUI代码自动生成方法，其特征在于：包括以下步骤：

一、输入一张图像；

二、并行运行图像处理模块、深度学习模块和文本检测与识别模块，分别得到图像处理方法和深度学习方法提取的边界框；

三、集成图像处理方法和深度学习方法并融合两者的检测结果，随后综合文本检测与识别模块的结果；

四、使用Code生成器根据检测结果生成相应的代码。

2.根据权利要求1所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：图像处理方法中，采用自上而下从粗到细的方法GUICG-IP来检测GUI组件区域，具体包括以下步骤：

1)检测GUI的布局块；在输入GUI的灰度图上使用漫水填充算法，不同的颜色被填充到原始图像中具有相似颜色的区域，然后这些不同颜色的区域将被形状识别算法确定其是否为矩形，如果是矩形则此区域将被视为一个块；然后，使用轮廓追踪方法来计算这些块的边界，并产生一个块图；

2)生成一个输入GUI图像的二进制图，使用块图在二进制图的相应区域分割出来每个检测到的块。

3.根据权利要求2所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：深度学习方法中，采用组件检测算法GUICG-OD；GUICG-OD骨干网络为CSPDarknet65，添加SPP附加模块和PANet聚合颈部，检测头部直接使用YOLOv4检测头。

4.根据权利要求3所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：SPP附加模块中，使用四个具有内核大小k×k步长为1的最大池化层处理特征图，然后对四个输出进行级联作为输出，其中k＝[1,3,9,5]。

5.根据权利要求4所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：PANet用于聚合不同层级的骨干网络提取的特征图，其包括原始结构的特征金字塔，在原始结构的特征金字塔之后，添加了一个由下至上的特征金字塔结构。

6.根据权利要求5所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：集成处理中，使用GUICG-OD和GUICG-IP分别得到两种方法提取的边界框odbox和ipbox；然后，使用一种集成方法从这两种边界框中得到最终的边界框结果，集成方法包括以下步骤：

第一步、对GUICG-IP得到的边界框ipbox进行处理，当ipbox与GUICG-OD得到的边界框odbox的交并比IoU大于预设的IoU阈值时，保留ipbox，否则丢弃，这样得到ipbox1；

第二步、处理odbox，当odbox和ipbox1的IoU小于预先设定的IoU阈值时，保留odbox，否则将其丢弃，这样得到odbox1；

第三步、利用ipbox1对odbox1的位置进行更正，将odbox1的每条边移动至最近的边缘线上，每次移动使用一个预先设定的阈值限制其移动距离，同时保证其不和ipbox1产生交集，从而得到odbox2；

第四步、ipbox1和odbox2的集合就是最终结果。

7.根据权利要求6所述的一种基于计算机视觉的GUI代码自动生成方法，其特征在于：文本检测与识别中，使用端到端文本识别方法FOTS作为文本组件检测及识别的网络。

Images