CN109634610A - 一种界面标注数据的生成方法及装置 - Google Patents

Abstract

本申请公开了一种界面标注数据的生成方法及装置，涉及图片处理技术领域，可以准确生成界面标注数据。所述方法包括：获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

Description

一种界面标注数据的生成方法及装置

技术领域

本申请涉及数据处理技术领域，特别是涉及一种界面标注数据的生成方法及装置。

背景技术

随着互联网技术的不断发展，个性化需求的爆发使得餐饮类从更深层次引导服务和消费行为升级，让人们从初始的人工操作，服务员安排就坐、人工点餐的方式逐步转变为人工智能，手机扫码点餐自动下单，支付宝链接结算等无需人工操作的就餐环境。

人工智能可以帮助餐饮类节约用工数量、降低经营成本，在餐饮类界面组件做机器学习的时候，需要使用很多界面标注数据才能够达到训练效果。而这些界面标注数据的生成并非是直接使用截取得到的图片数据，而是需要耗费很多人力时间去准备，例如，需要人工截取图片数据，并对图片数据进行设计，以及对图片数据进行标记，从而生成界面标注数据。

然而，现有的界面标注数据的生成过程中，不仅需要人为耗费大量时间去对图片数据进行标记，而且对于不同人的理解不同，使得界面标注数据的结果也会产生很大差别，从而影响标注结果，导致生成的界面标注数据不准确。

发明内容

有鉴于此，本申请提供了一种界面标注数据的生成方法及装置，主要目的在于解决现有技术中生成的界面标注数据不准确的问题。

依据本申请一个方面，提供了一种界面标注数据的生成方法，该方法包括：

获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；

按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；

遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

进一步地，在所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图之前，所述方法还包括：

通过解析为界面视图预先配置的布局文件，生成拼装界面视图中各个组件的预设规则，所述预设规则至少包括界面视图所需的组件类型、各个类型的组件数量以及各个组件中的填充数据；

所述布局文件中记录有界面视图中各个组件的预设布局结构，所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图包括：

根据所述预设规则从所述组件库中选取出界面视图所需数量的各个类型的组件；

根据所述预设规则将所述各个组件中的填充数据填充至所述界面视图所需数量的各个类型的组件，得到携带填充数据的各个类型的组件；

将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图。

进一步地，当所述布局文件中未携带界面视图所需的各个组件之间的位置关系时，所述将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图包括：

将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系；

按照调整后所述各个类型的组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述弹性布局结构中配置有适应于视图界面的多种组件分布规则，所述将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系包括：

通过解析界面视图的尺寸信息，从弹性布局结构中随机选取出适应于视图界面的组件分布规则；

将所述携带填充数据的各个类型的组件放置于弹性布局结构中，按照所述适应于视图界面的组件分布规则，调整在视图界面中各个类型的组件之间的位置关系。

进一步地，当所述布局文件中携带界面视图所需的各个组件之间的位置关系时，所述将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图包括：

将所述携带填充数据的各个类型的组件放置于固定布局结构中，通过固定布局结构按照所述界面视图所需的各个组件之间的位置关系将所述携带填充数据的各个组件固定于界面视图中；

按照所述界面视图所需的各个组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述布局参数包括各个组件在界面视图中的位置参数、尺寸参数以及类型参数，所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据包括：

遍历所述实现多级树状结构的脚本文件，从所述脚本文件中查找所述选取的组件在界面视图中的布局参数；

从所述布局参数中提取各个组件在界面视图中的位置参数，将所述各个组件在界面视图中的位置参数放置于位置数据集中；

从所述布局参数中提取各个组件在界面视图中的尺寸参数，将所述各个组件在界面视图中的尺寸参数放置于尺寸数据集中；

从所述布局参数中提取各个组件在界面视图中的类型参数，将所述各个组件在界面视图中的类型参数放置于类型数据集中；

汇总所述位置数据集、所述尺寸数据集以及所述类型数据集，得到界面标注数据。

进一步地，其特征在于，在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之前，所述方法还包括：

对所述界面视图进行渲染，生成界面图片；

在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之后，所述方法还包括：

