本文除了介绍 UI 界面组件辨认办法，还介绍了运用机器学习处理问题的正确姿态：

1、现状问题剖析
2、算法选型
3、样本预备
4、模型练习
5、模型点评
6、模型服务布置
7、模型运用
8、用户运用情5 u 0 n况埋点监控
9、沉积-文档、API、服务沉积

运用布景

imgcook 以Sketch、PSD、静态图片等办法的视觉稿作为输入，经过智能化技能一键生成可保护的前端代码，Sketch/Photo& | H ]shop 规划稿的代码生成需求装置插件，在规划稿中经过 imgcook 插件导出视觉稿的 JSON 描绘信息J ^ : _ { i X Z（DT ` p * { q s Y W2C Schema）粘贴到 imgcook 可视化编辑器，在编辑器中能够进行视图编辑、逻辑编辑等来改变 JSON 描绘信息。

咱们能够挑选 DSL 标准来生成对应; c _的代码。例如生成+ o r React 标准的代码，需求完成从JSON 树转化成 Re7 u ! Y n C eact 代码 （自界说 DSL）。

image.png

如下图，左边为 Sketch 中$ – n 7 k的视觉稿， 右侧为运用 React 开发标准生成的按钮部分的代码。

从 Sketch 视觉稿「导出数据」生成「React 开发标准」的代码，图E Q r – = x { ~为按钮部分代码片段

生成的代码都是由 div、img、span 这些标签组成，但实践运用开发有这样的问题：

  • webY . y c V页面开发为提升可复用性，页面组件化，例如：Searchbar、Button、Tab、Switch、Stepper
  • 一些原生组件不Y R o 6 N需求生成代码，例如状态栏 Statusbar、Navbar、Keyboard

咱们的需求是，假如想U , | + ; d B Q l要运用组件库，例如 Ant Design，咱们希望生成的代码能像这样：

// Antd Mobile React 标准
import { Button } from "antd-mobf T O X 8 I = ile";
<div style={styles.ft}>
<Button style={styles.col1}>进店抢红包&c F ) Blt;/Button>
<Button stG B g S # - x ayle={i 1 8 [styles.col2}>加购物车</Button>
</div>

为| h m此咱们在 JSON 描绘中增加了 smart 字段, 用来描绘节点的类型。H ) K q ? g 1

"smart": {
"layerProtocol": {
"component": {
"type": "Button"
}
}
}

咱们需求做的，便{ [ 0 d G是找到视觉稿中需求组件化的元素[ v 7 Q，用这样的 JSON 信息来描绘它， 以便p @ ( & u在 DSL 转化代码时， 经过获取 JSON 信息中的 smart 字段来生成组件化代码。

现在问题转化@ 1 F T = b @ ?为：怎样找到视觉稿中需求组件化的元素，它是什么组件，它在^ ; 8 } e a u % DOM 树中的方位或许在规划稿中的方位。

处理方案

约好生成规矩

经过指定规划稿标准来干预生成的 JSON 描绘，然后控制生成的代码结构。例如在咱们的 规, Z Z C { h .划稿高档干预标准 中关于组件的图层命名标准：将图层中的组件、组件特点等显性符号出来。

#component:组件名?特点=值#
#component:Button?id=btn#

在运用 imgcook 的插件导出 JSON 描绘数据时就经过标准解析拿到图层中的约好信息。

学习辨认组件

人工约好规矩的办法需求按照咱们拟定的协议标准来修正规划稿，一个页面上的组件或许会有许多，这种人工约好办法让开. U * ` n ! | r l发者多了许多额定工作，不符合运用 imgcook 进步开发功率的主旨，咱们希望经过智能化手段主动辨认视觉稿中的可组件化元素，辨认的成果终究会转化并填充在 smart 字段中，与手动约好组件协议所生成的 json 中的 smart 字段内容x X : l L G 相同。

这儿需求完结两件工作：

  • 找到组G _ G 3件信息：类别、方位、尺度等信息。
  • 找到组件中的特点， 例如 button 中的文字为“提交”

第二个工作咱们能够依据 json 树来解析组件的子元素。第一个工作咱们能够经过智能化来主动化的完结， l Y & ,这是一个在人工智能范畴典型的的方针检测问题，咱们能够测验运用深度学习方针检测手段来主动化处理这个手动约好的流程。

学习辨认 UI 组件

业界现状

现在业界也有一些运用深度学习来辨认网页中的 UI 元素的研讨和运用，对此有一些评论：

  • Use R-CNN to detect UI elements in a webpage?
  • Is machine learning suitable$ 7 ] L & t for detecting screen elements?
  • Any thoughts on a good way to detect UI elements in a webpage?
  • How can I de? u H / n m { | stect elements of GUI using opencv?
  • How to recog* 4 K unize UI elemen7 8 x v D $ts in image?

评论中的诉求首要U P 3有两种：

  • 希望经过辨认 UI 界面元素来做 Web 页面主动化测验的运用场景。
  • 希望经过辨认UI 界面元素来主动生成代码。

既然是运用深度学习来处W 1 K ; h ] $ =理 UI 界面元素辨认的问题， 带有元素信息的 UI 界面数据集则是必须的。现在业界u d w i D 4 d @敞开且运用较多的数据集有Rico 和ReDraw。

ReDraw

一组 Android 屏幕截图，GUI 元数据和标示了 GUI 组件图画，包括 RadioButton、ProgressBar、SwitchG . r、Button、CheckBox 等 15 个分类，14,382 个 UI 界面图片和 191,300 个带有标签的GUI组件，该数据集经过处理之后使每个组件的数量到达 5000 个。关于该数据集的详细介绍可检查 The ReDraw Dataset。

