说一说UI界面组件识别

UI 界面组件识别是视觉稿生成代码中重要一环，通过识别设计稿中的组件，进行组件的自动替换，生成复用性、可维护性更高的代码。

给到一份设计稿或者图片，我们想要得到其中的组件信息，包括

• 边界框，即组件在设计稿中的位置，尺寸。
• 类别，也就是组件的类型。

UI界面组件特征

识别目标的特征决定了识别方案的选择，我们可以将组件划分为三个粒度， UI 元素、业务组件以及 UI 页面.

UI 元素

UI 元素即基础组件，包括button、imageview,Text等控件。

UI 元素是人为设计的，其属性取决于要展示的内容、要支持的交互和整体 UI 的设计。元素的宽高往往取决于内部文本宽度，或者根据界面设计风格来决定。而 ImageView 则可以显示带有任何内容的图像。 UI 元素往往具有以下特点

• 同类差异大：对于同样功能的 UI ，不同的设计师会使用完全不同样式，比较典型的是不同的基础组件库会拥有完全不同的设计风格。相比之下，物理世界的对象比如人、汽车、建筑物等，同分类会拥有相似的形状、外观，受到同样的物理约束，特征会更为具有区分度。

• 不同类相似度高：而不同类的 UI 元素却经常具有相似的大小、形状和视觉特征，比如 button 、 Spinner 都是矩形的，区别只在于 Spinner 右侧的小三角形，而 EditText 和 TextView 在视觉上只有是否有下划线的区别。

业务组件通常由 UI 元素组成，是封装了一定的样式或者逻辑的功能模块，方便复用提高开发效率，减少重复工作。

业务组件的封装更多以功能维度进行考虑，从视觉维度来看，业务组件具有以下特点：

• 粒度跨度大 ：业务组件又可以拆分为控件、区块、楼层等等，区块基于控件开发，楼层由区块搭建而成，拆分粒度是完全自由的。这就造成了业务组件可以有多样的表现形式。在设计稿图像中呈现的效果即识别目标的重叠，识别目标组件A可能包含了识别目标组件B。

• 种类繁多，迭代快：业务组件的迭代取决于应用场景的迭代，当业务变化时，组件也会逐渐新增、淘汰，也会出现业务组件只有小的变化，但是出于不同考量而沉淀了新组件的情况，而给视觉维度的区分带来了挑战。

UI 界面

UI页面承载了各类元素、业务组件，具有以下特点：

• 混合了异构对象：比如文本与图像拥有不同的结构。ImageView 具有简单的矩形形状，但可以显示任何内容和对象。而在 UI 元素检测的任务中，我们想要识别的是 ImageView 本身而不是图像内容。

• 紧凑型分布：UI 界面，尤其是移动应用程序，通常包含许多的 UI 元素，几乎覆盖所有的屏幕空间，且通常并排放置，仅由中间的小填充进行分隔。 相比之下，在通用的目标检测对象检测数据集中，在 COCO 对象检测挑战中，平均只有 7 个对象稀疏的放置在图像中。因为附近的对象会干扰记每个对象边界框的准确检测，这带来了不小的挑战，

• 对区域检测具有高精度要求：在典型的目标检测场景中，对于检测正确的定义是松散的，比如常用的度量为预测框和真实框的IOU，当IOU > 0.5 或者 IOU > 0.75 时认为预测成功，这是因为识别目标很容易根据主要部分而确定，当看到汽车的一部分，我们可以明确这里是一个汽车对象。然而在 UI 组件识别中，UI 组件的局部样式并不能决定组件本身的类别，不同组件的局部往往具有极高的相似性。由此，UI 界面检测对于区域检测的准确性要求更高，在代码生成场景中，不准确的区域会导致生成的布局不正确，在 UI 测试场景中会导致不能正确点击预期的区域。

业界现有方案

业界现有方案通常针对识别 UI 界面中的 UI 元素，可以划分为传统视觉方法以及图像深度学习方法。此外，对于业务组件，也出现了基于结构的匹配算法。而文本元素的检测通常会与非文本类元素检测分开，单独进行识别。

传统视觉方法

• 边缘/轮廓聚合

  边缘/轮廓聚合的方法通过检测界面原始边缘，得到细粒度区域，并按照一定规则聚合为粗粒度区域，再结合 CNN 分类模型将该区域分类到组件标签。

  而物理世界对象的原始视觉特征旨在捕捉对象的细粒度纹理细节，并不能直观的对应于 UI 元素的形状和组成，对于UI元素来说，将细粒区域聚合为 UI 区域的过程很容易出错，尤其是其包含物理世界的图像时或者具有图像背景时，图像会带来极大的干扰。而对于 UI 业务组件来说，其不一定会有明显轮廓，组件内的元素也往往不相交，无法根据距离等简单的规则进行合并。

