基于设计界面截图的前端代码自动化生成方法及系统

1.本发明涉及计算机技术领域，具体地，涉及一种基于设计界面截图的前端代码自动化生成方法及系统。


背景技术：

2.随着计算机语言的不断发展，深度学习模型也被广泛的应用到代码生成。二代码的自动生成能很大程度的上给程序员带来便利，减少公司的用人成本，同时代码自动生成也是软件智能化的重要技术手段。
3.文献beltramelli t.pix2code:generating code from a graphical user interface screenshot[c]//proceedings of the acm sigchi sympos ium on engineering interactive computing systems.2018:1-6.公开了一种通过深度学习模型生成代码，该深度学习模型使用cnn网络和lstm网络来分别进行特征提取和解码，但是该深度学校模型过于简陋，代码生成能力还有提高空间，其次使用的数据集过于简单无法满足一些较为复杂的设计界面的代码生成。
[0004]
现有技术中imgcook是通过sketch或者psd文件作为输入来生成前端代码，但是该输入设计界面复杂，并且其工具使用的门槛相对较高。以及sketch2code能够实现一些简单界面的代码生成任务，但该项目无法根据不同的需求来对数据集进行修改，拓展性较差。
[0005]
因此，市场上亟需一种能够从设计界面截图直接到对应描述语言的生成描述文本，同时保证准确度的基于设计界面截图的前端代码自动化生成方法及系统。


技术实现要素：