这是用于练习和点评 ReDraw 论文中说到的CNN 和 KNN 机器学习技能的数据集，该论文于 2018r ) G 3 @ 年在IEEE Transactions on Software Engineering上发布。该论文提出了一种经过三个进程来完成从 UI 转化为代码主动化完结的办法：Q u 1 d i

1、检测 Detection~ 8 3

先从规划稿中提取或n m g o & r n运用 CV 技能提取 UI 界面元信息，例如鸿沟框（方位、尺度）。

2、分类Classification

再运用大型软件仓库挖掘、主动动态剖析得到 UI 界面中出现的组件，并用此数据作为CNN 技能的数据集学习将提取出的元素分类为特定类型，例如 Radio、Progres( ` 8 =s Bar、Button 等。

3、组装 Assembly

最后运用 KNN 推导 UI 层次结构，例如5 8 ^ c纵向列表、横向 Slider。

在 ReDraw 系统中运用` B g t I x b ( /这种办法j ! b Q s生成了 Android 代码。点评标明，ReDraw 的W N 6 i ~ C GUI 组件? R = s } d分类均匀精度到达 91％，并组装了原型运用程序，这些运用程序在视觉亲和力上严密地反映了方针模型，一起展现了合理的代码结构。

Rico

迄今为止最大的移动 UI 数据集，创建目的是支撑五类数据驱动的运用程序：规划搜索，UI布局生成O % g t * ，UI代码生成，用户交互建模和用户感知猜测。 Rico 数据集包括 27 个类别、1 万多个运用程序和大约 7 万个屏幕截图。

该数据集_ ] L w q D在 2017 年第30届ACM年度用户界面软件和技能V : : v ~ |研讨会上对外敞开（RICO: A Mobile App Dataset for Building Data-Driven Design Applications）r m d k。

