代码生成方法、装置、电子设备及可读存储介质

摘要

本发明提供一种代码生成方法、装置、电子设备及可读存储介质，其中方法包括：获取目标前端网页的网页截图及网页截图对应的网页源代码；基于带有注意力机制的卷积神经网络视觉模型，提取网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取网页源代码的第二特征；融合第一特征和第二特征，获取融合特征；基于融合特征以及解码模型，生成目标前端网页的代码。本发明通过在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征并融合，能够仅通过对强相关性的部分词汇和图像局部区域的重点计算，即实现代码的准确有效预测，从而能有效降低运算量并有效提高运算效率和准确性。

权利要求

1.一种代码生成方法，其特征在于，包括：

获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；

基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；

融合所述第一特征和所述第二特征，获取融合特征；

基于所述融合特征以及解码模型，生成所述目标前端网页的代码；

所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型；

相应的，所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，包括：基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；

基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

2.根据权利要求1所述的代码生成方法，其特征在于，还包括训练所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型以及所述解码模型的步骤：获取训练样本，并将所述训练样本对应的真实值代码作为所述训练样本的标签标注所述训练样本，所述训练样本包括网页截图样本以及与所述网页截图样本关联的网页源代码样本；

分别在初始卷积神经网络视觉模型和初始语言处理网络模型中加入注意力机制模型，获取初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型；

将所述网页截图样本输入所述初始带有注意力机制的卷积神经网络视觉模型，并将所述网页源代码样本输入所述初始带有注意力机制的语言处理网络模型，以基于初始解码模型预测前端网页代码；

比对预测的前端网页代码与所述真实值代码，并基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，直至训练完成，获取所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

3.根据权利要求2所述的代码生成方法，其特征在于，所述获取训练样本，包括：通过对标准训练数据库中的原始数据进行平移、旋转或放缩，获取第一训练样本集；

获取给定前端网页的多张网页截图，并基于所述多张网页截图的代码逻辑，从所述多张网页截图中筛选出目标网页截图；

获取与所述目标网页截图对应的网页源代码，并基于所述目标网页截图和所述目标网页截图对应的网页源代码，获取第二训练样本集；

合并所述第一训练样本集和所述第二训练样本集，获取样本合集，并以所述样本合集中的数据作为所述训练样本。

4.根据权利要求2所述的代码生成方法，其特征在于，所述带有注意力机制的语言处理网络模型为带有注意力机制的长短期记忆模型；

相应的，通过循环训练，获取所述带有注意力机制的长短期记忆模型，包括：获取初始带有注意力机制的长短期记忆模型中编码器对所述网页源代码样本的中间输出结果；

利用注意力机制模型对所述中间输出结果进行选择性的学习，并关联所述注意力机制模型的输出权重序列与所述中间输出结果，循环训练所述注意力机制模型，直至训练完成，获取所述带有注意力机制的长短期记忆模型。

5.根据权利要求2所述的代码生成方法，其特征在于，所述初始解码模型采用交叉熵作为损失函数，所述基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，包括：将利用所述初始带有注意力机制的卷积神经网络视觉模型提取的图像特征向量与利用所述初始带有注意力机制的语言处理网络模型提取的语言序列压缩编码向量进行拼接融合，获取融合样本特征；

由所述循环训练的第一轮训练开始，基于所述融合样本特征，利用本轮训练的解码模型进行预测计算，获取预测的代码；

基于所述交叉熵，调用自然语言处理工具包NLTK的corpus_bleu()函数，并基于所述corpus_bleu()函数，比对所述预测的代码与所述真实值代码，确定预测的偏差；

基于所述预测的偏差，更新本轮训练的解码模型的参数，并转入下一轮训练，直至所述循环训练完成。

6.根据权利要求1至5中任一项所述的代码生成方法，其特征在于，在所述生成所述目标前端网页的代码之后，还包括：对所述代码进行编译，生成前端网页，并在浏览器中展示所述前端网页。

7.一种代码生成装置，其特征在于，包括：

数据获取模块，用于获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；

特征提取模块，用于基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；

特征融合模块，用于融合所述第一特征和所述第二特征，获取融合特征；

代码生成模块，用于基于所述融合特征以及解码模型，生成所述目标前端网页的代码：所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型；

相应的，所述特征提取模块在用于所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征时，用于：基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；

基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序或指令，其特征在于，所述处理器执行所述程序或指令时，实现如权利要求1至6中任一项所述的代码生成方法的步骤。

9.一种非暂态计算机可读存储介质，其上存储有程序或指令，其特征在于，所述程序或指令被计算机执行时，实现如权利要求1至6中任一项所述的代码生成方法的步骤。

说明书

代码生成方法、装置、电子设备及可读存储介质

技术领域

[0001] 本发明涉及计算机技术领域，尤其涉及一种代码生成方法、装置、电子设备及可读存储介质。

背景技术

[0002] 随着互联网数字化技术的发展，自动化前端技术的开发越来越多的受到人们的关注。自动化前端技术中有个被称为超文本标记语言(Hyper Text Markup Language,HTML)的概念，其是一种标记语言，包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML代码组成的描述性文本，它通过超级链接方式将文本中的文字、图表与其他信息媒体相关联。

[0003] 当前自动化前端技术开发的瓶颈是计算能力，目前利用深度学习技术及合成训练数据探索智能化构建前端技术可以解决上述问题。利用前端页面原型生成对应代码可以极大的缓解前端人员的开发压力，极大简化设计工作流程。

[0004] 但是，目前在利用深度学习技术进行前端技术开发时，多在网页截图全局和网页源代码全局基础上进行同等运算，运算量大，造成运算效率较低。

发明内容

