[发明专利]一种用户界面原型代码的生成方法、装置、设备及介质

说明书

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

技术领域

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

背景技术

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

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

发明内容

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

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

获取用户界面原型图；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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