此后有一些依据 Rico 数据集的研讨和运用。例如： Learning Design Semantics for Mobile Apps， 该论/ z ~ N d 5 (文介绍了一种依据代码和视觉的w 8 d &办法给移动 UI 元素增加语义注释。依据 UI 屏幕截图和视图层次结n o M构可主动辨认出 25
UI组件类别，197 个文本按钮概念和 99 个图标类。

运用场景

这儿罗列一些依据以z G H +上数据集的研讨和运用场景。

智能生成, X L e . K H .代码

Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apx E { V ? 0ps | ReDraw Dataset

智能生成布局

Neural DesigC N @ [ B l K yn Network: Graphic Layout Generation with Constraints | Rico Dataset

用户感知猜测

Modeling Mobile Interface Tappability Using Crowdsourcingm Q p and Deep Learning | Rico Datase7 ; , F d vt

UI 主动化测验

A Dei ] j W X Oep Learning basS M # 1 Sed Approach to Automated Android App Testing | Rico Dataset

问题界说

在上述介绍b * _ P G F K k w的依据 Redraw 数, X r w据集生成 Android 代码的运用中，咱们了解了它的完成方案， 关于第 2 步需求运用大型软件仓库挖掘和主动动态剖^ A =析技能来获取许多组件样本作为 CNN 算k _ i w A ? `法的练习样本，以此来得到 UI 界面中存在的特定类型组件，例如 Progress Bar、Switch 等。

关~ $ c * b / ~ r于咱们 imgcook 的运用场景3 R K } [ &，其本质问题也是需求找到 UI 界面中这种特定类型的组件信息：类别和鸿沟框，咱们能够**把这个问题界说为一个方针检测的问题，运用深度学习对 UI 界面进+ u S , p v ! .行方针检测。**那么咱们的方针是什么？

检测方针便是 Progress Bar、Switch、Tab BarY 1 O ) $ K { ~ R 这些可在代码中组件化的页面元素。

UI 界面方针检测

基础知识

机器学习

人类是怎样学习的？经过给大脑输入必定的~ A i 0 = [材料，经过学习总结得到知识和经历，有当类似的使命时能够依据已有的经历做出决定或行动。

机器学习(Machine Learning)的进程与人类学习的进程d # & ~ t –是很类似的。机器学习算法本质上便是获得一个 f(x) 函数标明的模型，假如输入一个样本 x 给f(x) 得到的成果是一个类别，处理的便是一个分类问题，假如得到的是一个详细的数值那么处理的便是回归问题。

image.png

机器学习与人类? a , P & o | (学习的全体机制是共同的，有一点差异是人类的大脑只需i w Z q求十分少的一些材料就能够概括总结出适用性十分强C m C p a : f U的知识或许经历，例如咱们只要见过几只猫或几只狗就能正确的分辨出猫和狗，但关于机器来说咱们需求许多的学习材料，但机器能做到的是智能化不需求人类参加。

深度学习

深度学习（Deep Learning）是机器学习的分支，是一种企图运用包括杂乱结构或由多重非线[ D 3 f性变换构成的多个处理层对数据进行高层笼统的算法。

深度学习与传统机器学习的差异能够看这篇 Deep Learning vs. Machine Learning，有数据依靠性、硬件依靠、特征处理、问题处理办法、履行时Q s & $间和可解说性这几个方面。

深度学习对数据量和硬件的要求很高且履行时间很长，深度学习与传统机器学习算法的首要不同在于对特征处理的办法。在传统机器学习用于现实使命时，描绘样本的特征一般需求由人类专家来规划，这称为“特征工程”（Feature Engineering）,而特征的好坏对n [ . : q G 8 –泛化性能有至关重要的影响，要规划出好特征并非易事w _ J | v。深度学习能够经过特征学习技能剖析数据主动产生好特征。

方针检测

机器学习有许多运用，例如：

  • 核算机视觉（Computer Vision，CV） 用于车牌辨认和面部辨认等的运用。
  • 信息检索 用于比方搜索引擎的运用 – 包括文本搜索和图画搜索。
  • 市场营销e – h 针对主动电子邮件营销和方针群体辨认等的运用。
  • 医疗诊断 比方癌症辨认和反常检测等的运用。
  • 自然语言处理（Natural Language PrA b $ o & * M Pocessing， NLP） 如情绪剖析和相片符号等的运用。

方针检测（Object Detection）便是一种与核算机视觉和图画处8 ; A理有关的核算机技能，用于检测数字图画和{ z ! Y $ P视频中特定类别的语义对象（例如人，动物物或轿车）。

而咱们在 UI 界面上的方针是一些规划元素， 能够是原子粒度的 Icon、Image、Text、或是可组件化的 Searchbar、Tabbar 等。

算法选型

用于方针检测的办法一般分为依据机器学习的办法（传统方针检测办法）或依据深度学习的办法（深度学习方针检测办法），方针检测办法经历了从传统方针检测办法到深度学习方针检测办法的变迁：

传统方针检测办法

关于依据机器学习的办法，需求先运用以下办M @ c p法之一来界说特征，: / 2 a j y V N [然t F 6 i 3 B i $后运用比方支撑向量机（SVI F J ; l . z jM）的技能进行分类。

  • 依据 Haar 功用的 Violah p L 3 S u–Jones 方针检测结构9 ] l Y
  • 尺度不% t r , r – X 4变特征变换（SIFT）
  • 定向梯度直方图（HOG）特征

深度学习方针检测办法

关于依据深度学习的办法，无需界说特征即可进行端到端方针检G { 3测，一般依据卷积神经网络（CNN）。依据深度学习的方针检2 S +测办法可分为 OneT ) 6 U x E ? $ `-stage 和Two-stage 两类，还i n M j _ * m有承继这两种类办法长处的RefineDet 算法。

One-stage

依据 One-stage 的方针检测算法直接o . ] w P ; /经过主干网络给出类别和方位信息，没有运用RPN网路。这样的算法速度更快，可是精度相对Two-stage方针检测r 6 c b l ~ N H q网络了略低。典型算法有：

  • SSD（Single Shot MultiBox DetU x t bector）系列
  • YOLO(You Only Look Once)系列（YOLOv1、YO4 Z 5 4 p –LOv2、YOLOv3）
  • RetinaNet

Two-stage

依据 T1 ~ !wo-stage 的方针检测算法首要经过一个卷积神经网络来完结方针检测进程，其提取的是 CNb B Z UN 卷积特征，在练习网络时，其首要练习两个部分，第一步是练习 RPN0 + Q ? j & J C D 网络，第二步是练习方针区域检测的网络。

即先由算法生成一系列作^ & u 2 ^ 0 P为样本的候选框，再b ; Y ~ –经过卷积神经网络进行样本分类。网络的准– L j G [确w x 7 =度高、– # { M ` C ) j J速度相对 One-stage 慢。典型算法有：

  • R-CNN，Fast R-CNN，FasterR-CNN

其他（RefineDet）

RefineDv t e f T $ k fet (Single-Shot Refinement Neural Network for Object Detection) 是依据SSD算法的改善。承继了两种办法（例; = z i E & c k 2如，单一阶段规划办法，两阶段规划办法）的长处，并克服了它们的缺点。

方针检测办法比照

传统办法 VS 深度o * z % $ D S p学习

依据机器学习的办法和依据深度学习的办法的算法流程如图所示，传统方针检测办法需求手动规划特征，经过滑动窗口/ l & 5获取候选框，再运用传统分类器进行方针区域判定，整个练习进程分成多个进程。而深度学习方针检测办规律经过机w : y 1 w器学习特征，9 F E U经过更高效C k ` h的 Proposal 或直接回归的– Y q _ b : x ` s办法获取候选方针，它的准确度和实时性更好( X _ ` ` 8 F / =。

关于方针检测算法0 V q e T _的研讨现在根本都是依据深度学习的，传统的方针检测算法现已很少^ 9 [ d 5 9 S %用到了，深度学习方针检测% C 9 A办法更适合工程化， 详细比照如下：

One-stage VS Two-stage

算法优缺点

这儿就不写各个算法的原理了，Q N H L Y直接看下优缺点。

总结

因为对 UI 界面p ` e元素检测的精度要求比较高， 所以终究挑选 Faster RCNN 算法。

结构挑选

机器学习结构

这儿扼要罗列下几个机器学习结构： Scikit Learn、TensorFlow、Pytorch、Keras。

Scikit Learn 是通用的机器学习p 8 ]结构，内部完成了各种分类,回归和聚类算法（包括支撑向量机，随机森林，梯度增强，k-meand { f O v . *s 等）; 还包括数据降维、模型挑选和数据预处理v D J ]等东西库，简略装置和运用，样例丰厚，并且教程和文档也十分详细。

TensorFlow、Keras和Pytorch****是现在深度学习的首要结构， 供给7 0 l各种] X I深度学习算法调用。这儿引荐个学习资源： 强烈引荐的TensorFlow、Pytorch和– # = = j , ~Keras的样例资源% y `，特别同意这篇作) ^ =者说的:只要把以上资源运N 6 h 3 W 5 ^ x /行一次，不明白的当地查官方文档，很快就能理解和运用这三大结构。

在后边的模型练习代码中能够看到实践使命中是怎样运用这些W X I s T结构的B 9 :。

方针检测结构

方针检测结构能够理解成是把方针检测算法整合在一起的一个库，例如深度学习算法结构TensorFlow 不是一个方针检测结构，但它供给方针检测的 API：Object Detection API。

方针检测结构首要有：Detectron、mav 9 9 u I . Eskrcnn-benchmark、mmdetection、Detectron2。现在运用较广的是
Facebook AI 研讨院于 2019 年 10 月 10 日开源的 DM } @ S y detectron2 方针检测结构。咱们做 UI 界面组件辨认也是用的Detectron2， 后边会有运| D ( ^ 4 $ ?用示例代码。

可参考：怎样点评FAIR于2019年10月10日开O 7 U源的Detectron2方针检测结构？

前 ^ { d N ; T h端机器学习结构 Pipcook

作为一个前端开发者，咱们还能够挑选 Pipcook，这是由阿里巴巴前端委员会智能化小组开源的一个帮助前端工程师运用机器学习的前端算法工程| = ! Y . L U ] _结构。

Pipcook 运用对前端友爱的 JS 环境，依据 Tensorflow.js 结构作为底层算法才能并且针对前端– ^事务场景包装了相应算法，然后让前端工程师能够快速简略的运用起机器学习的才能。

Pipcook 是依据管道的结构，为前端开发者封装了数据搜集、数据接入、数据处理、模型装备、模型练习、模型服务布置、在线练习七个部分的机器学习工程链路。

关于 Pipcook 的原理和运用可检查：

  • Pipcook Github | Docs
  • pipcook – 让前端拥抱智能化的一站式算法结构
  • 怎样依据 tfjs-node 构建一个高阶前端机器学习结构

样本预备

环境和模型预备好了，机器学习的大头仍是数据集的搜集和处理。咱们的样原本历有两种：

  • 阿里系运用的UI 界面图片。现在移动端 UI 界面25647 张图片，人工标示了 10 个分类合计49120 个组件。
  • 代码主动生成的图片。支撑 10 个分类的样本生成，生成图片时主动标示。

组件类型界说

现在圈定的组件类型I L w , 3有 Statusbar、Navbar、Searchbar、Tabbar 等，不管是人工标示仍是主动标示方针组件，都需求有清晰的组件类型界说。

  • 人工标示时需求依据s @ b I I 6 B清晰界说的特征来标示组件
  • 主F N 2动生成时需求依据清晰界说的特征来编写款式代码。

例如，对手机状态栏 Status Bar 的界说：

image.png

例如，对选项卡 Tab Bar 的界说：

image.png

阿里系运用 UI 界面样本

阿里系 APP 和产品事务有@ d J ]许多，这个事务的视觉稿都有渠道会集办理，咱们能够A ] ^ u . n J N !拿到这些视觉稿作为样原本历。现在只选取了 Sketch 视觉G ? 3 t A S g Z r稿， 因为 PSD 文件难以导出以页面为维度的图片。

搜集样本

这儿讲的比~ Q x ) 4较细，因为我觉得有些当地能够仍是给人启示的。

