应用程序GUI组件自动化识别方法研究综述

张中洋

(四川大学计算机学院，成都 610065)

0 引言

计算机技术的发展极大地改变了人类的工作生活方式，随着人们对于各类软件产品的需求日益增长，围绕各类应用程序的GUI(图形用户界面)开发工作变得越来越繁琐、具有挑战性。目前流行的面向应用程序GUI开发的首要步骤是起草和设计原型图，设计团队通过高保真像素图或低保真的手绘稿向开发人员表达GUI的内容和样式，开发人员不但需要准确掌握GUI界面中的各个组件的位置和大小，而且必须充分理解该组件在GUI界面中的设计意图。在识别GUI组件的过程中，产品原型需要经历的多次迭代[1]极大地增加了设计人员与开发人员的劳动成本和沟通成本，费时费力，且设计人员与开发人员普遍存在的源于各自背景领域知识带来的认知鸿沟，开发人员难免出现对界面组件错误识别的情况，从而导致在开发阶段的设计违规[2]，最后实现结果与设计预期不符，白白浪费了人力物力。

另外，在应用程序正式发布并投入使用之前，我们需要从相应的GUI界面为起点，对GUI中的关键组件的样式和功能进行充分测试。由于GUI组件视觉样式和风格的快速迭代变化，且对应的测试规则和交互方式也可能有多种组合[3]，以往通过人工检查或手动编写测试规则去定位并识别关键组件的方式受到人力、时间等资源问题的限制，传统的人工识别GUI组件方法难以支持有效的测试。

目前，针对传统方法的问题和局限，不少研究人员和相关从业者开始研究如何通过自动化的方法准确地识别GUI中的组件。对GUI组件的正确识别对现代智能化的应用程序开发或测试任务具有重大意义，它能显著地减少设计人员和开发人员的工作量，提升应用程序开发过程中的工作效率，解放生产力，使得无论是设计师还是开发工程师都能将更多的精力集中在应用程序本身复杂的业务逻辑和内容设计上，提高软件开发质量。

本文概括了目前最前沿的GUI组件自动化识别方法，根据研究方法的不同分为基于机器视觉的识别方法和基于深度学习的识别方法两类，并且分别对这两种方法的特点和思路进行了论述，总结了当前对于GUI组件的识别问题的进展，最后对未来GUI组件的自动识别方法的发展方向进行了讨论。

1 研究基本内容

本文研究的对象是包括但不限于PC端、移动端等以图像形式展示的应用程序GUI。GUI即用户图形界面，是承载人与计算机软件信息交互的桥梁，用户可通过多种输入设备操作屏幕上的组件或菜单选项，然后计算机再以图形的方式给用户以反馈信息。而GUI组件是指在GUI中具有独立设计语义[4]的非背景元素。本研究中的自动化识别GUI组件包括两部分任务：一是获得GUI组件的界面图像中的位置信息和宽高信息；二是对每个组件进行基于领域特定类型的分类，例如Text文本类型组件、Image图像类型组件等。以移动应用程序的GUI组件识别任务为例，GUI组件识别任务如图1所示。

图1 移动应用程序GUI组件识别任务示意图

如图1所示，GUI组件识别任务的目标第一步是自动化地从输入图片中确定组件的位置和大小，其中组件的大小以组件对应的最小外接矩形的宽高来表示；第二部是获得组件的基本类型，如图中的Button表示在GUI中是一个可以提供点击交互功能的组件，Text是一个表现文字内容的组件，等等。

GUI组件的自动识别任务是一个复杂的具有挑战性的难题，目前越来越多的研究人员和软件从业人员都对此进行了研究。

2 基于机器视觉的GUI组件识别方法研究

在GUI中为了给予用户清晰明了的使用指引，设计者往往将不同类型的GUI组件设计为与界面背景颜色有非常显著的区别，或是通过清晰明显的边界框突出属于GUI组件的部分。利用这一特性，在界面代码自动生成任务[5]GUI组件的检测阶段，K.Moran等人提出通过基于机器视觉的Canny边缘检测[6]方法，首先通过高斯滤波器平滑输入图像，再经过一阶偏导的有限差分来计算图像中每个像素点在梯度方向上的幅值和方向，通过设置合理的像素梯度变化阈值过滤GUI图像中非组件边缘噪声，之后通过设置双阈值参数确定真实的目标组件边缘，接着对这些已经确定的组件边缘像素进行一定的图像形态学操作，例如腐蚀或膨胀，将距离足够近的边缘连接成块，经过对连接块的最小外接矩形的简单计算后便得到了组件在界面中的位置和宽高。至此便完成了GUI组件识别的第一步——对组件位置和大小的检测。

而在GUI组件识别任务的第二步，也就是组件分类的阶段，K.Moran等人利用CNN(Convolutional Neural Networks)强大的图像特征提取能力，将上一步GUI检测提取出的目标组件区域经过裁剪并由人工标注其基本类别，通过监督学习的方式端到端地训练深度卷积网络对GUI组件的分类识别能力，最后在Redraw[7]数据集上的测试结果显示该方法获得了对GUI组件平均91%的识别准确率。

