UI2CODE智能生成代码——组件识别篇

ゝ一世哀愁。 2022-10-01 11:41 173阅读 0赞

## 1.背景 ##

在[《UI2CODE——整体设计篇》][UI2CODE]中，我们介绍了UI2CODE工程的整体流程：

在组件识别这个环节，需要有一种处理布局信息的方法，来解析和计算控件间的布局关系（比如识别业务组件（BI组件）和查找重复布局），以此来提高最终代码的可用性。

在这篇文章，我们将介绍一种布局信息的结构化方法：**“连线法”**，以及一种布局间的计算和比较方法： **“引导连线法”**。

首先来看我们需要解决的问题：

## 2.问题一：识别业务组件 ##

## 目的：代码复用 ##

业务组件是指某些特定的卡片，比如一个商品详情卡片，这些卡片会在不同页面出现，而这些卡片的代码一般是已经存在的。我们在拿到一张图片的时候，需要先识别出这些组件，这样这一区块就能复用已有的组件代码，而不会造成很多冗余的一次性代码。

## 老解法：利用深度学习模型SSD做物体检测 ##

如果把寻找业务组件这个问题看成从一张大图片上寻找小图片的话，那么最直接的做法就是用一个物体检测模型（比如SSD）来做，这样只要训练模型来识别每个业务组件的图片就可以了。因此我们尝试了用训练SSD模型来解决这个问题。

## 存在的问题：训练困难，训练结果不可控 ##

经过训练和测试以后，我们发现用物体检测模型来解这个问题的弊端：

1.  需要造大量样本。由于图片信息丰富，为了避免过拟合，需要造大量样本来训练。
2.  训练困难，增加新的业务组件成本太高。每增加一个新的业务组件，就需要先造这个组件的样本，然后重新调整训练模型。
3.  训练结果不可控。对于一些badcase，没有一些直接有效的方式来做调整和控制，只能不断调整样本。

## 思考：是否可以利用已有的控件信息？ ##

既然前面已经解析出了各个控件的信息（包含类型以及位置等），那么我们是否可以直接利用这些信息来做处理呢？因此我们想要寻找一种新的方式，来处理和解析控件信息，利用这些信息来实现类似“物体检测”功能

## 3.问题二：重复布局 ##

## 目的：提升代码可用性 ##

如上图这个case，对于类似“GridView”的这种布局，我们理想的布局方式应该是有8个Item，每个Item包含一个TextView和ImageView（上图左边）。

## 存在的问题：没有识别出重复布局，最终代码不可用 ##

然而实际情况是，我们没有做重复布局的检测，因此布局的时候变成了4行（上图右边）。

## 思考：如何比较布局是否重复？ ##

为了解决上面的问题，我们就需要寻找一种方法，从多个控件信息中，找到一些规律，自动找到这些具有相似情况的布局。

## 4.问题分析 ##

以上就是我们需要解决的两个问题，我们分析这两个问题，会发现他们有一些共同点：

1.  都是由多个控件组成大的布局
2.  布局间需要进行比较，寻找“相似布局”
3.  都是非结构化数据：无法直接比较、计算

## 5.解决思路 ##

首先我们需要将非结构化数据转换为结构化数据（或者叫特征提取），这个思路可以参考图片分类任务的做法，不管是聚类算法还是AI模型，都是先做特征提取，再进行进一步处理，实际上做的就是非结构化数据转换成结构化数据。

因此，我们的问题解决思路也就分为两步：

1.  **布局信息结构化：将布局信息处理成结构化的数据**
2.  **布局比较：对布局进行比较、计算，寻找相似布局**

## 6.布局结构化：控件间的关系 ##

为了分析控件间的关系，我们可以先从简单的开始，看一下两个控件之间的关系都包含哪些信息。

两个控件间的关系，包含以下2个方面的信息：

1.  **控件属性**（类型、文本内容、位置、大小）
2.  **方向、距离、对齐方式**（用连线表达）

## 控件属性： ##

对于控件属性，可以直接用它自身表示，包含控件类型、内容、位置、大小等

## 方向和距离： ##

对于两个控件的方向和距离，我们可以用一条虚拟的“连线”来表示，这条连线连接两个控件的中心点。这样，这条连线的长度和角度就可以表示两个控件的方向和距离。比如上图，我们可以得到：一个TextView在一个ImageView正上方，距离xxx像素。

## 对齐方式： ##

但是除了角度和方向，实际上还存在着一个**“对齐方式”**信息。

比如上图这个case，如果我们还是连接两个控件的中心点的话（图中蓝色虚线），那这左右两边的图就是指不同的布局（因为两个控件的角度和距离都不一样）。