[0005] 本发明提供一种代码生成方法、装置、电子设备及可读存储介质，用以解决现有技术运算效率低等问题的缺陷，实现有效提高运算效率的目标。

[0006] 本发明提供一种代码生成方法，包括：

[0007] 获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；

[0008] 基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；

[0009] 融合所述第一特征和所述第二特征，获取融合特征；

[0010] 基于所述融合特征以及解码模型，生成所述目标前端网页的代码。

[0011] 根据本发明一个实施例的代码生成方法，还包括训练所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型以及所述解码模型的步骤：

[0012] 获取训练样本，并将所述训练样本对应的真实值代码作为所述训练样本的标签标注所述训练样本，所述训练样本包括网页截图样本以及与所述网页截图样本关联的网页源代码样本；

[0013] 分别在初始卷积神经网络视觉模型和初始语言处理网络模型中加入注意力机制模型，获取初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型；

[0014] 将所述网页截图样本输入所述初始带有注意力机制的卷积神经网络视觉模型，并将所述网页源代码样本输入所述初始带有注意力机制的语言处理网络模型，以基于所述初始解码模型预测前端网页代码；

[0015] 比对预测的前端网页代码与所述真实值代码，并基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，直至训练完成，获取所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

[0016] 根据本发明一个实施例的代码生成方法，所述获取训练样本，包括：

[0017] 通过对所述标准训练数据库中的原始数据进行平移、旋转或放缩，获取第一训练样本集；

[0018] 获取给定前端网页的多张网页截图，并基于所述多张网页截图的代码逻辑，从所述多张网页截图中筛选出目标网页截图；

[0019] 获取与所述目标网页截图对应的网页源代码，并基于所述目标网页截图和所述目标网页截图对应的网页源代码，获取第二训练样本集；

[0020] 合并所述第一训练样本集和所述第二训练样本集，获取样本合集，并以所述样本合集中的数据作为所述训练样本。

[0021] 根据本发明一个实施例的代码生成方法，所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型；

[0022] 相应的，所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，包括：

[0023] 基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；

[0024] 基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

[0025] 根据本发明一个实施例的代码生成方法，所述带有注意力机制的语言处理网络模型为带有注意力机制的长短期记忆模型；

[0026] 相应的，通过循环训练，获取所述带有注意力机制的长短期记忆模型，包括：

[0027] 获取初始带有注意力机制的长短期记忆模型中编码器对所述网页源代码样本的中间输出结果；

[0028] 利用注意力机制模型对所述中间输出结果进行选择性的学习，并关联所述注意力机制模型的输出权重序列与所述中间输出结果，循环训练所述注意力机制模型，直至训练完成，获取所述带有注意力机制的长短期记忆模型。

[0029] 根据本发明一个实施例的代码生成方法，所述初始解码模型采用交叉熵作为损失函数，所述基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，包括：

[0030] 将利用所述初始带有注意力机制的卷积神经网络视觉模型提取的图像特征向量与利用所述初始带有注意力机制的语言处理网络模型提取的语言序列压缩编码向量进行拼接融合，获取融合样本特征；

[0031] 由所述循环训练的第一轮训练开始，基于所述融合样本特征，利用本轮训练的解码模型进行预测计算，获取预测的代码；

[0032] 基于所述交叉熵，调用自然语言处理工具包NLTK的corpus_bleu()函数，并基于所述corpus_bleu()函数，比对所述预测的代码与所述真实值代码，确定预测的偏差；

[0033] 基于所述预测的偏差，更新本轮训练的解码模型的参数，并转入下一轮训练，直至所述循环训练完成。

[0034] 根据本发明一个实施例的代码生成方法，在所述生成所述目标前端网页的代码之后，还包括：

[0035] 对所述代码进行编译，生成前端网页，并在浏览器中展示所述前端网页。

[0036] 本发明还提供一种代码生成装置，包括：

[0037] 数据获取模块，用于获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；

[0038] 特征提取模块，用于基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；

[0039] 特征融合模块，用于融合所述第一特征和所述第二特征，获取融合特征；

[0040] 代码生成模块，用于基于所述融合特征以及解码模型，生成所述目标前端网页的代码。

[0041] 根据本发明一个实施例的代码生成装置，还包括建模模块，用于：

[0042] 获取训练样本，并将所述训练样本对应的真实值代码作为所述训练样本的标签标注所述训练样本，所述训练样本包括网页截图样本以及与所述网页截图样本关联的网页源代码样本；

[0043] 分别在初始卷积神经网络视觉模型和初始语言处理网络模型中加入注意力机制模型，获取初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型；

[0044] 将所述网页截图样本输入所述初始带有注意力机制的卷积神经网络视觉模型，并将所述网页源代码样本输入所述初始带有注意力机制的语言处理网络模型，以基于所述初始解码模型预测前端网页代码；

[0045] 比对预测的前端网页代码与所述真实值代码，并基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，直至训练完成，获取所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

[0046] 根据本发明一个实施例的代码生成装置，所述建模模块在用于所述获取训练样本时，用于：

[0047] 通过对所述标准训练数据库中的原始数据进行平移、旋转或放缩，获取第一训练样本集；

[0048] 获取给定前端网页的多张网页截图，并基于所述多张网页截图的代码逻辑，从所述多张网页截图中筛选出目标网页截图；

[0049] 获取与所述目标网页截图对应的网页源代码，并基于所述目标网页截图和所述目标网页截图对应的网页源代码，获取第二训练样本集；

[0050] 合并所述第一训练样本集和所述第二训练样本集，获取样本合集，并以所述样本合集中的数据作为所述训练样本。

[0051] 根据本发明一个实施例的代码生成装置，所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型；

