CN112749364B - 基于人工智能的网页生成方法、装置、设备及存储介质 - Google Patents

Abstract

本申请实施例公开了一种基于人工智能的网页生成方法、装置、设备及存储介质，其中该方法包括：获取目标设计图，该目标设计图是针对待生成的目标网页设计的；通过预先训练的网页生成模型，根据该目标设计图生成目标网页；该网页生成模型用于确定目标设计图中的控件分块区域，提取控件分块区域的图像特征，结合控件分块区域的图像特征确定目标网页中的交互控件对应的HTML元素，根据交互控件对应的HTML元素生成目标网页。该方法既能够提高网页的开发效率，又能够保证所生成的网页具有较好的外观界面设计效果。

Description

基于人工智能的网页生成方法、装置、设备及存储介质

技术领域

本申请涉及人工智能(Artificial Intelligence，AI)技术领域，具体涉及一种网页生成方法、装置、设备及存储介质。

背景技术

随着互联网与信息技术的迅速发展，各类网页形式的活动和应用层出不穷。不同的网页活动和网页应用在功能开发上具有很多共性，而在网页的界面设计上会存在很大的区别，可见，网页界面的开发设计目前已成为网页开发过程中最为重要的关注点之一。

相关技术中，网页的开发设计目前主要由人工实现，即由相关工作人员基于网页界面设计图，编写程序配置设计网页界面中的各种交互控件；这种实现方式完全依赖于人工操作，开发效率较低，难以满足目前大规模的网页开发需求。此外，目前还有部分方案通过自动组合拼装已固化样式的功能模块来开发网页，这种方式虽然能够提高网页开发效率，但是基于此种方案生成的网页的界面较为单调，不利于网页在市场上的推广使用。

综上，如何兼顾保障网页的开发效率和网页的外观界面设计效果，已成为目前亟待解决的问题。

发明内容

本申请实施例提供了一种基于人工智能的网页生成方法、装置、设备及存储介质，既能够提高网页的开发效率，又能够保证所生成的网页具有较好的外观界面设计效果。

有鉴于此，本申请第一方面提供了一种基于人工智能的网页生成方法，所述方法包括：

获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述目标网页中的交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

本申请第二方面提供了一种基于人工智能的网页生成装置，所述装置包括：

设计图获取模块，用于获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

网页生成模块，用于通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中针对所述目标网页中的交互控件设计的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

本申请第三方面提供了一种电子设备，所述设备包括处理器以及存储器：

所述存储器用于存储计算机程序；

所述处理器用于根据所述计算机程序，执行如上述第一方面所述的基于人工智能的网页生成方法的步骤。

本申请第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储计算机程序，所述计算机程序用于执行上述第一方面所述的基于人工智能的网页生成方法的步骤。

本申请第五方面提供了一种包括指令的计算机程序产品，当其在计算机上运行时，使得所述计算机执行上述第一方面所述的基于人工智能的网页生成方法的步骤。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例提供了一种基于人工智能的网页生成方法，该方法另辟蹊径，利用预先训练好的网页生成模型，根据针对目标网页设计的目标设计图自动生成目标网页，使得网页的开发过程变得更加智能化。具体的，在本申请实施例提供的网页生成方法中，获取到针对待生成的目标网页设计的目标设计图后，将该目标设计图输入预先训练好的网页生成模型，该网页生成模型先确定该目标设计图中的控件分块区域，然后提取控件分块区域的图像特征，进而结合该图像特征确定目标网页中的交互控件对应的超文本标记语言(HyperText Markup Language，HTML)元素，最终根据交互控件对应的HTML元素生成目标网页并输出该目标网页。相比人工手动开发网页的实现方式，本申请实施例提供的方法依赖网页生成模型实现了网页开发的自动化，并且在生成目标网页的过程中不会直接调用已固化样式的功能模块，而是以针对目标网页设计的目标设计图为基础，开发设计目标网页中各交互控件，由此可以保证最终生成的目标网页的界面具有较强的设计感，即界面的外观设计效果较好，有利于目标网页的推广和使用。

附图说明

图1为本申请实施例提供的网页生成方法的应用场景示意图；

图2为本申请实施例提供的网页生成方法的流程示意图；

图3为本申请实施例提供的将目标设计图转换为像素点的示意图；

图4为本申请实施例提供的对词句进行验证的实现方式的示意图；

图5为本申请实施例提供的对词句中内容进行预测的实现方式的示意图；

图6为本申请实施例提供的卷积神经网络层的结构示意图；

图7为本申请实施例提供的验证目标网页的实现方式的示意图；

图8为本申请实施例提供的二叉树遍历验证目标网页中交互控件的实现方式的示意图；

图9为本申请实施例提供的网页生成方法的实现架构示意图；

图10为本申请实施例提供的一种网页生成装置的结构示意图；