1、下载 Sketch 文件

从阿里内部渠道下载 Sketch 文件是第一9 ] ( _ /步，后边的每个进程脚R b K w L本都以序号x 1 t { f开头，例如1-download-sketch.ts。因为样本处理脚? | G 4 : T ] ^ ^本许多，友爱的命名更易理解。

/**
* 【用处】下载 Sketch 文件
* 【指令】ts-node 1-downl* C ; j 2 ? T [ Goad-sketch.ts
*/
2、运用sketchtoH [ p u u fol 批量导出为图片

Sketch 自带一个指令行东西 sketchtool, 咱们能够用sketchtool 来批量导出为图片。点此检查更多 sketchtool 的用法。

# 【用处】运用 sketchtool 导出 Sketch 中的 Artboards 保存为 1x 的 png 图片| g 8 | s j m J 9
# 【指令】sh 2-export-image-from-sketch.sh $inputDir $outputDir
for file in $1"/*"
do
sketchtool export artboards $file --output=$2 --formats='png' --scalesm R v j 4 - E f=1.0
done

样本预处理

规划师出的规划稿你懂得，淘宝直播4.0_v1、淘宝直播4.0_v2、淘宝直播4.0_v3…， 每个小版本改动或许不太大，每个 Sketch 文件中的页面或许还有： 详情页初版、详情页2版、详情i d 5 t页终版，这在导出图片之后会有许多重复的图片。

别的还有一些不标准的规划稿，一个画板画一个 ICON 这4 p Z E G # T w种的，还有交互稿、PC 端视觉稿等都不是咱们5 p 0需求的。所以需求做一些处理。

3、按尺度分类过滤

将图片分为移动端 和 PC 端, 按尺度去除无效图片。

# 【用处】将图片按尺度分类除掉
# 【指令】python3 3-classify-by-sizes V q 4 B i.py $inputDir $outputDir
# 删去尺度不标准的图片，width_list 中是数量大于 100 的尺度
if width not in width_list:
print('move {}'.format(img_name))
move_file(img_dir, other_img_dir, img_nam , d ie)
# 删去 高度小于 30 的图片
elif height < 30:
print('move {}'.format(img_name))
move_file(img_dir, other_imW v _ o ? 0g_dir, img_name)
# 按尺度归档
else:
width_dir =) 1 O osV s A a a ..pathD b y = I.join(img_dir, str(width))z @ 6 Z N c V
if not os.pat/ 2 , w nh.exists(width_dir):
print('[ b cmkdir:{}'.format(width))
os.mkdir(width_dir)
print('move {}'.format(img_name))
move_file(img_dir, width_dir, img_name)
4、图片去重

假如自己写图片去重的逻辑也能够，做一个图片类似度比8 a x !较。这儿偷个懒，直接用了现成– Q r的图片类似度检测东西 duplicato M c S } Ye Photos Fixer Pro。这儿简略说一下运用办法， 如图红框提示，支撑调整检测条件和类似程度。