将所述界面图片以及界面标注数据作为训练样本数据发送至机器学习。

依据本申请另一个方面，提供了一种界面标注数据的生成装置，该装置包括：

获取单元，用于获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；

拼装单元，用于按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；

第一生成单元，用于遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

进一步地，所述装置还包括：

第二生成单元，用于在所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图之前，通过解析为界面视图预先配置的布局文件，生成拼装界面视图中各个组件的预设规则，所述预设规则至少包括界面视图所需的组件类型、各个类型的组件数量以及各个组件中的填充数据；

所述布局文件中记录有界面视图中各个组件的预设布局结构，所述拼装单元包括：

选取模块，用于根据所述预设规则从所述组件库中选取出界面视图所需数量的各个类型的组件；

填充模块，用于根据所述预设规则将所述各个组件中的填充数据填充至所述界面视图所需数量的各个类型的组件，得到携带填充数据的各个类型的组件；

拼装模块，用于将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图。

进一步地，当所述布局文件中未携带界面视图所需的各个组件之间的位置关系时，所述拼装模块包括：

调整子模块，用于将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系；

第一拼装子模块，用于按照调整后所述各个类型的组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述弹性布局结构中配置有适应于视图界面的多种组件分布规则，

所述第一拼装子模块，具体用于通过解析界面视图的尺寸信息，从弹性布局结构中随机选取出适应于视图界面的组件分布规则；

所述第一拼装子模块，具体还用于将所述携带填充数据的各个类型的组件放置于弹性布局结构中，按照所述适应于视图界面的组件分布规则，调整在视图界面中各个类型的组件之间的位置关系。

进一步地，当所述布局文件中携带界面视图所需的各个组件之间的位置关系时，所述拼装模块包括：

固定子模块，用于将所述携带填充数据的各个类型的组件放置于固定布局结构中，通过固定布局结构按照所述界面视图所需的各个组件之间的位置关系将所述携带填充数据的各个组件固定于界面视图中；

第二拼装子模块，用于按照所述界面视图所需的各个组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述布局参数包括各个组件在界面视图中的位置参数、尺寸参数以及类型参数，所述第一生成单元包括：

查找模块，用于遍历所述实现多级树状结构的脚本文件，从所述脚本文件中查找所述选取的组件在界面视图中的布局参数；

第一提取模块，用于从所述布局参数中提取各个组件在界面视图中的位置参数，将所述各个组件在界面视图中的位置参数放置于位置数据集中；

第二提取模块，用于从所述布局参数中提取各个组件在界面视图中的尺寸参数，将所述各个组件在界面视图中的尺寸参数放置于尺寸数据集中；

第三提取模块，用于从所述布局参数中提取各个组件在界面视图中的类型参数，将所述各个组件在界面视图中的类型参数放置于类型数据集中；

汇总模块，用于汇总所述位置数据集、所述尺寸数据集以及所述类型数据集，得到界面标注数据。

进一步地，所述装置还包括：

渲染单元，用于在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之前，对所述界面视图进行渲染，生成界面图片；

发送单元，用于将所述界面图片以及界面标注数据作为训练样本数据发送至机器学习。

依据本申请又一个方面，提供了一种存储设备，其上存储有计算机程序，所述程序被处理器执行时实现上述界面标注数据的生成方法。

依据本申请再一个方面，提供了一种界面标注数据的生成装置，包括存储设备、处理器及存储在存储设备上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述界面标注数据的生成方法。

借由上述技术方案，本申请提供的一种界面标注数据的生成方法、装置及计算机存储介质，与目前通过人工标记生成界面标注数据的方式相比，本申请能够预先将各种功能的组件规范映射至组件库中的组件上，并按照预设规则选取组件库中的组件，实现对不同组件的拼装，从而生成不同的界面视图，无需人为耗时去截取图片，进一步通过遍历实现多级树状结构的脚本文件，生成界面标注数据，由于该脚本文件中记录有各个组件在界面视图中的布局参数，无需人为耗时去标注截取图片，可以避免人为标注产生的错误，使得生成的界面标注数据更准确。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本申请实施例提供的一种界面标注数据的生成方法流程示意图；

