北京wap网站开发,银川微信网站,做电商需要哪些网站有哪些,企业网站建设自己的官网开篇: 在《UI2CODE--整体设计》篇中#xff0c;我们提到UI2CODE工程的第一步是版面分析#xff0c;如果是白色的简单背景#xff0c;我们可以像切西瓜一样#xff0c;将图片信息切割为GUI元素。但是在实际生产过程中#xff0c;UI的复杂度会高很多。本篇我们将围绕版面分析…开篇: 在《UI2CODE--整体设计》篇中我们提到UI2CODE工程的第一步是版面分析如果是白色的简单背景我们可以像切西瓜一样将图片信息切割为GUI元素。但是在实际生产过程中UI的复杂度会高很多。本篇我们将围绕版面分析这块内容分享我们的探索过程。
架构设计 版面分析主要处理UI图像的前景提取和背景分析 通过前后景分离算法将UI视觉稿剪裁为GUI元素:
背景分析通过机器视觉算法分析背景颜色背景渐变方向以及背景的连通区域。
前景分析通过深度学习算法对GUI碎片进行整理合并识别。
背景分析 背景分析的关键在于找到背景的连通区域和闭合区间 我们从一个实际的应用场景来分析整个背景提取的过程 我们期望将上一张图片通过UI2CODE来提取GUI元素。
第一步判断背景区块通过sobelLapaciancanny等边缘检测的方法计算出梯度变化方向从而得到纯色背景和渐变色背景区域。
基于拉普拉斯算子的背景区域提取 离散拉普拉斯算子的模板 扩展模板 当该区域点与模板点乘得到的数值越小越是平坦的区域即接近背景区域。如果是渐变色区域则统计它的运动趋势。左-右右-左上-下, 下-上
提取效果如下 我们发现上图虽然能大致提取背景轮廓但是对于有渐变色的背景还是比较粗糙。 因此我们通过统计背景运动趋势的方式来判定它是否存在渐变色背景。如果存在我们将通过第二步进行精细化处理。
第二步基于漫水填充算法选取漫水的种子节点滤除渐变色背景区域噪声。 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]# 创建一个h2,w2的遮罩层# 这里需要注意OpenCV的默认规定# 遮罩层的shape必须是h2w2并且必须是单通道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处理过后的效果如下 第三步通过版面切割提取GUI元素切割方法之前有提到过。 这个时候我们已经成功提取了80%的GUI元素但是叠加图层部分元素还无法解析。
第四步通过霍夫直线、霍夫圆和轮廓查找的方式找到对称的轮廓区域。对提取的轮廓区域做第二步到第四步的递归处理。 复杂背景的提取是后续前景分析的基础。当提炼出背景区域后我们就可以通过连通域分析前景区域并利用组件识别的方式分析前景类别再通过语义分析等方式对前景做拆分和合并。
背景分析小结
对比较简单的渐变色背景通过上述四步基本都能够解决。基于霍夫直线和霍夫圆的思想去查找特定的轮廓区域并分析这些轮廓区域做细化分析。再通过漫水填充的方式消除渐变色背景。 对于复杂背景的处理可以基于目标检测的方法找到一些特定含义的内容。再利用马尔科夫随机场mrf细化边缘特征。 前景分析
前景分析的关键在于组件完整性切割与识别 我们通过连通域分析防止组件碎片化再通过机器学习识别组件类型再通过组件类型进行碎片化合并反复执行上述动作直到无特征属性碎片。
但是有些情况会比较复杂我们通过瀑布流中提取一个完整item为例
概述
闲鱼页面中瀑布流卡片识别是实现布局分析的一个重要步骤需求是当卡片完整出现在截屏图像中时(允许图标遮挡)需要识别出来卡片被背景部分遮挡时不应该识别出来。下图所示的瀑布流卡片样式由于其布局紧凑且样式繁多导致容易产生漏检或误检。
瀑布流卡片样式 a)红框显示卡片部分被图标遮挡 b)红框显示卡片内图片颜色和卡片外背景颜色接近 基于边缘梯度或连通域的传统图像处理方法能根据图像本身的灰度或者形状特征提取出瀑布流卡片的轮廓优点是定位精度高、运算速度快。缺点是容易受到干扰召回率不高。 基于目标检测或者特征点检测的深度学习方法采用有监督的方式学习卡片的样式特征优点是不易受到干扰召回率很高。缺点是因为涉及回归过程定位精度比传统图像处理方法要低并且需要大量的人工标注运算速度也比传统图像处理方法要慢。 受集成学习的启发通过融合传统图像处理方法和深度学习方法结合两者各自的优点最终能得到具有较高精确率、召回率和定位精度的识别结果。
传统图像处理
1.算法流程
整个算法流程如下图所示: 1》. 输入的瀑布流卡片图像转换成灰度图后使用对比度受限的自适应直方图均衡化(CLAHE)进行增强 2》. 使用Canny算子进行边缘检测得到二值化图像 3》. 对二值化图像进行形态学膨胀处理连接断开的边缘 4》. 提取连续边缘的外层轮廓并基于轮廓包含区域的面积大小丢弃面积较小的轮廓输出候选轮廓 5》. 使用Douglas-Peucker算法进行矩形逼近保留最像矩形的外轮廓输出新的候选轮廓 6》. 最后对第4步的候选轮廓进行水平和垂直方向投影得到平滑的轮廓作为输出
卡片轮廓提取流程
2.边缘检测
算法流程中1》-3》可以归为边缘检测部分。 受各种因素影响图像会出现降质需要对其进行增强来提高边缘检测的效果。使用全图单一的直方图进行均衡化显然不是最好的选择因为截取的瀑布流图像不同区域对比度可能差别很大增强后的图像可能会产生伪影。在单一直方图均衡化的基础上学者基于分块处理的思想提出了自适应的直方图均衡化算法(AHE)但是AHE在增强边缘的同时有时候也会将噪声放大。后来学者在AHE的基础上提出了CLAHE利用一个对比度阈值来去除噪声的干扰如下图所示直方图CLAHE不是将直方图中超过阈值的部分丢弃而是将其均匀分布于其他bin中。
CLAHE对比度限制示意图
Canny算子是一种经典的边缘检测算子它能得到精确的边缘位置。Canny检测的一般步骤为1)用高斯滤波进行降噪 2)用一阶偏导的有限差分计算梯度的幅值和方向 3)对梯度幅值进行非极大值抑制 4)用双阈值检测和连接边缘。实验过程中需要多次尝试选择较好的双阈值参数。 检测出来的边缘在某些局部地方会断开可以采用特定形状和尺寸的结构元素对二值化图像进行形态学膨胀处理来连接断开的边缘。边缘检测的结果如下图所示其中c)中CLAHE设定对比度阈值为10.0区域大小为(1010)d)中Canny检测设置双阈值为(2080)e)中形态学膨胀结构元素使用大小为(33)的十字线。
边缘检测结果 a)原始图像 b)灰度化图像 c)CLAHE增强图像 d)Canny检测图像 e)形态学膨胀图像
3.轮廓提取
算法流程中4》-6》可以归为轮廓提取部分。 二值图像形态学膨胀处理后首先提取连续边缘的外层轮廓。如下图所示对于只有0和1的二值图像假设S1为像素值为0的一堆背景点S2为像素值为1的一堆前景点外层轮廓B1为一堆前景点最外围的点内层轮廓B2为一堆前景点最内部的点。通过对二值图像进行行扫描给不同轮廓边界赋予不同的整数值从而确定轮廓的类型以及之间的层次关系。提取出外层轮廓后通过计算轮廓包含的面积大小丢弃面积较小的外层轮廓输出第一步候选轮廓。
内外轮廓示意图
闲鱼页面瀑布流卡片轮廓近似于矩形在四个角由弧形曲线连接。对于提取的候选轮廓使用Douglas-Peucker算法进行矩形逼近保留形状接近矩形的外轮廓。Douglas-Peucker算法通过将一组点表示的曲线或多边形拟合成另一组更少的点使得两组点之间的距离满足特定的精度。之后输出第二步候选轮廓。 通过对第二步候选轮廓所处位置对应的第一步候选轮廓进行水平和垂直方向投影去除毛刺影响输出矩形轮廓。轮廓提取的结果如下图所示其中c)中轮廓包含面积设置的阈值为10000d)中Douglas-Peucker算法设置的精度为0.01*轮廓长度。本文所有提取的轮廓均包含输入框。
轮廓提取结果 a)原始图像 b)形态学膨胀图像 c)红色线段为第一步候选轮廓 d)红色线段为第二步候选轮廓 e)红色线段为最终输出矩形轮廓
我们再介绍下机器学习如何处理
深度学习算法
1.目标检测算法
传统算法中提出采用传统图像处理方法提取轮廓特征这样会带来一个问题当图像不清晰或者有遮挡的情况下无法提取出轮廓即召回率不是很高。 基于卷积神经网络的目标检测算法能通过输入大量样本数据学习到更具有代表性和区别性的特征。目前目标检测算法主要分成两个派系以R-CNN家族为代表的两阶段流和以YOLO、SSD为代表的一阶段流。一阶段流直接对预测的目标进行分类和回归优点是速度快缺点是mAP整体上没有两阶段流高。两阶段流在对预测的目标进行分类和回归前需要先生成候选的目标区域这样训练时更容易收敛因此优点是mAP高缺点是速度上不如一阶段流。不管是一阶段流还是两阶段流通用的目标检测推理过程如图所示。输入一张图像到特征提取网络(可选择VGG、Inception、Resnet等成熟的CNN网络)得到图像特征然后将特定区域特征分别送入分类器和回归器进行类别分类和位置回归最后将框的类别和位置进行输出。
目标检测推理过程
2.Faster R-CNN
Faster R-CNN对R-CNN家族最大的贡献是将生成候选目标区域的过程整合到整个网络中使得综合性能有了较大提高尤其是在检测速度上。Faster R-CNN的基本结构如图所示。主要分为4个部分1)conv layers。作为一种特征提取网络使用一组基础的convrelupooling层提取图像的特征该特征被共享用于后续RPN网络和全连接层。2)Region Proposal Network。该网络用于生成候选目标框通过softmax判断候选框是属于前景还是背景并且通过候选框回归修正候选框位置。3)RoI pooling。收集输入的特征图和候选区域将这些候选区域映射到固定大小并送入后续全连接层。4)classifer。计算候选框的具体类别并且再次回归修正候选框的位置。
Faster R-CNN基本结构
使用Faster R-CNN进行瀑布流卡片的识别得到下图的结果。
Faster R-CNN识别结果 a)原始图像 b)红框显示识别的卡片
传统算法与机器学习的融合
1.融合流程
描述的传统图像方法能够获得高定位精度的卡片位置但受卡片本身模式的影响召回率不高)中右边卡片没有检测到。上文描述的基于目标检测的深度学习方法具有较高的泛化能力能获得较高的召回率但是回归过程无法得到高定位精度的卡片位置)中卡片都能检测出来但有两个卡片的边缘几乎粘连在了一起。 将两种方法得到的结果融合在一起能同时获得高精确率、高召回率、高定位精度的检测结果。融合过程如下
输入一张图像并行运行传统图像处理方法和深度学习方法分别得到提取的卡片框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输出trbox1dlbox2为最终融合的卡片框
2.结果
先介绍几个基本指标: True Positive(TP):被模型预测为正的正例数 True Negative(TN):被模型预测为负的负例数 False Positive(FP):被模型预测为正的负例数 False Negative(FN):被模型预测为负的正例数 精确率(Precision) TP/(TPFP):反映了被模型预测的正例中真正的正样本所占比重 召回率(Recall) TP/(TPFN):反映了被模型正确预测的正例占总的正样本比重 定位精度(IOU) 两个框的交集大小/两个框的并集大小
融合结果 a)原始图像 b)红框显示传统图像处理识别的卡片 c)红框显示深度学习识别的卡片 d)红框显示融合b)和c)后的卡片
上图分别显示了不同方法识别的卡片,d)相对于b)的优势是提高了召回率d)相对于c)的优势是提高了定位精度。 图一图二图三显示了一些其他实例图像的识别每行图像是一类实例图第一列是原始图像第二列是传统图像处理识别的卡片第三列是深度学习识别的卡片第四列是融合的卡片。 图一图二能够准确识别卡片轮廓 图一 图二
图三融合卡片的下边缘并没有完全贴合这是因为融合步骤中修正dlbox1位置时采用传统图像处理方法寻找临域范围内最近的直线受到图像样式的影响找到的直线并不是期望的卡片下边缘。
图三
实验过程中随机截取了50张闲鱼瀑布流卡片图像共有卡片96个(不包含输入框)对每张图像分别采用传统图像处理方法、深度学习方法、融合方法得到卡片的识别结果其中传统图像处理方法共识别出65个卡片深度学习方法共识别出97个融合后共识别出98个。精确率、召回率、定位精度如下表所示。融合后识别结果结合了传统图像处理方法定位精度高、深度学习方法召回率高的优点。不同方法结果 前景算法小结
通过对闲鱼页面瀑布流卡片识别过程中的描述我们简单介绍了前景处理的探索通过机器视觉算法和机器学习算法协同完成前景元素的提取和识别。
结束语
本篇我们通过对前景提取和背景分析的介绍提出了一种通过传统图像处理和深度学习相融合的方法来得到高精确率、高召回率和高定位精度的识别结果。但方法本身还存在一些瑕疵比如融合过程对组件元素进行修正时也会受到图像样式的干扰后续这部分可以进一步进行优化。 #阿里云开年Hi购季#幸运抽好礼 点此抽奖https://www.aliyun.com/acts/product-section-2019/yq-lottery?utm_contentg_1000042901
原文链接 本文为云栖社区原创内容未经允许不得转载。
