如何使用深度学习识别UI界面组件？
导读：
智能生成代码平台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算法。
阿里淘系技术出品。
如何用深度学习识别汉字
多元输入法（多元汉字与图形符号输入法）具有快速打出国际标准万国码所有汉字的特点，也就是说，任何人可以迅速的打出不认识的汉字来。不但是一种互联网键盘输入工具，还是一种深度学习和识别汉字的助手
如何将图像中的人脸进行识别?
2. 使用在线人脸识别工具：一些在线工具和网站提供人脸识别的功能。您可以上传图像并使用这些工具进行人脸识别。这些工具使用类似的人脸检测和人脸匹配算法来检测和识别人脸。3. 学习和使用深度学习模型：深度学习模型在人脸识别任务中表现良好。您可以学习和使用一些流行的深度学习模型，如卷积神经网络（CNN），...
深度学习: 细粒度图像识别与分析系列学习笔记(二)scda方法
深度学习在细粒度图像识别与分析中扮演重要角色，本文聚焦于scda方法的学习笔记。细粒度图像分析的核心挑战在于区分相似但具有细微差异的类别，如鸟类之间的细微差别。传统的图像检索技术往往在处理通用物体时效果显著，但面对细粒度问题时，如需从众多相似鸟种中找出绿头鸭，难点大增，因为背景、姿态和环境因素...
深度学习有什么用
深度学习在多个领域都有广泛的应用和重要作用。一、图像识别 深度学习在图像识别领域表现出强大的能力。通过训练深度神经网络，可以实现对图像的自动识别和分类，如人脸识别、物体检测等。这一技术在安全监控、自动驾驶、智能机器人等领域都有广泛应用。二、语音识别和自然语言处理 深度学习同样在语音识别和...
深度学习识别图像算大数据分析吗
但是，深度学习需要大量的数据和计算资源来训练模型，因此在处理大数据集时也可能会有挑战。深度学习在图像识别中可以处理大数据集，但它本身不是大数据分析的方法。大数据分析是一种用于处理和分析海量数据的方法，通常使用大规模并行处理技术，例如分布式系统和云计算，来解决问题。深度学习是一种人工智能技术...
深度学习的应用领域有哪些?
下面来列举几个广泛应用深度学习的领域。一、语音识别 深度学习的发展使语音识别有了很大幅度的效果提升，类似于在计算机视觉中处理图像数据一样，深度学习中将声音转化为特征向量，然后对这些数字信息进行处理输入到网络中进行训练，得到一个可以进行语音识别的模型。二、自然语言处理 深度学习由于其非线性的...
如何用ai识别自己声音如何用ai识别自己声音
首先，需要收集自己的语音数据，可以通过录制几段不同的语音来建立自己的声音特征模型，然后使用深度学习算法进行训练，建立起自己声音的语音识别模型。接着，在输入一段自己的语音后，通过对声音信号进行处理和分析，提取出声音的特征向量，并将其输入到训练好的模型中，模型会根据自己的声音特征给出一个...
具有深度学习视觉识别源代码是什么意思
它利用深度学习技术对大量图像和视频数据进行学习和训练，这种源代码可以应用于人脸识别、车牌识别、安防监控、自动驾驶等领域，具有广泛的应用价值。具有这种源代码可以帮助开发人员更快速地开发出高效的视觉识别应用程序，提高识别的准确度和稳定性，并降低开发成本和时间。同时，具有深度学习视觉识别源代码可以...
深度学习算法是什么
深度学习算法的核心是神经网络，它由大量的神经元相互连接而成，形成层次丰富的网络结构。每一层神经网络都能学习和识别数据中的特定特征，随着层次的深入，网络能够捕捉到更加抽象和高级的特征表示。例如，在图像识别任务中，浅层网络可能只能识别边缘和纹理等低级特征，而深层网络则能够识别面部轮廓、物体...
基于深度学习的中文汉字识别的意义
基于深度学习的中文汉字识别的意义是对中文汉字识别准确率不高等相关问题提出了改进措施。中华文化有着悠久的历史，而汉字则是中华文化中重要的一环。作为中国及深受中国文化影响的国家和地区所特有的一种文字美德艺术表现形式，书法历史悠久，博大精深，对中华文化意义重大，然而由干种类繁多，风格多样，目...
吴迫爱纳： 首先,打好基础:编程(c 和python至少熟练一门,c 优先),算法.然后熟悉一种深度学习框架(推荐caffe),找几个经典的例子(如果没有gpu就不要训练大型任务)跑一跑,体验下调参是怎么回事,如果可以的话,看看源码搞清楚其原理.投简历,一般大公司可能难进面试,一开始可以投一些小公司积累些经验. 来自职Q用户:匿名用户 谢邀!开发的转,没有任何障碍.首先是基本编程能力具备了,其次是基本的逻辑思维方式合适.至于如何做,只有两手准备了,首先自学绝不可少,基本的算法如果不理解,没得继续.第二,深度学习,都是新开始,哪来那么多项目,除了几个研究的人,都是从头开始,的所以,相关项目经验,是个伪命题. 来自职Q用户:刘先生
邯山区17162689943： 如何配置解析UI组件 - ？
吴迫爱纳： 单击【_启动窗口】 选择【属性】面板 随意移动 选择 【 真】可否移动【真】就可以了 Cardbus NIC Cardbus总线网卡
邯山区17162689943： CSLoader的是CCNode类型,怎么用seekWidgetByName获取UI控件 - ？
吴迫爱纳： 方法一:C++代码 auto myLayout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile(＂testUI.json＂); this->addChild(myLayout); Button* loginBtn = (Button*)(myLayout->getChildByName(＂login＂));方法二:C++代码 Button* ...
邯山区17162689943： Qt中怎么用Ui文件 - ？
吴迫爱纳： 第一步,制作ui文件.首先应该用Qt Designer绘制一个自己的界面,并存为myform.ui(这里的myform可以用自己喜欢的名字代替).在制作自己的界面文件时要注意以下几个要点:1、要记住ui文件的名字,因为uic生成的代码会存在ui_myform....
邯山区17162689943： 如何选择机器视觉软件 - ？
吴迫爱纳： 目前市场上机器视觉软件分为以下几类: 1、以Halcon,VisionPro为代表的传统机器视觉软件,通过调用各种算法因子,针对目标特征,定制化设置各种参数.其擅长解决以测量为主的定量问题,和判断有无的简单问题,但对复杂检测类的需求...
邯山区17162689943： 如何取得Android应用apk的UI资源和布局 - ？
吴迫爱纳： 第一步: 通过Hierarchy Viewer 工具学习别人的UI布局,第二步:获得apk中的图片和xml文件,方法一是将扩展名apk改为zip,但是xml有可能打开的时候是乱码.
邯山区17162689943： unity怎样迅速找到某一个ui控件 - ？
吴迫爱纳： 要实例化一个控件就必须用NGUI本身内置的方法使用! public void back(float back_x,float back_y) { GameObject go = NGUITools.AddChild(gameObject,thisbutton); Transform t = go.transform; t.localPosition = new Vector3(back_x,back_y,0).
邯山区17162689943： 什么是UI控件 - ？
吴迫爱纳： 比如按钮,输入框 这些都是UI控件
邯山区17162689943： android中怎么区分UI主线程和子线程 - ？
吴迫爱纳： 在一个Android 程序开始运行的时候,会单独启动一个Process.默认的情况下,所有这个程序中的Activity或者Service(Service和 Activity只是Android提供的Components中的两种,除此之外还有Content Provider和Broadcast Receiver)都会跑在...
