一种基于Web图片的前端代码自动生成方法和装置

一种基于web图片的前端代码自动生成方法和装置
技术领域
1.本发明涉及计算机技术领域，具体涉及一种基于web图片的前端代码自动生成方法和装置。


背景技术：

2.gui(graphical user interface，图形用户界面，又称图形用户接口)的广泛应用是当今计算机发展的重大成就之一，它极大地方便了非专业用户的使用人们从此不再需要死记硬背大量的命令，取而代之的是通过窗口、菜单、按键等方式来方便地进行操作。一种名为pix2code的深度神经网络模型，能够根据输入的gui截图直接输出对应的代码，从而省去前端手动编写代码的过程。原理是将输入的gui图片通过卷积神经网络提取得到特征图，然后将卷积神经网络输出的特征图展平后作为循环神经网络的输入，经过循环神经网络处理后输出dsl(domain-specific language，领域特定语言)序列。将得到的dsl序列输入到为该dsl设计的编译器中得到最终的前端代码。
3.然而，现有技术中，通过这种方法所提取的web页面的元素种类有限，很多必需的元素都没有，例如输入框(input)，选择框(select)，单选框(radio)，复选框(check box)等。生成的元素也没有独立的样式，每个元素的样式都是默认的样式。生成的代码也只有html代码(全称“hyper text markup language，超文本标记语言)，没有css代码(cascading style sheet，层叠样式表)。该研究生成的只有元素和容器本身的html标签，没有web页面应该有的布局，生成页面和输入图片并不匹配。


技术实现要素：

