UI 2 CODE中的深度学习+传统算法应用

背景

在之前的文章中，我们已经提到过团队在UI自动化这方面的尝试，我们的目标是实现基于 单一图片到代码 的转换，在这个过程不可避免会遇到一个问题，就是为了从单一图片中提取出足够的有意义的结构信息，我们必须要拥有从图片中切割出想要区块（文字、按钮、商品图片等）的能力，而传统切割算法遇到复杂背景图片往往就捉襟见肘了（见下图），这个时候，我们就需要有能力把复杂前后景的图片划分为各个层级图层，再交给切割算法去处理，拿到我们期望的结构信息。

经过传统切割算法处理，会无法获取图片结构信息，最终只会当成一张图片处理。

在业界，图片前后景分离一直是个很麻烦的命题，业界目前比较普遍采用的解决方案是计算机视觉算法提取，或是引入人工智能来解决，但直到现在，都没有百分百完美的解决方案。那是否能引入AI来解决这个问题呢，我们来看一下，目前使用AI并拿到比较不错结果的解法是fcn+crf，基本上能够把目标物体的前景轮廓框出来，但缺点也很明显：

• 准确率只有80%左右

• 边缘切割无法达到像素级别

• 打标成本非常大

• 难以训练

• AI是个黑盒，结果不可控

在考虑到使用AI伴随的问题之外，咱们也一起来思考下，难道AI真的是解决前后景分离的最佳解法吗？

其实不是的，我们知道，一个页面，或者说设计稿，一个有意义的前景，是具有比较明显特征的，比如说：

• 规则的形状：线段、矩形、圆形、圆角、是否对称等

• 形状上是否有文字，或者说是类似于文字的信息

• 是否闭合

让我们一起来验证下这个思路的可行性。

实践结果

在尝试了非常的多计算机视觉算法之后，你会发现，没有一种算法是能够解决掉这个问题的，基本上是可能一种算法，在某种场景下是有效的，到了另外一个场景，就又失效了，而且就算是有效的场景，不同颜色复杂度下，所需要的最佳算法参数又是不相同的。如果c