CN113377356B - 一种用户界面原型代码的生成方法、装置、设备及介质 - Google Patents

Abstract

本申请提供了一种用户界面原型代码的生成方法、装置、设备及介质，该方法包括获取用户界面原型图；将用户界面原型图输入至训练好的目标检测模型中，以得到用户界面原型图的组件信息；将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到用户界面原型图对应的界面树结构；对界面树结构进行遍历，根据遍历结果生成用户界面原型图对应的用户界面原型代码。本申请针对用户界面原型图可自动生成符合标准的用户界面原型代码，提高了用户界面的开发效率。

Description

一种用户界面原型代码的生成方法、装置、设备及介质

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种用户界面原型代码的生成方法、装置、设备及介质。

背景技术

随着互联网技术的进步和智能设备的普及，移动终端支持的功能越来越多，应用程序也越来越多，相应的，应用程序中用于与用户交互的用户界面也越来越多。

目前，在应用程序用户界面开发过程中，若用户界面原型图进行了更改，还需开发人员针对用户界面原型图的更改手动进行代码修改，消耗了大量的人力物力，降低了用户界面的开发效率。

发明内容

有鉴于此，本发明的目的在于提供一种用户界面原型代码的生成方法、装置、设备及介质，以提高用户界面开发的效率。

第一方面本申请实施例提供了一种用户界面原型代码的生成方法，包括：

获取用户界面原型图；

将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息；

将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构；

对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

可选的，所述将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息，包括：

通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到该用户界面原型图的特征图；

将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件；

将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

可选的，所述将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构，包括：

针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值；

计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框；

根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点；

将当前所有符合所述最小欧式距离值的组件删除，将确定所述容器结点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一；

针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构。

可选的，所述对所述界面结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码，包括：

以所述界面树结构的根节点作为当前节点开始遍历；

判断当前节点有无子节点，若当前节点没有子节点，则根据当前节点对应组件的类别和编号生成第一用户界面代码；

若当前节点有子节点，则根据当前节点对应组件的类别和编号生成第二用户界面代码，并继续判断每个子节点有无子节点。

可选的，所述将识别出的组件信息根据预先存储的组件组合布局信息进行层次组合是基于KNN算法进行层次组合的。

第二方面本申请实施例提供了一种用户界面原型代码的生成装置，包括：

获取模块：用于获取用户界面原型图；

组件识别模块：用于将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息；

组件组合模块：将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构；

代码生成模块：对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

可选的，所述组件识别模块，包括：

第一单元，用于通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到该用户界面原型图的特征图；

第二单元，用于将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件；

第三单元，用于将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

可选的，所述组件组合模块，包括：

第四单元，用于针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值；

第五单元，用于计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框；

第六单元，用于根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点；

第七单元，用于将当前所有符合所述最小欧式距离值的组件删除，将确定所述容器结点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一；

第八单元，用于针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构。

第三方面，本申请实施例提供了一种电子设备，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如所述方法的步骤。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如所述方法的步骤。

本申请实施例提出的一种用户界面原型代码的生成方法，首先获取用户界面原型图；然后将用户界面原型图输入至训练好的目标检测模型中，以得到用户界面原型图的组件信息；将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到用户界面原型图对应的界面树结构；最后对所述界面树结构进行遍历，根据遍历结果生成用户界面原型图对应的用户界面原型代码，提高了用户界面开发的效率。而且面对用户界面原型图的更改，只需将更改后的用户界面原型图输入至训练好的目标检测模型中进行组件识别，进而根据识别后的组件信息构建界面树结构，以生成用户界面原型代码，无需开发人员手动进行修改，节省了人力物力，可以更好地适应更改迭代的开发业务。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例所提供的一种用户界面原型代码的生成方法的流程示意图；

图2示出了本发明实施例所提供的一种组件识别方法的流程示意图；

图3示出了本发明实施例所提供的一种组件组合方法的流程示意图；

图4示出了本发明实施例所提供的一种界面树结构的示意图；

图5示出了本发明实施例所提供的一种用户界面原型代码的生成装置的流程示意图；

