网页采集器的自动识别算法(使用机器学习的方式来识别UI界面元素的完整流程)

　　网页采集器的自动识别算法(使用机器学习的方式来识别UI界面元素的完整流程)

　　介绍：

　　智能代码生成平台imgcook以Sketch、PSD、静态图片等形式的视觉草稿为输入，一键生成可维护的前端代码。它是组件化的开发。我们希望直接从设计稿中生成组件化代码。这需要具备识别设计稿中组件化元素的能力，例如Searchbar、Button、Tab等。识别网页中的UI元素是人工智能领域典型的目标检测问题。我们可以尝试使用深度学习目标检测的方法来自动解决。

　　本文介绍了使用机器学习识别UI界面元素的完整过程，包括：当前问题分析、算法选择、样本准备、模型训练、模型评估、模型服务开发部署、模型应用等。

　　申请背景

　　imgcook以Sketch、PSD、静态图片等形式的视觉草稿为输入，通过智能技术一键生成可维护的前端代码。Sketch/Photoshop 设计稿的代码生成需要插件。在设计稿中，视觉效果是通过imgcook插件导出的。将草稿的 JSON 描述信息（D2C Schema）粘贴到 imgcook 可视化编辑器中，您可以在其中编辑视图和逻辑以更改 JSON 描述信息。

　　我们可以选择DSL规范来生成相应的代码。例如，要为 React 规范生成代码，您需要实现从 JSON 树到 React 代码的转换（自定义 DSL）。

　　

　　如下图，左边是Sketch中的visual Draft，右边是使用React开发规范生成的按钮部分的代码。

　　

　　从 Sketch 视觉稿的“导出数据”中生成“React 开发规范”的代码。图为按钮的代码片段。

　　生成的代码由div、img、span等标签组成，但实际应用开发存在这样的问题：

　　我们的需求是，如果我们要使用组件库，比如 Ant Design，我们希望生成的代码是这样的：

　　// Antd Mobile React 规范

import { Button } from "antd-mobile";

进店抢红包

加购物车

　　"smart": {

"layerProtocol": {

"component": {

"type": "Button"

}

}

}

　　为此，我们在 JSON 描述中添加了一个智能字段来描述节点的类型。

　　我们需要做的是在visual Draft中找到需要组件化的元素，并用这样的JSON信息对其进行描述，这样在DSL转换代码的时候，就可以通过获取其中的smart字段来生成组件化的代码JSON 信息。

　　现在问题转化为：如何在visual Draft中找到需要组件化的元素，它是什么组件，它在DOM树中的位置，或者在设计稿中的位置。

　　解决方案

　　▐ 常规生成规则

　　通过指定设计草案规范来干预生成的 JSON 描述，以控制生成的代码结构。比如我们设计稿高级干预规范中组件的层命名约定：明确标记层中的组件和组件属性。

　　#component:组件名?属性=值#

#component:Button?id=btn#

　　使用imgcook插件导出JSON描述数据时，层中的约定信息是通过标准分析得到的。

　　▐ 学习识别组件

　　手动约定规则的方式需要按照我们制定的协议规范修改设计稿。一个页面上可能有很多组件。这种手动约定的方式给开发者增加了很多额外的工作，不符合使用imgcook提高开发效率的目的。, 我们期望通过智能方式自动识别可视化草稿中的可组件化元素，识别结果最终会转换并填充到智能字段中，与手动约定组件生成的json中的智能字段内容相同协议。

　　这里需要做两件事：

　　第二件事是我们可以根据json树解析组件的子元素。首先我们可以通过智能自动完成，这是人工智能领域一个典型的目标检测问题，我们可以尝试使用深度学习的目标检测方法来自动化解决这个手动协议的过程。

　　学习识别 UI 组件

　　▐ 行业现状

　　目前业界也有一些研究和应用使用深度学习来识别网页中的UI元素。对此有一些讨论：

　　讨论中有两个主要要求：

　　由于使用深度学习来解决UI界面元素识别问题，因此需要一个收录元素信息的UI界面数据集。目前，Rico 和 ReDraw 是业界最开放和使用最多的数据集。

　　重绘

　　一组Android截图、GUI元数据和GUI组件图片，包括RadioButton、ProgressBar、Switch、Button、CheckBox等15个类别，14382张UI界面图片和191300个带标签的GUI组件。处理后，每个组件的数量达到5000个。该数据集的详细介绍请参考The ReDraw Dataset。这是用于训练和评估 ReDraw 论文中提到的 CNN 和 KNN 机器学习技术的数据集，该论文发表在 2018 年的 IEEE Transactions on Software Engineering。 该论文提出了一种三步法来实现从 UI 到代码自动化：

