基于图像识别的前端代码生成方法及系统与流程

本发明涉及图像识别及代码生成，具体地说是一种基于图像识别的前端代码生成方法及系统。

背景技术：

1、现代前端技术正朝着组件化、低代码等方向快速发展。但是无论是组件化还是低代码都不可避免需要人工的参与页面布局、样式调整等细节性工作。现有代码生成技术，侧重于文本关键词匹配代码库生成逻辑代码，并不能满足基于图像的前端代码生成工作。

2、故如何基于前端界面图像生成前端代码，实现快速生成前端代码是目前亟待解决的技术问题。

技术实现思路

1、本发明的技术任务是提供一种基于图像识别的前端代码生成方法及系统，来解决如何基于前端界面图像生成前端代码，实现快速生成前端代码的问题。

2、本发明的技术任务是按以下方式实现的，一种基于图像识别的前端代码生成方法，该方法具体如下：

3、s1、获取前端界面图像；

4、s2、通过图像识别算法解析前端界面图像，生成前端界面结构图；

5、s3、根据前端界面图像判断前端界面结构图是否需要调整：

6、①、若是，则对前端界面结构图进行结构调整；

7、②、若否，则执行步骤s4；

8、s4、通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；

9、s5、根据前端界面图像判断前端要素结构树是否需要调整：

10、①、若是，则对前端要素结构树进行结构调整；

11、②、若否，则执行步骤s6；

12、s6、遍历前端要素结构树生成前端代码文件(前端代码文件采用标签化的语言)。

13、作为优选，前端界面结构图是指有包含关系的一系列封闭区域或封闭框。

14、更优地，对前端界面结构图进行结构调整具体如下：

15、对封闭区域或封闭框中的层级关系进行调整，使得最小封闭区域或封闭框能够对应html元素或组件库组件。

16、更优地，前端要素结构树是由要素节点构成的树结构数据；

17、其中，整个前端页面定义为根节点；其他要素节点按层级挂载到根节点上；

18、要素节点的属性包括唯一编号、样式列表、html标签(组件)名称、子要素节点列表及其他默认属性。

19、作为优选，图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指前端界面包含的表单输入元素、图表、表格、图像的html元素或组件。

20、作为优选，前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。

21、一种基于图像识别的前端代码生成系统，该系统包括，

22、获取模块，用于获取前端界面图像；

23、解析生成模块一，用于通过图像识别算法解析前端界面图像，生成前端界面结构图；

24、判断模块一，用于根据前端界面图像判断前端界面结构图是否需要调整：

25、若是，则对前端界面结构图进行结构调整；

26、解析生成模块二，用于通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；

27、判断模块二，用于根据前端界面图像判断前端要素结构树是否需要调整：

28、若是，则对前端要素结构树进行结构调整；

29、代码文件生成模块，用于遍历前端要素结构树生成前端代码文件(前端代码文件采用标签化的语言)。

30、更优地，前端界面结构图是指有包含关系的一系列封闭区域或封闭框；

31、对前端界面结构图进行结构调整具体如下：

32、对封闭区域或封闭框中的层级关系进行调整，使得最小封闭区域或封闭框能够对应html元素或组件库组件；

33、前端要素结构树是由要素节点构成的树结构数据；

34、其中，整个前端页面定义为根节点；其他要素节点按层级挂载到根节点上；

35、要素节点的属性包括唯一编号、样式列表、html标签(组件)名称、子要素节点列表及其他默认属性；

36、图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指前端界面包含的表单输入元素、图表、表格、图像的html元素或组件；

37、前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。

38、一种电子设备，包括：存储器和至少一个处理器；

39、其中，所述存储器上存储有计算机程序；

40、所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的基于图像识别的前端代码生成方法。

41、一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的基于图像识别的前端代码生成方法。

42、本发明的基于图像识别的前端代码生成方法及系统具有以下优点：

43、(一)本发明可以为帮助非前端软件研发人员来完成前端页面开发工作，让他们专注于业务逻辑实现。

44、(二)本发明可以提高前端人员研发效率，有效降低人力成本，提高项目开发速度，为企业带来效益；

45、(三)本发明基于前端界面图像生成前端代码，帮助普通人或者前端研发快速生成前端代码。

技术特征：

1.一种基于图像识别的前端代码生成方法，其特征在于，该方法具体如下：

2.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，前端界面结构图是指有包含关系的一系列封闭区域或封闭框。

3.根据权利要求1或2所述的基于图像识别的前端代码生成方法，其特征在于，对前端界面结构图进行结构调整具体如下：

4.根据权利要求3所述的基于图像识别的前端代码生成方法，其特征在于，前端要素结构树是由要素节点构成的树结构数据；

5.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指前端界面包含的表单输入元素、图表、表格、图像的html元素或组件。

6.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。

7.一种基于图像识别的前端代码生成系统，其特征在于，该系统包括，

8.根据权利要求7所述的基于图像识别的前端代码生成系统，其特征在于，前端界面结构图是指有包含关系的一系列封闭区域或封闭框；

9.一种电子设备，其特征在于，包括：存储器和至少一个处理器；

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如权利要求1至6中任一项所述的基于图像识别的前端代码生成方法。

技术总结
本发明公开了基于图像识别的前端代码生成方法及系统，属于图像识别及代码生成领域，本发明要解决的技术问题为如何基于前端界面图像生成前端代码，实现快速生成前端代码，技术方案为：S1、获取前端界面图像；S2、通过图像识别算法解析前端界面图像，生成前端界面结构图；S3、根据前端界面图像判断前端界面结构图是否需要调整：①、若是，则对前端界面结构图进行结构调整；②、若否，则执行步骤S4；S4、通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；S5、根据前端界面图像判断前端要素结构树是否需要调整：①、若是，则对前端要素结构树进行结构调整；②、若否，则执行步骤S6；S6、遍历前端要素结构树生成前端代码文件。

技术研发人员：陈兰强,黎文志
受保护的技术使用者：山东浪潮智慧医疗科技有限公司
技术研发日：
技术公布日：2024/1/13