基于用户界面的元素组件识别研究

范益

（四川大学计算机学院，成都610065）

0 引言

现在大多数的软件开发都是以GUI 设计为中心，通过优美的界面设计和容易理解的用户体验来吸引用户，保证产品竞争力。现在已经有许多研究来帮助设计师和开发人员快速简单地完成GUI 设计，如GUI 自动测试[1-2]、GUI 检索[3-4]、代码生成[5-6]，而识别出GUI 元素组件是这些工程任务重要的一步。识别GUI 元素可以通过检测工具或者是基于像素的方法。基于工具的方法需要搭建运行环境并获得应用软件API 的访问权限，是侵入性的和受限的。而基于像素的方法具有跨平台的特性，可以广泛地使用在各个新应用软件中。因此，本文只调研了基于像素的方法，现有的方法主要通过传统的计算机视觉和深度学习的方法来识别和定位GUI 组件。随着深度学习发展，目标检测技术在自然图像中已经取得了重大的成功，目标检测技术在GUI 识别任务中极具潜力，因此本文在此方面着力进行了归纳和整理，说明了现有方法取得的成功和不足。另外，介绍了常用数据集，讨论了GUI 识别与自然图像识别的不同以及现有方法存在的问题，并在此基础上对未来的研究方向提出了建议和展望。

1 研究现状

1.1 数据集

（1）Rico 数据集

Rico[3]数据集包含了来自27 个类别的超过9.3 万个Android 应用程序的设计数据。它公开了超过66k个不重复UI 屏幕截图，以及其对应的视觉的、文本的、结构的和交互设计属性。Rico 数据集创建用于支持五类数据驱动应用：设计搜索、UI 布局生成、UI 代码生成、用户交互建模和用户感知预测。

（2）ReDraw 数据集

Kevin Moran[6]自动挖掘250 个Android 应用程序，收集14382 个不重复UI 屏幕截图，并对191300 个GUI 组件进行了标记分类。ReDraw 还包含了一个组件分割过后的数据集，用于训练CNN 分类器。

（3）ImageCLEFdrawnUI

ImageCLEFdrawnUI[7]创建了一个手绘用户界面的草图数据集，其中2363 张被用于训练和587 张用于测试。每个草图的UI 元素平均数量为28 个，最少4 个，最多131 个元素。该数据被创建用于手绘GUI 的目标检测任务。

1.2 基于计算机视觉的方法

REMAUI[8]提出了一种从移动应用界面截图推断户界面代码的技术，它分别检测文本和非文本元素。对于文本元素，使用光学字符识别（OCR）技术识别。对于非文本元素，它使用Canny 边缘检测[9]来检测GUI 元素的结构边缘，通过高斯滤波器平滑图像和降低噪声，然后进行多级滤波来识别图像中的真实边缘。在此之后，REMAUI 执行边缘合并，获得轮廓，并通过合并部分重叠区域获得GUI 元素的边界框。

Kevin Moran[6]提出了一种方法，通过检测、分类和组装来自动从移动应用生成用户界面代码。文中通过边缘检测算法和OCR 来检测图像GUI 组件和文本的边缘，然后通过闭合操作来扩展融合彼此，以此来得到GUI 组件的包围框。最后，将分割出的组件元素输入CNN 分类器中进行识别。

Robinson[10]为了将手绘草图自动生成界面代码，和Kevin Moran 相似，首先通过边缘检测算法以及轮廓检测算法得到元素组件的位置，然后通过角点检测、直线检测等方法来提取每个候选元素区的特征，最后定义了一系列的启发式规则来识别元素类型。

通过计算机视觉的方法，能够简单快速地对元素进行定位和识别。然而，我们需要人工手动的定义组件特征，随着界面元素组件种类的增加，定义特征也越复杂和困难，不利于扩展，准确率也低。

1.3 基于深度学习的方法