图6示出了本发明实施例所提供的一种计算机设备600的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请实施例提供了一种用户界面原型代码的生成方法、装置、设备及介质，下面通过实施例进行描述。

图1为本申请实施例提供的一种用户界面原型代码的生成方法的流程示意图，如图1所示，该生成方法可以通过以下步骤实现：

S101，获取用户界面原型图。

具体的，用户界面原型图是由设计人员通过图像编辑软件制作的直观模型图，其中所述用户界面原型图可包含多个组件，如按钮、图片、选择框、文本等。在具体实施时，用户界面原型图可以用JPG(Joint Photographic Experts Group，联合图像专家组)格式进行保存处理。

S102，将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息。

具体的，目标检测模型是基于深度学习进行训练的神经网络模型，如CNN(Convolutional Neural Networks，卷积神经网络)模型。在获取到用户界面原型图后，将其输入至训练好的目标检测模型中，即可获得该用户界面原型图对应的组件信息，其中所述组件信息包括组件的位置信息、长宽信息、类型信息等。

其中，目标检测模型的训练是通过采集大量真实的用户界面原型图作为训练样本进行训练的。通过解析采集到的用户界面原型图对应的JSON(JavaScript ObjectNotation,JS对象简谱)格式的标注文件可得到用户原型图的图像尺寸信息、层次结构信息。所述图像尺寸信息包括用户界面原型图的图像宽度和图像高度；所述层次结构信息包括用户界面原型图的容器节点信息和组件信息。容器节点信息是指在用户界面原型图对应的界面树结构中的非叶子结点的位置信息、长宽信息、类型信息。组件信息指在用户界面原型图对应的界面树结构中的叶子结点的位置信息、长宽信息、类型信息。基于采集到大量的用户界面原型图的图像尺寸信息和层次结构信息通过深度学习训练神经网络模型的组件识别能力，以得到训练好的目标检测模型。

S103，将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构。

具体的，本申请实施例会将采集到的大量真实的用户界面原型图对应的层次结构信息存储在数据库中，在通过步骤S102获取到要识别的用户界面原型图的所有组件后，会根据预先存储在数据库中的层次结构信息对组件进行层次组合，以得到用户界面原型图对应的界面树结构。在具体实施时，可通过KNN(k-NearestNeighbor，k邻近)算法根据预先存储的层次结构信息对组件进行层次组合以得到界面树结构。

S104，对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

具体的，本申请实施例在获取到用户界面原型图对应的界面树结构后，可以通过深度优先搜索和递归算法对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

本申请实施例通过上述四个步骤，针对用户界面原型图可自动生成对应的用户界面原型代码，提高了用户界面的开发效率，节省了大量的人力物力。基于大量真实的用户界面原型图数据对目标检测模型进行训练，提高了目标检测模型识别组件的准确度，并且将解析到的大量真实的用户原型图对应的层次结构信息进行存储，通过KNN算法在对要识别的用户原型图进行组件层次组合以得到对应的界面树结构时，相比基于规则或模板得到的界面树结构更接近于真实生产环境下的设计规范。

在一个可行的实施方案中，图2为本申请实施例提供的一种组件识别方法的流程示意图，如图2所示，上述步骤102可以通过以下步骤实现：

步骤1021，通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到所述用户界面原型图的特征图。

具体的，本申请实施例将用户界面原型图输入至训练好的目标检测模型中，目标检测模型对用户界面原型图进行多次卷积操作，可以得到多个不同尺寸的特征图。

例如，图2示出了在特征提取过程中，通过将用户界面原型图输入至目标检测模型中，通过与卷积核个数、大小、步长不同的卷积进行运算，可得到多个不同尺寸的第一特征图C1，第二特征图C2，第三特征图C3。

步骤1022，将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件。

具体的，本申请实施例针对用户界面原型图，会通过卷积操作和双线性插值法的两倍上采样的计算对提取到的特征图进行特征融合，以得到预测特征图。

例如，图2示出了在特征融合过程中，针对步骤1021提取到的第一特征图C1，第二特征图C2，第三特征图C3进行卷积运算和上采样操作，并在图像通道上进行拼接，以得到第一预测特征图P1，第二预测特征图P2，第三预测特征图P3。