图2示出了本申请实施例提供的另一种界面标注数据的生成方法流程示意图；

图3示出了本申请实施例提供的另一种界面标注数据的生成方法流程示意图；

图4示出了本申请实施例提供的一种界面标注数据的生成装置的结构示意图；

图5示出了本申请实施例提供的另一种界面标注数据的生成的装置结构示意图

图6示出了本申请实施例提供的另一种界面标注数据的生成的装置结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本申请实施例，提供了一种界面标注数据的生成方法，按照预设规则选取组件库中的组件进行拼装，从而生成具有不同的界面视图，无需人工截取界面图片，并通过遍历实现多级树状结构的脚本文件，根据组件在界面视图中的布局视图，生成界面标注数据，无需人工标注界面图片，从而提高界面标注数据的准确性。

如图1所示，本申请实施例提供了一种界面标注数据的生成方法，该方法包括如下步骤：

101、获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上。

在产品开发过程中，为了产品各个部分和应用之间保持用户界面的一致性，通常会在设计产品的时候指定组件规范，通过定义明确和可复用的组件来提高开发效率。

其中，这里的组件具体可以包括按钮、列表、文本框、弹层、图片等，从界面中抽象出实现各种功能的组件规范可以包括组件的颜色、组件的形状以及组件内文本字号、文本颜色等，通过抽象出实现各种功能的组件规范，可以对界面中抽象出的各种功能的组件规范进行组件化，提升组件代码的复用性。

在该步骤中，在将实现各种功能的组件规范映射至组件库中的组件上的过程中，由于各个功能的组件规范已经从界面中抽象出来，对于实现相同功能的组件，该组件的颜色、形状、字体大小、阴影和填充值等均可以通过组件规范来进行设置，从而从组件库中可以选取出各种样式的组件，提高组件样式的可扩展性。

需要说明的是，为了更好的开发组件库，可以为这里的组件库设置组件库目录，并建立索引结构来记录各种功能的组件以及组件规范的位置信息，从而便于用户查找组件以及对组件规范进行更新。

102、按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图。

在该步骤中，由于组件库中存储有实现各种功能的组件以及组件规范，按照预设规则选取组件库中的组件，具体可以根据用户界面布局需求从组件库中选取合适的组件，例如用户界面布局需求为制作一个菜单图表，则需要从组件库中选取用于显示菜品的图片组件，用于显示菜品名称的文本框组件，另外，如果该菜品名称需要全部展示时，则还需要汇总菜品名称的表格组件等，如果菜品名称需要下拉展示时，则还需要汇总菜品名称的下拉菜单组件等，这里进行限定。当然如果用户不确定如何布局页面，具体还可以随机从组件库中选择合适的组件，例如，从组件库中选择3个按钮，这里不进行限定。

其中，界面视图为选取的组件拼装后形成的，界面视图映射有实现多级树状结构的脚本文件，这里的脚本文件可以为面相对象方式描述的文档模型，定义了界面视图中各个组件的行为、属性信息以及各个组件之间的关系，相当于各个组件数据和结构的一个树状表示，并且该脚本文件中记录有选取的组件在界面视图中的布局参数，该布局参数可以包括组件在界面视图中的位置参数、尺寸参数以及类型参数，例如，界面中标签M的位置参数为标签M的坐标(a1，b1)，尺寸参数为标签M的宽高(a2，b2)，类型参数为标签M的名称，标签N的位置为标签N的坐标(c1，d1)，尺寸参数为标签N的宽高(c2，d2)，类型参数为标签N的名称，这里不进行限定。

在该步骤中，通过对选取的组件拼装生成不同的界面视图来渲染不同的图片，进而在客户端生成用于机器学习的样本图片，可以实现避免人工截取图片来耗费大量时间去生成样本图片，节省人力资本。

103、遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