Gallery D.C[11]通过应用界面截图来自动收集了11种类型的组件库，文中主要使用了目标检测网络Faster R-CNN[12]来确定GUI 设计图像中GUI 组件的类型、大小和位置。Faster R-CNN 是一种基于两阶段锚盒的目标检测深度学习技术。它首先由区域建议网络（RPN）生成一组区域候选，也称为候选区域（RoIs），它可能包含目标。RPN 是一个完全卷积的网络，可以有效地预测具有广泛尺度和纵横比的候选区域。RPN 使用具有不同的尺度和纵横比的锚框来大大简化生成目标候选区域的过程。对于每个框，RPN 然后计算一个Object⁃ness 评分，以确定它是否包含一个对象，并将其回归以适应包含对象的实际边界框。第二阶段是一个基于CNN 的图像分类器，它确定RoIs 中的目标类别。

Thomas D. White[2]提出了一个GUI 自动化测试工具，在其过程中使用了YOLOv2[13]来对GUI 小部件进行快速识别和定位。YOLO[14]是Redmon 等人提出的一种一段式目标检测网络，它只需要一次CNN 卷积就可以标注整个图像。YOLO 将单个神经网络应用于完整的图像，将其划分为一个S×S 网格，网格单元负责检测中心所处的物体，并同时预测每个区域的边界框和概率。YOLOv2 是YOLO 的扩展，采用了一种更强大的深卷积骨干结构。此外，在SSD 中使用的锚策略的启发下，YOLOv2 通过从训练数据中进行k-均值聚类来定义更好的先验锚。YOLOv2 实现了很高的处理速度并且具有较高的精度。

Vanita Jain[15]实现了从手绘草图到用户界面代码的自动生成，文中使用了一段式目标检测网络RetinaNet[16]来识别和定位草图中的GUI 组件。RetinaNet 提出了一个称为焦损失的损失函数，通过重塑标准交叉熵损失，它可以降低分配给分类良好或容易的目标的损失，使焦点损失集中在分类困难的目标，大大克服了单级检测网络难以训练不平衡正负例的缺点，使单级检测网络能够达到两级检测网络的可比精度，同时保持非常高的检测速度。

通过深度学习的方法来识别用户界面元素，更易扩展，准确率也要高于传统的计算机视觉技术。然而，现有的目标检测方法并没有考虑到GUI 的独特性质，以及GUI 元素检测任务的高定位精度。

2 存在问题及建议

GUI 图像与自然图像不同，它是人为设计的，不同的设计师对同一GUI 组件可能使用不同的文本、颜色、背景和外观。另外，不同类的GUI 元素通常具有相似的大小、形状和视觉特征。因此，这导致了目标检测网络对GUI 组件识别困难。对此，为了更准确地识别界面元素，我们可以考虑在现有网络中引入设计原则来优化识别结果，一个GUI 元素组件的类型通常与它周围的GUI 元素组件类型有关，因此我们可以设计一个CRF（条件随机场）来对其进行优化，学习其包含的设计模式。

对于通用对象检测，GUI 元素检测对区域的准确性有更严格的要求，因为GUI 区域定位不准确对下游任务的影响非常大，例如可能导致代码生成中的布局不准确。因此，我们需要改进现有的包围框生成方式，GUI 组件元素的包围框分布规则，我们可以考虑先引入先验知识。此外，还没有无锚模型用于GUI 组件检测，这也需要我们去研究此方法是否适用于此项任务。

最后，对于手绘用户界面草图的研究还非常少，这是一个难点。手绘草图本身具有稀疏性、抽象性，缺乏自然图像的纹理特征，并且现有研究中并没有专为草图所设计的目标检测框架，这更需要我们去探索。

3 结语

深度学习在自然图像目标检测任务中取得了巨大成功，其检测效果也远优于传统的计算机视觉技术，这使得在GUI 元素检测任务中，许多研究都开始使用现有成熟的目标检测网络，并且取得了不错的效果。然而，由于GUI 图像的特殊性，准确检测GUI 图像中的GUI 元素任然是一项具有挑战性的任务。在未来，我们还需要根据GUI 图像的特点来使现有的目标检测网络更适合我们的检测任务。此外，对于手绘用户界面草图的目标检测，是一个更为特殊更为困难的一项识别任务，还需要未来的学者更深入的研究去解决。