[0052] 相应的，所述特征提取模块在用于所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征时，用于：

[0053] 基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；

[0054] 基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

[0055] 根据本发明一个实施例的代码生成装置，所述带有注意力机制的语言处理网络模型为带有注意力机制的长短期记忆模型；

[0056] 相应的，所述建模模块在用于通过循环训练，获取所述带有注意力机制的长短期记忆模型时，用于：

[0057] 获取初始带有注意力机制的长短期记忆模型中编码器对所述网页源代码样本的中间输出结果；

[0058] 利用注意力机制模型对所述中间输出结果进行选择性的学习，并关联所述注意力机制模型的输出权重序列与所述中间输出结果，循环训练所述注意力机制模型，直至训练完成，获取所述带有注意力机制的长短期记忆模型。

[0059] 根据本发明一个实施例的代码生成装置，所述初始解码模型采用交叉熵作为损失函数，所述建模模块在用于所述基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练时，用于：

[0060] 将利用所述初始带有注意力机制的卷积神经网络视觉模型提取的图像特征向量与利用所述初始带有注意力机制的语言处理网络模型提取的语言序列压缩编码向量进行拼接融合，获取融合样本特征；

[0061] 由所述循环训练的第一轮训练开始，基于所述融合样本特征，利用本轮训练的解码模型进行预测计算，获取预测的代码；

[0062] 基于所述交叉熵，调用自然语言处理工具包NLTK的corpus_bleu()函数，并基于所述corpus_bleu()函数，比对所述预测的代码与所述真实值代码，确定预测的偏差；

[0063] 基于所述预测的偏差，更新本轮训练的解码模型的参数，并转入下一轮训练，直至所述循环训练完成。

[0064] 根据本发明一个实施例的代码生成装置，还包括页面生成模块，用于：

[0065] 对所述代码进行编译，生成前端网页，并在浏览器中展示所述前端网页。

[0066] 本发明还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述处理器执行所述程序或指令时，实现如上述任一种所述的代码生成方法的步骤。

[0067] 本发明还提供一种非暂态计算机可读存储介质，其上存储有程序或指令，所述程序或指令被计算机执行时，实现如上述任一种所述的代码生成方法的步骤。

[0068] 本发明提供的代码生成方法、装置、电子设备及可读存储介质，通过在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征，以通过特征融合生成代码，能够仅通过对强相关性的部分词汇和图像局部区域进行重点计算，即可实现代码的准确有效预测，从而能够有效提高运算效率。

附图说明

[0069] 为了更清楚地说明本发明或现有技术中的技术方案，下面将对本发明实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0070] 图1为本发明提供的代码生成方法的流程示意图；

[0071] 图2为根据本发明提供的代码生成方法的整体方案逻辑示意图；

[0072] 图3为根据本发明提供的代码生成方法中构建代码生成模型的流程示意图；

[0073] 图4为根据本发明提供的代码生成方法中带有注意力机制的卷积神经网络视觉模型的结构框架示意图；

[0074] 图5为本发明提供的代码生成装置的结构示意图；

[0075] 图6为本发明提供的电子设备的实体结构示意图。

具体实施方式

[0076] 为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0077] 本发明针对现有技术运算量大、效率低且准确性不高等的问题，通过在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征，以通过特征融合生成代码，能够仅通过对强相关性的部分词汇和图像局部区域进行重点计算，即可实现代码的准确有效预测，从而能够有效降低运算量并有效提高运算效率和准确性。以下将结合附图，具体通过多个实施例对本发明进行展开说明和介绍。

[0078] 图1为本发明提供的代码生成方法的流程示意图，如图1所示，该方法包括：

[0079] S101，获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码。

[0080] 可以理解为，根据自动化前端功能的需求，前端页面的构图和代码逻辑需要相对应。因此，本发明对于目标前端网页，也即待生成代码的网页，需要先获取该网页的网页截图，并获取后台程序代码中该网页截图对应的网页源代码。根据网页截图的范围，该网页源代码可能是部分源代码片段。

[0081] S102，基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征。

[0082] 可以理解为，本发明将前端网页的网页截图和与其相对应的网页源代码作为输入数据，分别利用图像处理模块和自然语言处理模块来提取相应的特征。也就是说，利用带有注意力机制的卷积神经网络视觉模型提取源图片特征，并利用引入了注意力机制的语言模型对源代码进行编码。具体可如图2所示，为根据本发明提供的代码生成方法的整体方案逻辑示意图，其中：

[0083] Attention‑R2U‑Net为图像处理模块，其输入的是一帧一帧的网页截图，在接收到输入的网页截图后，可对该网页截图进行特征提取，得到相应的图像特征向量。与图像处理模块并行的Attention‑LSTM是自然语言处理模块，其可以对输入的自然语言包括网页源代码进行特征提取，得到相应的代码特征向量。

[0084] 其中，为便于区分，可将提取的网页截图的特征称为是第一特征，将提取的网页源代码的特征称为是第二特征。需要说明的是，其中的第一和第二只是为了区分是网页截图的特征还是网页源代码的特征，不具有实质意义，不对本发明要求保护的范围进行限定。

[0085] 其中，图像处理模块具体采用的是卷积神经网络视觉模型，且该卷积神经网络视觉模型中加入了注意力机制，因此该模型可称为是带有注意力机制的卷积神经网络视觉模型。将根据上述步骤获取的网页截图输入到该带有注意力机制的卷积神经网络视觉模型，可由该模型自动输出该网页截图的第一特征。

[0086] 其中，自然语言处理模块具体可以采用带有注意力机制的语言处理网络模型。同样的，该模型也是在传统自然语言处理模型的基础上加入了注意力机制。将根据上述步骤获取的网页源代码输入到该带有注意力机制的语言处理网络模型，可由该模型自动输出该网页源代码的第二特征。

