基于深度学习生成前端页面代码的方法及系统技术方案

本发明专利技术公开了基于深度学习生成前端页面代码的方法及系统，属于人工智能技术领域，要解决的技术问题为如何高效的为项目搭建页面、减少项目汇总部分简单的重复性工作。包括如下步骤：根据设计图像或UI界面的格式和特征，对图像进行预处理；基于图像处理方法或机器学习算法对预处理后图像进行特征提取，提取描述图像内容的信息作为图像特征；基于图像识别方法对预处理后图像进行元素分割，得到前端元素，并对前端元素进行识别，得到前端元素的类别，并基于前端元素的类别为前端元素添加标签；对前端元素进行属性信息提取，得到前端元素的属性信息；基于带有标签的前端元素以及前端元素的属性信息，通过自动代码生成工具生成对应的前端页面代码。前端页面代码。前端页面代码。

【技术实现步骤摘要】
基于深度学习生成前端页面代码的方法及系统


[0001]本专利技术涉及人工智能
，具体地说是基于深度学习生成前端页面代码的方法及系统。

技术介绍

[0002]人工智能与机器学习的自动代码生成前端代码技术还处于初步发展阶段。以自然语言描述为输入的代码生成是当前主流的技术方法。
[0003]如何高效的为项目搭建页面、减少项目汇总部分简单的重复性工作，是需要解决的技术问题。

技术实现思路

