前端代码是怎样智能生成的-图像分离篇

做为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次《前端代码是怎样智能生成的》系列分享，将与你们分享前端智能化项目中技术与思考的点点滴滴。前端

文/仝辉算法

概述

一直以来，如何从“视觉稿”精确的还原出对应的 UI 侧代码一直是端侧开发同窗工做里消耗比较大的部分，一方面这部分的工做比较肯定缺乏技术深度，另外一方面视觉设计师也须要投入大量的走查时间，有大量无谓的沟通和消耗。

不少人会比较好奇，为何咱们尝试使用图片作为输入源，一方面基于 Sketch 或者 Photoshop 等插件相对容易拿到肯定性的信息，图片在某些方面容易丢失一些特征；另外基于图片的分析其实挑战更大。咱们作这个选择有如下缘由：bash

首先图片做为最终的产出物，更直观和肯定性，另外这个链路里对上游不会有约束性。
视觉稿跟开发代码不同的地方在于布局的不一样，好比 listview ，grdview 这类布局类别在设计稿中是不存在的
基于图片的应用场景会更普适，相似场景。例如自动化测试能力的支持，基于竞品直接截图来套用咱们本身的数据源找体感，这类场景是其余的方案作不到的。
设计稿有图层堆叠的问题，从图片出发能够更好地合并图层。

图像分离是 D2C 图像处理层的重要组成部分，具体内容包括了版面分析，复杂背景处理，布局识别和属性提取。本篇会从版面分析和复杂背景内容提取两个部分加以介绍。版面分析会将图像分割成若干个区块，并对不一样的内容作分割和合并。复杂背景处理会在版面分析的基础上提取一些叠加的元素。
markdown

所在分层

本文讲述前端智能化 D2C 里技术分层中的 图层处理 能力层，主要负责识别图像的元素类别和提取样式，同时也为后续的布局算法层赋能。

网络

版面分析

版面分析主要处理 UI 图像的前景提取和背景分析，经过先后景分离算法，将 UI 视觉稿剪裁为 GUI 元素:机器学习

背景分析：经过机器视觉算法，分析背景颜色，背景渐变方向，以及背景的连通区域。
前景分析：经过深度学习算法，对GUI碎片进行整理，合并，识别。
复制代码

背景分析

背景分析的关键在于找到背景的连通区域和闭合区间，具体的步骤以下：函数

第一步：判断背景区块，经过 sobel，Lapacian，canny 等边缘检测的方法计算出梯度变化方向，从而获得纯色背景和渐变色背景区域。基于拉普拉斯算子的背景区域提取离散拉普拉斯算子的模板以下：

此外，咱们经过统计背景运动趋势的方式来断定它是否存在渐变色背景。若是存在，咱们将经过第二步进行精细化处理。

第二步：基于漫水填充算法，选取漫水的种子节点，滤除渐变色背景区域噪声。

def fill_color_diffuse_water_from_img(task_out_dir, image, x, y, thres_up = (10, 10, 10), thres_down = (10, 10, 10), fill_color = (255,255,255)):
    """ 漫水填充：会改变图像 """
    # 获取图片的高和宽
    h, w = image.shape[:2]

    # 建立一个h+2,w+2的遮罩层，
    # 这里须要注意，OpenCV的默认规定，
    # 遮罩层的shape必须是h+2，w+2而且必须是单通道8位，具体缘由我也不是很清楚。
    mask = np.zeros([h + 2, w + 2], np.uint8)

    # 这里执行漫水填充，参数表明：
    # copyImg：要填充的图片
    # mask：遮罩层
    # (x, y)：开始填充的位置（开始的种子点）
    # (255, 255, 255)：填充的值，这里填充成白色
    # (100,100,100)：开始的种子点与整个图像的像素值的最大的负差值
    # (50,50,50)：开始的种子点与整个图像的像素值的最大的正差值
    # cv.FLOODFILL_FIXED_RANGE：处理图像的方法，通常处理彩色图象用这个方法
    cv2.floodFill(image, mask, (x, y), fill_color, thres_down, thres_up, cv2.FLOODFILL_FIXED_RANGE)
    cv2.imwrite(task_out_dir + "/ui/tmp2.png", image)
    # mask是很是重要的一个区域，这块区域内会显示哪些区域被填充了颜色
    # 对于UI自动化，mask能够设置成shape，大小以1最大的宽和高为准
    return image, mask