[0087] 通过在模型中融合注意力机制进行特征提取，可以克服对重要词汇和图像局部区域缺少关注的缺陷，更加关注网页的重点细节和语法(如HTML语法)的关联特性，使得针对前端页面生成的源代码更加的精确可信。

[0088] S103，融合所述第一特征和所述第二特征，获取融合特征。

[0089] 可以理解为，如图2所示，在利用图像处理模块提取到网页截图的第一特征并利用自然语言处理模块提取到网页源代码的第二特征之后，可利用自然语言处理模块中的解码单元，将第一特征和第二特征进行拼接融合，得到新的特征，可称为是融合特征。其中，融合第一特征和第二特征可以理解为是将第一特征和第二特征整合成为一个新的特征。在融合第一特征和第二特征时，可以采用现有的特征融合方式进行特征的融合，例如可以是直接将第一特征和第二特征进行拼接，也可以根据第一特征和第二特征的维度，将二者的对应元素相加或相乘，本发明对具体的融合算法并不作具体限定。

[0090] S104，基于所述融合特征，利用解码模型，生成所述目标前端网页的代码。

[0091] 可以理解为，在上述步骤的基础上根据该融合特征，通过解码模型，预测序列的下一个标记代码，并推理目标前端网页相应的代码结构。例如，根据实际需要可以基于上述步骤生成前端页面的html代码、css代码或js代码等。进一步的，还可将生成的语言代码在浏览器中展示。

[0092] 本发明提供的代码生成方法，通过在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征，以通过特征融合生成代码，能够仅通过对强相关性的部分词汇和图像局部区域的重点计算，即可实现代码的准确有效预测，从而能够有效提高运算效率。

[0093] 其中，根据上述各实施例提供的代码生成方法可选地，本发明的代码生成方法还包括模型构建过程，如图3所示，为根据本发明提供的代码生成方法中构建代码生成模型的流程示意图，主要包括如下步骤：

[0094] S301，获取训练样本，并将所述训练样本对应的真实值代码作为所述训练样本的标签标注所述训练样本，所述训练样本包括网页截图样本以及与所述网页截图样本关联的网页源代码样本。

[0095] 可以理解为，本发明在构建代码生成模型时需要先进行训练样本准备。目前存在的公开数据集由1750张人工生成网页截图与其对应的源代码组成，该公开数据集可称为是标准训练数据库，本发明在该数据库的基础上对训练数据进行扩充，得到强度和规模均更大的训练样本。

[0096] 由上述说明可知，本发明前端页面的构图和代码逻辑需要相对应，因此训练样本的输入数据也需要对应包含页面截图部分和网页源代码部分，分别称为网页截图样本和网页源代码样本，且二者相对应相关联。另外，对于这些模型输入样本，需要将其对应的实际真实值代码一同输入搭建的初始模型中，才能够通过多次训练使模型学习到输入样本与真实值代码之间的对应关系，从而在代码生成应用过程中准确生成目标前端网页的代码。因此，需要对上述网页截图样本和网页源代码样本构成的模型输入样本利用真实值代码打标签。

[0097] S302，分别在初始卷积神经网络视觉模型和初始语言处理网络模型中加入注意力机制模型，获取初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型。

[0098] 可以理解为，考虑到自动化前端功能的需求为前端页面的构图和代码逻辑需要相对应，本发明网络模型的输入层必须包含有图像处理模块和语言逻辑模块。具体的，根据网页截图的特征提取的实际需求，对卷积神经网络视觉模型进行标准卷积神经网络视觉模型的初始化设置，包括模型框架搭建和网络参数初始化，得到初始卷积神经网络视觉模型，并在此基础上加入注意力机制模型，以对网页截图的局部相关性区域进行选择性学习，由此初始化搭建出的模型可称为是初始带有注意力机制的卷积神经网络视觉模型。

[0099] 同样的，根据网页源代码的特征提取的实际需求，对语言处理网络模型进行标准语言处理网络模型的初始化设置，包括模型框架搭建和网络参数初始化，得到初始语言处理网络模型，并在此基础上加入注意力机制模型，以对网页源代码的部分相关性词语进行选择性学习，由此初始化搭建出的模型可称为是初始带有注意力机制的语言处理网络模型。

[0100] 本发明在完成对特征提取模型初始化设置的基础上，搭建代码预测子模型，也即解码模型，包括网络架构搭建和网络模型初始化，得到初始解码模型。之后，将初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型的输出端并接到初始解码模型的输入端，以使初始解码模型可以对这两个特征提取模型的输出结果进行融合并进行代码预测计算。

[0101] S303，将所述网页截图样本输入所述初始带有注意力机制的卷积神经网络视觉模型，并将所述网页源代码样本输入所述初始带有注意力机制的语言处理网络模型，以基于所述初始解码模型预测前端网页代码。

[0102] 可以理解为，本发明在完成上述对代码生成模型框架搭建和网络参数初始化的基础上，利用准备好的带有标签的训练模型对该初始模型进行迭代循环训练。也即，将网页截图样本和网页源代码样本分别输入初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型，提取网页截图样本的图像特征向量和网页源代码样本的代码特征向量，并由初始解码模型拼接融合图像特征向量和代码特征向量，并根据融合后的融合特征向量预测网页截图对应的前端网页代码。

[0103] S304，比对预测的前端网页代码与所述真实值代码，并基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，直至训练完成，获取所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