在该步骤中，多级树状结构的脚本文件相当于界面视图的代码实现，可以为html网页代码，该界面代码中包括界面中各个组件代码以及组件的交互代码，这里的组件代码主要包括组件在界面视图中的属性信息，组件的交互代码主要包括各个组件在界面视图中的交互事件，例如，“查看更多”按钮切换到其他的文本框，则需要将按钮组件绑定点击事件，该事件指向切换方法，另外，组件的交互代码还包括各个组件在界面视图中变化事件，例如，点击文本框，文本框内显示你好文字，则需要将文本框组件绑定点击事件，该点击事件指向文本框属性变化。

其中，多级树状结构的脚本文件中每个节点都是一个组件，如果该节点具有子节点，说明该组件是一个复合组件，具有多个子组件，例如，省份下拉组件具有多个省份的子下拉组件，通过遍历多级树状结构可以查找界面视图中任一节点以及子节点的布局参数，从而生成界面标注数据。

本申请实施例提供的界面标注数据的生成方法，与目前通过人工标记生成界面标注数据的方式相比，本申请能够预先将各种功能的组件规范映射至组件库中的组件上，并按照预设规则选取组件库中的组件，实现对不同组件的拼装，从而生成不同的界面视图，无需人为耗时去截取图片，进一步通过遍历实现多级树状结构的脚本文件，生成界面标注数据，由于该脚本文件中记录有各个组件在界面视图中的布局参数，无需人为耗时去标注截取图片，可以避免人为标注产生的错误，使得生成的界面标注数据更准确。

如图2所示，本申请实施例提供了另一种界面标注数据的生成方法，该方法包括如下步骤：

201、获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上。

由于组件是界面设计和开发的基础，为了便于提高组件本身的可复用性，缩小与开发人员的差距，从界面中抽象出实现各个功能的组件规范，该组件规范能够针对不用应用场景以及不同应用功能将组件进行分类，通过使用同一的组件规范，保证生成界面视图的视觉和交互设计的一致性，提高用户体验。

在该步骤中，从界面中抽象出实现各种功能的组件规范具体可以包括组件的交互层面和视觉层面，如尺寸、间隔、色彩、反馈、逻辑、制约条件等，进一步反映组件在不同阶段或状态下要传递给用户的信息。

在该步骤中，在将实现各种功能的组件规范映射至组件库中的组件上的过程中，具体可以根据组件的用途对组件进行分类，例如，表单类组件、数据类组件、导航类等，并将分类后的各个组件映射至组件库上。

202、通过解析为界面视图预先配置的布局文件，生成拼装界面视图中各个组件的预设规则。

其中，布局文件是对视图界面中组件的布局，至少包括界面中布局的组件类型、组件数量以及组件中的填充数据中的一种或者多种，当然还可以包括组件在界面视图中的位置关系，例如，组件宽高、组件布局宽高、外边距以及内边距等。

在该步骤中，布局文件通常是根据开发需求预先定义好界面视图中各个组件布局框架，该布局文件中可能是简单提出了组件在界面视图中的位置摆放，如在界面中布置4个组件，并且任意2个组件对称布置，该布局文件中还可能是提出了各个组件在界面视图中的具体位置信息，如在界面中布置4个组件，并且提供每个组件的坐标，这里不进行限定。

由于布局文件中记录有各个组件在界面视图中的安排，通过解析布局文件，可以生成拼装界面视图中各个组件的预设规则，所以该预设规则至少包括界面视图所需的组件类型、各个类型的组件数量以及各个组件中的填充数据，例如，布局文件中记录界面视图所需的组件类型为4个文字按钮，垂直布置，各个组件中的填充数据包括组件名称、组件的触发事件等属性。

203、根据所述预设规则从所述组件库中选取出界面视图所需数量的各个类型的组件。

在该步骤中，组件库中自定义有从界面中抽象出实现各种功能的组件规范，可以创建快速、响应式的和可扩展的组件，并且支持不同的界面框架，如JS框架、React等。

在该步骤中，该预设规则可以包括界面视图所需的组件类型、各个类型的组件数量，那么根据预设规则从组件库中选取界面视图所需固定数量的各个类型的组件，例如，根据预设规则从组件库中选取2个按钮组件，2个文本框组件，4个图表组件，4个图片组件，如果预设规则中不包括各个类型组件数量时，还可以根据预设规则随机从组件库中选取任意数量的各个类型的组件，这里对预设规则不进行限定。