复制代码

处理事后的效果以下：

oop

（原图与处理效果图）

第三步：经过版面切割，提取 GUI 元素。

（背景分析后提取的内容模块）

这个时候咱们已经成功将图片分层并提取了模块，后续细节能够在前景分析和复杂背景提取中得到。

前景分析

前景分析的关键在于组件完整性切割与识别。咱们经过连通域分析，防止组件碎片化，再经过机器学习识别组件类型，再经过组件类型进行碎片化合并，反复执行上述动做，直到无特征属性碎片。咱们经过瀑布流中提取一个完整 item 为例：

布局

（标红部分是处理难点）

闲鱼页面中瀑布流卡片识别是实现布局分析的一个重要步骤，需求是当卡片完整出如今截屏图像中时(容许图标遮挡)须要识别出来，卡片被背景部分遮挡时不该该识别出来。上图的瀑布流卡片样式，因为其布局紧凑且样式繁多，致使容易产生漏检或误检。

基于边缘梯度或连通域的传统图像处理方法能根据图像自己的灰度或者形状特征提取出瀑布流卡片的轮廓，优势是定位精度高、运算速度快。缺点是容易受到干扰，召回率不高。

基于目标检测或者特征点检测的深度学习方法采用有监督的方式学习卡片的样式特征，优势是不易受到干扰，召回率很高。缺点是由于涉及回归过程，定位精度比传统图像处理方法要低，而且须要大量的人工标注，运算速度也比传统图像处理方法要慢。

受集成学习的启发，经过融合传统图像处理方法和深度学习方法，结合二者各自的优势，最终能获得具备较高精确率、召回率和定位精度的识别结果。

传统图像处理算法流程以下图所示:
1》. 输入的瀑布流卡片图像转换成灰度图后使用对比度受限的自适应直方图均衡化 (CLAHE) 进行加强
2》. 使用 Canny 算子进行边缘检测获得二值化图像
3》. 对二值化图像进行形态学膨胀处理，链接断开的边缘
4》. 提取连续边缘的外层轮廓，并基于轮廓包含区域的面积大小丢弃面积较小的轮廓，输出候选轮廓
5》. 使用 Douglas-Peucker 算法进行矩形逼近，保留最像矩形的外轮廓，输出新的候选轮廓
6》. 最后对第 4 步的候选轮廓进行水平和垂直方向投影获得平滑的轮廓做为输出

（传统图像处理算法流程）

算法流程中 1》-3》能够归为边缘检测部分。

受各类因素影响，图像会出现降质，须要对其进行加强来提升边缘检测的效果。使用全图单一的直方图进行均衡化显然不是最好的选择，由于截取的瀑布流图像不一样区域对比度可能差异很大，加强后的图像可能会产生伪影。在单一直方图均衡化的基础上，学者基于分块处理的思想提出了自适应的直方图均衡化算法 (AHE) ，可是AHE在加强边缘的同时有时候也会将噪声放大。后来学者在AHE的基础上提出了 CLAHE ，利用一个对比度阈值来去除噪声的干扰，以下图所示直方图，CLAHE 不是将直方图中超过阈值的部分丢弃，而是将其均匀分布于其余 bin 中。

（直方图均衡）

Canny 算子是一种经典的边缘检测算子，它能获得精确的边缘位置。Canny 检测的通常步骤为：1) 用高斯滤波进行降噪 2) 用一阶偏导的有限差分计算梯度的幅值和方向 3)对梯度幅值进行非极大值抑制 4) 用双阈值检测和链接边缘。实验过程当中，须要屡次尝试选择较好的双阈值参数。