作为一可选的实施例，在得到第一预测特征图P1，第二预测特征图P2，第三预测特征图P3后，会通过预测算法对用户界面原型图所包含的组件进行三次预测，以得到该用户界面原型图对应的预测组件。其中，每一次通过预测算法进行组件预测可包括：根据第一预测特征图P1，第二预测特征图P2，第三预测特征图P3的大小对用户界面原型图进行网格分割；利用分割后的每个网格对应的预测特征图预测可能存在的组件边界框，基于组件边界框的位置参数和目标置信度参数确定所述用户界面原型图所包含的预测组件。

步骤1023，将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

具体的，在组件的预测过程中，在同一网格上会产生大量的组件边界框，这些组件边界框相互之间会存在重叠现象，此时我们需要对预测组件对应的预测区域进行非极大值抑制处理消除冗余的组件边界框，以筛选出用户界面原型图包含的组件信息。

通过上述步骤1021至步骤1023，基于大量真实的用户界面原型图数据训练得到的目标检测模型对用户界面原型图所包含的组件进行识别，对于用户界面原型图组件的理解不会受到开发人员主观领域背景知识的影响，提高了组件识别的精准度。

在识别出用户界面原型图所包含的组件信息后，为了得到用户界面原型图对应的界面树结构，会对识别出的组件进行层次组合。在一个可行的实施方案中，图3为本申请实施例提供的一种组件组合方法的流程示意图，如图3所示，上述步骤103可以通过以下步骤实现：

步骤1031，针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值。

具体的，本申请实施例在获得用户界面原型图的组件信息后，会根据得到的组件信息提取组件的编号信息和坐标信息，并将提取到的所有组件的编号信息和坐标信息保存入集合中，并两两计算组件之间的欧式距离，将计算得到组件之间的欧式距离按升序排列加入到队列中，以得到最小欧式距离值。

例如，图3中的用户界面原型图中包含以下组件：图片、文本、分页走马灯、文本按钮1、文本按钮2。将提取到的所有组件的编号信息和坐标信息保存入集合中，并两两计算组件之间的欧式距离，如计算文本按钮1和文本按钮2之间的欧式距离，分页走马灯和文本之间的欧式距离。将计算得到组件之间的欧式距离按升序排列加入到队列中，以得到最小欧式距离值，如文本按钮1和文本按钮2之间的欧式距离为最小欧式距离值。

步骤1032，计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框。

具体的，本申请实施例基于得到的最小欧式距离值，会在用户界面原型图的组件中找到欧式距离值等于所述最小欧式距离值的组件，并基于组件的坐标信息计算出能包含这些组件的最小外接矩形框。

步骤1033，根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点。

具体的，本申请实施例在确定了所有符合最小欧式距离值的组件的最小外接矩形框后，会在预先存储的层次结构信息中提取能包含该最小外接矩形框的容器节点。

例如，在找到符合最小欧式距离值的组件文本按钮1和文本按钮2后，计算文本按钮1和文本按钮2的最小外接矩形框的左上角坐标

右下角坐标

在预先存储的层次结构信息找到满足

的容器节点作为用户界面原型图的第一容器节点。其中，

为第一容器节点的左上角坐标，

为第一容器节点的右下角坐标。

步骤1034，将当前所有符合所述最小欧式距离值的组件删除，将确定所述容器结点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一。

具体的，本申请实施例在通过步骤1033找到第一容器节点后，会将第一容器节点所包含的组件删除，同时将被删除的组件对应的最小欧式距离值从队列中删除，并将第一容器节点作为新的组件，继续重复执行步骤1031至步骤1034，以得到新的容器节点，直至用户界面原型图对应的组件个数变为1。

例如，如图3所示，在找到第一容器节点后，会将文本按钮1和文本按钮2进行删除，并将文本按钮1和文本按钮2对应的最小欧式距离值从队列中删除；然后，将第一容器节点作为新的组件，继续计算组件与组件之间的欧式距离，再次找到最小欧式距离值，并找到符合当前最小欧式距离值的组件文本和组件分页走马灯，基于文本和分页走马灯的最小外接矩形框的坐标信息在预先存储的层次结构信息中找到第二容器节点。

