如何使用深度学习识别UI界面组件?
发布网友
发布时间：2024-09-27 01:45
共1个回答
热心网友
时间：2024-10-03 05:09
导读：
智能生成代码平台imgcook以Sketch、PSD、静态图片等形式的视觉稿作为输入，可以一键生成可维护的前端代码，但从设计稿中获取的都是div、img、span等元件，而前端大多是组件化开发，我们希望能从设计稿直接生成组件化的代码，这就需要能够将设计稿中的组件化元素，例如Searchbar、Button、Tab等识别出来。识别网页中的UI元素在人工智能领域是一个典型的的目标检测问题，我们可以尝试使用深度学习目标检测手段来自动化解决。
本文介绍了使用机器学习的方式来识别UI界面元素的完整流程，包括：现状问题分析、算法选型、样本准备、模型训练、模型评估、模型服务开发与部署、模型应用等。
应用背景
imgcook以Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，Sketch/Photoshop设计稿的代码生成需要安装插件，在设计稿中通过imgcook插件导出视觉稿的JSON描述信息（D2CSchema）粘贴到imgcook可视化编辑器，在编辑器中可以进行视图编辑、逻辑编辑等来改变JSON描述信息。
我们可以选择DSL规范来生成对应的代码。例如生成React规范的代码，需要实现从JSON树转换成React代码（自定义DSL）。
如下图，左侧为Sketch中的视觉稿，右侧为使用React开发规范生成的按钮部分的代码。
从Sketch视觉稿「导出数据」生成「React开发规范」的代码，图为按钮部分代码片段。生成的代码都是由div、img、span这些标签组成，但实际应用开发有这样的问题：
web页面开发为提升可复用性，页面组件化，例如：Searchbar、Button、Tab、Switch、Stepper
一些原生组件不需要生成代码，例如状态栏Statusbar、Navbar、Keyboard
我们的需求是，如果想要使用组件库，例如AntDesign，我们希望生成的代码能像这样：
//AntdMobileReact规范import{Button}from"antd-mobile";<divstyle={styles.ft}><Buttonstyle={styles.col1}>进店抢红包</Button><Buttonstyle={styles.col2}>加购物车</Button></div>"smart":{"layerProtocol":{"component":{"type":"Button"}}}为此我们在JSON描述中添加了smart字段,用来描述节点的类型。
我们需要做的，就是找到视觉稿中需要组件化的元素，用这样的JSON信息来描述它，以便在DSL转换代码时，通过获取JSON信息中的smart字段来生成组件化代码。
现在问题转化为：如何找到视觉稿中需要组件化的元素，它是什么组件，它在DOM树中的位置或者在设计稿中的位置。
解决方案
?约定生成规则
通过指定设计稿规范来干预生成的JSON描述，从而控制生成的代码结构。例如在我们的设计稿高级干预规范中关于组件的图层命名规范：将图层中的组件、组件属性等显性标记出来。
#component:组件名?属性=值##component:Button?id=btn#
在使用imgcook的插件导出JSON描述数据时就通过规范解析拿到图层中的约定信息。
?学习识别组件
人工约定规则的方式需要按照我们制定的协议规范来修改设计稿，一个页面上的组件可能会有很多，这种人工约定方式让开发者多了很多额外工作，不符合使用imgcook提高开发效率的宗旨，我们期望通过智能化手段自动识别视觉稿中的可组件化元素，识别的结果最终会转换并填充在smart字段中，与手动约定组件协议所生成的json中的smart字段内容相同。
这里需要完成两件事情：
找到组件信息：类别、位置、尺寸等信息。
找到组件中的属性，例如button中的文字为“提交”
第二个事情我们可以根据json树来解析组件的子元素。第一个事情我们可以通过智能化来自动化的完成，这是一个在人工智能领域典型的的目标检测问题，我们可以尝试使用深度学习目标检测手段来自动化解决这个手动约定的流程。
学习识别UI组件
?业界现状
目前业界也有一些使用深度学习来识别网页中的UI元素的研究和应用，对此有一些讨论：
UseR-CNNtodetectUIelementsinawebpage?
Ismachinelearningsuitablefordetectingscreenelements?
AnythoughtsonagoodwaytodetectUIelementsinawebpage?
HowcanIdetectelementsofGUIusingopencv?
HowtorecognizeUIelementsinimage?
讨论中的诉求主要有两种：
期望通过识别UI界面元素来做Web页面自动化测试的应用场景。
期望通过识别UI界面元素来自动生成代码。
既然是使用深度学习来解决UI界面元素识别的问题，带有元素信息的UI界面数据集则是必须的。目前业界开放且使用较多的数据集有Rico和ReDraw。
ReDraw
一组Android屏幕截图，GUI元数据和标注了GUI组件图像，包含RadioButton、ProgressBar、Switch、Button、CheckBox等15个分类，14,382个UI界面图片和191,300个带有标签的GUI组件，该数据集经过处理之后使每个组件的数量达到5000个。关于该数据集的详细介绍可查看TheReDrawDataset。
这是用于训练和评估ReDraw论文中提到的CNN和KNN机器学习技术的数据集，该论文于2018年在IEEETransactionsonSoftwareEngineering上发布。该论文提出了一种通过三个步骤来实现从UI转换为代码自动化完成的方法：
1、检测Detection
先从设计稿中提取或使用CV技术提取UI界面元信息，例如边界框（位置、尺寸）。
2、分类Classification
再使用大型软件仓库挖掘、自动动态分析得到UI界面中出现的组件，并用此数据作为CNN技术的数据集学习将提取出的元素分类为特定类型，例如Radio、ProgressBar、Button等。
3、组装Assembly
最后使用KNN推导UI层次结构，例如纵向列表、横向Slider。
在ReDraw系统中使用这种方法生成了Android代码。评估表明，ReDraw的GUI组件分类平均精度达到91％，并组装了原型应用程序，这些应用程序在视觉亲和力上紧密地反映了目标模型，同时展现了合理的代码结构。
Rico
迄今为止最大的移动UI数据集，创建目的是支持五类数据驱动的应用程序：设计搜索，UI布局生成，UI代码生成，用户交互建模和用户感知预测。Rico数据集包含27个类别、1万多个应用程序和大约7万个屏幕截图。
该数据集在2017年第30届ACM年度用户界面软件和技术研讨会上对外开放（RICO:AMobileAppDatasetforBuildingData-DrivenDesignApplications）。
此后有一些基于Rico数据集的研究和应用。例如：LearningDesignSemanticsforMobileApps，该论文介绍了一种基于代码和视觉的方法给移动UI元素添加语义注释。根据UI屏幕截图和视图层次结构可自动识别出25UI组件类别，197个文本按钮概念和99个图标类。
?应用场景
这里列举一些基于以上数据集的研究和应用场景。
智能生成代码
MachineLearning-BasedPrototypingofGraphicalUserInterfacesforMobileApps|ReDrawDataset
智能生成布局
NeuralDesignNetwork:GraphicLayoutGenerationwithConstraints|RicoDataset
用户感知预测
ModelingMobileInterfaceTappabilityUsingCrowdsourcingandDeepLearning|RicoDataset
UI自动化测试
ADeepLearningbasedApproachtoAutomatedAndroidAppTesting|RicoDataset
?问题定义
在上述介绍的基于Redraw数据集生成Android代码的应用中，我们了解了它的实现方案，对于第2步需要使用大型软件仓库挖掘和自动动态分析技术来获取大量组件样本作为CNN算法的训练样本，以此来得到UI界面中存在的特定类型组件，例如ProgressBar、Switch等。
对于我们imgcook的应用场景，其本质问题也是需要找到UI界面中这种特定类型的组件信息：类别和边界框，我们可以把这个问题定义为一个目标检测的问题，使用深度学习对UI界面进行目标检测。那么我们的目标是什么？
检测目标就是ProgressBar、Switch、TabBar这些可在代码中组件化的页面元素。
UI界面目标检测
?基础知识
机器学习人类是怎么学习的？通过给大脑输入一定的资料，经过学习总结得到知识和经验，有当类似的任务时可以根据已有的经验做出决定或行动。
机器学习(MachineLearning)的过程与人类学习的过程是很相似的。机器学习算法本质上就是获得一个f(x)函数表示的模型，如果输入一个样本x给f(x)得到的结果是一个类别，解决的就是一个分类问题，如果得到的是一个具体的数值那么解决的就是回归问题。
机器学习与人类学习的整体机制是一致的，有一点区别是人类的大脑只需要非常少的一些资料就可以归纳总结出适用性非常强的知识或者经验，例如我们只要见过几只猫或几只狗就能正确的分辨出猫和狗，但对于机器来说我们需要大量的学习资料，但机器能做到的是智能化不需要人类参与。
深度学习
深度学习（DeepLearning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。
深度学习与传统机器学习的区别可以看这篇DeepLearningvs.MachineLearning，有数据依赖性、硬件依赖、特征处理、问题解决方式、执行时间和可解释性这几个方面。
深度学习对数据量和硬件的要求很高且执行时间很长，深度学习与传统机器学习算法的主要不同在于对特征处理的方式。在传统机器学习用于现实任务时，描述样本的特征通常需要由人类专家来设计，这称为“特征工程”（FeatureEngineering）,而特征的好坏对泛化性能有至关重要的影响，要设计出好特征并非易事。深度学习可以通过特征学习技术分析数据自动产生好特征。
目标检测
机器学习有很多应用，例如：
计算机视觉（ComputerVision，CV）用于车牌识别和面部识别等的应用。
信息检索用于诸如搜索引擎的应用-包括文本搜索和图像搜索。
市场营销针对自动电子邮件营销和目标群体识别等的应用
医疗诊断诸如癌症识别和异常检测等的应用。
自然语言处理（NaturalLanguageProcessing，NLP）如情绪分析和照片标记等的应用。
目标检测（ObjectDetection）就是一种与计算机视觉和图像处理有关的计算机技术，用于检测数字图像和视频中特定类别的语义对象（例如人，动物物或汽车）。
而我们在UI界面上的目标是一些设计元素，可以是原子粒度的Icon、Image、Text、或是可组件化的Searchbar、Tabbar等。
?算法选型
用于目标检测的方法通常分为基于机器学习的方法（传统目标检测方法）或基于深度学习的方法（深度学习目标检测方法），目标检测方法经历了从传统目标检测方法到深度学习目标检测方法的变迁：
传统目标检测方法
对于基于机器学习的方法，需要先使用以下方法之一来定义特征，然后使用诸如支持向量机（SVM）的技术进行分类。
基于Haar功能的Viola–Jones目标检测框架
尺度不变特征变换（SIFT）
定向梯度直方图（HOG）特征
深度学习目标检测方法对于基于深度学习的方法，无需定义特征即可进行端到端目标检测，通常基于卷积神经网络（CNN）。基于深度学习的目标检测方法可分为One-stage和Two-stage两类，还有继承这两种类方法优点的RefineDet算法。
?One-stage
基于One-stage的目标检测算法直接通过主干网络给出类别和位置信息，没有使用RPN网路。这样的算法速度更快，但是精度相对Two-stage目标检测网络了略低。典型算法有：
SSD（SingleShotMultiBoxDetector）系列
YOLO(YouOnlyLookOnce)系列（YOLOv1、YOLOv2、YOLOv3）
RetinaNet
?Two-stage
基于Two-stage的目标检测算法主要通过一个卷积神经网络来完成目标检测过程，其提取的是CNN卷积特征，在训练网络时，其主要训练两个部分，第一步是训练RPN网络，第二步是训练目标区域检测的网络。
即先由算法生成一系列作为样本的候选框，再通过卷积神经网络进行样本分类。网络的准确度高、速度相对One-stage慢。典型算法有：
R-CNN，FastR-CNN，FasterR-CNN
?其他（RefineDet）
RefineDet(Single-ShotRefinementNeuralNetworkforObjectDetection)是基于SSD算法的改进。继承了两种方法（例如，单一阶段设计方法，两阶段设计方法）的优点，并克服了它们的缺点。
目标检测方法对比
?传统方法VS深度学习
基于机器学习的方法和基于深度学习的方法的算法流程如图所示，传统目标检测方法需要手动设计特征，通过滑动窗口获取候选框，再使用传统分类器进行目标区域判定，整个训练过程分成多个步骤。而深度学习目标检测方法则通过机器学习特征，通过更高效的Proposal或直接回归的方式获取候选目标，它的准确度和实时性更好。
关于目标检测算法的研究现在基本都是基于深度学习的，传统的目标检测算法已经很少用到了，深度学习目标检测方法更适合工程化，具体对比如下：
?One-stageVSTwo-stage
?算法优缺点
这里就不写各个算法的原理了，直接看下优缺点。
总结
由于对UI界面元素检测的精度要求比较高，所以最终选择FasterRCNN算法。
阿里淘系技术出品。