检测出来的边缘在某些局部地方会断开，能够采用特定形状和尺寸的结构元素对二值化图像进行形态学膨胀处理来链接断开的边缘。边缘检测的结果以下图所示，其中 c) 中 CLAHE 设定对比度阈值为 10.0 ，区域大小为 (10，10)，d) 中 Canny 检测设置双阈值为 (20，80)，e) 中形态学膨胀结构元素使用大小为 (3，3) 的十字线。

（传统图像处理结果图）

算法流程中 4》-6》能够归为轮廓提取部分。二值图像形态学膨胀处理后，首先提取连续边缘的外层轮廓。以下图所示，对于只有 0 和 1 的二值图像，假设 S1 为像素值为 0 的一堆背景点，S2 为像素值为 1 的一堆前景点，外层轮廓 B1 为一堆前景点最外围的点，内层轮廓 B2 为一堆前景点最内部的点。经过对二值图像进行行扫描给不一样轮廓边界赋予不一样的整数值，从而肯定轮廓的类型以及之间的层次关系。提取出外层轮廓后经过计算轮廓包含的面积大小丢弃面积较小的外层轮廓，输出第一步候选轮廓。

（提取轮廓）

闲鱼页面瀑布流卡片轮廓近似于矩形，在四个角由弧形曲线链接。对于提取的候选轮廓使用 Douglas-Peucker 算法进行矩形逼近，保留形状接近矩形的外轮廓。 Douglas-Peucker 算法经过将一组点表示的曲线或多边形拟合成另外一组更少的点，使得两组点之间的距离知足特定的精度。以后输出第二步候选轮廓。

经过对第二步候选轮廓所处位置对应的第一步候选轮廓进行水平和垂直方向投影，去除毛刺影响，输出矩形轮廓。轮廓提取的结果以下图所示，其中 c) 中轮廓包含面积设置的阈值为 10000 ，d) 中 Douglas-Peucker 算法设置的精度为 0.01 * 轮廓长度。本文全部提取的轮廓均包含输入框。

（不一样方法识别结果）

咱们再介绍下机器学习如何处理：

传统算法中提出采用传统图像处理方法提取轮廓特征，这样会带来一个问题：当图像不清晰或者有遮挡的状况下没法提取出轮廓，即召回率不是很高。

基于卷积神经网络的目标检测算法能经过输入大量样本数据，学习到更具备表明性和区别性的特征。目前目标检测算法主要分红两个派系：以 R-CNN 家族为表明的两阶段流和以 YOLO 、SSD 为表明的一阶段流。一阶段流直接对预测的目标进行分类和回归，优势是速度快，缺点是 mAP 总体上没有两阶段流高。两阶段流在对预测的目标进行分类和回归前须要先生成候选的目标区域，这样训练时更容易收敛，所以优势是 mAP 高，缺点是速度上不如一阶段流。无论是一阶段流仍是两阶段流，通用的目标检测推理过程如图所示。输入一张图像到特征提取网络(可选择 VGG 、Inception 、Resnet 等成熟的 CNN 网络)获得图像特征，而后将特定区域特征分别送入分类器和回归器进行类别分类和位置回归，最后将框的类别和位置进行输出。

（目标检测网络流程示意）

Faster R-CNN 对 R-CNN 家族最大的贡献是将生成候选目标区域的过程整合到整个网络中，使得综合性能有了较大提升，尤为是在检测速度上。Faster R-CNN 的基本结构如图所示。主要分为 4 个部分：1) conv layers。做为一种特征提取网络，使用一组基础的 conv + relu + pooling 层提取图像的特征，该特征被共享用于后续RPN网络和全链接层。2) Region Proposal Network。该网络用于生成候选目标框，经过 softmax 判断候选框是属于前景仍是背景，而且经过候选框回归修正候选框位置。3) RoI pooling。收集输入的特征图和候选区域，将这些候选区域映射到固定大小并送入后续全链接层。4) classifer。计算候选框的具体类别，而且再次回归修正候选框的位置。

（目标检测网络基本结构示意）

使用 Faster R-CNN 进行瀑布流卡片的识别，获得下图的结果。

（目标检测结果）