204、根据所述预设规则将所述各个组件中的填充数据填充至所述界面视图所需数量的各个类型的组件，得到携带填充数据的各个类型的组件。

在该步骤中，该预设规则可以包括界面视图各个组件中的填充数据，并且每个组件的填充数据对应有组件标识，从而根据预设规则将各个组件中的填充数据填充至界面视图中相应组件标识的组件中，例如，组件a的填充数据填充至组件a中，组件b的填充数据填充至组件b中，从而得到携带填充数据的各个类型的组件。

这里的填充数据可以包括但不局限于图片、文本、以及绑定至组件上的事件对应的数据等，这里对预设规则不进行限定。

具体在填充绑定至组件上的事件数据的过程中，可以将触发事件对应的数据添加至组件的逻辑代码中，从而当触发组件时，组件会产生事件对应的数据。

205、将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图。

在该步骤中，布局文件中记录有界面视图中各个组件的预设布局结构，该预设布局结构中可能预先安排好各个组件的位置关系，如固定布局结构，也可能并未安排各个组件之前的位置关系，需要随机生成，如弹性布局结构，进一步生成具有多级树状结构的界面视图。

当布局文件中未携带界面视图所需的各个组件之间的位置关系时，具体可以将携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系；然后按照调整后各个类型的组件之间的位置关系对携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。。

其中，弹性布局结构中配置有适应于视图界面的多种组件分布规则，具体可以通过解析界面视图的尺寸信息，从弹性布局结构中随机选取出适应于视图界面的组件分布规则；然后将携带填充数据的各个类型的组件放置于弹性布局结构中，按照适应于视图界面的组件分布规则，调整在视图界面中各个类型的组件之间的位置关系。

当布局文件中携带界面视图所需的各个组件之间的位置关系时，具体可以将携带填充数据的各个类型的组件放置于固定布局结构中，通过固定布局结构按照界面视图所需的各个组件之间的位置关系将携带填充数据的各个组件固定于界面视图中；按照界面视图所需的各个组件之间的位置关系对携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

其中，固定布局结构中配置有各个组件在界面视图中的坐标信息，具体将每个组件按照该组件在固定布局结构中配置的坐标信息固定于界面视图中。

206、对所述界面视图进行渲染，生成界面图片。

界面视图的渲染是生成界面图像的必经过程，通过渲染可以对界面视图中各个组件进行着色，从而输出最终的界面图片。

在该步骤中，具体可以使用渲染工具根据界面视图中的布局结构逐层对每一层级上的组件进行渲染，按照层级叠加顺序将每一层级上的组件进行叠加，使得上层级的组件可以覆盖下层级的组件，从而生成界面图片。

需要说明的是，该界面图片为通过从组件库中选择的组件拼装组合后渲染而得到的，可以作为样本图片，还可以根据机器训练需求将特殊组件组合拼装后渲染生成，无需用户去挑选机器训练需要的图片样本，提高了样本图片的生成速度，另外，该样本图片可以根据机器训练需求批量生成，无需用户逐个截取样本图片，节省了人力成本。

207、遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

在该步骤中，通过遍历实现多级树状结构的脚本文件，该脚本文件中记录有各个组件在界面视图中的布局参数，例如，各个组件在界面视图中的位置参数、各个组件在界面视图中的尺寸参数以及各个组件在界面视图中的类型参数，那么步骤207具体可以包括步骤301至步骤305的下述实现方式：

301、遍历所述实现多级树状结构的脚本文件，从所述脚本文件中查找所述选取的组件在界面视图中的布局参数。

在该步骤中，多级树状结构的脚本文件中每个节点都是一个组件，由于渲染过程中是针对界面视图的布局参数来完成的，所以在脚本文件中会记录渲染该界面视图过程中所需要的组件的布局参数，具体包括组件的名称、位置、尺寸等参数。

需要说明的是，该多级树状结构的脚本文件中，相同层级的组件可以组合为单个组件，也可以为复合组件，如菜单组件、列表组件等，从而在渲染界面视图的过程中可以针对层级内的组件进行渲染，避免出现渲染不均匀的现象。