• 模版匹配

  模版匹配的方式依赖手工特征工程，通过使用高质量样本示例图像或 UI 元素的抽象原型，进行匹配来同时得到区域框与分类，或者改进边缘/轮廓聚合。但仅适用于简单、标准的 UI 元素，比如button,checkbox。难以应用于视觉特征变化较大的 UI 元素。

传统视觉方法开箱即用，不需要训练，但是往往会有预设值，比如在细粒度合并为粗粒度元素的过程中，如果是以距离为规则，则需要根据实际组件情况设定距离阈值。也就是需要对不同的场景进行定制。此外，传统视觉方法容易检测到噪声，或者对元素进行过度分割，但是当它们确实定位真实元素时，检测到的边界框会相当准确。

图像深度学习方法

深度学习模型通过从大量 UI 样本中学习 UI 元素特征及其组成，消除了手动特征工程的需要。从图片中识别目标的位置和类别，是一个典型的目标检测应用场景。常见的目标检测模型分类两类：

• Two-stage

  Two-stage 训练分为两个阶段，先训练 RPN 得到目标候选框，再通过分类网络得到目标类别，典型代表有Faster RCNN。

• One-stage

  One-stage直接回归物体的坐标位置值以及类别概率，取消了RPN速度更快，典型代表有 YOLO 、 SSD。

在基于深度学习的目标检测模型中，使用统计回归模型来预测目标的边框，而该回归模型是在 CNN 的高层抽象特征图中进行预测的，其中的一个像素代表了原图的若多个像素，抽象特征图中预测坐标的微小变化将导致原始图像中精确位置的较大变化，这自然决定了无法得到精准的边框。因此，深度学习模型要么使用松散的边界框检测更多元素，要么使用准确的边界框检测更少的元素。

面向结构方法

上述传统视觉方法以及深度学习方法，使用的输入都是图像。当有设计稿原始结构数据时，也可以使用结构信息来区分不同组件。

• 人工特征分类

  从组件视觉稿结构数据中人工提取特征，比如视觉维度的宽、高、颜色，业务维度的文本关键字等，实现 UI 信息的抽象，得到高维特征向量，再对特征向量进行分类，比如随机森林、XGBoost多分类。

• 图匹配网络

  图网络中的图并非图像，而是数据结构中的图结构。将组件中元素转为互相连接的图节点，即得到一个图结构，通过训练图匹配网络提取组件的特征，再进行特征的匹配，即可得到组件的相似度。

面向结构的方式对组件结构有着比较高的要求，当设计稿中直接使用复用图像来表示组件或者组件的部分信息，则缺失了结构信息无法匹配到正确的组件。

UI 文本元素检测

文本元素与非文本元素具有非常不同的视觉特征，论文【1】表明这表明将文本学习和非文本元素检测混合在一起会干扰检测非文本元素的学习。由此 UI 文本元素的检测通常与非文本元素的检测分开，通常使用现有的OCR工具，例如 Tesseract。OCR工具旨在识别文档图像中的文本，而 UI 元素中的文本背景较为杂乱。

• Tesseract

  是一种用于文档文本的 OCR 工具。它包括两个步骤：文本行检测和文本识别。Tesseract 的文本行检测是老式的。它首先将图像转换为二值图，然后进行连通分量分析以找到元素的轮廓。然后将这些轮廓分组为斑点，这些斑点进一步合并在一起。最后，它合并至少水平重叠一半的文本行。

• EAST

  是一种深度学习技术，用于检测自然场景中的文本。输入图像首先被送入特征金字塔网络。 EAST 然后根据最终的特征图为每个点计算六个值，即对象性分数、上/左/下/右偏移和旋转角度。由于 UI 文本具有场景文本的特征,相较于Tesseract，East在 UI 文本检测上效果表现更好。

在解决组件识别的问题过程中，我们尝试了上述若干种方式来做识别。不论是计算机视觉还是深度学习方法，或者结构匹配方法，其各自有优势以及局限。并没有哪种方法可以完美的一劳永逸解决实际中的组件识别问题。针对不同业务场景，需要针对组件的不同粒度、不同视觉特征、结构特征选取不同的方法进行识别，通过算法与工程结合的方式来达到最佳的识别效果。

[1] Chen J, Xie M, Xing Z, et al. Object detection for graphical user interface: old fashioned or deep learning or a combination?[C]//proceedings of the 28th ACM joint meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering. 2020: 1202-1214.

[2] Patil A G, Li M, Fisher M, et al. Layoutgmn: Neural graph matching for structural layout similarity[C]//Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition. 2021: 11048-11057.

[3] Manandhar D, Ruta D, Collomosse J. Learning structural similarity of user interface layouts using graph networks[C]//European Conference on Computer Vision. Springer, Cham, 2020: 730-746.