指导：
智能生成代码平台IMGCOOK使用诸如Sketch，PSD，静态图片作为输入的视觉草稿，并可以一次点击生成维护前端代码。我们希望直接从设计草案中生成组件代码。这需要设计手稿中的组件元素，例如搜索栏，按钮，选项卡等。网页中的UI元素的识别是人工智能领域中的典型目标检测问题。我们可以尝试从动态解决方案中使用深度学习目标检测方法。
本文介绍了使用机器学习来识别UI接口元素的整个过程，包括：现状问题分析，算法选择，样本准备，模型培训，模型评估，模型服务开发和部署，模型应用程序等。
申请背景
IMGCOOK使用诸如Sketch，PSD，静态图片作为输入之类的视觉草稿，并通过智能技术生成可维护的前端代码。手稿的JSON描述信息（D2C架构）粘贴到IMGCook Visual Editor。查看编辑，逻辑编辑等编辑器中可以更改JSON描述信息。
我们可以选择DSL规范来生成相应的代码。例如，生成React规范的代码需要从JSON树转换为React Code（自定义DSL）。
如下图所示，左侧是草图中的视觉草稿，右侧是通过使用React开发规范制定规范生成的按钮部分的代码。
从素描视觉草稿“导出数据”以生成“ React开发规范”的代码，图片显示了按钮的某些代码片段。生成的代码由DIV，IMG和SPAN等标签组成，但是实际应用程序发展有这样的问题：
我们的需求是，如果我们想使用组件库，例如Ant Design，我们要生成的代码可能就是这样：
为此，我们在JSON描述中添加了一个智能字段，以描述节点的类型。
我们需要做的是找到需要在视觉草稿中比较的元素，并使用此类JSON信息来描述它，以便在转换DSL时，它可以通过在JSON信息中获取智能字段来生成组件代码。
现在，这个问题已转换为：如何找到需要视觉草稿中需要组件的元素，它是什么组件，其在DOM树中的位置或设计草稿中的位置。
解决方案
?协议同意制定规则
由指定的设计手稿生成的干预措施生成的JSON描述以控制生成的代码结构。
当使用IMGCOOK插件导出JSON描述数据时，该图层中的商定信息将通过指定的解析获得。
?学习识别组件
需要修改人工商定的规则，以根据我们制定的协议规范修改设计草案。页面上可能有很多组件。这种手册商定的方法使开发人员可以更多地工作。我们希望通过智能手段自动确定视觉草稿中的组件元素。标识结果最终将在智能字段中转换和填充。它与手册商定的组件协议生成的JSON中智能字段的内容相同。
需要在这里完成两件事：
第二件事我们可以基于JSON树分析组件的子元素。首先，我们可以完成智能动力学的完成。这是人工智能领域的典型目标检测问题。我们可以尝试使用深度学习目标检测方法从动态解决方案到本手册商定的过程。
学会识别UI组件
?行业的当前状况
目前，使用深度学习在网页中有一些研究和应用程序，以识别深度学习的研究和应用。有一些讨论：
讨论中有两个主要要求：
由于使用深度学习来解决UI接口元素识别的问题，因此必须使用带有元素信息的UI接口数据集。在目前，行业的开放和更多数据集包括RICO和REDRAW。
重画
一组Android屏幕截图，GUI元数据和标记的GUI组件图像，包括15个类别，包括RadioButton，ProgressBar，Switch，Button，Button，Checkbox，14,382 UI接口图片和191,300个GOI组件。后处理，每个组件的数量可触及5,000个。有关数据集的详细介绍，您可以查看Redraw数据集。
这是用于训练和评估Redraw论文中提到的CNN和KNN机器学习技术的数据集。该论文于2018年发表在有关软件工程的IEEE交易中。本文提出了一种通过三个步骤实现从UI到代码自动化的代码自动化的方法：
1.检测检测
首先提取或使用简历技术从设计草案（例如边界框（位置，大小））中提取UI接口元信息。
2.分类分类
使用大型软件仓库挖掘和自动动态分析来获取UI接口中的组件，并将此数据用作CNN技术的数据集，以将要分类为特定类型的提取的元素分类为特定类型，例如无线电，进度栏，按钮等。
3.组装组装
最后，KNN得出了UI级别的结构，例如垂直列表和水平滑块。
该方法在Redraw系统中用于生成Android代码。评估表明，Redraw的GUI组分分类的平均准确性已达到91％，并且组装了原型应用程序。这些应用程序在视觉亲和力中密切反映了目标模型，同时显示了合理的代码结构。
Rico
到目前为止，最大的移动UI数据集是支持五种类型的数据驱动应用程序的目的：设计搜索，UI布局生成，UI代码生成，用户交互建模和用户感知预测。RICO数据集包括27个类别，超过10,000个类别应用程序，约70,000个屏幕截图。
该数据集于2017年的第30 ACM年度用户界面软件和技术研讨会上开放（RICO：用于构建数据驱动设计应用程序的移动应用数据集）。
从那时起，一些基于RICO数据集的研究和应用程序。例如：移动应用程序学习设计语义，本文介绍了基于代码的方法，基于代码和视觉方法，将语义注释添加到移动UI元素上。UI屏幕截图并查看层次结构，25个UI组件类别，197个文本按钮概念和99个图标可以自动识别。
?应用程序方案
以下是基于上述数据集的一些研究和应用方案。
智能生成代码
基于机器学习的移动应用程序图形用户界面的原型制作|REDRAW数据集
智能生成布局
神经设计网络：图形布局一般约束|RICO数据集
用户感知预测
使用众包和深度学习对移动接口进行建模|Rico Datasett
UI自动化测试
自动化Android应用测试的深层铅基础方法|RICO数据集
?定义
在上面提到的介绍中，基于Redraw数据收集来生成Android代码的应用，我们了解其实施方案。对于步骤2，我们需要使用大型软件仓库挖掘和自动动态分析技术来获取大量组件样本作为CNN算法的训练样本。吧台，开关等。
对于我们的IMGCook的应用程序方案，其基本问题还需要在UI接口中找到此特定类型的组件信息：类别和边界框架。我们可以将这个问题定义为目标检测的问题。测试。那么我们的目标是什么？
检测目标是可以在代码中兼容的页面元素，例如Progress Bar，Switch，Tab Bar。
UI接口目标检测
?基本知识
人类如何学习？通过在学习和摘要后向大脑，知识和经验输入某些信息，您可以在有类似任务时根据现有经验做出决策或行动。
机器学习的过程（机器学习）与人类的学习非常相似。机器学习算法实质上是由F（X）函数表示的模型。如果您输入x到f（x）的示例，则结果是一个类别，可以解决分类问题。如果您获得特定值，那么Thenthe解决方案是返回问题。
机器学习的总体机制与人类学习的总体机制一致。一点点是，人脑只需要少量信息即可总结和总结具有强大适用性的知识或经验。例如，我们只需要看到几只猫或几只猫可以正确区分猫和狗，但是对于机器，我们需要大量的学习材料，但是机器可以做的是智能化，而无需人工参与。
深度学习
深度学习是机器学习的一个分支。它是一种尝试使用包含复杂结构或由多个非线性转换组成的多个处理层的多个处理层的算法。
深度学习与传统机器学习之间的区别可以看到这种深度学习与机器学习。它具有数据依赖性，硬件依赖性，功能处理，解决问题，执行时间和解释性。
深度学习对数据和硬件以及较长的执行时间有很高的要求。深度学习和传统的机器学习算法之间的主要区别是处理功能处理的方式。当传统的机器学习用于实际任务时，描述样品通常需要由人类专家设计的特征。特征学习可以通过功能学习技术分析数据自动生成良好的功能。
目标检测
机器学习有许多应用程序，例如：
对象检测是与计算机视觉和图像处理相关的计算机技术，以在数字图像和视频中检测特定类别中的语义对象（例如人类，动物或汽车）。
我们在UI接口上的目标是一些设计元素，它们可以是原子颗粒图标，图像，文本或兼容搜索栏，Tabbar，等等。
?算法选择
用于目标检测的方法通常分为机器学习方法（传统目标检测方法）或基于深度学习的方法（深度学习目标检测方法）。目标检测方法已经经历了传统的目标检测方法来深度学习目标检测方法：
传统目标检测方法
对于基于机器学习的方法，需要以下方法之一来定义功能，然后对诸如支持向量机（SVM）之类的技术进行分类。
对于深度学习方法，可以在不定义特征的情况下执行端到 - 端目标检测，通常基于卷积神经网络（CNN）。基于深度学习的目标检测方法可以分为两类：一阶段和两阶段和两类。阶段以及继承这两种方法的优势的精炼算法。
G一个阶段
基于一个阶段的目标检测算法直接通过主网络提供类别和位置信息，并且不使用RPN网络。该算法速度更快，但准确性略低于两阶段目标检测网络的精度。典型算法是：
G两阶段
基于两阶段的目标检测算法主要通过卷积神经网络完成目标检测过程。它提取CNN卷积特征。训练网络时，其主要培训是两个部分。第一步是训练RPN网络。第二步是训练目标区域的网络。
也就是说，该算法会生成一系列候选框作为样本，然后通过卷积神经网络对样本进行分类。网络的准确性很高，速度相对较慢。类型算法是：
e其他（精制网）
精炼网（用于对象检测的单杆细化神经网络）是基于SSD算法的改进。继承两种方法的优点（例如，一种单相设计方法，两个阶段设计方法），并克服了他们的缺点。
目标检测方法比较
度传统方法与深度学习
图中显示了基于机器学习和基于深度学习的方法的过程过程。传统的目标检测方法需要手动设计特征。候选框是通过滑动窗口然后使用传统分类器来确定目标区域的。深度学习目标检测方法通过更有效的建议或直接返回来获得候选目标。它的准确性和真实的时代性质更好。
目标检测算法的研究基本上基于深度学习。传统的目标检测算法很少使用。深度学习目标检测方法更适合工程。具体比较如下：下面：
G一阶段与两阶段
?设备优势和缺点
我不会在这里编写每种算法的原理，只需查看优点和缺点即可。
总结
由于UI接口元件检测的精度相对较高，因此最终选择了更快的RCNN算法。
由阿里巴巴技术生产。