基于图像识别的前端代码生成方法及系统技术方案

本发明专利技术公开了基于图像识别的前端代码生成方法及系统，属于图像识别及代码生成领域，本发明专利技术要解决的技术问题为如何基于前端界面图像生成前端代码，实现快速生成前端代码，技术方案为：S1、获取前端界面图像；S2、通过图像识别算法解析前端界面图像，生成前端界面结构图；S3、根据前端界面图像判断前端界面结构图是否需要调整：

【技术实现步骤摘要】
基于图像识别的前端代码生成方法及系统


[0001]本专利技术涉及图像识别及代码生成
，具体地说是一种基于图像识别的前端代码生成方法及系统。

技术介绍

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

技术实现思路

[0004]本专利技术的技术任务是提供一种基于图像识别的前端代码生成方法及系统，来解决如何基于前端界面图像生成前端代码，实现快速生成前端代码的问题。
[0005]本专利技术的技术任务是按以下方式实现的，一种基于图像识别的前端代码生成方法，该方法具体如下：
[0006]S1、获取前端界面图像；
[0007]S2、通过图像识别算法解析前端界面图像，生成前端界面结构图；
[0008]S3、根据前端界面图像判断前端界面结构图是否需要调整：
[0009]①
、若是，则对前端界面结构图进行结构调整；
[0010]②
、若否，则执行步骤S4；
[0011]S4、通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；
[0012]S5、根据前端界面图像判断前端要素结构树是否需要调整：
[0013]①
、若是，则对前端要素结构树进行结构调整；
[0014]②
、若否，则执行步骤S6；
[0015]S6、遍历前端要素结构树生成前端代码文件(前端代码文件采用标签化的语言)。
[0016]作为优选，前端界面结构图是指有包含关系的一系列封闭区域或封闭框。
[0017]更优地，对前端界面结构图进行结构调整具体如下：
[0018]对封闭区域或封闭框中的层级关系进行调整，使得最小封闭区域或封闭框能够对应HTML元素或组件库组件。
[0019]更优地，前端要素结构树是由要素节点构成的树结构数据；
[0020]其中，整个前端页面定义为根节点；其他要素节点按层级挂载到根节点上；
[0021]要素节点的属性包括唯一编号、样式列表、HTML标签(组件)名称、子要素节点列表及其他默认属性。
[0022]作为优选，图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指
前端界面包含的表单输入元素、图表、表格、图像的HTML元素或组件。
[0023]作为优选，前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。
[0024]一种基于图像识别的前端代码生成系统，该系统包括，
[0025]获取模块，用于获取前端界面图像；
[0026]解析生成模块一，用于通过图像识别算法解析前端界面图像，生成前端界面结构图；
[0027]判断模块一，用于根据前端界面图像判断前端界面结构图是否需要调整：
[0028]若是，则对前端界面结构图进行结构调整；
[0029]解析生成模块二，用于通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；
[0030]判断模块二，用于根据前端界面图像判断前端要素结构树是否需要调整：
[0031]若是，则对前端要素结构树进行结构调整；
[0032]代码文件生成模块，用于遍历前端要素结构树生成前端代码文件(前端代码文件采用标签化的语言)。
[0033]更优地，前端界面结构图是指有包含关系的一系列封闭区域或封闭框；
[0034]对前端界面结构图进行结构调整具体如下：
[0035]对封闭区域或封闭框中的层级关系进行调整，使得最小封闭区域或封闭框能够对应HTML元素或组件库组件；
[0036]前端要素结构树是由要素节点构成的树结构数据；
[0037]其中，整个前端页面定义为根节点；其他要素节点按层级挂载到根节点上；
[0038]要素节点的属性包括唯一编号、样式列表、HTML标签(组件)名称、子要素节点列表及其他默认属性；
[0039]图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指前端界面包含的表单输入元素、图表、表格、图像的HTML元素或组件；
[0040]前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。
[0041]一种电子设备，包括：存储器和至少一个处理器；
[0042]其中，所述存储器上存储有计算机程序；
[0043]所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的基于图像识别的前端代码生成方法。
[0044]一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的基于图像识别的前端代码生成方法。
[0045]本专利技术的基于图像识别的前端代码生成方法及系统具有以下优点：
[0046](一)本专利技术可以为帮助非前端软件研发人员来完成前端页面开发工作，让他们专注于业务逻辑实现。
[0047](二)本专利技术可以提高前端人员研发效率，有效降低人力成本，提高项目开发速度，为企业带来效益；
[0048](三)本专利技术基于前端界面图像生成前端代码，帮助普通人或者前端研发快速生成
前端代码。
附图说明
[0049]下面结合附图对本专利技术进一步说明。
[0050]附图1为基于图像识别的前端代码生成方法的流程框图。
具体实施方式
[0051]参照说明书附图和具体实施例对本专利技术的基于图像识别的前端代码生成方法及系统作以下详细地说明。
[0052]实施例1：
[0053]如附图1所示，本实施例提供了一种基于图像识别的前端代码生成方法，该方法具体如下：
[0054]S1、获取前端界面图像；
[0055]S2、通过图像识别算法解析前端界面图像，生成前端界面结构图；
[0056]S3、根据前端界面图像判断前端界面结构图是否需要调整：
[0057]①
、若是，则对前端界面结构图进行结构调整；
[0058]②
、若否，则执行步骤S4；
[0059]S4、通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；
[0060]S5、根据前端界面图像判断前端要素结构树是否需要调整：
[0061]①
、若是，则对前端要素结构树进行结构调整；
[0062]②
、若否，则执行步骤S6；
[0063]S6、遍历前端要素结构树生成前端代码文件(前端代码文件采用标签化的语言)。
[0064]本实施例中的前端界面结构图是本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于图像识别的前端代码生成方法，其特征在于，该方法具体如下：S1、获取前端界面图像；S2、通过图像识别算法解析前端界面图像，生成前端界面结构图；S3、根据前端界面图像判断前端界面结构图是否需要调整：
①
、若是，则对前端界面结构图进行结构调整；
②
、若否，则执行步骤S4；S4、通过图像识别算法解析前端界面结构图及前端界面图像，生成前端要素结构树；S5、根据前端界面图像判断前端要素结构树是否需要调整：
①
、若是，则对前端要素结构树进行结构调整；
②
、若否，则执行步骤S6；S6、遍历前端要素结构树生成前端代码文件。2.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，前端界面结构图是指有包含关系的一系列封闭区域或封闭框。3.根据权利要求1或2所述的基于图像识别的前端代码生成方法，其特征在于，对前端界面结构图进行结构调整具体如下：对封闭区域或封闭框中的层级关系进行调整，使得最小封闭区域或封闭框能够对应HTML元素或组件库组件。4.根据权利要求3所述的基于图像识别的前端代码生成方法，其特征在于，前端要素结构树是由要素节点构成的树结构数据；其中，整个前端页面定义为根节点；其他要素节点按层级挂载到根节点上；要素节点的属性包括唯一编号、样式列表、HTML标签名称、子要素节点列表及其他默认属性。5.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，图像识别算法经过相关监督学习训练识别出前端要素，前端要素是指前端界面包含的表单输入元素、图表、表格、图像的HTML元素或组件。6.根据权利要求1所述的基于图像识别的前端代码生成方法，其特征在于，前端界面结构图及前端要素结构树结构调整后的数据放入标注库，利用更新后的标注库对图像识别算法进行优化训练。7.一种基于图像识别的前端代码...

【专利技术属性】
技术研发人员：陈兰强，黎文志，
申请(专利权)人：山东浪潮智慧医疗科技有限公司，
类型：发明
国别省市：