每张图片的 Hash 值核算完结之后，还能够再调整类似度来筛选。

5、图片重命名

这儿首要是想说一下怎样做样本办理，因为数据集是会逐渐丰厚的，或许会存在许多个版本的数据集。友爱的命名便于办理，比方 generator-mobile-sample-10cate-20200101-1.png, 标明这是 2020.01.H u ] n ) O01 主动生成的第 1 个移动端样本，这一D c $ I批数据集包括 10 个分类。

样本标示

6、半主动标示

有一些组件是能够主动标示的，比方statusbar 和 navbar， 因为简直每张图片都会有且方位和尺度根本相同，所以能够为每张图片主动生成一个 VOC 格局的 xml， 包括两个方针组件分类。然后在人工标示其他组件时只有少部分需求! f – 6 S调整，能够节约许多人力。

现在也在探究更多的半主动化标示办法以削减人9 _ D ; N v s @工标示的成本。

7、B 9 t $人工标示

运用 labelImg 东西进行人工标示，按照p = 5 h X G链接中供给的装置进程装置，D I & ! ` G * { *这儿简略介绍下l $ c z用法。

// 下载 labelImg
git clone https://github.com/tzutalin/labelImg.git
// 进入 labelImg
cd labelImg-master
// 之后按照 github 中的提示装置环境
// 履行一下指令就会翻开可视化界面
python3 labelImg.Z L $py

可视化界面如下， 支撑 Pasca` J I 0 6 7 = Il VOC 和 Yolo 两种保存标示的格局。

界面怎样用就不说了，这儿引荐一些进步标示功率 ( c C j U的快捷键, 别的选中 View > Auto Save mode 能够主动保存。

w 新建立一个矩形框
d 下个图片
a 上个图片
dm z Cel/fn + del 删去选中的矩形框，我的电脑需求 fn + del
Ctrl/Com, v ] (mand++ 扩大
Ctrl/Command-- 缩小
↑→↓← 移动1 m d v @ q @ A矩形框

Puppeteer 主动生成样本

依据组件类型界说随机生成组件，这个组件的款式也是随机的。示例如下， 每个正样本都有一个 class 为 el% s zement-开头的挑选器，例如 element-button 便于后续获取组件的类别信息。

image.png

随机生成页面

编写一个页面，随机选取一些组件展示。本地启动服r d o 8 A ) x务，翻开页面，例如 http://127.0.0.1:3333/#/generator，示例页面如下：

image.png

可是这个的页面与实践的 UI 界面相差太大，只有正样本T P D v – v，布景太简略。这儿经过裁剪出实在的 UI 界面中的片段与主动生成的方针组件组合的办法，来进步生成样本的质量， 示例样本如下，应该能看出来页面中主动生成的组件吧？

image.png

Puppeter 截图生成样本

确认随机页面（http://127.0.0.1:3333/#/generator ）可访问后，运用 Puppeteer 编写脚本主动翻开页面、截图保存、并获取组u @ Z 4 ` ) )件的类别和鸿沟框。首要逻辑如下：p M | t

