移动端页面代码生成方法及装置与流程

1.本发明涉及人工智能技术领域，尤其涉及移动端页面代码生成方法及装置。


背景技术：

2.本部分旨在为权利要求书中陈述的本发明实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
3.当前前端开发工作中因开发门槛较高、重复开发等限制导致开发效率较低。


技术实现要素：

4.本发明实施例提供一种移动端页面代码生成方法，用以解决当前前端开发工作中因开发门槛较高、重复开发等限制导致开发效率较低的技术问题，该方法包括：
5.构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；
6.获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；
7.基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；
8.利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待生成移动端页面ui图，得到文本信息和文本位置；
9.利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码。
10.本发明实施例还提供一种移动端页面代码生成装置，用以解决当前前端开发工作中因开发门槛较高、重复开发等限制导致开发效率较低的技术问题，该装置包括：
11.基础组件代码库构建模块，用于构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；
12.数据预处理模块，用于获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；
13.模型构建模块，用于基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；
14.ui图信息提取模块，用于利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待
生成移动端页面ui图，得到文本信息和文本位置；
15.代码生成模块，用于利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码。
16.本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述移动端页面代码生成方法。
17.本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述所述移动端页面代码生成方法的步骤。
18.本发明实施例中，与现有技术中当前前端开发工作中因开发门槛较高、重复开发等限制导致开发效率较低的技术方案相比，通过构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待生成移动端页面ui图，得到文本信息和文本位置；利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码，本发明只需输入页面ui图相关信息即可自动生成页面代码，操作简单、便捷，降低了页面开发门槛，提升了开发效率，可节约大量时间成本、人力成本。
附图说明
19.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
20.图1为本发明实施例中移动端页面代码生成方法流程图一；
21.图2为本发明实施例中移动端页面代码生成方法流程图二；
22.图3为本发明实施例中移动端页面代码生成方法流程图三；
23.图4为本发明实施例中移动端页面代码生成方法流程图四；
24.图5为本发明实施例中移动端页面代码生成装置结构框图。
具体实施方式
25.为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。
26.图1为本发明实施例中移动端页面代码生成方法流程图一，如图1所示，该方法包
括：
27.步骤101：构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；
28.步骤102：获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；
29.步骤103：基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；
30.步骤104：利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待生成移动端页面ui图，得到文本信息和文本位置；
31.步骤105：利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码。
32.在本发明实施例中，如图2所示，步骤101具体包括：
33.步骤201：对移动端页面ui图中的构成元素进行集中化处理，形成多个由ui图移动端页面ui图中的构成元素组成的组件，针对每个组件，编写代码，形成基础组件代码库。
34.具体的，所述的代码指的是h5代码。
35.构成元素：指页面的基本组成元素，文本、线条、色彩区域等。
36.集中化：可以理解为区域化，即某个区域内的元素进行组合，进而形成一个有独特视觉特征的区域。
37.在本发明实施例中，如图3所示，还包括：
38.步骤301：对标注出的移动端页面ui图中的组件类型、组件位置、文本信息及文本位置进行数据增强。
39.具体的，标注好后对标注数据进行数据增强，进一步扩大数据量。所说的数据增强指的是主要通过对ui图进行亮度、对比度变换，图片剪切等操作进行。
40.在本发明实施例中，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息，包括：
41.基于所有组件的类型和位置确定所有组件在移动端页面ui图中的上下关系。
42.具体的，布局逻辑指组件在ui图中的上下关系。上下关系根据组件位置信息得到。
43.在本发明实施例中，按照组件布局逻辑信息进行填充，具体包括：根据组件在ui图中的上下关系，将提取出的代码块组合到一起。
44.在本发明实施例中，结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码，具体包括：文本位置固定，需要根据组件位置确定组件所在区域，进而覆盖到该区域内的所有文本。然后从组件库提取出对应组件的代码块并将其组合在一起，然后某些组件中需要填充ui图中的文本信息，将文本信息填入到组件中，完成后，即得到最终的代码。
45.在本发明实施例中，如图4所示，还需要加入“调用接口名、接口字段、列表组件
page_size”。这些指的是组件本身的一些参数，这些参数通过外部输入，其实本质上就是步骤101做的组件库中的组件的一些参数。
46.本发明实施例中还提供了一种移动端页面代码生成装置，如下面的实施例所述。由于该装置解决问题的原理与移动端页面代码生成方法相似，因此该装置的实施可以参见移动端页面代码生成方法的实施，重复之处不再赘述。
47.图5为本发明实施例中移动端页面代码生成装置结构框图，如图5所示，该装置包括：
48.基础组件代码库构建模块02，用于构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；
49.数据预处理模块04，用于获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；
50.模型构建模块06，用于基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；
51.ui图信息提取模块08，用于利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待生成移动端页面ui图，得到文本信息和文本位置；
52.代码生成模块10，用于利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码。
53.在本发明实施例中，基础组件代码库构建模块具体用于：
54.对移动端页面ui图中的构成元素进行集中化处理，形成多个由ui图移动端页面ui图中的构成元素组成的组件，针对每个组件，编写代码，形成基础组件代码库。
55.在本发明实施例中，数据预处理模块具体用于：
56.对标注出的移动端页面ui图中的组件类型、组件位置、文本信息及文本位置进行数据增强。
57.在本发明实施例中，ui图信息提取模块具体用于：
58.基于所有组件的类型和位置确定所有组件在移动端页面ui图中的上下关系。
59.本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述移动端页面代码生成方法。
60.本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述所述移动端页面代码生成方法的步骤。
61.本发明实施例中，与现有技术中当前前端开发工作中因开发门槛较高、重复开发等限制导致开发效率较低的技术方案相比，通过构建基础组件代码库，所述基础组件代码库包括移动端页面ui图中的组件的代码；获取移动端页面ui图，对移动端页面ui图进行标注，标注出移动端页面ui图中的组件类型、组件位置、文本信息及文本位置；基于组件类型和组件位置训练组件识别定位模型，基于文本信息及文本位置训练组件文本内容检测模
型，获得已训练组件识别定位模型和已训练组件文本内容检测模型；利用已训练组件识别定位模型检测待生成移动端页面ui图，得到待生成移动端页面ui图中所有组件的类型和位置，基于所有组件的类型和位置得到待生成移动端页面ui图的组件布局逻辑信息；利用已训练组件文本内容检测模型检测待生成移动端页面ui图，得到文本信息和文本位置；利用所有组件的类型和位置，从基础组件代码库中提取对应的代码，按照组件布局逻辑信息进行填充；结合所有组件的位置和文本位置，将文本信息填充到对应组件中，生成移动端页面代码，本发明只需输入页面ui图相关信息即可自动生成页面代码，操作简单、便捷，降低了页面开发门槛，提升了开发效率，可节约大量时间成本、人力成本。本发明组件代码库代码高度解耦，可以轻易迁移到其它页面代码生成中，迁移成本低，适用范围广、普及成本低。本发明基础组件代码库代码编写规范，降低了开发风险，提升了代码可读性和易维护性。
62.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
63.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
64.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
65.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
66.以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。