图11为本申请实施例提供的另一种网页生成装置的结构示意图；

图12为本申请实施例提供的一种服务器的结构示意图；

图13为本申请实施例提供的一种终端设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

人工智能是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用***。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。

人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互***、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

随着人工智能技术研究和进步，人工智能技术在多个领域展开研究和应用，例如常见的智能家居、智能穿戴设备、虚拟助理、智能音箱、智能营销、无人驾驶、自动驾驶、无人机、机器人、智能医疗、智能客服等，相信随着技术的发展，人工智能技术将在更多的领域得到应用，并发挥越来越重要的价值。

机器学习(Machine Learning,ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。机器学习是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域。机器学习和深度学习通常包括人工神经网络、置信网络、强化学习、迁移学习、归纳学习、式教学习等技术。

本申请实施例提供的方案涉及人工智能的网页自动生成技术，具体通过如下实施例进行说明:

相关技术中，由人工手动开发网页的实现方式开发效率较低，难以满足如今大规模的网页开发需求。将固化样式的功能模块自动组合拼装生成网页的实现方式，虽然能够提高网页的开发效率，但是最终生成的网页的外观界面普遍比较单调，不利于网页的推广和使用。

针对上述相关技术存在的问题，本申请实施例提供了一种基于人工智能的网页生成方法，该方法既能够大幅度地提高网页的开发效率，又能够保证最终生成的网页具有显示效果较好的外观界面。

具体的，本申请实施例提供的网页生成方法包括：获取针对待生成的目标网页设计的目标设计图，通过预训练好的网页生成模型根据该目标设计图生成目标网页；该网页生成模型具体用于确定目标设计图中的控件分块区域，提取控件分块区域的图像特征，并结合该控件分块区域的图像特征确定目标网页中的交互控件对应的HTML元素，最终根据交互控件对应的HTML元素生成目标网页。

相比相关技术中人工手动开发网页的实现方式，本申请实施例提供的方法通过网页生成模型实现了网页开发的自动化，大幅度地提高了网页开发的效率。另外，相比相关技术中通过组合拼装已固化样式的功能模块来开发网页的实现方式，本申请实施例提供的方法在开发网页的过程中，始终以目标设计图为基础开发设计目标网页中各交互控件，由此保证最终生成的目标网页能够具有较强的设计感，即保证最终生成的目标网页的界面显示效果较好，有助于目标网页的推广和使用。

应理解，本申请实施例提供的基于人工智能的网页生成方法具体可以由能够支持神经网络模型运行的设备执行，如终端设备或服务器。终端设备具体可以为计算机、个人数字助理(Personal Digital Assistant，PDA)、平板电脑、智能手机等等。服务器具体可以为Web服务器，也可以为应用服务器，实际部署时，该服务器可以为独立服务器，也可以为集群服务器。

为了便于理解本申请实施例提供的技术方案，下面对本申请实施例提供的基于人工智能的网页生成方法所适用的应用场景进行示例性介绍。

参见图1，图1为本申请实施例提供的基于人工智能的网页生成方法的应用场景示意图。如图1所示，该应用场景中包括终端设备110和服务器120，其中，终端设备110用于向服务器120提供针对待生成的目标网页设计的目标设计图，服务器120中运行有预先训练好的网页生成模型，服务器120用于基于该网页生成模型执行本申请实施例提供的网页生成方法。

具体的，目标网页设计者可以通过终端设备110，设计适用于目标网页的目标设计图，并在设计完成目标设计图后，通过网络将该目标设计图传输至服务器120，以通过服务器120生成与该目标设计图相匹配的目标网页。

服务器120接收到终端设备110传来的目标设计图后，将该目标设计图输入到自身运行的网页生成模型121中，网页生成模型121先确定该目标设计图中的控件分块区域，然后提取所确定的控件分块区域的图像特征，进而结合该图像特征确定目标网页中的交互控件对应的HTML元素，最终根据交互控件对应的HTML元素生成目标网页，并输出该目标网页。服务器120获取到网页生成模型121输出的目标网页后，可以通过网络将该目标网页发送至终端设备110，以使目标网页设计者验证该目标网页是否满足自身预期的设计标准。

需要说明的是，本申请实施例中的目标网页可以包括任意以网页形式呈现的内容，例如，目标网页具体可以为网页应用，也可以为网页活动，本申请在此不对该目标网页做具体限定。

应理解，图1所示应用场景仅为示例，在实际应用中，还可以由终端设备110或服务器120独立执行本申请实施例提供的网页生成方法，根据针对目标网页设计的目标设计图生成目标网页，在此不对本申请实施例提供的网页生成方法适用的应用场景做任何限定。

下面通过实施例对本申请提供的基于人工智能的网页生成方法进行详细介绍。

参见图2，图2为本申请实施例提供的基于人工智能的网页生成方法的流程示意图。为了便于描述，下述实施例以服务器作为执行主体为例进行介绍。如图2所示，该网页生成方法包括以下步骤：

步骤201：获取目标设计图，所述目标设计图是针对待生成的目标网页设计的。

开发目标网页时，服务器需要获取针对该目标网页设计的目标设计图，以便后续调用预先训练好的网页生成模型基于该目标设计图开发目标网页。

需要说明的是，服务器所获取的目标设计图实质上是针对目标网页的显示界面创建的设计图，该目标设计图中可以包括目标网页界面中各个交互控件的显示样式、目标网页界面的背景图案、目标网页界面中的文字元素和插画元素等等，在此不对本申请实施例中的目标设计图做具体限定。

在一种可能的实现方式中，服务器可以从终端设备处获取目标设计图。具体的，用户可以通过终端设备设计目标网页的显示界面，完成目标设计图的绘制，进而操控终端设备通过网络将该目标设计图传输至服务器，以使服务器由此获取到目标设计图作为目标网页的制作基础。

在另一种可能的实现方式中，服务器可以从相关数据库中调取目标设计图。具体的，由于属于同一类别的网页的外观界面具有一定的相似性，因此，在实际应用中，可以预先将针对各类网页创建的设计图存储在数据库中，以便在开发某类网页时可以直接从数据库中调取相匹配的设计图；当服务器接收到目标网页的开发请求后，服务器可以先确定该目标网页所属的类别，进而再根据该目标网页所属的类别，相应地从数据库中调取与该类别匹配的设计图作为目标设计图，基于该目标设计图制作目标网页。

应理解，在实际应用中，服务器除了可以通过上述两种可能的实现方式获取目标设计图外，服务器也可以通过其他方式获取目标设计图，本申请在此不对服务器获取目标设计图的实现方式做任何限定。

需要说明的是，当本申请实施例的执行主体为终端设备时，终端设备可以直接获取用户通过自身运行的相关程序创建的目标设计图，也可以接收由其他终端设备传来的目标设计图，本申请在此不对终端设备获取目标设计图的实现方式也做任何限定。

步骤202：通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述目标网页中的交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

服务器获取到目标设计图后，即可将该目标设计图输入至预先训练好的网页生成模型，利用该网页生成模型对目标设计图进行相应地处理，进而获取该网页生成模型完成对于目标设计图的处理后输出的网页，作为目标网页。

具体的，服务器将目标设计图输入至预先训练好的网页生成模型后，网页生成模型会先确定该目标设计图中的各个控件分块区域，即逐一确定目标设计图中可能作为目标网页中的交互控件的分块区域，然后提取各个控件分块区域的图像特征，并针对每个控件分块区域相应地结合其图像特征确定与其对应的交互控件的HTML元素，最终，根据各个交互控件各自的HTML元素生成目标网页。

需要说明的是，上述网页生成模型是预先训练好的神经网络模型，该网页生成模型是基于有监督训练算法训练得到的。具体的，需要先获取大量已开发的网页及其各自对应的原始设计图作为训练样本，然后将原始设计图输入至预先搭建的神经网络模型中，利用该神经网络模型对输入的原始设计图进行相应地处理，输出与该原始设计图对应的预测网页，将神经网络模型输出的预测网页和训练样本中与该原始设计图对应的网页进行对比，基于该对比结果对神经网络模型的模型参数进行调整，如此通过上述方式，基于大量的训练样本对该神经网络模型进行反复迭代训练，不断地调整其模型参数，直至该神经网络模型满足训练结束条件为止。

为了便于理解上述网页生成模型的具体工作原理，下面对上述网页生成模型的工作原理进行详细介绍。

将目标设计图输入至网页生成模型中后，网页生成模型会先将该目标设计图转换为预设数目个像素点，如图3所示，网页生成模型将输入的目标设计图转换为预设数目个像素点，每个像素点对应的像素值可以由R(red)、G(green)和B(blue)三个色彩通道的值来表示，每个色彩通道的取值范围均在0至255之间。

应理解，上述预设数目可以根据网页生成模型的实际处理能力来确定，若网页生成模型的运算处理能力较强，则可以相应地将预设数目设置得较大；若网页生成模型的运算处理能力较弱，则可以相应地将预设数目设置得较小；本申请在此不对该预设数目做具体限定。

进而，网页生成模型可以根据预设数目个像素点各自对应的像素值，确定目标设计图中与目标网页中各个控件相对应的控件分块区域。具体的，网页生成模型可以从目标设计图中任选一个像素点作为目标像素点，从该目标像素点出发查找与其相邻的各个像素点，然后逐一判断每个相邻的像素点与该目标像素点之间的像素差异值是否在预设范围内，若是，则确定该相邻的像素点与该目标像素点属于同一个控件分块区域，若否，则确定该相邻的像素点与该目标像素点不属于同一个控件分块区域；进而再将确定属于同一个控件分块区域的相邻的像素点作为新的目标像素点，基于新的目标像素点执行上述操作，直至在目标设计图中不再能够查找到属于该控件分块区域的像素点为止，如此确定出一个控件分块区域。

应理解，在实际应用中，通过上述方式确定出的控件分块区域实质上可能并非与目标网页中的交互控件相对应的区域，其可能对应于目标网页中的背景区域；为了防止将背景区域误确定为与交互控件对应的区域，网页生成模型确定出控件分块区域后，可以进一步判断所确定出的控件分块区域的形状是否符合预设的交互控件形状，若是，则确定该控件分块区域有效，其是与目标网页中的交互控件对应的分块区域，若否，则确定该控件分块区域无效，其是与目标网页中的背景区域对应的区域。

如此，通过上述方式，遍历处理目标设计图中的各个像素点，由此确定出目标设计图中与目标网页中各个交互控件相对应的控件分块区域。

可选的，在目标设计图中包括词句的情况下，网页生成模型还可以通过以下方式识别目标设计图中的词句是否符合预设的语法规则，并在确定目标设计图中的词句不符合预设的语法规则的情况下，对该词句进行相应的纠正处理。

具体的，网页生成模型可以通过one-hot编码对词句中各个字符进行编码处理，从而得到各个字符各自对应的二进制特征向量；然后，根据各个字符在词句中的排列位置以及各个字符各自对应的二进制特征向量，判断该词句是否符合预设的语法规则；若确定符合，则保留该词句；若确定不符合，则按照预设规则调换词句中字符的排列位置，直至根据调换处理后各个字符的排列位置以及各个字符各自对应的二进制特征向量，确定调换处理后得到的词句符合预设的语法规则为止。

需要说明的是，上述词句可以由多个语言单元组成得到，此处的语言单元具体可以指词语中的每个字，也可以指语句中的每个词。网页生成模型对词句进行验证，实质上就是验证词语中各个字的部署位置是否符合语法规则，验证语句中每个词的部署位置是否符合语法规则。

应理解，上述词句具体可以是部署在目标设计图的背景区域中的词句，也可以是部署在目标设计图的控件分块区域中的词句，本申请在此不对所验证的词句的部署位置做任何限定。

下面以目标设计图中包括的词句为“I can code”为例，结合图4对上述验证方式进行示例性介绍。如图4所示，网页生成模型可以从词句前的start字符开始进行one-hot编码处理，得到start对应的编码如401所示，然后将start和I结合起来进行one-hot编码处理，得到start I对应的编码如402所示，然后将start、I和can结合起来进行one-hot编码处理，得到start I can对应的编码如403所示，然后将start、I、can和code结合起来进行one-hot编码处理，得到start I can code对应的编码如404所示，最终将start、I、can、code和词句后的end字符结合起来进行one-hot编码处理，得到start I can code end对应的编码如405所示。判断405所示的编码是否符合预设的语法规则，若符合则保留I can code，以便后续生成目标网页时使用，若不符合，可以对I、can和code的位置进行调换，例如调换为Icode can、can I code、can code I和code I can和code can I等等，进而再针对各调换处理后得到的词句进行上述判断处理，直至确定出符合预设规则的词句为止，保留该词句在后续生成目标网页时调用。

可选的，在一些情况下，该网页生成模型还可以根据词句中的部分内容和这部分内容对应的背景像素值，实现对于词句中其余部分内容的预测。如图5所示，预测函数f()中左半边为基于RGB三个色彩通道表示的像素值，该像素值对应于预测函数f()中右半边的词句内容，在仅已知存在start字符以及该start字符处对应的像素值的情况下，预测函数f()可以预测其下一个字符为I；在已知存在start字符和字符I，并且已知start字符和字符I处的像素值的情况下，预测函数f()可以预测其字符I的下一个字符为can；在已知存在start字符、字符I和字符can，并且已知start字符、字符I和字符can处的像素值的情况下，预测函数f()可以预测字符can的下一个字符为code；在已知存在start字符、字符I、字符can和字符code，并且已知start字符、字符I、字符can和字符code处的像素值的情况下，预测函数f()可以预测字符code的下一个字符为字符end。

如此，网页生成模型可以基于上述方式，在检测到目标设计图中包括的词句不完整的情况下，将不完整的词句相应地补充完整。

网页生成模型确定出目标设计图中与目标网页中各个交互控件对应的控件分块区域后，即可利用自身的卷积神经网络(Convolutional Neural Networks,CNN)分别对各控件分块区域进行图像特征提取处理，从而获得各个控件分块区域各自的图像特征。

需要说明的是，上述CNN可以是利用ImageNet上的数据训练得到的。另外，通常情况下CNN的最后一层均为分类层，而本申请实施例中的网页生成模型由于仅需提取图像特征，因此，其中部署的CNN不包括最后一层分类层，网页生成模型只需利用CNN中分类层的前一层来提取图像特征；如图6所示，为一种示例性的CNN的结构示意图。

网页生成模型针对各控件分块区域提取出图像特征后，即可通过以下方式结合每个控件分块区域的图像特征相应地确定与该控件分块区域对应的交互控件的HTML元素：网页生成模型可以根据控件分块区域的图像特征，确定与该控件分块区域对应的交互控件所属的控件类型，然后调取与该控件类型对应的HTML元素，进而将目标设计图中该控件分块区域内的相关信息写入该HTML元素中，从而生成该交互控件对应的HTML元素。

具体的，网页生成模型可以根据控件分块区域的图像特征，确定与该控件分块区域对应的交互控件具体属于哪类控件，例如，确定该交互控件属于按钮控件、选择控件、文本输入控件等等，在确定出该交互控件所属的控件类型后，网页生成模型可以调取其预存的与该控件类型相对应的HTML元素，进而，将目标设计图中该控件分块区域中的内容以及该控件分块区域的相关属性写入该HTML元素中，例如，可以将该控件分块区域在目标设计图中的分布位置相应地写入HTML元素，可以将该控件分块区域内的文字内容写入HTML元素中，可以将该控件分块区域的RGB色彩通道值写入HTML元素中，等等。

可选的，在生成交互控件的HTML元素的过程中，网页生成模型还可以从动画效果资源库中调取适用于交互控件的动画效果，并将该动画效果写入该交互控件的HTML元素中，从而为该交互控件添加相匹配的动画效果。

如此，通过以上方式，针对目标设计图中各控件分块区域，分别确定其各自对应的交互控件的HTML元素。

可选的，在根据各交互控件各自的HTML元素生成目标网页之前，网页生成模型还可以对目标网页的背景区域进行相应地处理，即网页生成模型还可以判断目标设计图的背景区域是否为空白区域，在确定该目标设计图的背景区域为空白区域的情况下，网页生成模型可以丢弃该目标设计图中的背景区域，直接基于空白网页部署各交互控件各自的HTML元素，从而生成目标网页。

具体的，网页生成模型可以根据目标设计图中背景区域部分的像素值，判断该目标设计图的背景区域是否为空白区域，若确定目标设计图中的背景区域为空白区域，则网页生成模型可以直接丢弃该目标设计图中的背景区域，根据各交互控件之间的逻辑关联关系，相应地在空白网页中部署各交互控件各自的HTML元素，以避免在目标网页中额外地加载目标设计图中的空白区域，浪费不必要的资源。若确定目标设计图中的背景区域并非空白区域，则网页生成模型可以在目标网页中相应地部署目标设计图中的背景区域，进而根据各交互控件之间的逻辑关联关系，相应地在该布置有背景画面的目标网页中部署各交互控件各自的HTML元素。

网页生成模型经上述过程对目标设计图进行相应地处理得到目标网页后，输出其生成的目标网页；服务器为了进一步保证目标网页的质量，可以利用浏览器虚拟运行该目标网页，以验证该目标网页是否满足预设标准。

具体的，服务器可以调用浏览器模拟运行该目标网页，确定该目标网页的界面相对于目标设计图的还原度，并且验证该目标网页中的交互控件的功能是否符合预设要求；在确定还原度高于预设阈值，且该目标网页中交互控件的功能均符合预设要求的情况下，服务器才确定该目标网页已满足预设标准，可以将其投入实际使用。

如图7所示，服务器可以调用浏览器puppeteer运行该目标网页，并且在该目标网页运行的过程中截取目标网页的显示界面，然后逐一确定该显示界面中各交互控件的显示样式与目标设计图中各控件分块区域的显示样式之间的相似度，基于各个交互控件与其对应的控件分块区域之间的相似度，确定该目标网页的显示界面相对于目标设计图的还原度。

需要说明的是，对于目标网页的显示界面中的文字内容，服务器可以基于光学字符识别技术(Optical Character Recognition，OCR)，确定其与目标设计图中的文字内容是否一致，并在确定目标网页的显示界面相对于目标设计图的还原度时，将文字内容的一致性考虑在其中。

服务器调用puppeteer运行目标网页时，puppeteer可以模拟触控目标网页中各交互控件，并获取该目标网页针对每次触控操作做出的响应效果，通过判断目标网页实际做出的响应效果与预期的响应效果是否一致，来验证目标网页中各交互控件的功能是否符合预设要求。

为了保证对目标网页中各交互控件的功能进行全面地验证，服务器可以采用二叉树的形式，根据各交互控件之间的逻辑关联关系，遍历模拟触控目标网页中各交互控件。下面以目标网页中包含3个交互控件为例，结合图8对puppeteer遍历模拟触控各交互控件的实现方式进行介绍。如图8所示，puppeteer可以第一步先单独模拟触控1号交互控件，第二步再单独模拟触控2号交互控件，第三步再单独模拟触控3号交互控件，第四步再模拟连续触控两次1号交互控件，第五步再模拟先后连续触控1号交互控件和2号交互控件，第六步再模拟先后连续触控3号交互控件和1号交互控件，第七步再模拟先后连续触控3号交互控件和2号交互控件，第八步再模拟连续触控三次1号交互控件，第九步再模拟先连续触控两次1号交互控件，再触控一次2号交互控件，第十步再模拟先后连续触控1号交互控件、2号交互控件和1号交互控件，第十一步再模拟先后连续触控3号交互控件、2号交互控件和1号交互控件，第十二步再模拟先触控3号交互控件，再连续触控两次2号交互控件。

相比相关技术中人工手动开发网页的实现方式，本申请实施例提供的网页生成方法通过网页生成模型实现了网页开发的自动化，大幅度地提高了网页开发的效率。另外，相比相关技术中通过组合拼装已固化样式的功能模块来开发网页的实现方式，本申请实施例提供的网页生成方法在开发网页的过程中，始终以目标设计图为基础开发设计目标网页中各交互控件，由此保证最终生成的目标网页能够具有较强的设计感，即保证最终生成的目标网页的界面显示效果较好，有助于目标网页的推广和使用。

为了便于进一步理解本申请实施例提供的基于人工智能的网页生成方法，下面结合图9所示的实现框架，对该网页生成方法做整体示例性介绍。

如图9所示，服务器获取到目标设计图后，将该目标设计图输入预先训练好的网页生成模型。网页生成模型先调用区域划分模块，确定该目标设计图中的背景区域以及其中与目标网页中的交互控件相对应的控件分块区域；然后调用卷积神经网络层针对每个控件分块区域相应地提取图像特征，从而得到各控件分块区域各自的图像特征；接着调用HTML元素生成模块，针对每个控件分块区域，相应地根据该控件分块区域的图像特征确定其对应的交互控件所属的控件类型，并获取该控件类型对应的HTML元素，将该控件分块区域的相关信息写入该HTML元素中，从而生成该控件分块区域对应的交互控件；最终，调用目标网页构建模块，根据各交互控件彼此之间的逻辑关联关系，基于各交互控件各自对应的HTML元素相应地在空白网页中部署各交互控件，并配置各交互控件的功能，从而生成目标网页。

服务器获取到网页生成模型输出的目标网页后，调用浏览器puppeteer模拟运行该目标网页，根据该目标网页的显示界面与目标设计图之间的还原度，以及目标网页中各交互控件针对模拟触控操作的响应效果，来验证该目标网页是否满足预设标准。

针对上文描述的人工智能的网页生成方法，本申请还提供了对应的人工智能的网页生成装置，以使上述人工智能的网页生成方法在实际中得以应用和实现。

参见图10，图10是与上文图2所示的人工智能的网页生成方法对应的一种人工智能的网页生成装置1000的结构示意图，该装置包括：

设计图获取模块1001，用于获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

网页生成模块1002，用于通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中针对所述目标网页中的交互控件设计的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

可选的，在图10所示的网页生成装置的基础上，当所述目标设计图中包括词句时，所述网页生成模型还用于：

通过one-hot编码对所述词句中各个字符进行编码处理，得到各个字符各自对应的特征向量；

根据所述各个字符在所述词句中的排列位置以及所述各个字符各自对应的特征向量，判断所述词句是否符合预设的语法规则；

若符合，则保留所述词句；若不符合，则按照预设规则调换所述语句中字符的排列位置，直至根据调换处理后各个字符的排列位置以及所述各个字符各自对应的特征向量，确定调换处理后得到的词句符合所述语法规则为止。

可选的，在图10所示的网页生成装置的基础上，所述网页生成模型通过以下方式确定所述目标设计图中与所述目标网页中的交互控件相对应的控件分块区域：

将所述目标设计图转换为预设数目个像素点；

根据所述预设数目个像素点各自对应的像素值，确定所述控件分块区域。

可选的，在图10所示的网页生成装置的基础上，所述网页生成模型通过以下方式结合所述图像特征确定所述交互控件对应的HTML元素：

根据所述图像特征确定所述交互控件所属的控件类型；

调取所述控件类型对应的HTML元素；

将所述目标设计图中针对所述交互控件设计的控件分块区域的相关信息写入所述HTML元素中，生成所述交互控件对应的HTML元素。

可选的，在图10所示的网页生成装置的基础上，所述网页生成模型还用于：

判断所述目标设计图的背景区域是否为空白区域；

在确定所述目标设计图的背景区域为空白区域的情况下，所述网页生成模型通过以下方式根据所述交互控件对应的HTML元素生成所述目标网页：

丢弃所述目标设计图中的背景区域；

根据所述交互控件对应的HTML元素生成所述目标网页。

可选的，在图10所示的网页生成装置的基础上，参见图11，图11为本申请实施例提供的另一种网络生成装置1100的结构示意图。如图11所示，该装置还包括：

模拟运行模块1101，用于调用浏览器模拟运行所述目标网页，确定所述目标网页的界面相对于所述目标设计图的还原度，并且验证所述目标网页中交互控件的功能是否符合预设要求；

网页验证模块1102，用于在确定所述还原度高于预设阈值，且所述目标网页中交互控件的功能符合预设要求的情况下，确定所述目标网页已满足预设标准。

可选的，在图11所示的网页生成装置的基础上，所述模拟运行模块1101具体用于：

在所述目标网页运行的过程中，截取所述目标网页的界面；

根据所述界面中交互控件的显示样式与所述目标设计图中控件分块区域的显示样式之间的相似度，确定所述还原度；

以及，模拟触控所述目标网页中的交互控件，获取所述目标网页针对该触控操作的响应效果；

判断所述响应效果与预期的响应效果是否一致。

相比相关技术中人工手动开发网页的实现方式，本申请实施例提供的网页生成装置通过网页生成模型实现了网页开发的自动化，大幅度地提高了网页开发的效率。另外，相比相关技术中通过组合拼装已固化样式的功能模块来开发网页的实现方式，本申请实施例提供的网页生成装置在开发网页的过程中，始终以目标设计图为基础开发设计目标网页中各交互控件，由此保证最终生成的目标网页能够具有较强的设计感，即保证最终生成的目标网页的界面显示效果较好，有助于目标网页的推广和使用。

本申请实施例还提供了一种用于基于人工智能技术生成网页的电子设备，该电子设备具体可以为服务器或终端设备，下面将从硬件实体化的角度对本申请实施例提供的服务器或终端设备进行介绍。

参见图12，图12是本申请实施例提供的一种服务器结构示意图，该服务器1200可因配置或性能不同而产生比较大的差异，可以包括一个或一个以***处理器(centralprocessing units，CPU)1222(例如，一个或一个以上处理器)和存储器1232，一个或一个以上存储应用程序1242或数据1244的存储介质1230(例如一个或一个以上海量存储设备)。其中，存储器1232和存储介质1230可以是短暂存储或持久存储。存储在存储介质1230的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器1222可以设置为与存储介质1230通信，在服务器1200上执行存储介质1230中的一系列指令操作。

服务器1200还可以包括一个或一个以上电源1226，一个或一个以上有线或无线网络接口1250，一个或一个以上输入输出接口1258，和/或，一个或一个以上操作***1241，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等等。

上述实施例中由服务器所执行的步骤可以基于该图12所示的服务器结构。

其中，CPU 1222用于执行如下步骤：

获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述目标网页中的交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

可选的，CPU 1222还可以用于执行本申请实施例中基于人工智能的网页生成方法的任意一种实现方式的步骤。

参见图13，图13为本申请实施例提供的一种终端设备的结构示意图。为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。该终端可以为包括计算机、平板电脑、个人数字助理(英文全称：Personal DigitalAssistant，英文缩写：PDA)等任意终端设备，以终端为计算机为例：

图13示出的是与本申请实施例提供的终端相关的计算机的部分结构的框图。参考图13，计算机包括：射频(英文全称：Radio Frequency，英文缩写：RF)电路1310、存储器1320、输入单元1330、显示单元1340、传感器1350、音频电路1360、无线保真(英文全称：wireless fidelity，英文缩写：WiFi)模块1370、处理器1380、以及电源1390等部件。本领域技术人员可以理解，图13中示出的计算机结构并不构成对计算机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储器1320可用于存储软件程序以及模块，处理器1380通过运行存储在存储器1320的软件程序以及模块，从而执行计算机的各种功能应用以及数据处理。存储器1320可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据计算机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器1320可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器1380是计算机的控制中心，利用各种接口和线路连接整个计算机的各个部分，通过运行或执行存储在存储器1320内的软件程序和/或模块，以及调用存储在存储器1320内的数据，执行计算机的各种功能和处理数据。可选的，处理器1380可包括一个或多个处理单元；优选的，处理器1380可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作***、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1380中。

在本申请实施例中，该终端所包括的处理器1380还具有以下功能：

获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述目标网页中的交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页。

可选的，所述处理器1380还用于执行本申请实施例提供的基于人工智能的网页生成方法的任意一种实现方式的步骤。

本申请实施例还提供一种计算机可读存储介质，用于存储计算机程序，该计算机程序用于执行前述各个实施例所述的一种基于人工智能的网页生成方法中的任意一种实施方式。

本申请实施例还提供一种包括指令的计算机程序产品，当其在计算机上运行时，使得计算机执行前述各个实施例所述的一种基于人工智能的网页生成方法中的任意一种实施方式。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的***，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文全称：Read-OnlyMemory，英文缩写：ROM)、随机存取存储器(英文全称：Random Access Memory，英文缩写：RAM)、磁碟或者光盘等各种可以存储计算机程序的介质。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (9)