302、从所述布局参数中提取各个组件在界面视图中的位置参数，将所述各个组件在界面视图中的位置参数放置于位置数据集中。

在该步骤中，这里各个组件在界面视图中的位置参数可以表现为组件在界面视图中的坐标，如按钮a.setLoaction(200，,200)，进一步将各个组件在界面视图中的坐标放置于位置数据集中。

303、从所述布局参数中提取各个组件在界面视图中的尺寸参数，将所述各个组件在界面视图中的尺寸参数放置于尺寸数据集中。

在该步骤中，这里各个组件在界面视图中的位置参数可以表现为组件在界面视图中的宽高，如按钮b.setSize(200,600)，进一步将各个组件在界面视图中的坐标放置于尺寸数据集中。

304、从所述布局参数中提取各个组件在界面视图中的类型参数，将所述各个组件在界面视图中的类型参数放置于类型数据集中。

在该步骤中，这里各个组件在界面视图中的位置参数可以表现为组件在界面视图中的名称，如按钮c.name，进一步将各个组件在界面视图中的坐标放置于类型数据集中。

305、汇总所述位置数据集、所述尺寸数据集以及所述类型数据集，得到界面标注数据。

在该步骤中，界面标注数据为界面图片中描述各个组件的数据，具体可以通过voc格式数据集来汇总位置数据集、尺寸数据集以及所述类型数据集，从而生成voc格式的界面标注文件。

208、将所述界面图片以及界面标注数据作为训练样本数据发送至机器学习。

在机器学习领域，需要使用大量已标注的图片数据集作为训练样本集对模型进行训练，从而提取数据特性，而传统的训练样本数据集不仅需要人工截取图片，而且还需要人工标注图片，需要耗费大量时间，而本申请中可以无需人工操作即可批量生成已标注的图片数据集，大大节省人工时间，并且生成的图片数据集可以是任意类型组件的组合，提高了训练样本集的灵活性。

示例性的，如果B端需要执行收集1000条不同图片的标注数据的任务，如果没有变量(本地上传的标注数据)的概念，就意味着他需要手动选择或复制1000次图片组件，而每次更改的只有图片对象中某一文字。但如果选择从本地组件库中导入1000条不同图片的数据并统一命名为变量pic，编辑文本对象时插入这个叫pic变量，则只需要编辑1次图片组件就够了，系统会根据变量值的个数自动生成1000条图片的标注数据后发放给C端进行机器学习，大大提升了任务的配置效率。

进一步地，作为图1所述方法的具体实现，本申请实施例提供了一种界面标注数据的生成装置，如图4所示，所述装置包括：获取单元41、拼装单元42、第一生成单元43。

获取单元41，可以用于获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；

拼装单元42，可以用于按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；

第一生成单元43，可以用于遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

本申请实施例提供的界面标注数据的生成装置，与目前通过人工标记生成界面标注数据的方式相比，本申请能够预先将各种功能的组件规范映射至组件库中的组件上，并按照预设规则选取组件库中的组件，实现对不同组件的拼装，从而生成不同的界面视图，无需人为耗时去截取图片，进一步通过遍历实现多级树状结构的脚本文件，生成界面标注数据，由于该脚本文件中记录有各个组件在界面视图中的布局参数，无需人为耗时去标注截取图片，可以避免人为标注产生的错误，使得生成的界面标注数据更准确。

在具体的应用场景中，如图5所示，所述装置还包括：

第二生成单元44，可以用于在所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图之前，通过解析为界面视图预先配置的布局文件，生成拼装界面视图中各个组件的预设规则，所述预设规则至少包括界面视图所需的组件类型、各个类型的组件数量以及各个组件中的填充数据；

所述布局文件中记录有界面视图中各个组件的预设布局结构，所述拼装单元42包括：

选取模块421，可以用于根据所述预设规则从所述组件库中选取出界面视图所需数量的各个类型的组件；

填充模块422，用于根据所述预设规则将所述各个组件中的填充数据填充至所述界面视图所需数量的各个类型的组件，得到携带填充数据的各个类型的组件；