[0006]
针对现有技术中的缺陷，本发明的目的是提供一种基于设计界面截图的前端代码自动化生成方法及系统。
[0007]
根据本发明提供的一种基于设计界面截图的前端代码自动化生成方法，包括：
[0008]
步骤s1：获取设计界面截图；
[0009]
步骤s2：构建用于描述前端设计界面的领域特定语言映射表；
[0010]
步骤s3：根据所述领域特定语言映射表生成图像-描述本文数据集；
[0011]
步骤s4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型；
[0012]
步骤s5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。
[0013]
优选地，步骤s2包括如下子步骤：
[0014]
步骤s2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述；
[0015]
步骤s2.2：通过前端语言构建初步描述后的界面组件；
[0016]
步骤s2.3：调整所述初步描述后的界面组件对应的图像特征；
[0017]
步骤s2.4：建立领域特定语言中各界面组件描述文本与对应前端代码的映射关系，得到领域特定语言映射表。
[0018]
优选地，步骤s3包括如下子步骤：
[0019]
步骤s3.1：利用描述文本生成器生成描述文本实例；
[0020]
步骤s3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例编译成对应的html代码文件；
[0021]
步骤s3.3：将所述html代码文件转化为对应的设计界面截图，得到图像和描述文本的数据对；
[0022]
重复执行步骤s3.1至步骤s3.3，进而生成图像-描述本文数据集。
[0023]
优选地，所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。
[0024]
优选地，步骤s5包括如下子步骤：
[0025]
步骤s5.1：加载训练好的深度学习模型所对应的参数；
[0026]
步骤s5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素；
[0027]
步骤s5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则执行步骤s5.4；
[0028]
步骤s5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回步骤s5.2。
[0029]
根据本发明提供的一种基于设计界面截图的前端代码自动化生成系统，包括：
[0030]
模块m1：获取设计界面截图；
[0031]
模块m2：构建用于描述前端设计界面的领域特定语言映射表；
[0032]
模块m3：根据所述领域特定语言映射表生成图像-描述本文数据集；
[0033]
模块m4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型；
[0034]
模块m5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。
[0035]
优选地，模块m2包括如下子模块：
[0036]
模块m2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述；
[0037]
模块m2.2：通过前端语言构建初步描述后的界面组件；
[0038]
模块m2.3：调整所述初步描述后的界面组件对应的图像特征；
[0039]
模块m2.4：建立领域特定语言中各界面组件描述文本与对应前端代码的映射关系，得到领域特定语言映射表。
[0040]
优选地，模块m3包括如下子模块：
[0041]
模块m3.1：利用描述文本生成器生成描述文本实例；
[0042]
模块m3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例
编译成对应的html代码文件；
[0043]
模块m3.3：将所述html代码文件转化为对应的设计界面截图，得到图像和描述文本的数据对；
[0044]
重复触发模块m3.1至模块m3.3，进而生成图像-描述本文数据集。
[0045]
优选地，所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。
[0046]
优选地，模块m5包括如下子模块：
[0047]
模块m5.1：加载训练好的深度学习模型所对应的参数；
[0048]
模块m5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素；
[0049]
模块m5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则触发模块m5.4；
[0050]
模块m5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回模块m5.2。
[0051]
与现有技术相比，本发明具有如下的有益效果：
[0052]
1、本发明通过设计数据集生成算法和领域特定语言设计方法，解决了设计界面截图生成代码任务中数据集不足以及数据集不匹配的问题，能够根据不同的需求来生成对应的数据集。
[0053]
2、本发明通过利用类被激活图像方法，解决了数据集设计和生成过程中因组件图像特征差而导致模型训练效果差的问题。
[0054]
3、本发明通过基于transformer的文本特征编码器和bilstm解码器，提高了模型效果，提高了对设计界面截图生成描述文本的准确度。
[0055]
4、本发明从设计界面截图到对应描述语言的生成，简化了软件开发中代码实现的难度，减少了前端开发人员所需要耗费的成本。
附图说明
[0056]
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
[0057]
图1为本发明中深度学习模型工作流程示意图。
[0058]
图2为本发明中构建领域特定语言流程示意图。
[0059]
图3为本发明中图像-描述文本数据集生成流程示意图。
[0060]
图4为本发明中模型推理过程流程示意图。
具体实施方式
[0061]
下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明
的保护范围。
[0062]
根据本发明提供的一种基于设计界面截图的前端代码自动化生成方法，如图1至图4所示，包括：
[0063]
步骤s1：获取设计界面截图。
[0064]
步骤s2：构建用于描述前端设计界面的领域特定语言映射表。步骤s2包括如下子步骤：
[0065]
步骤s2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述，也就是说，用简要的描述文本来描述所述界面组件，其中简要的描述文本例如search、text、switch等。
[0066]
步骤s2.2：通过前端语言构建初步描述后的界面组件。前端语言包括html和css前端语言，也就是说，通过html和css前端语言大致实现所设计的组件。
[0067]
步骤s2.3：调整所述初步描述后的界面组件对应的图像特征。调整方法包括利用类别激活图像方法来调整实现组件的图像特征。通过类被激活图像可以确定输入图像各个区域对最终模型输出所造成的影响程度，通过所确定的影响程度选择对最终输出影响程度小的区域中相应的组件，也即这些组件的图像特征较差，然后对图像特征较差的组件进行前端代码上的调整且保留其他图像特征较好的组件，也就是说，通过利用类被激活图像保留一些图像特征较好的组件且筛选出一些较差组件来进行前端代码的调整，而各界面组件获得较好的图像特征后就达到了数据集优化的效果，进而提高模型的后续训练效果。
[0068]
步骤s2.4：建立领域特定语言中元素与对应前端代码的映射关系，得到领域特定语言映射表。
[0069]
步骤s3：根据所述领域特定语言映射表生成图像-描述本文数据集。其中，描述文本是由该领域特定语言下描述对应界面的文本文件。步骤s3包括如下子步骤：步骤s3.1：利用描述文本生成器生成描述文本实例。步骤s3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例编译成对应的html代码文件。步骤s3.3：将所述html代码文件转化为对应的设计界面截图并保存，得到图像和描述文本的数据对，转化的方法包括通过模拟浏览器方法。重复执行步骤s3.1至步骤s3.3，进而生成图像-描述本文数据集。该图像-描述文本数据集生成方法能够根据不同的需求来生成对应的数据集，具体可拓展性。
[0070]
步骤s4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型。所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。使用transformer和bilstm等更加优秀的特征提取网络和解码器，能够有效地提高深度学习模型的预测能力。transformer相较于原本模型中的lstm网络能够通过多头自注意力机制来计算出序列中各元素之间的互相影响程度，进而确定不同元素在序列中所占的权重可以帮助网络来提取更多有效的特征，且忽略一些无效的特征；bilstm网络相比原有的lstm解码器，不仅能处理长序列的前文信息，也能处理长序列的后文信息，可以更好的帮助模型来处理本任务中的界面描述文本文件数据。
[0071]
步骤s5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。步骤s5包括如下子步骤：
[0072]
步骤s5.1：加载训练好的深度学习模型所对应的参数。
[0073]
步骤s5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素。
[0074]
步骤s5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则执行步骤s5.4。
[0075]
步骤s5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回步骤s5.2。
[0076]
本发明能够根据不同需求来生成对应的图像-描述文本数据集，并且通过该数据集来对相应的深度学习模型进行训练，最后通过一张简化版的设计界面截图作为项目的输入即可得到对应的界面描述文本，该描述文本可以帮助前端开发人员来进行后续的开发工作，且不需要非常复杂的输入，使用门槛较低，同时训练出更加贴合需求的深度学习模型。
[0077]
进一步地，在应用中首先根据软件设计界面的需求文档来设计一些组件相应的描述文本，然后用本发明中的数据集生成方法来生成图像-描述文本数据集，也就是说，通过步骤s1至步骤s3生成图像-描述文本数据集，再用该数据集来对本发明步骤s4中所构建的深度学习模型进行训练，训练完成就得到了对应的深度学习模型。
[0078]
设计师在根据需求文档设计出最终的设计界面前会首先设计简化版的界面，该界面仅仅包含一些基本信息例如界面包含的组件个数、种类和布局等，而不包含实际界面中样式、风格等复杂信息。我们将设计师设计的简化版界面截图作为模型输入，就可以得到对应的描述文本，也就有效的提取出了最终界面所包含的这些基本信息，后续前端开发人员可以利用改描述文本来辅助后续实际界面的开发工作。
[0079]
实施例二
[0080]
本发明还提供了一种基于设计界面截图的前端代码自动化生成系统，本领域技术人员可以通过执行所述基于设计界面截图的前端代码自动化生成方法的步骤流程实现所述基于设计界面截图的前端代码自动化生成系统，即可以将所述基于设计界面截图的前端代码自动化生成方法理解为所述基于设计界面截图的前端代码自动化生成系统的优选实施方式。
[0081]
根据本发明提供的一种基于设计界面截图的前端代码自动化生成系统，包括：
[0082]
模块m1：获取设计界面截图。
[0083]
模块m2：构建用于描述前端设计界面的领域特定语言映射表。模块m2包括如下子模块：模块m2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述。模块m2.2：通过前端语言构建初步描述后的界面组件。模块m2.3：调整所述初步描述后的界面组件对应的图像特征。模块m2.4：建立领域特定语言中元素与对应前端代码的映射关系，得到领域特定语言映射表。
[0084]
模块m3：根据所述领域特定语言映射表生成图像-描述本文数据集。模块m3包括如下子模块：模块m3.1：利用描述文本生成器生成描述文本实例。模块m3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例编译成对应的html代码文件。模块m3.3：将所述html代码文件转化为对应的设计界面截图，得到图像和描述文本的数据对。重复触发模块m3.1至模块m3.3，进而生成图像-描述本文数据集。
[0085]
模块m4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型。所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。
[0086]
模块m5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。模块m5包括如下子模块：模块m5.1：加载训练好的深度学习模型所对应的参数。模块m5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素。模块m5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则触发模块m5.4。模块m5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回模块m5.2。
[0087]
本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统、装置及其各个模块以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统、装置及其各个模块以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同程序。所以，本发明提供的系统、装置及其各个模块可以被认为是一种硬件部件，而对其内包括的用于实现各种程序的模块也可以视为硬件部件内的结构；也可以将用于实现各种功能的模块视为既可以是实现方法的软件程序又可以是硬件部件内的结构。
[0088]
以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本技术的实施例和实施例中的特征可以任意相互组合。