传统算法与机器学习的融合

描述的传统图像方法可以得到高定位精度的卡片位置，但受卡片自己模式的影响，召回率不高)中右边卡片没有检测到。基于目标检测的深度学习方法具备较高的泛化能力，能得到较高的召回率，可是回归过程没法获得高定位精度的卡片位置)中卡片都能检测出来，但有两个卡片的边缘几乎粘连在了一块儿。

将两种方法获得的结果融合在一块儿，能同时得到高精确率、高召回率、高定位精度的检测结果。融合过程以下：性能

输入一张图像，并行运行传统图像处理方法和深度学习方法，分别获得提取的卡片框 trbox 和 dlbox 。定位精度以 trbox 为标杆，精确率和召回率以 dlbox 为标杆
筛选 trbox 。规则为当 trbox 与 dlbox 的 IOU 大于某个阈值时(好比 0.8 )保留此trbox，不然丢弃，获得 trbox1
筛选 dlbox 。规则为当 dlbox 与 trbox1 的 IOU 大于某个阈值时(好比0.8)丢弃此 dlbox ，不然保留，获得 dlbox1
修正 dlbox1 位置。规则为dlbox1的每条边移动到距离其最近的一条直线上，约束条件为移动的距离不能超过给定的阈值(好比 20 个像素)，而且移动的边不能跨越 trbox1 的边，获得修正的 dlbox2
输出 trbox1 + dlbox2 为最终融合的卡片框

结果

先介绍几个基本指标:
True Positive(TP): 被模型预测为正的正例数
True Negative(TN): 被模型预测为负的负例数
False Positive(FP): 被模型预测为正的负例数
False Negative(FN): 被模型预测为负的正例数
精确率 (Precision) = TP/(TP+FP) :反映了被模型预测的正例中真正的正样本所占比重
召回率 (Recall) = TP/(TP+FN) : 反映了被模型正确预测的正例占总的正样本比重
定位精度 (IOU) = 两个框的交集大小/两个框的并集大小

（不一样方式获得的检测结果）

上图分别显示了不一样方法识别的卡片, d) 相对于 b) 的优点是提升了召回率，d) 相对于 c) 的优点是提升了定位精度。图一图二图三显示了一些其余实例图像的识别，每行图像是一类实例图，第一列是原始图像，第二列是传统图像处理识别的卡片，第三列是深度学习识别的卡片，第四列是融合的卡片。

图一图二可以准确识别卡片轮廓：

（前景识别结果示例I）

图三融合卡片的下边缘并无彻底贴合，这是由于融合步骤中修正 dlbox1 位置时，采用传统图像处理方法寻找临域范围内最近的直线，受到图像样式的影响，找到的直线并非指望的卡片下边缘。

（前景识别结果示例II）

实验过程当中随机截取了 50 张闲鱼瀑布流卡片图像，共有卡片 96 个(不包含输入框)，对每张图像分别采用传统图像处理方法、深度学习方法、融合方法获得卡片的识别结果，其中传统图像处理方法共识别出 65 个卡片，深度学习方法共识别出 97 个，融合后共识别出 98 个。精确率、召回率、定位精度以下表所示。融合后识别结果结合了传统图像处理方法定位精度高、深度学习方法召回率高的优势。

不一样方法结果

前景算法小结

经过对闲鱼页面瀑布流卡片识别过程当中的描述，咱们简单介绍了前景处理的探索，经过机器视觉算法和机器学习算法协同完成前景元素的提取和识别。

结束语

本篇咱们经过对前景提取和背景分析的介绍，提出了一种经过传统图像处理和深度学习相融合的方法，来获得高精确率、高召回率和高定位精度的识别结果。但方法自己还存在一些瑕疵，好比融合过程对组件元素进行修正时也会受到图像样式的干扰，后续这部分能够进一步进行优化。

复杂背景内容提取

复杂背景内容提取指的是从复杂的背景中提取出特定的内容，例如在图片中提取特定的文字，在图片中提取特定的叠加图层等等。