1.一种基于人工智能的网页生成方法，其特征在于，所述方法包括：

获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述目标网页中的交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页；

所述网页生成模型通过以下方式结合所述图像特征确定所述交互控件对应的HTML元素：

根据所述图像特征确定所述交互控件所属的控件类型；

调取所述控件类型对应的HTML元素；

将所述目标设计图中针对所述交互控件设计的控件分块区域的相关信息写入所述HTML元素中，生成所述交互控件对应的HTML元素；

所述根据所述交互控件对应的HTML元素生成所述目标网页包括：调用目标网页构建模块，根据各交互控件之间的逻辑关联关系，基于各交互控件各自对应的HTML元素相应地在空白网页中部署各交互控件，并配置各交互控件的功能，生成所述目标网页。

2.根据权利要求1所述的方法，其特征在于，当所述目标设计图中包括词句时，所述网页生成模型还用于：

通过one-hot编码对所述词句中各个字符进行编码处理，得到各个字符各自对应的特征向量；

根据所述各个字符在所述词句中的排列位置以及所述各个字符各自对应的特征向量，判断所述词句是否符合预设的语法规则；

若符合，则保留所述词句；若不符合，则按照预设规则调换所述词句中字符的排列位置，直至根据调换处理后各个字符的排列位置以及所述各个字符各自对应的特征向量，确定调换处理后得到的词句符合所述语法规则为止。