[0104] 可以理解为，在上述步骤之后，比对该代码与标签的真实值代码，计算误差，并判断该误差是否满足设定标准，若满足则训练结束，否则获取新的训练样本，进行下一轮训练过程，直至训练出来的模型的精度达到设定的标准，确定模型训练完成，得到最终训练好的模型包括带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

[0105] 其中，根据上述各实施例提供的代码生成方法可选地，所述获取训练样本，包括：通过对所述标准训练数据库中的原始数据进行平移、旋转或放缩，获取第一训练样本集；获取给定前端网页的多张网页截图，并基于所述多张网页截图的代码逻辑，从所述多张网页截图中筛选出代目标网页截图；获取与所述目标网页截图对应的网页源代码，并基于所述目标网页截图和所述目标网页截图对应的网页源代码，获取第二训练样本集；合并所述第一训练样本集和所述第二训练样本集，获取样本合集，并以所述样本合集中的数据作为所述训练样本。

[0106] 可以理解为，在本技术领域中，目前存在的公开数据集仅由1750张人工生成网页截图与其对应的源代码组成，且原始数据构建比较困难，可供训练的数据较少，数据量对于模型的训练稍显不足，容易存在过拟合问题。为此，本发明对现有的训练样本数据库进行扩充。

[0107] 具体的，本发明从以下两方面对现有的训练样本数据库进行扩充：

[0108] 数据增强：采用平移、旋转和放缩中的一种或者多种组合来对原始公开数据进行处理，以此来增加训练的数据量。处理所得的数据可称为是第一训练样本，这些样本构成的集合可称为是第一训练样本集。

[0109] 页面抓取技术：本发明还可以获取给定网页的页面截图，例如可以采用自动截屏等技术自动的抓取前端网页，并基于这些网页截图的代码逻辑，从抓取的多张网页截图中筛选出部分或全部的网页截图作为目标网页截图。其中，筛选的标准例如可以是网页截图的代码逻辑满足设定条件，或代码逻辑符合一定标准的，如相对简单的。同时，可获取目标网页截图对应的网页源代码，并将目标网页截图和对应的网页源代码构成的数据对，作为网络的训练数据，可称为是第二训练样本，则这些样本构成的集合可称为是第二训练样本集。

[0110] 之后，将上述得到的第一训练样本集和第二训练样本集进行合并，得到从数据强度上和数据规模上都得到提升的训练样本合集，可称为是样本合集，其中的数据可直接用于模型的训练，可称为是训练样本。

[0111] 本发明基于原始公开训练数据进行数据增强和利用页面抓取技术对训练样本库进行扩充，能够有效提升训练数据的强度和规模，对模型进行充分训练，从而有效解决训练过程的过拟合问题。

[0112] 其中，根据上述各实施例提供的代码生成方法可选地，所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型。

[0113] 相应的，所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，包括：基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

[0114] 可以理解为，本发明的图像特征提取模型，也即带有注意力机制的卷积神经网络视觉模型，采用的是带有注意力机制的U‑Net深度网络模型，如图4所示，为根据本发明提供的代码生成方法中带有注意力机制的卷积神经网络视觉模型的结构框架示意图，其中包括卷积编码‑解码架构，且卷积编码‑解码架构中的解码结构包含注意力机制模型。本发明利用注意力机制U‑Net深度网络的压缩编码和解码过程，学习标准数据的通用型特征。

[0115] 具体的，注意力机制U‑Net网络使用卷积编码‑解码的架构，并设计有残差单元，训练深度架构时有助于提升网络的泛化能力。并且，带有注意力机制的U‑Net深度网络模型的解码部分采用了注意力机制能够生成一个门控信号，用来控制不同空间位置处特征的重要性，通过尺寸大小为1x1x1的卷积分别与激活函数ReLU和激活函数Sigmoid结合，生成一个权重窗口，可以抑制不相关背景区域的特征响应。将网页截图输入带有注意力机制的卷积神经网络视觉模型，可以采用上述基于门控信号的模型内部运算，由带有注意力机制的卷积神经网络视觉模型输出网页截图的相应特征作为第一特征。

[0116] 本发明通过采用注意力机制的U‑Net深度网络模型，能够训练深度架构时有助于提升网络的泛化能力，且在图像CNN里面加入注意力机制，可以使得图像重要区域的特征显著的表达，可以抑制不相关背景区域的特征响应，能够有效减少计算量，提高运算效率。

[0117] 其中，根据上述各实施例提供的代码生成方法可选地，所述带有注意力机制的语言处理网络模型为带有注意力机制的长短期记忆模型。

[0118] 相应的，通过循环训练，获取所述带有注意力机制的长短期记忆模型，包括：获取初始带有注意力机制的长短期记忆模型中编码器对所述网页源代码样本的中间输出结果；利用注意力机制模型对所述中间输出结果进行选择性的学习，并关联所述注意力机制模型的输出权重序列与所述中间输出结果，循环训练所述注意力机制模型，直至训练完成，获取所述带有注意力机制的长短期记忆模型。

[0119] 可以理解为，本发明的带有注意力机制的语言处理网络模型采用注意力机制的长短期记忆模型(Attention‑Long‑Short Term Memory,Attention‑LSTM)，利用该模型对输入的代码序列进行编码提取特征。

[0120] 具体的，在传统的长短期记忆模型内加入了注意力机制模型，打破了传统编码器‑解码器的结构在编解码时需要依赖于内部一个固定长度向量的限制。这里，考虑到所有代码里的词语重要性不一定都是等同的，有些词语比如文本里的语言可能就出现一次，对于常出现的词语组合更具有选择性，因此通过保留长短期记忆模型(Long‑Short Term Memory,LSTM)中编码器对输入序列的中间输出结果，训练一个注意力机制模型来对这些中间输出结果进行选择性的学习。