拼装模块423，可以用于将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述装置还包括：

渲染单元45，可以用于在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之前，对所述界面视图进行渲染，生成界面图片；

发送单元46，可以用于将所述界面图片以及界面标注数据作为训练样本数据发送至机器学习。

进一步地，当所述布局文件中未携带界面视图所需的各个组件之间的位置关系时，所述拼装模块423包括：

调整子模块4231，可以用于将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系；

第一拼装子模块4232，可以用于按照调整后所述各个类型的组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

进一步地，所述弹性布局结构中配置有适应于视图界面的多种组件分布规则，

所述第一拼装子模块4232，具体可以用于通过解析界面视图的尺寸信息，从弹性布局结构中随机选取出适应于视图界面的组件分布规则；

所述第一拼装子模块4232，具体还可以用于将所述携带填充数据的各个类型的组件放置于弹性布局结构中，按照所述适应于视图界面的组件分布规则，调整在视图界面中各个类型的组件之间的位置关系。

进一步地，所述布局参数包括各个组件在界面视图中的位置参数、尺寸参数以及类型参数，所述第一生成单元43包括：

查找模块431，可以用于遍历所述实现多级树状结构的脚本文件，从所述脚本文件中查找所述选取的组件在界面视图中的布局参数；

第一提取模块432，可以用于从所述布局参数中提取各个组件在界面视图中的位置参数，将所述各个组件在界面视图中的位置参数放置于位置数据集中；

第二提取模块433，可以用于从所述布局参数中提取各个组件在界面视图中的尺寸参数，将所述各个组件在界面视图中的尺寸参数放置于尺寸数据集中；

第三提取模块434，可以用于从所述布局参数中提取各个组件在界面视图中的类型参数，将所述各个组件在界面视图中的类型参数放置于类型数据集中；

汇总模块435，可以用于汇总所述位置数据集、所述尺寸数据集以及所述类型数据集，得到界面标注数据。

在具体的应用场景中，如图6所示，当所述布局文件中携带界面视图所需的各个组件之间的位置关系时，所述拼装模块423包括：

固定子模块4233，可以用于将所述携带填充数据的各个类型的组件放置于固定布局结构中，通过固定布局结构按照所述界面视图所需的各个组件之间的位置关系将所述携带填充数据的各个组件固定于界面视图中；

第二拼装子模块4234，可以用于按照所述界面视图所需的各个组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

需要说明的是，本实施例提供的一种界面标注数据的生成装置所涉及各功能单元的其他相应描述，可以参考图1、图2中和图3的对应描述，在此不再赘述。

基于上述如图1、图2和图3所示方法，相应的，本实施例还提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述如图1、图2和图3所示的界面标注数据的生成方法。

基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景所述的方法。

基于上述如图1、图2和图3所示的方法，以及图4、图5和图6所示的虚拟装置实施例，为了实现上述目的，本申请实施例还提供了一种计算机设备，具体可以为个人计算机、服务器、网络设备等，该实体设备包括存储介质和处理器；存储介质，用于存储计算机程序；处理器，用于执行计算机程序以实现上述如图1、图2和图3所示的界面标注数据的生成方法。

可选地，该计算机设备还可以包括用户接口、网络接口、摄像头、射频(RadioFrequency，RF)电路，传感器、音频电路、WI-FI模块等等。用户接口可以包括显示屏(Display)、输入单元比如键盘(Keyboard)等，可选用户接口还可以包括USB接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如蓝牙接口、WI-FI接口)等。

本领域技术人员可以理解，本实施例提供的界面标注数据的生成的实体设备结构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储介质中还可以包括操作系统、网络通信模块。操作系统是管理上述计算机设备硬件和软件资源的程序，支持信息处理程序以及其它软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通信，以及与该实体设备中其它硬件和软件之间通信。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。通过应用本申请的技术方案，与目前现有技术相比，能够预先将各种功能的组件规范映射至组件库中的组件上，并按照预设规则选取组件库中的组件，实现对不同组件的拼装，从而生成不同的界面视图，无需人为耗时去截取图片，进一步通过遍历实现多级树状结构的脚本文件，生成界面标注数据，由于该脚本文件中记录有各个组件在界面视图中的布局参数，无需人为耗时去标注截取图片，可以避免人为标注产生的错误，使得生成的界面标注数据更准确。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