3.根据权利要求1所述的方法，其特征在于，所述网页生成模型通过以下方式确定所述目标设计图中与所述目标网页中的交互控件相对应的控件分块区域：

将所述目标设计图转换为预设数目个像素点；

根据所述预设数目个像素点各自对应的像素值，确定所述控件分块区域。

4.根据权利要求1所述的方法，其特征在于，所述网页生成模型还用于：

判断所述目标设计图的背景区域是否为空白区域；

在确定所述目标设计图的背景区域为空白区域的情况下，所述网页生成模型通过以下方式根据所述交互控件对应的HTML元素生成所述目标网页：

丢弃所述目标设计图中的背景区域；

根据所述交互控件对应的HTML元素生成所述目标网页。

5.根据权利要求1所述的方法，其特征在于，在所述通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页之后，所述方法还包括：

调用浏览器模拟运行所述目标网页，确定所述目标网页的界面相对于所述目标设计图的还原度，并且验证所述目标网页中交互控件的功能是否符合预设要求；

在确定所述还原度高于预设阈值，且所述目标网页中交互控件的功能符合预设要求的情况下，确定所述目标网页已满足预设标准。

6.根据权利要求5所述的方法，其特征在于，所述确定所述目标网页的界面相对于所述目标设计图的还原度，包括：