但是由我们人“肉眼”来看，我们会认为这两个布局是一样的，都是左边一个头像，右边上面跟着一个文本。

因此，我们需要连接TextView的“左边中点”（图上红色实线），这样，不同的连接点位置，就可以表达不同的对齐方式。左对齐的TextView连接左边中点，右对齐的TextView连接右边中点，居中的连接中心点。

## 定义数据结构 ##

有了上面的分析，我们就可以定义一个数据结构。我们用一个Connection对象表达2个控件间的布局关系，它包含：

1.  **控件1属性**（类型、位置大小等）
2.  **控件2属性**（类型、位置大小等）
3.  **控件1和控件2间的多条连线**（角度、距离）

这样，2个Connection之间就可以进行比较、判断是否“匹配”

## Connection匹配计算 ##

两个Connection之间是否“匹配”，必须满足：

1.  控件信息匹配（类型一致、ImageView面积相似度满足要求等）
2.  方向和距离匹配（连线的余弦相似度）
3.  其它自定义的匹配要求

## 7.布局结构化：整个布局的表示 ##

两个控件间的关系可以用一个Connection来表示，那么多个控件组成的大布局，就可以用一组Connection来表示。

我们对每两个控件建立一个Connection，就可以得到一个Connection数组

这样，我们的第一步“布局信息结构化”就完成了。

## 8.布局间比较：引导连线法 ##

将布局信息转换成Connection数组以后，我们就可以开始利用这些信息来查找相似布局。

首先，我们可以理解这样一个概念，就是：

**一个布局，可以看成由一组Connection对象串联起来，得到的一个“路径”**

如上图，蓝色圈内的布局可以看成一组Connection串联起来（红色连线）。

那么，**寻找相似布局，就是寻找两条相似“路径”的过程**

## 引导连线法 ##

为了寻找相似路径，我们定义了一个“引导连线法”。

**所谓“引导连线法”，就是一个 Leader，一个 Follower，Follower 尝试着跟随 Leader 走出一条一样的路径。**

步骤如下：

1.  计算出所有相互匹配的Connection（如下图所有绿色的连线）
2.  定义一个“Leader”叫A，一个 “Follower” 叫B
3.  随机选择一条绿色连线作为A的初始路径，与其相匹配的另一条绿色连线作为B的初始路径
4.  A尝试着继续往前走，找到下一个路径（绿色连线），B尝试着跟随
5.  如果B能跟的上（即找到了一条路径，刚好与A想走的路径匹配上），那么A继续往下走，如果B跟不上，那么A换条路径继续尝试。
6.  直到A走的路径B怎么也跟不上时，A和B走过的路径所对应的那些控件，就是拥有相似布局的控件。

## 9.应用效果 ##

有了结构化的方法和“引导连线法”，我们就可以应用到上述两个问题。

## 业务组件 ##

### 应用方式 ###

1.  对业务组件进行结构化处理（图左红色连线）
2.  对待处理图片进行结构化处理
3.  找到他们之间可以“匹配”的Connection（图右绿色部分）
4.  用“引导连线法”找到相似的布局

### 效果 ###

应用这套算法以后，扩展要识别的组件变得非常简单，只要把新组件的的结构化数据预先计算好存储起来，在查找的时候应用”引导连线法“即可。

## 重复布局 ##

### 应用方式 ###

查找重复布局步骤如下：

1.  计算自身所有控件的Connection
2.  寻找自身Connection中，互相匹配的 Connection

1.  “引导连线”法寻找匹配的布局“pair”

1.  多个“pair”串联组成一个重复布局

1.  继续尝试对重复布局的每个Item做拆分，可得到“GridView”

这样，最终我们就可以找到，图上有8个布局相似的Item。

### 效果 ###

应用这套算法，可以查找出页面上任意的重复布局，无论是简单的还是复杂的，极大得提升了代码的可用性。

## 10.结语 ##

以上就是我们针对布局信息的处理和计算的整体思路。当然其中还有很多复杂细节需要处理，比如相似布局相似度计算、重复布局多个“pair”组合起来的时候组合条件的判断、重复布局其它额外信息的提取等。但是总体上都是围绕着“布局信息结构化”和“引导连线法展开”，我们也在不断的继续探寻和持续优化各个环节。

[原文链接][Link 1]

本文为云栖社区原创内容，未经允许不得转载。

转载于:https://juejin.im/post/5cdd13c951882568d154ccb0

[UI2CODE]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fmp.weixin.qq.com%2Fs%2F4s6MaiuW4VoHr_7f0S_vuQ
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fyq.aliyun.com%2Farticles%2F702379%253Futm_content%253Dg_1000058103