　　1、检测

　　首先从设计稿中提取或者使用CV技术提取UI界面元信息，比如bounding box（位置，大小）。

　　2、分类

　　然后使用*敏*感*词*软件仓库挖掘和自动动态分析来获取出现在UI界面中的组件，并将这些数据作为CNN技术的数据集，将提取的元素分类为特定类型，如Radio、Progress Bar、按钮等。

　　3、Assemble Assembly，最后使用KNN推导出UI层次结构，例如垂直列表和水平Slider。

　　

　　Android 代码是在 ReDraw 系统中使用此方法生成的。评估表明，ReDraw 的GUI 组件分类平均准确率达到91%，并组装了原型应用程序。这些应用程序在视觉亲和力方面紧密地反映了目标模型，并表现出合理的代码结构。

　　

　　里科

　　创建了迄今为止最大的移动 UI 数据集，以支持五种类型的数据驱动应用程序：设计搜索、UI 布局生成、UI 代码生成、用户交互建模和用户感知预测。Rico 数据集收录 27 个类别、10,000 多个应用程序和大约 70,000 个屏幕截图。该数据集在 2017 年第 30 届 ACM 年度用户界面软件和技术研讨会上向公众开放（RICO：A Mobile App Dataset for Building Data-Driven Design Applications）。

　　此后，出现了一些基于 Rico 数据集的研究和应用。例如：Learning Design Semantics for Mobile Apps，本文介绍了一种基于代码和可视化的方法来为移动UI元素添加语义注释。根据UI截图和视图层次，自动识别25个

　　UI 组件类别、197 个文本按钮概念和 99 个图标类别。

　　

　　▐ 应用场景

　　下面是基于上述数据集的一些研究和应用场景。

　　基于机器学习的智能代码生成移动应用程序图形用户界面原型 | 重绘数据集

　　神经设计网络：有约束的图形布局生成| Rico 数据集

　　使用众包和深度学习的用户感知预测建模移动界面可点击性 | Rico 数据集

　　基于深度学习的自动化 Android 应用测试方法 | Rico 数据集

　　▐ 问题定义

　　在上述基于Redraw数据集生成Android代码的应用中，我们了解了它的实现。第二步，需要大型软件仓库挖掘和自动动态分析技术，获取大量分量样本作为CNN算法的训练样本。这样就可以获取到UI界面中存在的特定类型的组件，如Progress Bar、Switch等。

　　对于我们的 imgcook 应用场景，本质问题是在 UI 界面中找到这种特定类型的组件信息：类别和边界框。我们可以将这个问题定义为目标检测问题，并使用深度学习来定位 UI 界面。检测。那么我们的目标是什么？

　　检测对象为Progress Bar、Switch、Tab Bar等可以组件化代码的页面元素。

　　UI界面目标检测

　　▐ 基础知识

　　机器学习

　　人类如何学习？通过向大脑输入某些信息，可以通过学习和总结获得知识和经验。当有类似的任务时，可以根据现有的经验做出决定或行动。

　　

　　机器学习的过程与人类学习的过程非常相似。机器学习算法本质上是得到一个由f(x)函数表示的模型。如果给f(x)输入一个样本x，结果是一个类别，解是一个分类问题。如果得到一个特定的值，那么解决方法就是回到问题。

　　

　　机器学习和人类学习的整体机制是一样的。一个区别是，人脑只需要很少的数据就可以总结和总结非常适用的知识或经验。例如，我们只需要看到几只猫或几只狗就可以正确区分猫和狗，但是对于机器我们需要大量的学习资料，而机器能做的就是智能，无需人工参与。

　　深度学习

　　深度学习是机器学习的一个分支。它是一种尝试使用由复杂结构或多个非线性变换组成的多个处理层来在高层次上抽象数据的算法。

　　深度学习和传统机器学习的区别可以在这篇 Deep Learning vs. Machine Learning 中看到，它具有数据依赖、硬件依赖、特征处理、问题解决方法、执行时间和可解释性。

　　深度学习对数据量和硬件要求高，执行时间长。深度学习和传统机器学习算法的主要区别在于处理特征的方式。当传统的机器学习用于现实世界的任务时，描述样本的特征通常需要由人类专家设计。这被称为“特征工程”，特征的质量对泛化性能有着至关重要的影响。设计好的功能并不容易。深度学习可以通过特征学习技术分析数据，自动生成好的特征。

　　目标检测

　　机器学习有很多应用，例如：

　　对象检测（Object Detection）是与计算机视觉和图像处理相关的计算机技术，用于检测数字图像和视频中特定类别的语义对象（如人、动物或汽车）。

　　