[0121] 同时，在注意力机制模型输出时，将模型的输出权重序列中间输出结果进行关联。可以理解的是，上面训练的注意力机制模型可以输出一个权重，对于下次输入的值，如果与词语相关性高，权重就高，输出的值响应就大。

[0122] 其中，在利用带有注意力机制的语言处理网络模型，提取网页源代码的第二特征时，可以直接将网页源代码输入带有注意力机制的语言处理网络模型这个黑盒子，利用这个黑盒子进行内部的自动运算，则该带有注意力机制的语言处理网络模型输出的就是网页源代码的特征，也即第二特征。

[0123] 本发明通过在自然语言的lstm里面加入注意力机制，可以加强自然语言网络对于生成代码的语法关联性。

[0124] 其中，根据上述各实施例提供的代码生成方法可选地，所述初始解码模型采用交叉熵作为损失函数，所述基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，包括：将利用所述初始带有注意力机制的卷积神经网络视觉模型提取的图像特征向量与利用所述初始带有注意力机制的语言处理网络模型提取的语言序列压缩编码向量进行拼接融合，获取融合样本特征；由所述循环训练的第一轮训练开始，基于所述融合样本特征，利用本轮训练的解码模型进行预测计算，获取预测的代码；基于所述交叉熵，调用自然语言处理工具包NLTK的corpus_bleu()函数，并基于所述corpus_bleu()函数，比对所述预测的代码与所述真实值代码，确定预测的偏差；基于所述预测的偏差，更新本轮训练的解码模型的参数，并转入下一轮训练，直至所述循环训练完成。

[0125] 可以理解为，本发明将前端截图与对应的逻辑代码相结合，利用深度学习技术的模型训练构建代码生成的解码模型，从而可以完成标记语言(如HTML标记语言)的从无到有的推理阶段。其中本发明的解码模型采用交叉熵(cross‑entropy cost)作为损失函数。

[0126] 在模型训练过程中，初始化搭建完成的初始解码模型可以对不同模态特征融合并预测序列的下一个标记。具体的，初始解码模型可以接收到初始带有注意力机制的卷积神经网络视觉模型由网页截图样本提取的图像特征向量，以及初始带有注意力机制的语言处理网络模型由网页源代码样本提取的语言序列压缩编码向量。

[0127] 之后，初始解码模型将图像特征向量和语言序列压缩编码向量进行拼接融合，得到新的特征向量可称为是融合样本特征。也就是说，可以将图像特征向量和语言序列压缩编码向量进行拼接融合，作为下一阶段的输入数据。

[0128] 再之后，基于融合样本特征，利用解码模型完成标记性代码中下一个标记的预测，并调用自然语言处理第三方库NLTK的corpus_bleu()函数，对corpus_bleu()函数输入预测的代码和真实值代码，通过corpus_bleu()函数对比预测标记和真实值标记的差异性，得到预测的偏差。

[0129] 最后，根据预测的偏差来适应性调整本轮训练中解码模型(也即当前解码模型)的参数，得到新的解码模型，用于下一轮训练中对新的融合样本特征进行标记代码的预测，如此进行多轮循环迭代训练训练深度网络，直至循环训练完成。其中，训练完成可以是最后一轮训练的模型预测的偏差符合设定标准或者融合样本特征被遍历完。

[0130] 其中，循环迭代训练方式是利用多组训练样本对模型进行多轮训练，在每轮训练中，根据训练产生的偏差更新模型参数，并利用下一组训练数据对更新参数后的模型进行新一轮的训练，如此循环下去，直至训练完成。

[0131] 进一步的，在采用已有数据集训练模型的基础上，还可以使用新网页截图，也即测试样本对模型进行测试，推理其相应的代码结构，并将生成的超文本标记语言(Hyper Text Markup Language，HTML)在浏览器中展示。

[0132] 本发明采用解码模块对提取的网页截图的特征和对应网页源代码的特征进行处理运算，最终实现代码的准确预测。

[0133] 进一步地，在上述各实施例提供的代码生成方法的基础上，在所述生成所述目标前端网页的代码之后，还包括：对所述代码进行编译，生成前端网页，并在浏览器中展示所述前端网页。

[0134] 可以理解为，本发明在获取到目标前端网页的代码后，可结合页面元素和页面描述对象等，根据该代码进行编译，渲染出待生成的页面，也即前端网页。之后，将该前端网页发送到浏览器中进行展示。

[0135] 本发明通过对代码进行编译，生成最终的前端网页并在浏览器中进行展示，可以使用户更直观的看到网页渲染的效果，效果更逼真。

[0136] 同时，本发明在网页生成过程中，在CNN和LSTM算法上加入了注意力机制，并且使用自然语言领域的测试标准(Bilingual Evaluation Understudy,BLEU)来评估文本的质量，通过比对得出转换率，转换率从0.84提升到0.91，相比于不加入注意力机制之前的普通CNN和lstm算法，效果得到明显提升。

[0137] 基于相同的发明构思，本发明根据上述各实施例提供一种代码生成装置，该装置用于在上述各实施例中实现代码生成。因此，在上述各实施例的代码生成方法中的描述和定义，可以用于本发明中各个执行模块的理解，具体可参考上述方法实施例，此处不在赘述。

[0138] 根据本发明的一个实施例，代码生成装置的结构如图5所示，为本发明提供的代码生成装置的结构示意图，该装置可以用于实现上述各方法实施例中的代码生成，该装置包括：数据获取模块501、特征提取模块502、特征融合模块503和代码生成模块504。其中：

[0139] 数据获取模块501用于获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；特征提取模块502用于基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；特征融合模块503用于融合所述第一特征和所述第二特征，获取融合特征；代码生成模块504用于基于所述融合特征以及解码模型，生成所述目标前端网页的代码。