技术特征：
1.一种基于设计界面截图的前端代码自动化生成方法，其特征在于，包括：步骤s1：获取设计界面截图；步骤s2：构建用于描述前端设计界面的领域特定语言映射表；步骤s3：根据所述领域特定语言映射表生成图像-描述本文数据集；步骤s4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型；步骤s5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。2.根据权利要求1所述的基于设计界面截图的前端代码自动化生成方法，其特征在于，步骤s2包括如下子步骤：步骤s2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述；步骤s2.2：通过前端语言构建初步描述后的界面组件；步骤s2.3：调整所述初步描述后的界面组件对应的图像特征；步骤s2.4：建立领域特定语言中各界面组件描述文本与对应前端代码的映射关系，得到领域特定语言映射表。3.根据权利要求1所述的基于设计界面截图的前端代码自动化生成方法，其特征在于，步骤s3包括如下子步骤：步骤s3.1：利用描述文本生成器生成描述文本实例；步骤s3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例编译成对应的html代码文件；步骤s3.3：将所述html代码文件转化为对应的设计界面截图，得到图像和描述文本的数据对；重复执行步骤s3.1至步骤s3.3，进而生成图像-描述本文数据集。4.根据权利要求1所述的基于设计界面截图的前端代码自动化生成方法，其特征在于，所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。5.根据权利要求4所述的基于设计界面截图的前端代码自动化生成方法，其特征在于，步骤s5包括如下子步骤：步骤s5.1：加载训练好的深度学习模型所对应的参数；步骤s5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素；步骤s5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则执行步骤s5.4；步骤s5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回步骤s5.2。6.一种基于设计界面截图的前端代码自动化生成系统，其特征在于，包括：模块m1：获取设计界面截图；
模块m2：构建用于描述前端设计界面的领域特定语言映射表；模块m3：根据所述领域特定语言映射表生成图像-描述本文数据集；模块m4：构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型；模块m5：将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。7.根据权利要求6所述的基于设计界面截图的前端代码自动化生成系统，其特征在于，模块m2包括如下子模块：模块m2.1：根据需求文档确定设计界面中所包含的界面组件，并对所述界面组件进行初步描述；模块m2.2：通过前端语言构建初步描述后的界面组件；模块m2.3：调整所述初步描述后的界面组件对应的图像特征；模块m2.4：建立领域特定语言中各界面组件描述文本与对应前端代码的映射关系，得到领域特定语言映射表。8.根据权利要求6所述的基于设计界面截图的前端代码自动化生成系统，其特征在于，模块m3包括如下子模块：模块m3.1：利用描述文本生成器生成描述文本实例；模块m3.2：根据领域特定语言映射表，通过描述文本编译器将所述描述文本实例编译成对应的html代码文件；模块m3.3：将所述html代码文件转化为对应的设计界面截图，得到图像和描述文本的数据对；重复触发模块m3.1至模块m3.3，进而生成图像-描述本文数据集。9.根据权利要求6所述的基于设计界面截图的前端代码自动化生成系统，其特征在于，所述深度学习模型中的编码器通过cnn网络提取设计界面截图中的图像特征，通过transformer网络提取描述文本中的文本特征，然后通过bilstm网络对所述图像特征和所述文本特征进行解码，最后通过softmax层来输出预测得到的元素。10.根据权利要求9所述的基于设计界面截图的前端代码自动化生成系统，其特征在于，模块m5包括如下子模块：模块m5.1：加载训练好的深度学习模型所对应的参数；模块m5.2：将对应的设计界面截图和当前只包含开始标志的描述文本文件，输入所述训练好的深度学习模型中进行推理，得到相应的元素；模块m5.3：判断当前深度学习模型输出结果是否为结束标志或者输出累积的元素数量超过阈值，若是，则推理结束得到最终设计界面截图对应的描述文本文件；若否，则触发模块m5.4；模块m5.4：将当前元素输入至所述当前只包含开始标志的描述文本文件中，得到更新后的只包含开始标志的描述文本文件，返回模块m5.2。

技术总结
本发明提供了一种基于设计界面截图的前端代码自动化生成方法及系统，包括获取设计界面截图；构建用于描述前端设计界面的领域特定语言；根据所述领域特定语言生成图像-描述本文数据集；构建深度学习模型，并以所述图像-描述本文数据集作为输入，训练所述深度学习模型；将所述设计界面截图输入至训练好的深度学习模型中，生成对应的描述文本。本发明从设计界面截图到对应描述语言的生成，简化了软件开发中代码实现的难度，减少了前端开发人员所需要耗费的成本。要耗费的成本。要耗费的成本。


技术研发人员：乐心怡 贺显逸 陈彩莲 关新平
受保护的技术使用者：上海交通大学
技术研发日：2023.07.04
技术公布日：2023/10/8