cover_image

文字背景颜色提取和对比

CX 字节跳动终端技术
2022年09月01日 08:30

背景

随着自动化任务在端上逐渐普及,我们可以在每天的任务中获取大量的截图。在UI自动化任务中,对于颜色的人工断言非常的耗费时间和精力,而真正存在颜色问题的占比又很少,导致人力成本过高但收益却很小。并且人力在大量的过滤这些图片的时候对于图片颜色的准确度并不能很好的把控。长时间的人工断言会产生颜色视觉上的审美疲劳,需要极强的专注力。在一些文字背景颜色相关的UI自动化任务当中,为了解决上述这些问题,我们通过一系列的图像处理计算机视觉算法,将文字区域的背景色和字体颜色提取出来,为后续的自动化断言提供精确的输入,降低人工检查的成本。例如:

图片
提取文字背景颜色分别为蓝色和红色的具体像素值

针对业务场景,我们将提取的背景颜色和业务方提供的标准颜色集做相似性的对比和匹配。

关键结论

Highlights

  • 凭借传统图像处理方法与深度学习结合的整体流程,分离出图片前景与背景。

  • 克服任务对颜色要求的准确度高,待分类数据量大等问题

  • 克服传统图像算法对输入图片需求过多并解决算法通用问题,并使得算法本身不依赖于背景颜色种类,后期颜色扩充之后不必花费大量资源重训模型

  • 通过模型完成问题筛选,提升问题解决效率,降低人力成断言背景颜色成本。

效果展示与结论

核心指标

  • 对于背景颜色相似对比算法,我们定义了两个指标来评估算法的好坏:检出率、误检率。设图片总数为x,颜色显示错误图总数为y,正确检出颜色显示错误图为c,错误检出颜色显示错误图为w。

图片

测试集效果


正确率
模型分类92.82%
颜色提取100.00%

检出率误查率
背景颜色对比95.45%0.00%

线上情况

与业务方Lark那边的工程师沟通过后,得到反馈线上算法准确率极高,约98%+,每天都有大量的定时任务调用我们的算法去测试不同场景。

技术难点

数据

边框

很多测试数据他并不是只有前景(文字)和背景(颜色)两部分组成,自动化UI他可能会将背景周围的白底或者主题色背景一起截图并作为测试用例。传统的CV并不能很好的解决边框问题。OCR不好识别特殊的符号。所以在数据预处理这一步并没有很好的方法。

图片
特殊字符

传统的OCR判断文字之后选择对文字周边的像素值作为背景主色并不适用,因为在输入图片中包含很多特殊字符,对于这些特殊字符OCR并不能有很好的辨识性。

图片
初始训练样本过少

对于所有深度学习任务来说,数据是决定一个模型好坏的根本,对于过少的数据传统的卷积神经网络很容易产生过拟合。

Long Skip Connection

对于模型我们用了long skip connection将低维度特征与高纬度特征一起放入最后的线性层做分辨任务,来保证特征的可重用性,并缓解训练样本过少的问题。

图片


训练

One Cycle Learning Rate

为了让模型更快的收敛,我们使用了一种现在工业上十分流行的方法,1 Cycle Policy,在训练过程中设置学习率。这种方法结合正则项可以在模型较为复杂的情况下快速收敛。Smith和Topin在2019年提出将一个训练周期平均分为两段,第一段学习率从谷底到峰值,第二段再由峰顶到谷底,损失函数可以写成以下形式。

图片

通过计算,我们可以得到最优学习率并化简为以下形式,theta为神经网络的参数。

图片

传统图像算法尝试

最大连通域

图片

  1. 先预处理将输入图片剪裁掉周围的白色边框。

  2. 将RGB图转换为HSV对颜色空间的图像进行有效处理。HSV空间的每种颜色都有一定的范围,将颜色分为多种常见颜色并设定其区间。我们假设背景颜色是输入图片中的主要颜色通过对多种颜色的区间对比找出图片主要颜色区域。

  3. 通过阈值分割寻找连通域的方法,确定当前背景区域,需判断深色和浅色二值化后的区别,转成一个统一的底色;再计算输入图片颜色最大连通块,得到输入图像最大连通区域区间。

  4. 通过对这两片区域的对比来得到背景颜色区域。再与输入图片做颜色对比。

结果分析

对于浅色图片现有解决方案有较好的结果,能达到约95%的背景分割正确率。白色部分为背景区域。

图片