在找到第二容器节点后，会将第二容器节点包含的组件分页走马灯和组件文本进行删除，并将组件分页走马灯和组件文本对应的最小欧式距离值从队列中删除；然后，将第二容器节点作为新的组件，继续计算组件与组件的欧式距离，再次找到最小欧式距离值，并找到符合当前最小欧式距离值的组件第一容器节点，基于第一容器节点和第二容器节点的最小外接矩形框的坐标信息在预先存储的层次结构信息中找到第三容器节点。

在找到第三容器节点后，会将第三容器节点包含的组件第一容器节点和组件第二容器节点进行删除，并将组件第一容器节点和组件第二容器节点对应的最小欧式距离值从队列中删除；然后，将第三容器节点作为新的组件，继续计算组件与组件的欧式距离，再次找到最小欧式距离值，并找到符合当前最小欧式距离值的组件图片和第三容器节点，基于组件图片和第三容器节点的最小外接矩形框的坐标信息在预先存储的层次结构信息中找到第四容器节点。在找到第四容器节点后，用户界面原型图对应的组件个数变为1，此时组件组合完成。

步骤1035，针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构。

具体的，本申请实施例在通过步骤1034在预先存储的层次结构信息中提取到第一容器节点、第二容器节点、第三容器节点、第四容器节点后，会根据所有容器节点的信息和其对应包含的组件信息通过广度优先搜索算法构建用户界面原型图对应的界面树结构。

例如，如图4所示，用户界面原型图对应的界面树结构包括第四容器节点，第四容器节点包括第三容器节点和组件图片，第三容器节点包括第一容器节点和第二容器节点，第一容器节点包括组件文本按钮1和组件文本按钮2，第二容器节点包括组件分页走马灯和组件文本。

通过上述步骤1031至步骤1035，通过预先存储的层次结构信息对识别出的组件进行检索匹配，以得到对应的容器节点。基于所有找到的容器节点和对应的组件，通过广度优先搜索算法生成界面树结构，相比基于规则或模板生成的界面树结构更接近于真实生产环境下的设计规范。而且，通过层次结构信息的扩充和组件组合法则的更新，用户界面原型图对应组件进行层次组合的准确度也会随之提高。

在获得用户界面原型图对应的界面树结构之后，为了得到用户界面原型图对应的用户界面原型代码，会通过深度优先搜索和递归算法对界面树结构进行遍历，在一个可行的实施方案中，步骤S104还可以包括以下步骤：

步骤1041，以所述界面树结构的根节点作为当前节点开始遍历。

具体的，在对界面树结构进行遍历之前，本申请会首先建立母模板，对用户界面原型代码使用的xml版本和传输数据所使用的字符编码进行声明。

例如，母模板可为：<？xmlversion＝"1.0"encoding＝"utf-8"？><root>*</root>。其中，所述xml version＝"1.0"声明了用户界面原型代码使用的xml版本为1.0，encoding＝"utf-8"声明了用户界面原型代码传输数据使用的字符编码是：utf-8，*是代码占位符，作为当前生成代码的位置。

在构建完成母模板后，会以界面树结构的根节点作为当前节点进行遍历。例如，可以将界面树结构的根节点第四容器节点作为当前节点开始进行遍历。

步骤1042，判断当前节点有无子节点，若当前节点没有子节点，则根据当前节点对应组件的类别和编号生成第一用户界面代码。

具体的，本申请实施例首先判断当前节点有无子节点，若当前节点没有子节点，则根据当前节点对应组件的类别和编号生成第一用户界面代码。其中，所述第一用户界面代码为界面树结构中叶子节点对应的代码。

例如，以图4示出的界面树结构进行说明，若当前节点为组件文本按钮1，判断出组件文本按钮1没有子节点，则根据文本按钮1对应的组件类别和编号生成第一用户界面代码，如：<component type＝”Text button”id＝1></component>，其中，component type＝”Text button”代表当前节点文本按钮1的组件类别，id＝1代表当前节点文本按钮1的编号。