在所述目标网页运行的过程中，截取所述目标网页的界面；

根据所述界面中交互控件的显示样式与所述目标设计图中控件分块区域的显示样式之间的相似度，确定所述还原度；

所述验证所述目标网页中交互控件的功能是否符合预设要求，包括：

模拟触控所述目标网页中的交互控件，获取所述目标网页针对该触控操作的响应效果；

判断所述响应效果与预期的响应效果是否一致。

7.一种基于人工智能的网页生成装置，其特征在于，所述装置包括：

设计图获取模块，用于获取目标设计图，所述目标设计图是针对待生成的目标网页设计的；

网页生成模块，用于通过预先训练的网页生成模型，根据所述目标设计图生成所述目标网页；所述网页生成模型用于确定所述目标设计图中针对所述目标网页中的交互控件设计的控件分块区域，提取所述控件分块区域的图像特征，结合所述图像特征确定所述交互控件对应的HTML元素，根据所述交互控件对应的HTML元素生成所述目标网页；

所述网页生成模型通过以下方式结合所述图像特征确定所述交互控件对应的HTML元素：

根据所述图像特征确定所述交互控件所属的控件类型；

调取所述控件类型对应的HTML元素；

将所述目标设计图中针对所述交互控件设计的控件分块区域的相关信息写入所述HTML元素中，生成所述交互控件对应的HTML元素；

所述根据所述交互控件对应的HTML元素生成所述目标网页包括：调用目标网页构建模块，根据各交互控件之间的逻辑关联关系，基于各交互控件各自对应的HTML元素相应地在空白网页中部署各交互控件，并配置各交互控件的功能，生成所述目标网页。

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

所述存储器用于存储计算机程序；

所述处理器用于根据所述计算机程序执行权利要求1至6任一项所述的基于人工智能的网页生成方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储计算机程序，所述计算机程序用于执行权利要求1至6任一项所述的基于人工智能的网页生成方法。