这是一个业界难题，基于传统的图像处理的方法存在准确率和召回率的问题，无法解决语义的问题。而主流的机器学习的方法，例如目标检测没法获取像素级别的位置信息，而语义分割的方法则只能提取像素而没法获取半透明叠加前的像素信息。

本文考虑到这些痛点，本文采用了目标检测网络来实现内容召回，GAN 网络实现复杂背景中特定前景内容的提取和复原。

复杂背景的处理流程分为以下几个步骤：

内容召回：经过目标检测网络召回元素，即元素是否须要作背景提取操做。
区域判断：根据梯度等视觉方法判断所处区域是不是复杂区域。
简单区域：基于梯度的方式找到背景区块。
复杂区域：采用SRGAN网络进行内容提取。
复制代码

内容召回：

内容召回咱们采用目标检测网络来实现，例如 Faster-rcnn 或者 Mask-rcnn 等，以下图所示：

区域判断：

根据拉普拉斯算子计算周边梯度，判断所处区域是不是复杂区域。

简单背景：

因为目标检测模型自己的局限性，会致使无法达到像素级别的精确性，所以须要对位置作修正。若是是简单背景就能够基于梯度的思想作位置修正，具体计算方式以下：

（简单背景位置修正公式）
复杂背景：

背景是复杂背景时，左图是原图，右图是提取的文字区块：

（原图和文字区域）

此时提取出的框不是彻底正确，那么此时根据梯度等机器视觉算法已经不能对位置作正确的修正了。本文提出了基于 GAN 网络的方式来解决复杂背景内容提取问题，网络的主要结构以下图所示：

（GAN网络流程图）

为何选择 GAN 网络？

1）基于 srGAN 网络，该网络加入了特征图的损失函数，这样能够很好保留高频信息，能更好的保留边缘。特征图的损失函数以下图所示：

（特征图损失函数）
该公式将原图和生成图特征值差的平方作为损失函数。
2）因为有对抗损失的存在，能够很好的下降误检率。
3）最重要的一点是在有透明度的场景下，语义分割网络只能“提取”元素，没法“还原”元素。而GAN网络不只能够在提取元素的同时还原出未叠加时的像素状况。

网络训练流程图：
**

（srGAN网络训练流程）

针对业务场景对 GAN 网络作的改进：
**

因为咱们不是超分辨率场景，所以不用 pixelShuffler 模块作上采样。
因为场景比较复杂，能够引入 denseNet 和加深网络来提升准确率。
内容损失函数对于压制误判的噪点效果不理想，所以加大了误判的惩罚，具体以下图所示：

预测获取的结果图 I :

（复杂背景的文字内容提取）

预测获取的结果图 II :

（原图和相应的处理结果）

结束语

本篇咱们经过复杂背景内容提取的介绍，提出了一种机器学习为主，图像处理为辅去精确获取特定前景内容的方法，获得了高精确率、高召回率和高定位精度的识别结果。

下图分别是传统算法，语义分割方法和本文融合方法的各个指标的状况。

（不一样算法的识别结果）

业务场景落地

本篇咱们提出的方法已经应用在以下场景：

imgcook 图片链路中应用，对于通用场景的准确率能达到 73% ，特定的卡片场景能达到 92% 以上。
淘宝自动化测试图像内容理解，例如应用在99大促和双11模块识别中。总体的准确率和召回率都能达到 97% 以上。

将来展望

将来咱们打算从图片链路出发，作到以下几点：

丰富和完善布局信息，可以精确地识别 listview，gridview，waterfull 等布局信息。
进一步提升通用场景的准确率和召回率。针对小目标，咱们后续会引入特征金字塔（fpn），Cascade等一系列技术来提升咱们的准确率和召回率。
增长适配的特定场景。现有的场景只覆盖了闲鱼和部分淘宝的页面适配，咱们但愿后续可以支持更多的页面，进一步提升图像的泛化能力。
引入图片样本制造机，下降特定场景的接入门槛。

更多推荐：

imgcook 官网体验一键智能生成代码
imgcook 知乎专栏为你带来前端智能化前沿资讯
钉钉交流