步骤1043，若当前节点有子节点，则根据当前节点对应组件的类别和编号生成第二用户界面代码，并继续判断每个子节点有无子节点。

具体的，本申请实施例判断出当前节点有子节点，则根据当前节点对应组件的类别和编号生成第二用户界面代码，并继续判断每个子节点有无子节点。其中，所述第二用户界面代码为用户界面树结构中非叶子节点对应的代码。

例如，以图4示出的界面树结构进行说明，若当前节点为第二容器节点，判断出第二容器节点有子节点组件分页走马灯和组件文本，则首先根据第二容器节点对应的组件的类别和编号生成第二用户界面代码，如<container id＝2></container>，其中，containerid＝2代表第二容器节点的类别和编号。

然后，继续判断子节点分页走马灯和文本有无子节点。此时，判断出子节点分页走马灯没有子节点，则根据子节点分页走马灯对应的组件类别和编号生成对应的代码，如<component type＝”PageIndirector”id＝1></component>，其中，component type＝”PageIndirector”代表子节点分页走马灯对应的组件类别，id＝1节点分页走马灯对应的编号。

同理，判断出子节点组件文本没有子节点，则根据子节点文本对应的组件类别和编号生成对应的代码，如<component type＝”Text”id＝1></component>，其中，componenttype＝”Text”代表子节点文本对应的组件类别，id＝1为子节点文本对应的编号。

综上，对界面树结构的所有节点进行遍历，生成对应的第一用户界面代码或第二界面代码，将得到的第一用户界面代码和第二用户界面代码进行组合输出以得到完整的用户界面原型图对应的用户界面原型代码。例如，最后输出的用户界面原型代码可为：

<？xml version＝"1.0"encoding＝"utf-8"？>

<root>

<container id＝4>

<container id＝3>

<container id＝1>

<component type＝”Text button”id＝1></component>

<component type＝”Text button”id＝1></component>

</container>

<container id＝2>

<component type＝”PageIndirector”id＝1></component>

<component type＝”Text”id＝1></component>

</container>

</container>

<component type＝”image”id＝1></component>

</container>

</root>

其中，<？xml version＝"1.0"encoding＝"utf-8"？>为母模板声明的xml版本和字符编码；<container id＝4></container>为第四容器节点生成的第一用户界面原型代码；<container id＝3></container>第三容器节点生成的第一用户界面原型代码；<component type＝”image”id＝1></component>为组件图片生成的第二用户界面原型代码；<container id＝1></container>为第一容器节点生成的第一用户界面原型代码；<container id＝2></container>第二容器节点生成的第一用户界面原型代码；<componenttype＝”Text button”id＝1></component>为组件文本按钮1生成的第二用户界面原型代码；<component type＝”Textbutton”id＝1></component>为组件文本按钮2生成的第二用户界面原型代码；<component type＝”PageIndirector”id＝1></component>为组件分页走马灯生成的第二用户界面原型代码；<component type＝”Text”id＝1></component>为组件分文本生成的第二用户界面原型代码。

通过上述步骤1041至步骤1043，针对用户界面原型图可自动生成对应的界面原型代码，节省了大量的人力物力，提高了用户界面的开发效率。

在一个可行的实施方案中，图5为本申请实施例提供的一种用户界面原型代码的生成装置的流程示意图，如图5所示，该生成装置可以包括：

获取模块501：用于获取用户界面原型图；

组件识别模块502：用于将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息；

组件组合模块503：将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构；

代码生成模块504：对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

作为一可选实施例，所述组件识别模块502，包括：

第一单元，用于通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到该用户界面原型图的特征图；

第二单元，用于将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件；

第三单元，用于将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

作为一可选实施例，所述组件组合模块503，包括：

第四单元，用于针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值；

第五单元，用于计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框；

第六单元，用于根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点；

第七单元，用于将当前所有符合所述最小欧式距离值的组件删除，将确定所述容器结点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一；

第八单元，用于针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构。

作为一可选实施例，所述代码生成模块504，包括：

第九单元，以所述界面树结构的根节点作为当前节点开始遍历；