[0140] 具体而言，根据自动化前端功能的需求，前端页面的构图和代码逻辑需要相对应。因此，数据获取模块501对于目标前端网页，也即待生成代码的网页，需要先获取该网页的网页截图，并获取后台程序代码中该网页截图对应的网页源代码。根据网页截图的范围，该网页源代码可能是部分源代码片段。

[0141] 之后，特征提取模块502将前端网页的网页截图和与其相对应的网页源代码作为输入数据，分别利用图像处理模块和自然语言处理模块来提取相应的特征。也就是说，特征提取模块502利用带有注意力机制的卷积神经网络视觉模型提取源图片特征，并利用引入了注意力机制的语言模型对源代码进行编码。其中，为便于区分，可将提取的网页截图的特征称为是第一特征，将提取的网页源代码的特征称为是第二特征。需要说明的是，其中的第一和第二只是为了区分是网页截图的特征还是网页源代码的特征，不具有实质意义，不对本发明要求保护的范围进行限定。

[0142] 其中，图像处理模块具体采用的是卷积神经网络视觉模型，且该卷积神经网络视觉模型中加入了注意力机制，因此该模型可称为是带有注意力机制的卷积神经网络视觉模型。将根据上述步骤获取的网页截图输入到该带有注意力机制的卷积神经网络视觉模型，可由该模型自动输出该网页截图的第一特征。

[0143] 其中，自然语言处理模块具体可以采用带有注意力机制的语言处理网络模型。同样的，该模型也是在传统自然语言处理模型的基础上加入了注意力机制。将根据上述步骤获取的网页源代码输入到该带有注意力机制的语言处理网络模型，可由该模型自动输出该网页源代码的第二特征。

[0144] 再之后，在利用图像处理模块提取到网页截图的第一特征并利用自然语言处理模块提取到网页源代码的第二特征之后，特征融合模块503可利用自然语言处理模块中的解码单元，将第一特征和第二特征进行拼接融合，得到新的特征，可称为是融合特征。其中，特征融合模块503融合第一特征和第二特征可以理解为是将第一特征和第二特征整合成为一个新的特征。在融合第一特征和第二特征时，特征融合模块503可以采用现有的特征融合方式进行特征的融合，例如可以是直接将第一特征和第二特征进行拼接，也可以根据第一特征和第二特征的维度，将二者的对应元素相加或相乘，本发明对具体的融合算法并不作具体限定。

[0145] 最后，代码生成模块504根据该融合特征，通过解码模型，预测序列的下一个标记代码，并推理目标前端网页相应的代码结构。例如，根据实际需要可以基于上述步骤生成前端页面的html代码、css代码或js代码等。进一步的，可将生成的语言代码在浏览器中展示。

[0146] 本发明提供的代码生成装置，通过在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征，以通过特征融合生成代码，能够仅通过对强相关性的部分词汇和图像局部区域进行重点计算，即可实现代码的准确有效预测，从而能够有效降低运算量并有效提高运算效率和准确性。

[0147] 进一步地，本发明的代码生成装置还包括建模模块，用于：

[0148] 获取训练样本，并将所述训练样本对应的真实值代码作为所述训练样本的标签标注所述训练样本，所述训练样本包括网页截图样本以及与所述网页截图样本关联的网页源代码样本；

[0149] 分别在初始卷积神经网络视觉模型和初始语言处理网络模型中加入注意力机制模型，获取初始带有注意力机制的卷积神经网络视觉模型和初始带有注意力机制的语言处理网络模型；

[0150] 将所述网页截图样本输入所述初始带有注意力机制的卷积神经网络视觉模型，并将所述网页源代码样本输入所述初始带有注意力机制的语言处理网络模型，以基于所述初始解码模型预测前端网元代码；

[0151] 比对预测的前端网页代码与所述真实值代码，并基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练，直至训练完成，获取所述带有注意力机制的卷积神经网络视觉模型、所述带有注意力机制的语言处理网络模型和所述解码模型。

[0152] 可选地，所述建模模块在用于所述获取训练样本时，用于：

[0153] 通过对所述标准训练数据库中的原始数据进行平移、旋转或放缩，获取第一训练样本集；

[0154] 获取给定前端网页的多张网页截图，并基于所述多张网页截图的代码逻辑，从所述多张网页截图中筛选出目标网页截图；

[0155] 获取与所述目标网页截图对应的网页源代码，并基于所述目标网页截图和所述目标网页截图对应的网页源代码，获取第二训练样本集；

[0156] 合并所述第一训练样本集和所述第二训练样本集，获取样本合集，并以所述样本合集中的数据作为所述训练样本。

[0157] 可选地，所述带有注意力机制的卷积神经网络视觉模型为带有注意力机制的U‑Net深度网络模型，所述带有注意力机制的U‑Net深度网络模型采用卷积编码‑解码架构，且所述卷积编码‑解码架构中的解码结构包含注意力机制模型；

[0158] 相应的，所述特征提取模块在用于所述基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征时，用于：

[0159] 基于所述解码结构中的注意力机制模型，生成门控信号，并将给定尺寸的卷积分别与激活函数ReLU和激活函数Sigmoid相结合，生成权重窗口；

[0160] 基于所述门控信号，控制所述网页截图中不同空间位置处特征的权重，并基于所述权重窗口，抑制背景区域的特征响应，以提取所述第一特征。

[0161] 可选地，所述带有注意力机制的语言处理网络模型为带有注意力机制的长短期记忆模型；

[0162] 相应的，所述建模模块在用于通过循环训练，获取所述带有注意力机制的长短期记忆模型时，用于：