4.有鉴于此，本说明书实施例提供以下技术方案：一种基于web图片的前端代码自动生成方法，包括如下步骤：
5.识别web图片中的元素，获得元素信息；
6.依据所述元素信息生成容器，获得页面布局信息，其中，所述页面布局信息包括css代码的布局；
7.对所述元素信息进行样式推理，获得css代码的样式；
8.将所述css代码的布局与所述css代码的样式结合，获得css代码。
9.进一步地，识别web图片中的元素，获得元素信息，具体包括：将所述web图片输入元素识别网络，所述元素识别网络输出所述元素信息。
10.进一步地，训练所述元素识别网络，具体包括：
11.在训练yolox识别网络的过程中，对web页面截图标注元素类别，将标注后的所述web页面截图作为样本；
12.通过所述样本训练所述yolox识别网络，得到所述元素识别网络。
13.进一步地，依据所述元素信息生成容器，获得页面布局信息，具体包括：
14.对所述元素信息使用容器生成算法生成容器，并获得容器的位置信息以及容器与
元素的嵌套关系，其中，所述元素信息包括元素类别和元素位置信息；
15.结合所述元素信息、所述容器的位置信息以及所述容器与元素的嵌套关系，生成css代码的布局。
16.进一步地，对所述元素信息使用容器生成算法生成容器，具体包括：
17.将从所述web图片中识别出的元素，按照第一方向进行排序，获得第一排序结果；
18.在所述第一排序结果中，如果相邻两个所述元素的间距大于第一阈值，则将相邻两个所述元素中的前一元素归入前一容器，将相邻两个所述元素中的后一元素归入后一容器，获得按照所述第一方向分布的容器；
19.将所述第一方向分布的容器中的所述元素，按照第二方向进行排序，获得第二排序结果；
20.在所述第二排序结果中，如果相邻两个所述元素的间距大于第二阈值，则将相邻两个所述元素中的前一元素归入前一容器，将相邻两个所述元素中的后一元素归入后一容器，获得按照所述第二方向分布的容器。
21.进一步地，结合所述元素信息、所述容器的位置信息以及所述容器与元素的嵌套关系，生成html代码。
22.进一步地，将元素边缘像素的颜色作为所述元素和容器的背景颜色。
23.进一步地，对所述元素信息进行样式推理，获得css代码的样式，具体包括：
24.将每个所述元素的图片输入第一神经网络，所述第一神经网络输出所述元素中字体大小的值；
25.将每个所述元素的图片输入第二神经网络，所述第二神经网络输出所述元素中边框圆角的值。
26.进一步地，所述第一神经网络和所述第二神经网络是通过训练resnet34得到的，其中，所述第一神经网络和所述第二神经网络的损失函数为mae损失函数。
27.本技术还提供一种基于web图片的前端代码自动生成装置，包括：
28.元素识别模块，用于识别web图片中的元素，获得元素信息；
29.页面布局模块，用于依据所述元素信息生成容器，获得页面布局信息，其中，所述页面布局信息包括css代码的布局；
30.样式推理模块，用于对所述元素信息进行样式推理，获得css代码的样式；
31.代码生成模块，用于将所述css代码的布局与所述css代码的样式结合，获得css代码。
32.本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任意的基于web图片的前端代码自动生成方法。
33.本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述任意的基于web图片的前端代码自动生成方法的计算机程序。
34.与现有技术相比，本说明书实施例采用的上述至少一个技术方案能够达到的有益效果至少包括：本实施例对输入的web图片使用训练好的神经网络进行元素识别，得到多种类的元素信息，在布局生成部分针对web页面，根据元素识别部分得到的元素信息生成容器，然后为页面生成合理的布局。在样式推理部分采用了神经网络的方法来推理元素的样
式，对每个元素的样式单独进行推理得到元素的样式信息。实现了多种类元素的生成，以及web页面合理布局和样式信息的生成，并自动生成前端代码，弥补了现有技术的缺陷。
附图说明
35.为了更清楚地说明本技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
36.图1是本发明实施例的一种基于web图片的前端代码自动生成方法流程示意图；
37.图2是本发明实施例的一种基于web图片的前端代码自动生成结构示意图；
38.图3是本发明实施例提供的一种计算机设备示意图；
39.图4是本发明实施例的一种基于web图片的前端代码自动生成装置结构示意图。
40.图中附图标记：存储器402，处理器404，装置200，元素识别模块201，页面布局模块202，样式推理模块203，代码生成模块204。
具体实施方式
41.下面结合附图对本技术实施例进行详细描述。
42.需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
43.如图1所示，本发明实施例提供了一种基于web图片的前端代码自动生成方法，包括：步骤s101：识别web图片中的元素，获得元素信息；步骤s102：依据所述元素信息生成容器，获得页面布局信息，其中，所述页面布局信息包括css代码的布局；步骤s103：对所述元素信息进行样式推理，获得css代码的样式；步骤s104：将所述css代码的布局与所述css代码的样式结合，获得css代码。
44.本实施例对输入的web图片使用训练好的神经网络进行元素识别，得到多种类的元素信息，在布局生成部分针对web页面设计了一个容器生成算法，根据元素识别部分得到的元素信息生成容器，然后为页面生成合理的布局。在样式推理部分采用了神经网络的方法来推理元素的样式，对每个元素的样式单独进行推理得到元素的样式信息。从而实现了多种类元素的生成，以及web页面合理布局和样式信息的生成，并自动生成前端代码，弥补了现有技术的缺陷。
45.如图1所示，本发明第一实施例具体包括以下步骤：
46.s101：识别web图片中的元素，获得元素信息；
47.具体而言，所述web图片为网页截图，将所述web图片输入至元素识别网络，如图2所示，由所述元素识别网络对图片进行元素识别，实现输出网页截图内的元素信息。所述元素识别网络为神经网络模型。对于需要识别的html元素确定为十类：链接，文本，段落，图片，文本域，输入框，选择框，单选框，复选框，按钮。本实施例中，将yolox用作元素识别网络，可以达到较高的识别准确率。yolox是一种高性能目标检测框架，具有速度快、检测精度高和方便部署等优点。对上述网络进行训练后，训练好的网络可以识别出输入的web页面图像中的元素。所述元素识别网络输出的所述元素信息包括元素的类别和元素的位置信息，其中，元素的位置信息具体为元素的左上角坐标、右下角坐标。
48.具体实施时，获得所述元素识别网络的具体过程包括：
49.s110：在训练yolox识别网络的过程中，对web页面截图标注元素类别，将标注后的所述web页面截图作为样本；
50.s120：通过所述样本训练所述yolox识别网络，得到所述元素识别网络。
51.具体而言，训练所述yolox识别网络所采用的数据集格式为voc数据集的格式，本技术实施时，自行截取了多张web页面的截图，使用labelimg这一标注数据集的工具，对所截取的web页面截图进行了标注，labelimg是一个图形图像注释工具。标注的元素类别有十种：链接，文本，段落，图片，文本域，输入框，选择框，单选框，复选框，按钮。标注过程中会将web页面截图中的这些元素使用边缘框框选出来，并将标注的信息记为xml文件，共制作1000张用于训练所述yolox识别网络的数据集，基于上述数据集为训练样本对所述yolox识别网络进行数据训练，从而得到所述元素识别网络。在训练之后，网络识别输入截图中元素的准确率有了很大的提升，几乎可以识别出页面中的所有元素。
52.s102：依据所述元素信息生成容器，获得页面布局信息，其中，所述页面布局信息包括css代码的布局；
53.具体实施时，依据所述元素信息生成容器，获得页面布局信息的具体过程包括：
54.步骤s210：对所述元素信息使用容器生成算法生成容器，并获得容器的位置信息以及容器与元素的嵌套关系，其中，所述元素信息包括元素类别和元素位置信息；
55.步骤s220：结合所述元素信息、所述容器的位置信息以及所述容器与元素的嵌套关系，生成css代码的布局。
56.具体实施时，结合所述元素信息、所述容器的位置信息以及所述容器与元素的嵌套关系，还包括：生成html代码。
57.具体而言，对所述元素识别网络所识别出的元素的类别和位置信息使用容器生成算法，为所识别出的元素生成容器。上述容器即一些元素的集合，能够提供高效、灵活的内存管理。基于所述容器生成算法生成容器，并获得容器的位置信息以及容器与元素之间的嵌套关系。继而利用识别的元素类别信息、元素位置信息，以及容器位置信息、容器与元素的嵌套关系，生成css代码的布局部分和html代码。所述css代码的布局部分包括页面的宽高、行间距、内容板块的位置等等。本技术实施例中，随机截取了20个web页面的截图作为评价所述容器生成算法的测试集。此外，基于ocr(optical character recognition，光学字符识别)技术对元素的文本进行识别，获得元素的文本内容，以使得生成元素的文本内容与输入web图片中的一致。
58.具体实施时，所述容器生成算法的具体生成过程包括：
59.步骤s211：将从所述web图片中识别出的元素，按照第一方向进行排序，获得第一排序结果；
60.步骤s212：在所述第一排序结果中，如果相邻两个所述元素的间距大于第一阈值，则将相邻两个所述元素中的前一元素归入前一容器，将相邻两个所述元素中的后一元素归入后一容器，获得按照所述第一方向分布的容器；
61.具体而言，所述第一方向为纵向。将从所述web图片中识别出的所述元素按照上下顺序排序，获得所述第一排序结果。在所述第一排序结果中，如果两个元素的间距超过所述第一阈值，则将两个元素中靠上的元素归为上一个容器，靠下的元素归为下一个容器。由此
可以得到纵向分布的容器。
62.步骤s213：将所述第一方向分布的容器中的所述元素，按照第二方向进行排序，获得第二排序结果；
63.步骤s241：在所述第二排序结果中，如果相邻两个所述元素的间距大于第二阈值，则将相邻两个所述元素中的前一元素归入前一容器，将相邻两个所述元素中的后一元素归入后一容器，获得按照所述第二方向分布的容器。
64.具体而言，所述第二方向为横向。在所述第一方向分布的容器中，即在纵向分布的容器中，对元素进行横向排序，如果左边的元素和右边的元素间距超过所述第二阈值，则将左边的元素归为左边的容器，右边的元素归为右边的容器，由此得到横向分布的容器。
65.s103：对所述元素信息进行样式推理，获得css代码的样式；
66.具体而言，如图2所示，基于所识别的元素信息，通过神经网络对每个元素的样式单独进行样式推理，得到元素的样式信息。样式推理部分需要进行推理的样式包括：背景颜色、字体大小、边框圆角。对于背景颜色，将元素边缘像素的颜色作为背景颜色，由此得到元素和容器的背景颜色。
67.在具体实施中，对所述元素信息进行样式推理，获得css代码的样式的过程包括：
68.步骤s310：将每个所述元素的图片输入第一神经网络，所述第一神经网络输出所述元素中字体大小的值；
69.步骤s320：将每个所述元素的图片输入第二神经网络，所述第二神经网络输出所述元素中边框圆角的值。
70.具体而言，对所述元素信息进行样式推理是使用神经网络进行的，即样式推理网络。所述第一神经网络为字体大小推理网络，所述第二神经网络为边框圆角推理网络。本技术实施例中，从不同的网页上截取了含有不同样式的元素，并查看网页的html和css代码获得该元素对应样式的数值，从而制作而成两个数据集，分别用于边框圆角推理网络和字体大小推理网络的训练样本。其中，每个数据集中各有1000多张图片，并且每张图片都有一个记录了样式数值的文本文件。继而，分别通过所述第一神经网络和所述第二神经网络输出所述元素字体大小的值、边框圆角的值。
71.在具体实施中，所述第一神经网络和所述第二神经网络是通过训练resnet34得到的，所述resnet34为一种深度残差网络。其中，所述第一神经网络和所述第二神经网络的损失函数为mae(mean absolute error，平均绝对误差)损失函数。
72.在选择样式推理所使用的神经网络时，考虑到样式推理的输入是一张图片(带有一个元素的图片)，输出是一个实数(字体大小、边框圆角的值)。于是使用了用于图像分类的神经网络alexnet和resnet34，将最后一层的softmax层改为输出为一个值的全连接层，将损失函数改为mae损失，以此来完成回归任务。在使用自制的数据集对样式推理网络进行训练后，实验结果证明了resnet34的效果更好，故最终使用的是resnet34。本技术采用了神经网络的方法来推理元素的样式，对每个元素的样式单独进行推理得到元素的样式信息，使得生成的页面样式更多样。
73.s104：将所述css代码的布局与所述css代码的样式结合，获得css代码。
74.具体而言，如图2所示，基于布局生成部分所获得的所述css代码的布局，以及样式推理部分所获得的所述css代码的样式，二者结合，获得符合页面要求的html代码和css代
码，最后生成页面。实现了由输入的web页面的截图自动生成html和css代码，且包括元素，布局，样式三部分内容。
75.在本实施例中，如图3所示，提供了一种计算机设备，包括存储器402、处理器404及存储在存储器402上并可在处理器404上运行的计算机程序，所述处理器404执行所述计算机程序时实现上述任意的一种基于web图片的前端代码自动生成方法。
76.具体的，该计算机设备可以是计算机终端、服务器或者类似的运算装置。
77.在本实施例中，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述任意的一种基于web图片的前端代码自动生成方法的计算机程序。
78.具体的，计算机可读存储介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机可读存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读存储介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
79.基于同一发明构思，本发明实施例中还提供了一种基于web图片的前端代码自动生成装置，如下面的实施例所述。由于一种基于web图片的前端代码自动生成装置解决问题的原理与一种基于web图片的前端代码自动生成方法相似，因此一种基于web图片的前端代码自动生成装置的实施可以参见一种基于web图片的前端代码自动生成方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
80.如图4所示，本发明实施例还提供了一种基于web图片的前端代码自动生成装置200，包括：元素识别模块201，用于识别web图片中的元素，获得元素信息；页面布局模块202，用于依据所述元素信息生成容器，获得页面布局信息，其中，所述页面布局信息包括css代码的布局；样式推理模块203，用于对所述元素信息进行样式推理，获得css代码的样式；代码生成模块204，用于将所述css代码的布局与所述css代码的样式结合，获得css代码。
81.本实施例中，所述元素识别模块201通过将所述web图片输入元素识别网络，所述元素识别网络输出所述元素信息。所述页面布局模块202中，对所述元素信息使用容器生成算法生成容器，并获得容器的位置信息以及容器与元素的嵌套关系；结合所述元素信息、所述容器的位置信息以及所述容器与元素的嵌套关系，生成html代码和css代码的布局。所述样式推理模块203中，通过将元素边缘像素的颜色作为所述元素和容器的背景颜色，并将每个所述元素的图片输入第一神经网络，所述第一神经网络输出所述元素中字体大小的值；将每个所述元素的图片输入第二神经网络，所述第二神经网络输出所述元素中边框圆角的值，获得所述css代码的样式。所述代码生成模块204将所述css代码的布局与所述css代码的样式结合，获得css代码。
82.以上所述，仅为本发明的具体实施例，不能以其限定发明实施的范围，所以其等同组件的置换，或依本发明专利保护范围所作的等同变化与修饰，都应仍属于本专利涵盖的范畴。另外，本发明中的技术特征与技术特征之间、技术特征与技术方案之间、技术方案与技术方案之间均可以自由组合使用。