　　而我们在UI界面上的目标是一些设计元素，可以是具有原子粒度的Icon、Image、Text，也可以是组件化的Searchbar、Tabbar等。

　　

　　▐ 算法选择

　　用于目标检测的方法通常分为基于机器学习的方法（传统目标检测方法）或基于深度学习的方法（深度学习目标检测方法）。目标检测方法已经从传统的目标检测方法到深度学习的目标检测方法发生了变化：

　　

　　传统目标检测方法

　　对于基于机器学习的方法，您需要使用以下方法之一来定义特征，然后使用支持向量机（SVM）等技术进行分类。

　　深度学习目标检测方法

　　对于基于深度学习的方法，端到端的目标检测可以在不定义特征的情况下进行，通常基于卷积神经网络（CNN）。基于深度学习的目标检测方法可以分为One-stage和Two-stage两种，以及继承了这两种方法优点的RefineDet算法。

　　✎ 一级

　　基于One-stage的目标检测算法不使用RPN网络，直接通过骨干网提供类别和位置信息。该算法速度较快，但精度略低于两阶段目标检测网络。典型的算法有：

　　✎ 两阶段

　　基于Two-stage的目标检测算法主要使用卷积神经网络来完成目标检测过程。它提取CNN卷积特征。在训练网络时，主要训练两部分。第一步是训练RPN网络。第二步是训练网络进行目标区域检测。即算法生成一系列候选框作为样本，然后通过卷积神经网络对样本进行分类。网络精度高，速度比One-stage慢。典型的算法有：

　　✎ 其他 (RefineDet)

　　RefineDet（Single-Shot Refinement Neural Network for Object Detection）是基于SSD算法的改进。继承了两种方法（如单阶段设计法、两阶段设计法）的优点，克服了各自的缺点。

　　目标检测方法比较

　　✎ 传统方法VS深度学习

　　基于机器学习的方法和基于深度学习的方法的算法流程如图所示。传统的目标检测方法需要人工设计特征，通过滑动窗口获取候选框，然后使用传统分类器确定目标区域。整个训练过程分为多个步骤。深度学习目标检测方法利用机器学习特征，通过更高效的Proposal或直接回归方法获取候选目标，具有更好的准确率和实时性。

　　

　　目前对目标检测算法的研究基本都是基于深度学习。传统的目标检测算法很少使用。深度学习目标检测方法更适合工程化。具体对比如下：

　　

　　✎ 一级VS二级

　　

　　✎ 算法优缺点

　　各个算法的原理我就不写了，只看优缺点。

　　

　　总结

　　由于UI界面元素检测精度要求比较高，最终选择了Faster RCNN算法。

　　▐ 帧选择

　　机器学习框架

　　以下是几个机器学习框架的简要列表：Scikit Learn、TensorFlow、Pytorch、Keras。

　　Scikit Learn是一个通用的机器学习框架，实现了各种分类、回归和聚类算法（包括支持向量机、随机森林、梯度增强、k-means等）；它还包括数据降维、模型选择和数据预处理。处理等工具库，安装使用方便，示例丰富，教程和文档也很详细。

　　TensorFlow、Keras和Pytorch是目前深度学习的主要框架，提供各种深度学习算法调用。这里推荐一个学习资源： 强烈推荐TensorFlow、Pytorch和Keras的示例资源，同意本文作者的观点：以上资源运行一次，不明白的地方查官方文档，很快就能理解和使用这三个框架了。

　　在下面的模型训练代码中，您可以看到这些框架在实际任务中的使用情况。

　　对象检测框架

　　目标检测框架可以理解为一个集成了目标检测算法的库。比如深度学习算法框架TensorFlow并不是目标检测框架，而是提供了目标检测的API：Object Detection API。

　　目标检测框架主要包括：Detecn-benchmark、mmdetection、Detectron2。目前使用最广泛的是

　　Detectron2目标检测框架由Facebook AI研究院于2019年10月10日开源，我们也使用Detectron2来识别UI界面组件，后面会用到示例代码。tron和maskrcn可以参考：2019年10月10日FAIR开源的Detectron2目标检测框架如何评价？

　　前端机器学习框架Pipcook

　　作为前端开发者，我们也可以选择Pipcook，这是阿里巴巴前端委员会智库开源的一个前端算法工程框架，帮助前端工程师使用机器学习。

　　pipcook采用前端友好的JS环境，基于Tensorflow.js框架作为底层算法能力，针对前端业务场景封装了相应的算法，让前端工程师可以快速便捷的使用机器学习能力。

　　pipcook 是一个基于流水线的框架，封装了机器学习工程环节的数据采集、数据访问、数据处理、模型配置、模型训练、模型服务部署、前端开发人员在线训练七部分。