对于深色背景图片处理能力不是很理想,能达到约57%的背景分割正确率。白色部分为背景区域。

Good Case:

图片
Bad Case:
图片
存在问题
  1. 目前提供数据背景色之外是白色边框,未来数据可能包含其他主题色。

  2. 深色背景处理并不理想。

  3. 在特定情况下背景色并不一定是主颜色也不一定是最大连通域。

改进算法


图片
整体流程图
  1. 利用传统图像处理方法将彩色文字区域预处理增强获得多张图片。

  2. 将处理过后的图像输入到深度卷积网络中得到候选结果;如果模型并没有命中或置信度过低,使用传统计算机视觉的方法。

  3. 预测的背景色和标注颜色集匹配并计算颜色距离。

图片

详细算法流程

图片预处理

我们将RGB输入的颜色图片转为HSV以方便对颜色空间的图像进行有效处理。对原有图片做多组数据增强获得模型输入图,这里我们用了11组增强方法,将一张图片变为11张并通过设定阈值去掉噪声区域。

深度卷积网络

将得到的增强图片输入深度学习模型。

  1. 模型不直接end2end分别背景颜色,转而对十一张增强图片做类别分类,将他们分为文字,背景和其它三类

  2. 如果模型命中背景区域,选取自信度最高的增强后数据作为主要背景颜色来源。

  3. 如果分类模型没有命中背景类别则使用传统的计算机视觉处理方法,先将原图中的白框剪裁后,再计算该图片最大连通域,通过计算最大连通域的主要颜色得到背景颜色。

颜色相似对比

得到背景区域的颜色后,计算与目标颜色在颜色上的距离,我们使用了曼哈顿距离并对其做了归一化处理得到了最后的颜色相似度,通过调节阈值来判断颜色是否相似,不同业务方可设定不同的阈值。

图片

业务实践

算法目前主要应用于Lark的日常控件检测,通过提供云端接口高效处理日常自动化任务中的大量截图,来极大程度上节省人力成本,并提升效率。业务方反馈效果极好,每天都会有定时任务调用。该算法也运用到电商广告合规检查中,帮助主体检测算法提取logo的背景颜色并与现有规则做对比。目前服务已经上线,效果理想,给业务方带来有效帮助。

后续规划

背景颜色对比功能现在还处于十分初级的阶段,算法的分类模型从精确度和鲁棒性都有较大的提升空间。可以通过引入OCR来增强模型分类精度与引入对抗样本来使模型的分类边界更加的清晰从而提升鲁棒性。Over Confident的问题现在也存在于现有算法,可通过标签平滑(Label Smoothing)来缓解。现在算法也很依赖前期的颜色分离所产生的二值图,后续可以引入更多的颜色来缩小每种颜色的区间,从而获得更加准确的效果。

对抗样本(Adversarial Examples)

图片Explaining and Harnessing Adversarial Examples

在分类任务的时候有时候一点小的噪声就会导致模型最终预测结果有很大的差异,这些小的噪声从人类的角度并不容易观察到,但由于神经网络主要是基于线性块构建的,而导致了过度线性,从而导致它的值可以非常迅速地改变。

通过加入对抗样本,来完成对抗训练,使得模型在高维空间里对每种类别的界限更加清晰,防止模型学到一些我们无法观察到的视觉特征。

标签平滑(Label Smoothing)

现有算法的分类模型对于色彩分离后的二值图都有极高的自信率,接近100%,这对于实际任务需求来说是十分不利的。在未来我们可以引入标签平滑(Label Smoothing)的方式来缓建Over Confident的问题。

欢迎了解我们其它现有算法能力或与我们合作!

端架构研究中心是字节端架构旗下的前沿技术研究和工程研发团队,我们关注软件工程的前沿技术与人工智能技术的融合与互补,致力于构建代码智能以推动各类智能化软件开发服务的演进与落地。我们不仅提供公司级别的效能基础设施,也关注程序分析、深度学习与知识图谱等技术在海量代码数据上的应用。中心团队成员由国内外顶级高校的创新人才组成,并和多所世界一流大学建立了深度合作关系,也期望广纳全球英才。中心的研究成果会先在字节内部进行推广,成熟后会面向全球开发者。

欢迎投递:

社招职位:https://job.toutiao.com/s/jcBm6Hc

实习生职位:https://job.toutiao.com/s/jcB78VP

继续滑动看下一个
字节跳动终端技术
向上滑动看下一个