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

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

【技术实现步骤摘要】
一种基于计算机视觉的GUI代码自动生成方法


[0001]本专利技术涉及GUI图像
，具体地说，涉及一种基于计算机视觉的GUI代码自动生成方法。

技术介绍

[0002]前端开发人员在工作中需要理解设计师提供的图形用户界面(graphical user interface,GUI)设计稿中的组件及其在图像中的布局，然后将这种理解转化为适当的组件及其组成，并将其转换为源代码。对于前端开发人员，这一工作是重复且枯燥的，因此自动化这种理解和转换将避免大量简单重复性的劳动，解放开发人员的时间，使其更专注于GUI背后的交互体验和操作逻辑。但图形用户界面设计的多样性和生成代码过程的复杂性，使得图形用户界面代码自动生成成为了一项具有挑战性的任务。
[0003]近年来在GUI图像生成代码的研究工作中，主流的技术之一是应用计算机视觉领域的成熟方法，使用从大规模数据中学习GUI组件特征的深度学习目标检测模型或者传统图像处理方法(如光学字符识别、边缘检测)来检测GUI图像中的组件元素，再将识别结果通过一定的规则转换为最终需要的代码。但是，这些计算机视觉方法是面向自然图像的，其在设计之初并未单独考虑GUI图像以及GUI组件的独特特征，并且没有考虑到GUI代码生成任务所必须的高定位精度问题。

技术实现思路

[0004]本专利技术的内容是提供一种基于计算机视觉的GUI代码自动生成方法，其能够克服现有技术的某种或某些缺陷。
[0005]根据本专利技术的一种基于计算机视觉的GUI代码自动生成方法，其包括以下步骤：<br/>[0006]一、输入一张图像；
[0007]二、并行运行图像处理模块、深度学习模块和文本检测与识别模块，分别得到图像处理方法和深度学习方法提取的边界框；
[0008]三、集成图像处理方法和深度学习方法并融合两者的检测结果，随后综合文本检测与识别模块的结果；
[0009]四、使用Code生成器根据检测结果生成相应的代码。
[0010]作为优选，图像处理方法中，采用自上而下从粗到细的方法GUICG
‑
IP来检测GUI组件区域，具体包括以下步骤：
[0011]1)检测GUI的布局块；在输入GUI的灰度图上使用漫水填充算法，不同的颜色被填充到原始图像中具有相似颜色的区域，然后这些不同颜色的区域将被形状识别算法确定其是否为矩形，如果是矩形则此区域将被视为一个块；然后，使用轮廓追踪方法来计算这些块的边界，并产生一个块图；
[0012]2)生成一个输入GUI图像的二进制图，使用块图在二进制图的相应区域分割出来每个检测到的块。
[0013]作为优选，深度学习方法中，采用组件检测算法GUICG
‑
OD；GUICG
‑
OD骨干网络为CSPDarknet65，添加SPP附加模块和PANet聚合颈部，检测头部直接使用YOLOv4检测头。
[0014]作为优选，SPP附加模块中，使用四个具有内核大小k
×
k步长为1的最大池化层处理特征图，然后对四个输出进行级联作为输出，其中k＝[1,3,9,5]。
[0015]作为优选，PANet用于聚合不同层级的骨干网络提取的特征图，其包括原始结构的特征金字塔，在原始结构的特征金字塔之后，添加了一个由下至上的特征金字塔结构。
[0016]作为优选，集成处理中，使用GUICG
‑
OD和GUICG
‑
IP分别得到两种方法提取的边界框odbox和ipbox；然后，使用一种集成方法从这两种边界框中得到最终的边界框结果，集成方法包括以下步骤：
[0017]第一步、对GUICG
‑
IP得到的边界框ipbox进行处理，当ipbox与GUICG
‑
OD得到的边界框odbox的交并比IoU大于预设的IoU阈值时，保留ipbox，否则丢弃，这样得到ipbox1；
[0018]第二步、处理odbox，当odbox和ipbox1的IoU小于预先设定的IoU阈值时，保留odbox，否则将其丢弃，这样得到odbox1；
[0019]第三步、利用ipbox1对odbox1的位置进行更正，将odbox1的每条边移动至最近的边缘线上，每次移动使用一个预先设定的阈值限制其移动距离，同时保证其不和ipbox1产生交集，从而得到odbox2；
[0020]第四步、ipbox1和odbox2的集合就是最终结果。
[0021]作为优选，文本检测与识别中，使用端到端文本识别方法FOTS作为文本组件检测及识别的网络。
[0022]本专利技术设计了一种基于融合方法的GUI代码自动生成方法(简称为GUICG)，其仅以GUI图像作为输入便可生成对应的代码。本专利技术把整个任务设置为一个两阶段架构，第一阶段，运用目标检测与图像处理的融合方法检测GUI组件并将其分类为各种类型(如按钮、图片等)，并且表示为特定的对象；第二步，将第一阶段得出的对象通过Code生成器生成相对应的代码。对于GUI组件检测部分，考虑到深度学习方法具有较高的召回率而图像处理方法具有更高的边界框检测精度，本专利技术提出了一种融合两种方法的GUI组件检测方法。本专利技术针对GUI组件独特的形状、纹理、边界和布局特征，对深度学习目标检测及图像处理方法均进行了改进，使其符合GUI代码生成中的组件检测要求。对于GUI文本检测，本专利技术采用了成熟的端到端场景文本检测和识别模型FOTS来检测文本组件和识别组件中的文本。本专利技术所提出的基于融合方法的GUI组件检测方法在超过10,000张GUI图像的评估中，所有GUI组件的F1分数达到54.32％，超过了目前基于计算机视觉的以及基于图像处理的算法，F1分数比当前最先进的方法高出2.17％。
[0023]本专利技术的主要贡献如下4个方面：
[0024]本专利技术首先研究了将通用目标检测及图像处理方法应用于GUI组件检测的有效性，总结出GUI图像、GUI组件的独特特征和GUI组件检测任务的独特要求，然后提出了通用目标检测面对这些GUI的独特特征时的问题。根据探究实验总结出这几种方法的有效性及其限制，本专利技术提出了一种集成图像处理和深度学习目标检测的GUI代码自动生成方法(GUICG)。
[0025]对于非文本组件的检测，针对GUI和GUI组件的独特边界、形状、纹理和布局特征，本专利技术改进了现有目标检测模型，使其能够有效地学习GUI组件特征及其组成，其次提出了
一种由浅入深的图像处理方法提高了组件检测的性能。基于“深度学习目标检测方法具有较高召回率的特点，但其对组件边界框坐标的回归精度不够，而传统图像处理方法对于组件位置的定位准确，但召回率不高”的结论，本专利技术用一种集成算法融合图像处理和目标检测方法，达到高精确率、高召回率、高组件边界框回归精度的GUI组件检测性能。
[0026]针对文本组件的检测问题，本专利技术集成端到端的文本识别方法FOTS到GUICG中，不仅能够检测文本组件，还能识别组件中的文本并将其作为该组件本文档来自技高网...

【技术保护点】

【技术特征摘要】
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的最大池化层处理特征图，然后对四个输...

【专利技术属性】
技术研发人员：蔡波，冯震，
申请(专利权)人：云南恒于科技有限公司，
类型：发明
国别省市：