基于机器视觉的GUI组件检测方法最大地利用了GUI组件边界相对清晰、布局工整的特点，在检测组件阶段通过Canny边缘检测算法，以人工设定阈值参数的启发式地确定真实的组件边缘，而后通过卷积神经网络强大的图像特征提取能力对输入的单个组件图像进行分类，简单高效。但该方法忽略了在GUI组件检测阶段的正确查全率，也就是说通过卷积神经网络的组件识别准确率建立在对于GUI组件的准确提取上，而通过Canny边缘检测算法提取组件严重依赖于人工设定的算法阈值参数，对于设计风格不断变迁演化的GUI来说，很难有一个固定的算法参数对于所有输入GUI图像都能取得同样理想的结果，导致在组件检测阶段存在许多误检或者漏检的情况，从而影响到后面的分类结果，这是基于机器视觉的GUI组件识别方法研究的不足和局限之处。

3 基于深度学习的GUI组件识别方法研究

近年来，随着计算机GPU计算能力的提升和深度学习的发展，有许多研究者将深度学习的方法运用到目标检测领域中，通过设计深度神经网络模型，从海量数据样本中学习目标物体在输入图片中的位置、宽高以及类型，而GUI组件自动化识别任务与目标检测任务非常相似。因此，目前已经有不少研究将深度学习的方法应用在GUI智能化任务的组件识别阶段。

Chunyang Chen等人[8]在UI(User Interface)代码自动生成的组件识别阶段采用了基于Faster R-CNN[9]的目标检测模型完成从输入GUI图像到对应所有GUI组件的识别任务。Faster R-CNN是经典的二阶段目标检测算法，第一阶段将输入图片输入卷积神经网络进行特征提取，然后将输出特征图输入RPN(Region Proposal Network[9]，区域建议网络)获得一定数量的目标组件候选区域，对这些候选区域进行裁剪过滤后首先进行该区域是目标物体或背景的二分类判断，选区域提取网络确定输入GUI图片中可能是组件的目标区域；第二阶段对于是包含目标组件的区域进行边界框的回归修正，形成准确的目标建议区域，并且通过卷积网络提取到的特征图对于建议区域内的组件分类进行Softmax回归预测。这是首次通过基于深度学习的目标检测算法自动地学习识别真实高保真GUI像素图数据集中的组件，并将识别结果应用到在GUI代码自动生成任务中。相比于原有的基于机器视觉的GUI组件识别方法，它解决了Canny边缘检测算法需要人工调参的局限性，通过数据驱动的方式从真实的GUI图片数据集中学习到了目标组件在界面中的位置大小以及类别信息。

在GUI开发的原型起草过程中，也有很多工作是以简单的低保真草图或手绘稿的形式作为原型设计图，Jain.V、Agrawal.P、Banga.S[10]等人在将草图原型转化为代码的工作当中，通过RetinaNet[11]一阶段的目标检测算法。一阶段的GUI组件检测算法只通过一个深度神经网络同时学习对组件位置宽高和分类信息的识别，效率上大大高于二阶段的目标检测算法，甚至能达到实时检测，同时算法通过提出Focal Loss方法平衡了在一阶段目标检测算法中正负样本极度不均衡的问题，使得当时的RetinaNet的识别精度超越了Faster R-CNN等二阶段目标检测算法。

同时在GUI自动化测试研究方面，我们同样需要自动化地方法准确地定位待测试GUI组件在界面中的位置和它的类型，减轻测试人员的工作负担。White T D.、Fraser G.、Brown G J.等人[12]将深度学习方法运用在了GUI自动化检测任务中的组件识别阶段，对于需要测试的某些小型交互组件，他们提出了基于YOLOv2[13]的一阶段目标检测算法，使得在GUI测试阶段能够快速定位到多个待测试界面中的目标交互组件，并且通过识别出的组件类型设定测试规则，批量编写测试样例，极大地提升了软件测试效率，在应用程序GUI的测试工作中实现了自动化、智能化的目标。

4 结语

目前在围绕应用程序GUI组件自动化识别的工作中，不断有更优秀的方法被应用到这个领域并且取得了显著的成果，其中基于深度学习的GUI组件识别方法受到越来越多的关注和青睐。然而，GUI作为人的设计思想和设计风格的体现，综合了人机工程学、认知心理学、设计艺术学等多个领域的知识，且随着人类审美和设计的发展一直在改进演化，这决定了GUI组件无论是视觉特征还是设计特征来说都不可能是一成不变的，相反，它会随着应用程序和设计潮流的发展快速地变化，由此看来，在GUI组件识别的任务中，我们更需要的是一种基于数据驱动的方法，能够从不断更新换代的GUI设计图中学习到更丰富的设计特征和图像特征，从而做到对GUI组件更加准确地定位和分类。

同时现有方法的研究成果都是面向各自特定平台特定领域的，可移植性差，而目前大多数应用程序都有自己的多平台版本或跨平台解决方案，例如PC端或移动设备端，它们在GUI设计上往往有着相似的视觉特征和风格特征，我们需要一种能够支持跨平台的GUI组件分类方法，让研究成果能够在不同平台设备上得以验证。

我们的下一步研究工作便是收集并整理大规模的真实应用程序GUI数据集，针对GUI组件的特点进行全面的特征提取，让网络能够学习到更加复杂的组件设计特征，达到更高的识别准确度，使我们的研究在围绕应用程序GUI的智能化任务中取得更加显著的成果。