[0004]本专利技术的技术任务是针对以上不足，提供基于深度学习生成前端页面代码的方法及系统，来解决如何高效的为项目搭建页面、减少项目汇总部分简单的重复性工作的技术问题。
[0005]第一方面，本专利技术一种基于深度学习生成前端页面代码的方法，包括如下步骤：
[0006]图像预处理：根据设计图像或UI界面的格式和特征，对图像进行预处理，得到预处理后图像；
[0007]图像特征提取：基于图像处理方法或机器学习算法对预处理后图像进行特征提取，提取描述图像内容的信息作为图像特征；
[0008]图像元素识别：基于图像识别方法对预处理后图像进行元素分割，得到前端元素，并对前端元素进行识别，得到前端元素的类别，前端元素的类别包括块级元素、行内元素以及盒子模型，并基于前端元素的类别为前端元素添加标签；
[0009]元素属性提取：对前端元素进行属性信息提取，得到前端元素的属性信息；
[0010]生成代码：基于带有标签的前端元素以及前端元素的属性信息，通过自动代码生成工具生成对应的前端页面代码。
[0011]作为优选，对图像进行预处理，包括对图像进行归一化处理、降噪处理、缩放处理以及剪裁处理，得到与处理后图像。
[0012]作为优选，图像特征包括颜色、形状和排列。
[0013]作为优选，前端元素包括按钮、文本框和图片。
[0014]作为优选，前端元素的属性信息包括大小、位置、颜色、字体、字号以及基础描述信息，其中，元素的大小和位置为其与屏幕的百分比长度。
[0015]第二方面，本专利技术一种基于深度学习生成前端页面代码的系统，用于执行如第一方面任一项所述的基于深度学习生成前端页面代码的方法，识别图像并生成页面代码，所述系统包括：
[0016]图像预处理模块，所述图像预处理模块用于根据设计图像或UI界面的格式和特征，对图像进行预处理，得到预处理后图像；
[0017]图像特征提取模块，所述图像特征提取模块用于基于图像处理方法或机器学习算法对预处理后图像进行特征提取，提取描述图像内容的信息作为图像特征；
[0018]图像元素识别，所述图像元素识别模块用于基于图像识别方法对预处理后图像进行元素分割，得到前端元素，并对前端元素进行识别，得到前端元素的类别，前端元素的类别包括块级元素、行内元素以及盒子模型，并基于前端元素的类别为前端元素添加标签；
[0019]元素属性提取模块，所述元素属性提取模块用于对前端元素进行属性信息提取，得到前端元素的属性信息；
[0020]代码生成模块，所述代码生成模块用于基于带有标签的前端元素以及前端元素的属性信息，通过自动代码生成工具生成对应的前端页面代码。
[0021]作为优选，所述图像预处理模块用于对图像进行归一化处理、降噪处理、缩放处理以及剪裁处理，得到与处理后图像。
[0022]作为优选，图像特征包括颜色、形状和排列。
[0023]作为优选，端元素包括按钮、文本框和图片。
[0024]作为优选，前端元素的属性信息包括大小、位置、颜色、字体、字号以及基础描述信息，其中，元素的大小和位置为其与屏幕的百分比长度。
[0025]本专利技术的基于深度学习生成前端页面代码的方法及系统具有以下优点：
[0026]1、对于设计图像或UI界面，通过图像预处理、图像特征提取、图像元素识别、元素属性提取，基于得到的前端元素以及属性信息、可通过自动代码生成工具自动生成对应的前端页面代码；
[0027]2、可以短时间内实现完成大量页面的表现层；
[0028]3、可以缩短项目流程。
附图说明
[0029]为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0030]下面结合附图对本专利技术进一步说明。
[0031]图1为实施例1基于深度学习生成前端页面代码的方法的流程框图。
具体实施方式
[0032]下面结合附图和具体实施例对本专利技术作进一步说明，以使本领域的技术人员可以更好地理解本专利技术并能予以实施，但所举实施例不作为对本专利技术的限定，在不冲突的情况下，本专利技术实施例以及实施例中的技术特征可以相互结合。
[0033]本专利技术实施例提供基于深度学习生成前端页面代码的方法及系统，用于解决如何高效的为项目搭建页面、减少项目汇总部分简单的重复性工作的技术问题。
[0034]实施例1：
[0035]本专利技术一种基于深度学习生成前端页面代码的方法，包括图像预处理、图像特征提取、图像元素识别、元素属性提取以及生成代码五个步骤。
[0036]步骤一图像预处理，根据设计图像或UI界面的格式和特征，对图像进行预处理，得到预处理后图像。
[0037]通过图像预处理，获得标准、易于处理的图像。作为图像预处理的具体实施，对图像进行归一化处理、降噪处理、缩放处理以及剪裁处理，得到与处理后图像。
[0038]对于需要生成表现层代码的图像进行归一化处理、降噪处理、缩放处理以及剪裁处理，得到与处理后图像。其中，该图像可以为设计图或者页面截图。
[0039]步骤二图像特征提取，基于图像处理方法或机器学习算法对预处理后图像进行特征提取，提取描述图像内容的信息作为图像特征。通过提取图像特征分析图像内元素的大致布局。
[0040]通过提取图像特征分析图像内元素的大致布局，本实施例中图像特征包括颜色、形状和排列等。
[0041]其中，图像处理方法和机器学习算法可选用现有技术中任意可进行图像特征提取的方法，本实施例不做具体限定。
[0042]步骤三图像元素识别，基于图像识别方法对预处理后图像进行元素分割，得到前端元素，并对前端元素进行识别，得到前端元素的类别，前端元素的类别包括块级元素、行内元素以及盒子模型，并基于前端元素的类别为前端元素添加标签。
[0043]本实施例中前端元素包括按钮、文本框和图片。通过图像元素识别细化图像内元素的布局以及元素特点。
[0044]步骤四元素属性提取，对前端元素进行属性信息提取，得到前端元素的属性信息。
[0045]步骤五生成代码，基于带有标签的前端元素以及前端元素的属性信息，通过自动代码生成工具生成对应的前端页面代码。
[0046]通过提取元素属性将元素转化为利于本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于深度学习生成前端页面代码的方法，其特征在于，包括如下步骤：图像预处理：根据设计图像或UI界面的格式和特征，对图像进行预处理，得到预处理后图像；图像特征提取：基于图像处理方法或机器学习算法对预处理后图像进行特征提取，提取描述图像内容的信息作为图像特征；图像元素识别：基于图像识别方法对预处理后图像进行元素分割，得到前端元素，并对前端元素进行识别，得到前端元素的类别，前端元素的类别包括块级元素、行内元素以及盒子模型，并基于前端元素的类别为前端元素添加标签；元素属性提取：对前端元素进行属性信息提取，得到前端元素的属性信息；生成代码：基于带有标签的前端元素以及前端元素的属性信息，通过自动代码生成工具生成对应的前端页面代码。2.根据权利要求1所述的基于深度学习生成前端页面代码的方法，其特征在于，对图像进行预处理，包括对图像进行归一化处理、降噪处理、缩放处理以及剪裁处理，得到与处理后图像。3.根据权利要求1所述的基于深度学习生成前端页面代码的方法，其特征在于，图像特征包括颜色、形状和排列。4.根据权利要求1所述的基于深度学习生成前端页面代码的方法，其特征在于，前端元素包括按钮、文本框和图片。5.根据权利要求1所述的基于深度学习生成前端页面代码的方法，其特征在于，前端元素的属性信息包括大小、位置、颜色、字体、字号以及基础描述信息，其中，元素的大小和位置为其与屏幕的百分比长度。6.一种基于深度学习生成前端页面代码的系统，其特征在于，用于执行如权利要求1
‑
5任一项所述的基于深度学习生成前端页面...

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