[发明专利]用户界面代码生成方法、装置、电子设备及存储介质

说明书

本发明提供一种用户界面代码生成方法、装置、电子设备及存储介质，获取多张目标用户界面图；针对每张目标用户界面图，采用预设的训练至收敛的检测识别模型，对所述目标用户界面图中的目标元素及界面边界进行检测和识别，以获得目标元素信息及界面边界信息；根据所述目标元素信息及界面边界信息确定各目标用户界面图之间的界面跳转关系信息；根据所述目标元素信息以及所述界面跳转关系信息生成对应的目标代码。本发明方案能够根据目标用户界面图自动生成目标元素代码以及跳转关系用户界面代码，缩短了用户界面代码的开发周期，提高了用户界面代码的开发生成效率。

技术领域

本发明涉及互联网技术领域，尤其涉及一种用户界面代码生成方法、装置、电子设备及存储介质。

背景技术

随着互联网的发展，产生了大量带有用户界面的互联网产品，例如各种电子设备应用程序。为满足市场需求，互联网产品的迭代开发速度越来越快，给互联网从业人员带来了巨大的挑战。

目前普遍采用算法识别互联网产品用户界面图中的界面元素信息，并根据界面元素信息生成界面元素代码，产品设计人员与开发人员进行沟通以确定界面跳转关系。

但是，现有方法无法自动生成界面跳转关系代码，需要通过沟通说明的方式确定界面跳转关系，并人工编写界面跳转关系代码，严重影响了用户界面代码的生成效率。

发明内容

本发明提供一种用户界面代码生成方法、装置、电子设备及存储介质，解决了用户界面代码无法全部自动生成的问题，提高了用户界面代码的生成效率。

第一方面，本发明提供一种用户界面代码生成方法，包括：

获取多张目标用户界面图；

针对每张目标用户界面图，采用预设的训练至收敛的检测识别模型，对所述目标用户界面图中的目标元素及界面边界进行检测和识别，以获得目标元素信息及界面边界信息；

根据所述目标元素信息及界面边界信息确定各目标用户界面图之间的界面跳转关系信息；

根据所述目标元素信息以及所述界面跳转关系信息生成对应的目标代码。

可选的，所述目标元素信息包括：目标元素颜色信息，所述界面边界信息包括：界面边界颜色信息；

所述根据所述目标元素信息及界面边界信息确定各目标用户界面图之间的界面跳转关系信息，包括：

根据所述目标元素颜色信息及界面边界颜色信息确定各目标用户界面图之间的界面跳转关系信息。

进一步的，所述根据所述目标元素颜色信息及界面边界颜色信息确定各目标用户界面图之间的界面跳转关系信息，包括：

将任意一张目标用户界面图中的目标元素颜色信息与其他至少一张目标用户界面图中的存在界面边界的界面边界颜色信息进行匹配；

若确定某张目标用户界面图中的目标元素颜色信息与其他某张目标用户界面图中的界面边界颜色信息相匹配，则确定该两张目标用户界面图之间存在跳转关系信息；

获取该两张目标用户界面图的标识信息，以及目标元素的标识信息；

根据该两张目标用户界面图的标识信息，以及目标元素的标识信息构建界面跳转关系信息。

可选的，所述针对每张目标用户界面图，采用预设的训练至收敛的检测识别模型，对所述目标用户界面图中的目标元素及界面边界进行检测和识别，以获得目标元素信息及界面边界信息，包括：

将每张目标界面图输入至预设的第一训练至收敛的元素检测识别模型中，通过所述第一训练至收敛的元素检测识别模型对所述目标用户界面图中的目标元素进行检测和识别，输出目标元素信息；