[0163] 获取初始带有注意力机制的长短期记忆模型中编码器对所述网页源代码样本的中间输出结果；

[0164] 利用注意力机制模型对所述中间输出结果进行选择性的学习，并关联所述注意力机制模型的输出权重序列与所述中间输出结果，循环训练所述注意力机制模型，直至训练完成，获取所述带有注意力机制的长短期记忆模型。

[0165] 可选地，所述初始解码模型采用交叉熵作为损失函数，所述建模模块在用于所述基于所述比对确定的偏差，迭代更新网络模型参数，以进行循环训练时，用于：

[0166] 将利用所述初始带有注意力机制的卷积神经网络视觉模型提取的图像特征向量与利用所述初始带有注意力机制的语言处理网络模型提取的语言序列压缩编码向量进行拼接融合，获取融合样本特征；

[0167] 由所述循环训练的第一轮训练开始，基于所述融合样本特征，利用本轮训练的解码模型进行预测计算，获取预测的代码；

[0168] 基于所述交叉熵，调用自然语言处理工具包NLTK的corpus_bleu()函数，并基于所述corpus_bleu()函数，比对所述预测的代码与所述真实值代码，确定预测的偏差；

[0169] 基于所述预测的偏差，更新本轮训练的解码模型的参数，并转入下一轮训练，直至所述循环训练完成。

[0170] 进一步地，本发明的代码生成装置还包括页面生成模块，用于：

[0171] 对所述代码进行编译，生成前端网页，并在浏览器中展示所述前端网页。

[0172] 可以理解的是，本发明中可以通过硬件处理器(hardware processor)来实现上述各实施例的装置中的各相关程序模块。并且，本发明的代码生成装置利用上述各程序模块，能够实现上述各方法实施例的代码生成流程，在用于实现上述各方法实施例中的代码生成时，本发明的装置产生的有益效果与对应的上述各方法实施例相同，可以参考上述各方法实施例，此处不再赘述。

[0173] 作为本发明的又一个方面，本实施例根据上述各实施例提供一种电子设备，该电子设备包括存储器、处理器及存储在该存储器上并可在该处理器上运行的程序或指令，该处理器执行该程序或指令时，实现如上述各实施例所述的代码生成方法的步骤。

[0174] 进一步的，本发明的电子设备还可以包括通信接口和总线。参考图6，为本发明提供的电子设备的实体结构示意图，包括：至少一个存储器601、至少一个处理器602、通信接口603和总线604。

[0175] 其中，存储器601、处理器602和通信接口603通过总线604完成相互间的通信，通信接口603用于该电子设备与前端设备和后台服务器之间的信息传输；存储器601中存储有可在处理器602上运行的程序或指令，处理器602执行该程序或指令时，实现如上述各实施例所述的代码生成方法的步骤。

[0176] 可以理解为，该电子设备中至少包含存储器601、处理器602、通信接口603和总线604，且存储器601、处理器602和通信接口603通过总线604形成相互间的通信连接，并可完成相互间的通信，如处理器602从存储器601中读取代码生成方法的程序指令等。另外，通信接口603还可以实现该电子设备与前端设备和后台服务器之间的通信连接，并可完成相互间信息传输，如通过通信接口603实现前端网页截图和后端网页源代码的获取等。

[0177] 电子设备运行时，处理器602调用存储器601中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：获取目标前端网页的网页截图及与所述网页截图对应的网页源代码；基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；融合所述第一特征和所述第二特征，获取融合特征；基于所述融合特征以及解码模型，生成所述目标前端网页的代码等。

[0178] 上述的存储器601中的程序指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。或者，实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read‑Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

[0179] 本发明还根据上述各实施例提供一种非暂态计算机可读存储介质，其上存储有程序或指令，该程序或指令被计算机执行时，实现如上述各实施例所述的代码生成方法的步骤，例如包括：获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；融合所述第一特征和所述第二特征，获取融合特征；基于所述融合特征以及解码模型，生成所述目标前端网页的代码等。

[0180] 作为本发明的再一个方面，本实施例根据上述各实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的代码生成方法，该方法包括：获取目标前端网页的网页截图以及与所述网页截图对应的网页源代码；基于带有注意力机制的卷积神经网络视觉模型，提取所述网页截图的第一特征，并基于带有注意力机制的语言处理网络模型，提取所述网页源代码的第二特征；融合所述第一特征和所述第二特征，获取融合特征；基于所述融合特征以及解码模型，生成所述目标前端网页的代码。

[0181] 本发明提供的电子设备、非暂态计算机可读存储介质和计算机程序产品，通过执行上述各实施例所述的代码生成方法的步骤，在图像处理模块和自然语言处理模块中加入注意力机制，并基于此提取网页截图和对应网页源代码的特征，以通过特征融合生成代码，能够仅通过对强相关性的部分词汇和图像局部区域进行重点计算，即可实现代码的准确有效预测，从而能够有效降低运算量并有效提高运算效率和准确性。

[0182] 可以理解的是，以上所描述的装置、电子设备及存储介质的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，既可以位于一个地方，或者也可以分布到不同网络单元上。可以根据实际需要选择其中的部分或全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

[0183] 通过以上实施方式的描述，本领域的技术人员可以清楚地了解，各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如U盘、移动硬盘、ROM、RAM、磁碟或者光盘等，包括若干指令，用以使得一台计算机设备(如个人计算机，服务器，或者网络设备等)执行上述各方法实施例或者方法实施例的某些部分所述的方法。

[0184] 另外，本领域内的技术人员应当理解的是，在本发明的申请文件中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

[0185] 本发明的说明书中，说明了大量具体细节。然而应当理解的是，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本发明公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。

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