第十单元，判断当前节点有无子节点，若当前节点没有子节点，则根据当前节点对应组件的类别和编号生成第一用户界面代码；

第十一单元，若当前节点有子节点，则根据当前节点对应组件的类别和编号生成第二用户界面代码，并继续判断每个子节点有无子节点。

对应于图1中的一种用户界面原型图代码的生成方法，本申请实施例还提供了一种计算机设备600，如图6所示，该设备包括存储器601、处理器602及存储在该存储器601上并可在该处理器602上运行的计算机程序，其中，上述处理器602执行上述计算机程序时实现上述用户界面原型图代码的生成方法。

具体地，上述存储器601和处理器602能够为通用的存储器和处理器，这里不做具体限定，当处理器602运行存储器601存储的计算机程序时，能够执行上述方法，提高了用户界面的开发效率。

对应于图1中的用户界面原型图代码的生成方法，本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法的步骤。

本发明实施例所提供的进行用户界面原型图代码的生成的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

本发明实施例所提供的用户界面原型图代码的生成的装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (8)

1.一种用户界面原型代码的生成方法，其特征在于，包括：

获取用户界面原型图；

将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息；

将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构,包括：针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值；计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框；根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点；将当前所有符合所述最小欧式距离值的组件删除，将确定的所述容器节点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一；针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构；

对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

2.根据权利要求1所述的用户界面原型代码的生成方法，其特征在于，所述将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息，包括：

通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到所述用户界面原型图的特征图；

将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件；

将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

3.根据权利要求1所述的用户界面原型代码的生成方法，其特征在于，所述对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码，包括：

以所述界面树结构的根节点作为当前节点开始遍历；

判断当前节点有无子节点，若当前节点没有子节点，则根据当前节点对应组件的类别和编号生成第一用户界面代码；

若当前节点有子节点，则根据当前节点对应组件的类别和编号生成第二用户界面代码，并继续判断每个所述子节点有无子节点。

4.根据权利要求1所述的用户界面原型代码的生成方法，其特征在于，所述将识别出的组件信息根据预先存储的组件组合布局信息进行层次组合是基于KNN算法进行层次组合的。

5.一种用户界面原型代码的生成装置，其特征在于，包括：

获取模块：用于获取用户界面原型图；

组件识别模块：用于将所述用户界面原型图输入至训练好的目标检测模型中，以得到所述用户界面原型图的组件信息；

组件组合模块：用于将识别出的组件信息根据预先存储的层次结构信息进行层次组合，以得到所述用户界面原型图对应的界面树结构；

所述组件组合模块，包括：第四单元，用于针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值；第五单元，用于计算所述用户界面原型图中所有符合所述最小欧式距离值的组件的最小外接矩形框；第六单元，用于根据所述最小外接矩形框的坐标信息，在所述层次结构信息中确定容器节点；其中，所述容器节点为包含所有符合所述最小欧式距离值的组件的最小外接矩形框的节点；第七单元，用于将当前所有符合所述最小欧式距离值的组件删除，将确定所述容器节点作为新的组件，并重复执行针对所述用户界面原型图，根据所述组件信息计算组件与组件之间的欧式距离，并确定最小欧式距离值，以得到下一个容器节点，直至所述用户界面原型图对应的组件个数为一；第八单元，用于针对所述用户界面原型图，基于确定的所有容器节点和容器节点对应的组件信息，生成所述界面树结构；

代码生成模块：用于对所述界面树结构进行遍历，根据遍历结果生成所述用户界面原型图对应的用户界面原型代码。

6.根据权利要求5所述的用户界面原型代码的生成装置，其特征在于，所述组件识别模块，包括：

第一单元，用于通过训练好的目标检测模型对所述用户界面原型图进行特征提取，以得到所述用户界面原型图的特征图；

第二单元，用于将提取的特征图进行特征融合后，利用预测算法确定所述用户界面原型图对应的预测组件；

第三单元，用于将所述预测组件对应的预测区域进行非极大值抑制处理，确定组件，以得到所述用户界面原型图的组件信息。

7.一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1-4中任一项所述的方法的步骤。

8.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器运行时执行上述权利要求1-4中任一项所述的方法的步骤。

Images