const pptr = require('puppeteer')
// 寄存 COCO 格局的样本数据
const mdObj = {};
const browser = await pptr.launch()；
const page = await browser.newPage(o & : w g F ^ n );
await page.goto(`http://127- / } { [ 8.0.0.1:3333/#/generator/${Date.now()}`)
await page.evaluate(() => {
const container: HTMLElement | null =M } Y ) 4 V % document.querySelector('.container')；
const elements = document.queryS r ~ % & O w _ pelectorAll('.element');
cons1 [ , 8 4 R R [ zt msg: any = {bbox: []};
// 获取页面中一切带 .element 挑选器的元素
elements.forEach((element) => {
const classList = Array.from(element.classList).join(',')
if (classList.match('element-')) {
// 获取类别
const type = classList.split('element-')[1].split(b # ! K / k 5 F',')[0];
// 核算鸿沟框并保存至 msg
pushBbox(elemep m ;nt, type);
}
});
});
// 保存 COCO 格局样本数据
logToFile(mdObj);
// 保存 UI截图
await pag[ ] P A s 3 : BeN , A m O 6 @ N.screenshot({path: 'xxx.png'});
// 关闭浏览器
awaiL n ` Et browser* J 9 Z P &.close();

样本点评

阿里系运用 UI 界面样本中，组件数量和丰厚度不平衡，可经过主动生成样原本平衡每种组件的数量。关于主动生成的样本，怎样来点| _ I [ c 2 K评样本质量？怎样主动生成方针组件的逻辑可枚举为 1 万种S ^ * J d X f Z，主动生成 2 万个此类组件就没有意义。

怎样点评主动生成6 R % * p的样本的丰厚度和数量是否合理？这是现在咱们在探究的问题。

模型练习

Detectron 2

运用 Facebook 开源的方针检测结构 Detectron 2, 经过merge_from_file 指定运用 Faster R-CNN。

from detectron2.data import MetadataCatalog
from detectron2.evaluation import PascalVOCDetectionEvaluator
from detectron2.engine import Default9 R C p f V Q ~ XTrainer,hooks
from detectr^ | ! : } i a Aon2.config impv * # .ort get_cfg
c^ L j Hfg = get_cfg()
cfg.merge_from_file("./lib/detectron2/conff q V & ^ T ,  kigs/COCO-Detection/faster_rcnn_R_50_C4_3x.yaml")
cfg.DATASETS.TRAIN = ("train_dataset",)
cfg1 x i =.DATASETS.TEST = ('val_dataset',)   # no metrics implemented for this dataset
cfg.DATALOADER.NUM_WORKERS = 4  # 多开几个worker 一起给GPU喂数据防止GPU闲置 
cfg.MODEL.WEIGHTS = "detectron2://ImageNetPretrained/MSRM U ` I i e w tA/R: M #-50.pkl"  # initialize from model zoo
cfg.SOLVER.IMS_PER_BATCH = 4
cfg.SOL[ E = L !VEO } ? H K u k [ YR.BASE_Lq * Q y 5 IR = 0.000025
cfg.SOLVER.NUM_GPUSY 2 c = 2
cfg.SOLVER.MAX_ITER = 100000    # 3Z n r k R00 iterations seems gop ] 8 y U w c Zod enough,N e K L but you can certainly train longer
cfg.MODEL.ROI_HEADS.BATCH_SIZE_PER_IMAGE = 128   # faster, and good enough for this toy dataset
cfg.MODEL.ROI_HE. ] s U b S 6 P !ADS.NUM_CLASSES = 291 ` $ S !  # only has one class (ballon)
# 练习集
register_coco_instances("train_dataset", {}, "data/train.json", "daH q K L a o { , ~ta/img")
# 测验集
register_coco_instances(3 Y 8 F f  &"val_dataset", {}, "data/val.json", "data/img")
import os
os.makedir L x K C S { brs(cfg.OUTPUT_DIR, exist_ok=B % T 5 ! * k 3 FTrue)
class Tr8 g ) u v G E  ?ainer(DefaultTrainer):
    @classmethod
def build_evaluator(cls, cfg, dataset_name, output_folder=None):
### 按需求重写
    @classmethod
def test_with_TTA(cls, cfg, model):
### 按需求重写
trainer = TrainerJ j w Z 0 + U(cfg)
trainer.resume_or_load(resume=True)
trainer.train()

运用 Detectron 2 模型练习的产品是一个.pt? H vh 格局的模型文件。这个.pth 格局的模型文件长啥样能够看下7 _ w o / ; y r这篇 Pytorch 中保存的模型文件.pth 深入解析。

Pipcook

PipI z l B Lcook 现已帮咱们封装好了从数据搜集、数据接入、模型练习、模型点评的代码，咱` . 4 W / *们无需写这些+ ; x p = I i工程链路的 Python 脚本。现在 Pipcook 中的方针检测链路运用的是 Detectron 2 中的$ m ] x U 9 – ( u Faster RCNN 算法，我们能够去 Pipcook Plugins 看下完成就明白G O ! J了。

以下是运用 Pipcook 进行方针检测的示例代码。

const {DataCollect, DataAccess, ModelLoad, ModelT[ % Q # G {rain, ModelEvaluat/ W F ye, PipcookRunner} = require('@pipcook/pipcook-core');
const imageCocoDataCollect = require('@pipcoT # x ; A + @ok/pZ e D 3 9 L E 4ipcook-plugins-image-coco-data-collect').default;
const imageDetectronAccess = requio ! - s t O 0re('@pipcook/pipcook-plugins-detection-detectron-dataZ * 1 x k-aJ % _ Wccess').default;
const detectronModelLoad = require('@pipcook/pipcook-plugins-detectionJ Q T k :-detectron-model-load').default;
const detectronModelTrain = require('@pipcook/pipcook-plugins-detection-detectron-model-train').default;
const detectronModelEvaluate = require('@pipcook/pipco/ p = Z ,ok-plugins-detection-detectron-model-evaluP j + Q rate').default;
async function startPipeline()q b v q x h F J O {
// collect detection data
const dataCollect = DataCollect(imageCocoDataCollect, {
urle s u p : _ O: 'ht^ 8 R S M T 6 utp://I K 1 6 q 1 a sai-sample.oss-cn-hG b | ~ Aangzhou.aliyuncs.com/image_classification/datasets/autoLayoutGroupRecognition.zip',
testSplit: 0.1,
annotationFileName: 'annotation.json'
});
const dataAccess = DataAccess(imageDetectronAccess);
const modelLoad = ModelLoad(dY R G JetectronModelLoad, {
device:_ y 2 i v } 'cpu'
});
const modelTrain =3 v [ ModelTrain(det1 b } U ] ] 6ectronModelTrain)e - y;
const modelEvaluate = ModelEvaluate(detectronModelEvaluate);
const runner = new PipcookRunner( {
predictServer: true
});
runner.run([dataCollect, dataAccess, modelLoad, modelTrain, modelEvaluate])
}
startPipeline();

模型点评

点评方针