Claims (10)

1.一种界面标注数据的生成方法，其特征在于，包括：

获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；

按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；

遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

2.根据权利要求1所述的方法，其特征在于，在所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图之前，所述方法还包括：

通过解析为界面视图预先配置的布局文件，生成拼装界面视图中各个组件的预设规则，所述预设规则至少包括界面视图所需的组件类型、各个类型的组件数量以及各个组件中的填充数据；

所述布局文件中记录有界面视图中各个组件的预设布局结构，所述按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图包括：

根据所述预设规则从所述组件库中选取出界面视图所需数量的各个类型的组件；

根据所述预设规则将所述各个组件中的填充数据填充至所述界面视图所需数量的各个类型的组件，得到携带填充数据的各个类型的组件；

将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图。

3.根据权利要求2所述的方法，其特征在于，当所述布局文件中未携带界面视图所需的各个组件之间的位置关系时，所述将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图包括：

将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系；

按照调整后所述各个类型的组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

4.根据权利要求3所述的方法，其特征在于，所述弹性布局结构中配置有适应于视图界面的多种组件分布规则，所述将所述携带填充数据的各个类型的组件放置于弹性布局结构中，通过弹性布局结构调整在视图界面中各个类型的组件之间的位置关系包括：

通过解析界面视图的尺寸信息，从弹性布局结构中随机选取出适应于视图界面的组件分布规则；

将所述携带填充数据的各个类型的组件放置于弹性布局结构中，按照所述适应于视图界面的组件分布规则，调整在视图界面中各个类型的组件之间的位置关系。

5.根据权利要求2所述的方法，其特征在于，当所述布局文件中携带界面视图所需的各个组件之间的位置关系时，所述将所述携带填充数据的各个类型的组件放置于预设布局结构中进行拼装，生成具有多级树状结构的界面视图包括：

将所述携带填充数据的各个类型的组件放置于固定布局结构中，通过固定布局结构按照所述界面视图所需的各个组件之间的位置关系将所述携带填充数据的各个组件固定于界面视图中；

按照所述界面视图所需的各个组件之间的位置关系对所述携带有填充数据的各个类型的组件进行拼装，生成具有多级树状结构的界面视图。

6.根据权利要求1所述的方法，其特征在于，所述布局参数包括各个组件在界面视图中的位置参数、尺寸参数以及类型参数，所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据包括：

遍历所述实现多级树状结构的脚本文件，从所述脚本文件中查找所述选取的组件在界面视图中的布局参数；

从所述布局参数中提取各个组件在界面视图中的位置参数，将所述各个组件在界面视图中的位置参数放置于位置数据集中；

从所述布局参数中提取各个组件在界面视图中的尺寸参数，将所述各个组件在界面视图中的尺寸参数放置于尺寸数据集中；

从所述布局参数中提取各个组件在界面视图中的类型参数，将所述各个组件在界面视图中的类型参数放置于类型数据集中；

汇总所述位置数据集、所述尺寸数据集以及所述类型数据集，得到界面标注数据。

7.根据权利要求1-6中任一项所述的方法，其特征在于，在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之前，所述方法还包括：

对所述界面视图进行渲染，生成界面图片；

在所述遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据之后，所述方法还包括：

将所述界面图片以及界面标注数据作为训练样本数据发送至机器学习。

8.一种界面标注数据的生成装置，其特征在于，包括：

获取单元，用于获取从界面中抽象出实现各种功能的组件规范，并将所述实现各种功能的组件规范映射至组件库中的组件上；

拼装单元，用于按照预设规则选取所述组件库中的组件，并根据选取的组件拼装生成界面视图，所述界面视图映射有实现多级树状结构的脚本文件，该脚本文件中记录有所述选取的组件在界面视图中的布局参数；

第一生成单元，用于遍历所述实现多级树状结构的脚本文件，根据所述选取的组件在界面视图中的布局参数，生成界面标注数据。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。