发现文章H U ( { $ 1太长了，这儿扔个学习资源吧， 强烈引荐这个视频课B l N G L程 Pythb _ Kon3入门机器学习经典算法与运用[慕课网] ，没有时间看的话直接看人家写的笔记吧，第 10 章详细讲了运用精准率和召C H [ Q p b A % )回率点评分类成果。

啊， 仍是简略解说下吧。

精准率能够理解成查准率，比方猜测了 100 个是 Button, 其中 80 个是猜测正确的， 精准率是 80 / 100。
召回率能够理解成查全率，比方实践有 60 个是 Button， 成功猜测了 40 个, 召回率是 40 / 60.

在方针检测的性能点评方针是 mAY $ yP 和 FPS，mAP 核算的是一切类别的均匀准确率， 但因为方针检测成果除了类别还有个鸿沟框，怎样点评这个鸿沟框的猜测准确性，又涉及到 IoU （Intersection over Union）s V s K – D交并比的概念，用来标明猜测的鸿沟框与实在的鸿沟框的交并比。

在后边的点评成果中能够看到! F % H k这样的成果，当IoU=0.50:0.95 即猜测的鸿沟框与实在的鸿沟框的交并比在 0.5 到 0.95 之间时都算鸿沟框A ) 3 : b猜测正确，此时的精准率 AP 为0.772。

 Average Precision  (AP) @[ IoU=0.50:0.95 | area=   all | maxDets=100 ] = 0.772
Average Precision  (AP) @[ IoU=0.50      | area=   all | maxDets=100 ] = 0.951
Average Precision  (AP) @[ IoU=0.75      | area=   allz v [ f [ | maxDets=100 ] = 0.915

点评代码

点评代码如下：

from pycocotools.cocoeval import COCOeval
from pycocotU [ z ! Sools.coco import COCQ . d V 8 FO
annType = 'bbox'
# 测验集 ground truth
gt_path = '/Users/chang/coco-test-sam+ I G C Mple/data.json'
# 测验集 猜测成果
dt_path = '/Users/chang/coco-test-sample/predict.json'
gt = COCO(gt_path)
gt.loadCats(g, s P st.getCatIp { Y ^ ods^ A a G())
dt = COCO(dt_path)
ib P k O O v T m Omgn o LIK G / ( d 6ds=sorted(gt.getImgIds())
cocoEval = COCOeval(ge 2 & mt,dt,annTyper s 4 . V 0 y { $)
for cat in gt.loadCats(gt.getCatIds()). j ? } y  ;  M:
cov @ i Y w z r H *cL , ) - DoEval.params.imw = J s . o HgIds  = imgIds
cocoEval.params.catIds = [cat['id']]
print '------? A ` 4 X . 5 ) |------------------------  ' cat['name'] '  ---------------------------------'
cocoEval.evm H Naluate()
cocoEval.accumulate()
cocoEn j ! ; a & ] u @val.summarize()

点评成果

现在用8 Q 9 o /阿里系 UI 界面与主动生成的样本组合练习， mAP 根本在 75% 左右。

---0 Q z--------------O o K 6------u L 5 6 B e l-------   searchbar   ---------------------------------
Running per image evaluation...
Evalo c uate annotation type *bbox*
DONE (t=2L Z @ - $.60s).
Accumulating evaluation results...
DONE (t=0.89s).
Average Precision  (AP) @[ IoU=0.50:0.95 | area=   all | mP f B 5 K E waxDets=100 ] = 0.772
AG g XveraL s - K V r Jge Preciso h g 4 Z _ion  (AP) @[ IoU=0.50      | area=   all | mav 6 ` U / O b 8xDets=100 ] = 0.951
Average PrY ; 1 7 1 8 d Tecision  (AP) @[ IoU=0.75      | area=   all | maxDets=100 ] = 0.9P 6 A Z $ 15
Average Precision  (AP) @[ IoU=0.50:0.95 | area= small | maxDets=100 ] = -1.000
Average Precision  (AP) @[ IoU=0.50:0.95 | area=medium | mA ; G oaxDetsE D h=100 ] = 0.795
Average Precision  (AP) @[ IoU=0.50:0.95 | area= large | maxDets=100 ]# + @ b e N = 0.7p M L E 56
Average Recall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets=  1 ] = 0.816
Average Recall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets= 10 ] = 0.830
Average RR e I )ecall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets=100 ] = 0.830
Averagi @ k x 8 Xe Recall     (AR) @[ IoU=0.50:0.95 | area= small | maxDets=100 ] = -1.000
Average Recall     (AR) @[ IoU=0.50:0.95 | area=med= I 5 5 k 2ium | mT ! w T G ( J 2axDets=100 ] = 0.838
Average Recall     (AR)6 c n ^ / ? @[ IoU=0.50:0.95 | area= large | maxDets=100 ] = 0.g z w . W C ,823

咱们用非阿里系的 UI 界面看下猜测成果， 能够看出一些简略被误辨认的情况。

image.png

模型服务布置

咱们希望的是当输入一张图片时能返回给模型猜测的成果。所以拿到模型文件之后，需求写一个模型服务，接纳一个样本，并返回模型猜测的成果。

from detectron2.config import geP 9 ? ft_cfg
fy 0 V Yrom detectron2.engine.defaults import DefaultPredictor
with od G a  b } T P gpen('lc 6 p 1 0 g ,abel.json') as f:
mp = jsonD D . ( [.load(f)
cfg = get_cfg()
cfg.merge_from_file("./config/faster_rcnn_R_50_C4_3x.yaml")
cfg.MODEL.WEIG9 g j  _ e /HTS = "./output/modeW n w 4 - ) + 3 nl_final.pth"  # initialize from model zoo
cfg.MODEL.ROI_HEADS.NUM_CLASSES = len(mp)  # only has one class (ballon)
cfg.9 a * lMODEL.DEVICE='cpu'
model = DefaultPredictor(cfg)
def preb k *dict(image):
im2 = cv2.imread(image)
out = model(x)
data = {'status': 200}
data['content'] = trans_data(out)
# EAS python sdk
import sparkV ? ] _ # -
num_io_threads = 8
endpoint = '' # '127.0.0.1:8080'
spark.default_properties().G a ] Vput('rpc.keepalive', '60000')
contex7 Q r a : # { :t = spE G F } S nark.Context(num_L 3 `  9 bio_threads)6 ) n S O $ 8
queued = context.queued_service(endpoint)
while True:
receive_data = srv.read()
try:
msg = json.loads(receive_data.deJ  y H ) # . I fcode())
ret = predict(+ 1 m tmsg["imag- F Ce"])
srv.write(json.dumps(ret).enx $ l 8 E n Jcode())
except Exception as e:
srv.error(500, str(e))

模型布置后拿到访问链接即可直接调用例如 example.com/api/predict… 来猜测。

模型运用

模型布置之后就能够在咱们的运用中调用获取猜测w $ ^ B w k o { Q成果(视觉稿中的组件类别和鸿沟框)，与从视觉稿中导出的 JSON 树比对，然后获得一个带有组件信息(D2 H r ( ) P : | C Sg * i Pchema 中的 smart.layerProtp + 4 6 c Mocol.component 字段)的 JSON 描绘（处理后的终究 JSON 作为 DSL 的输入生成代码）。

const detectUrl = 'hv J Sttp://example.com/) h ~ 9 6 1 ) * Tapi/predict/detect';
const res = await request(detectUrl, {
method: 'post',
dataType: 'json',
tima s m I j R = Geout: 1000 * 10,
content: JSON6 $ 9.string_ 6 /ify({
image: image,
}),
});3 x ; r w T )
const json = r + ^ W o } Tes.content;

关于模型服务的布置和调用能够去 PAI 的文档检查。

未来展( j B Q } @ C I ~望

因为挑选的是# , 1 m v 7 W P深度学习B 1 O + a r算法， 需求许多的练习集样本，所以样本数量和质量是亟需处理的问题。

现在咱们现已拥有 2.5万+H [ | 的 UI 界面样本，包括 10 个分类，主动生成的样本支撑 10 个分类。但人工标示的UI 界面样本均为阿里系产品，虽然样本图片W 0 : { o不同但规划风格会有类似且规划标准较统一，5 w k ! d p w V U使得组件款式的丰厚度不行，对阿里系之外的规划稿泛化才能较阿里系的要差。别的遵循必定的随机化规矩主动生成的样本还存在版式和款式与实践样本有差异的当地，主动生成的样R s l T本质量无法点评。

未来在数据集方面，会考虑加入业界样本数量较大的数据集，并优化样本主动生成逻辑，一起探究点评主动生成的样本质量的办法。

附录

数据格局

用到了两种方针检测范畴办理数据集的格局标准：MSCOCO 和 Pascal VOC。

MSCOCO

运用 COCO 格局办理数据集，有一个 img 文件夹用于寄F 2 ; 7 C e S 5 4存图片，一个 json 文件寄存方针信息，一切样本信息都在 data.json 文件6 v R X中，数据量很大时较难办理。

.
├── data.json
└── img
├── demoplus-20200216-1.png
└── demoplus-20200216-2.png

imj ! D C X P Zages 寄存图片数据，annotations 寄存标示数据，categ} / , } ` P Cories 寄存分类数据， 一个样本的图片、标示和类别用image_idX L Q * ? # f t 和c= 4 B 1 uategory_id 关联。

{
"images":[
{
"file_name":"demoplush t ? L U-20200216-1.png"z h ^ * R k J,B . # (
"url":"img/demopluso w L-20200216-1.png",
"width":750,
"height":2562,
"id":1
},
{
"file_name":"demoplus-20200216-2.png",
"ur- M 1l":"img/demoplus-20200216-2.png",
"width":750,
"height":1334,
"id":2
}
],
"annotations":[
{
"id":1,
"image_id":2,
"category_id":8,
"category_name":"navbar",
"b= -  ?box":[
0,
1,
750,
90
],
"area":67500,
"iscrowd":0
}
],
"categor= C Hies":[
{
"i4 4 {d":8e , = k m n U m -,
"supercategory":"navbar",
"name":"navbar"
}
]
}

PP j J B e 4 1 f ascal VOC

VOC 格局的数据集有两个文件夹，Annotations 用于寄存标示数据(XML 文件)，JPEGImages 用于寄存图片数据。

.
├── AnnotV L zations
│ ├── demoplus-20200216-1.xml
│ └── demoplus-20200216-2.xml
└── JPEGImages
├── demoplus-20200216-1.png
└── demoplus-20200216-2.png

XML 文件内容示例：

<annotation>
<folder>PASCAL VOC<9 E * @ = d R //foldery , 4 F S _ I>
<filename>demo.jpg</filename> //文件4 / C M U r名
<source> //图画来历
<database>MOBILE-SAMPLE-GENERATOR&lD E y pt;/database>
<annota: Z f 7 + E {tion>MOBILE-Sn v 7AMPLE-GENERATOR&lv g c * + #t;/annotation>
<image>ANTD-MOBILE</image>V 1 M;
</source>
<size( J / a U> //H P e 5 8 U 0图画尺度（长宽以及通道数）
<width>832</width>% ` V H O . 5
<height>832</height>
<depth>3</depth>
</size>
<object> // 方针信息：类别和鸿沟框
<name>navbar</name>
<bndbox>
<xmin>X B 5 I f G _0</xmin>
<ymin>0</ymin>
<xmax>812</xmax>
<ymax>45</yma3 k ~ L k ?x>
</bndbox>b  J z /;
</object>
<annotatih z - & c a ;on>