CN109408058B

CN109408058B - 基于机器学习的前端辅助开发方法和装置

Info

Publication number: CN109408058B
Application number: CN201811289563.1A
Authority: CN
Inventors: 合敏慈
Original assignee: Beijing Moviebook Science And Technology Co ltd
Current assignee: Beijing Moviebook Science And Technology Co ltd
Priority date: 2018-10-31
Filing date: 2018-10-31
Publication date: 2022-02-22
Anticipated expiration: 2038-10-31
Also published as: CN109408058A

Abstract

本申请公开了一种基于机器学习的前端辅助开发方法和装置。其中方法包括：利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；前端界面数据生成步骤：基于每一层图像的配置信息和相应的代码化数据，生成前端界面数据；其中，长短期记忆网络通过以下步骤进行训练：将网页样本集合中的每一个网页样本拆分成网页模块，将网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；将公共模块和相应的代码化数据作为训练样本，对长短期记忆网络模型进行深度训练，得到深度长短期记忆网络。该方法采用机器学习识别PSD文件并转化为前端界面数据，减少前端开发工作量，提高了项目开发速度。

Description

基于机器学习的前端辅助开发方法和装置

技术领域

本申请涉及到机器学习和网页技术领域，特别是涉及一种基于机器学习的前端辅助开发方法和装置。

背景技术

随着互联网的高速发展，浏览器的性能也越来越好，很多系统都开始采用B/S(浏览器/服务器)的模式来进行开发工作。在传统的开发流程中，通常是由设计师先用Photoshop软件制作PSD格式的设计稿后交由前端开发工程师通过编写代码的方式将图形用户界面中的界面元素布局到Web前端，然后由前端工程师再和后端工程师配合完成网页的逻辑部分。从上述的流程的描述中不难看出，前端开发工程师的工作量较大，因此，Web前端开发的工作可能成为整个项目的瓶颈，影响项目开发的进度。

发明内容

本申请的目的在于克服上述问题或者至少部分地解决或缓减解决上述问题。

根据本申请的一个方面，提供了一种基于机器学习的前端辅助开发方法，包括：

数据文件生成步骤：利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；

前端界面数据生成步骤：基于每一层图像的配置信息和相应的代码化数据，生成前端界面数据；

其中，所述长短期记忆网络通过以下步骤进行训练：

公共模块保存步骤：将网页样本集合中的每一个网页样本拆分成网页模块，将所述网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；

模型训练步骤：将所述公共模块和相应的代码化数据作为训练样本，对长短期记忆网络模型进行深度训练，得到深度长短期记忆网络。

本申请提供的方法采用机器学习方式识别PSD格式中各个层，并且能够将其转化为前端界面数据，能够让不懂代码的设计师在设计网页设计稿的同时制作静态网页页面，从而减少前端开发人员的工作量，提高了整体的开发速度和效率，解决了项目开发过程中的瓶颈问题。

可选地，所述公共模块保存步骤包括：

网页样本集合获取步骤：将至少一个项目的每一个网页保存为网页图片，所有的网页图片组成网页样本集合；

网页模块拆分步骤：对于网页样本集合中的每一个网页图片按照结构进行拆分得到多个网页模块；

图片指纹计算步骤：对于每一个网页模块，计算该网页模块的图片指纹；和

公共模块保存步骤：比较所述网页模块的图片指纹的相似度，将相似数量满足第一阈值的网页模块保存为公共模块。

采用该方法，能够将项目开发过程中利用率最高的网页模块进行代码化处理，从而避免重复性劳动，减轻前端开发人员的工作量，提高工作效率。

可选地，所述模型训练步骤包括：

特征提取步骤：将公共模块通过卷积神经网络得到特征图和特征向量；

深度训练步骤：将公共模块的特征图与特征向量以及该公共模块的代码化数据输入到长短期记忆网络模型中进行深度训练；和

模型优化步骤：根据输出的代码化数据与实际的代码化数据的偏差，对长短期记忆网络模型的参数进行优化，得到深度长短期记忆网络。

该方法通过深度训练，创建了一个具有可进行归纳和探索的LSTM层的模型，利用长短期记忆网络模型能够通过机器学习将图片代码化，从而提高编辑网页的效率，避免了很多重复性劳动，节约了人力成本和时间成本。

可选地，所述数据文件生成步骤包括：

网页分解步骤：对PSD格式文件的每一层图像进行分解，得到若干图像模块以及相应的位置信息；

图像模块识别步骤：对于每一个图像模块，利用经过训练的长短期记忆网络进行识别，生成与图像模块对应的代码化数据；和

代码化数据生成步骤：基于所述图像模块的位置信息和代码化数据，得到与该层图像对应的代码化数据。

该方法能够将PSD格式文件逐层分析并进行代码化，从而将图像转换为相应的网页代码，节省了前端开发人员手动将图像代码化的时间。

可选地，所述前端界面数据生成步骤包括：

基于前端界面模板，读取每一层图像的配置信息和相应的代码化数据放置在所述前端界面模板的相应位置，得到前端界面数据。

该方法能够根据不同需求，将代码化数据结合配置信息转化为相应格式的文本，方便快捷，自动化程度高。

根据本申请的另一个方面，还提供了一种基于机器学习的前端辅助开发装置，包括：

数据文件生成模块，其配置成用于利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；和

前端界面数据生成模块，其配置成用于基于每一层图像的配置信息和相应的代码化数据，生成前端界面数据；

其中，所述长短期记忆网络通过训练模块进行训练，所述训练模块包括：

公共模块保存模块，其配置成用于将网页样本集合中的每一个网页样本拆分成网页模块，将所述网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；和

模型训练模块，其配置成用于将所述公共模块和相应的代码化数据作为训练样本，对长短期记忆网络模型进行深度训练，得到深度长短期记忆网络。

本申请提供的装置采用机器学习方式识别PSD格式中各个层，并且能够将其转化为前端界面数据，能够让不懂代码的设计师在设计网页设计稿的同时制作静态网页页面，从而减少前端开发人员的工作量，提高了整体的开发速度和效率，解决了项目开发过程中的瓶颈问题。

可选地，所述公共模块保存模块包括：

网页样本集合获取模块，其配置成用于将至少一个项目的每一个网页保存为网页图片，所有的网页图片组成网页样本集合；

网页模块拆分模块，其配置成用于对于网页样本集合中的每一个网页图片按照结构进行拆分得到多个网页模块；

图片指纹计算模块，其配置成用于对于每一个网页模块，计算该网页模块的图片指纹；和

保存模块，其配置成用于比较所述网页模块的图片指纹的相似度，将相似数量满足第一阈值的网页模块保存为公共模块。

可选地，所述数据文件生成模块包括：

网页分解模块，其配置成用于对PSD格式文件的每一层图像进行分解，得到若干图像模块以及相应的位置信息；

图像模块识别模块，其配置成用于对于每一个图像模块，利用经过训练的长短期记忆网络进行识别，生成与图像模块对应的代码化数据；和

代码化数据生成模块，其配置成用于基于所述图像模块的位置信息和代码化数据，得到与该层图像对应的代码化数据。

根据本申请的另一个方面，还提供了一种计算设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如上所述的方法。

根据本申请的另一个方面，还提供了一种计算机可读存储介质，优选为非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现如上所述的方法。

根据下文结合附图对本申请的具体实施例的详细描述，本领域技术人员将会更加明了本申请的上述以及其他目的、优点和特征。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。后文将参照附图以示例性而非限制性的方式详细描述本申请的一些具体实施例。附图中相同的附图标记标示了相同或类似的部件或部分。本领域技术人员应该理解的是，这些附图未必是按比例绘制的。在附图中：

图1是运行根据本申请一个实施例的基于机器学习的前端辅助开发方法的计算机装置硬件结构示意图；

图2是根据本申请的一个实施例的基于机器学习的前端辅助开发方法的示意性流程图；

图3是根据本申请的一个实施例的基于机器学习的前端辅助开发方法的训练步骤的示意性流程图；

图4是根据本申请的一个实施例的PSD文件的示意性界面图；

图5是根据本申请的一个实施例的PSD文件的第二层的示意性界面图；

图6是根据本申请的一个实施例的PSD文件的第二层的子层一的示意性界面图；

图7是根据本申请的一个实施例的PSD文件的第二层的子层二的示意性界面图；

图8是根据本申请的一个实施例的基于机器学习的前端辅助开发装置的示意性框图；

图9是根据本申请的一个实施例的基于机器学习的前端辅助开发装置的训练模块的示意性框图；

图10是本申请的计算设备的一个实施例的框图；

图11是本申请的计算机可读存储介质的一个实施例的框图。

具体实施方式

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

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

实施例1

根据本申请实施例，还提供了一种基于机器学习的前端辅助开发方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。图1示出了一种用于本申请的基于机器学习的前端辅助开发方法的计算机装置(或移动设备)的硬件结构框图。如图1所示，计算机装置10(或移动设备10)可以包括一个或多个处理器(图中采用102a、102b，……，102n来示出，处理器可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输模块。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算机装置10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

应当注意到的是上述一个或多个处理器和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到计算机装置10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本申请实施例中基于机器学习的前端辅助开发方法对应的程序指令/数据存储装置，处理器通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的应用程序的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至计算机装置10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机装置10的通信供应商提供的无线网络。在一个实例中，传输装置包括一个网络适配器(Network Interface Controller,NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与计算机装置10(或移动设备)的用户界面进行交互。

在上述运行环境下，本申请提供了一种基于机器学习的前端辅助开发方法。图2是根据本申请的一个实施例的基于机器学习的前端辅助开发方法的示意性流程图。该方法可以包括以下步骤：

S500数据文件生成步骤：利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；

S700前端界面数据生成步骤：基于每一层图像的配置信息和相应的代码化数据，生成前端界面数据。

其中，所述长短期记忆网络可以通过以下的训练步骤进行训练。图3是根据本申请的一个实施例的基于机器学习的前端辅助开发方法的训练步骤的示意性流程图。该训练步骤可以包括：

S100公共模块保存步骤：将网页样本集合中的每一个网页样本拆分成网页模块，将所述网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；和

S300模型训练步骤：将所述公共模块和相应的代码化数据作为训练样本，对长短期记忆网络模型进行深度训练，得到深度长短期记忆网络。

可选地，在一个实施方案中，所述S100公共模块保存步骤可以包括：

图片指纹计算步骤：对于每一个网页模块，计算该网页模块的图片指纹；

保存步骤：比较所述网页模块的图片指纹的相似度，将相似数量满足第一阈值的网页模块保存为公共模块。

在该S100公共模块保存步骤中，项目可以包括一个项目，也可以包括公司或者单位所有的项目。自动运行至少一个项目，将每一步操作自动截屏并保存为网页图片。将所有保存的图像组成网页样本集合。

所述图片指纹计算步骤可以包括以下步骤：

网页模块尺寸标准化步骤：将网页模块尺寸缩小到固定尺寸，例如，16*16像素，或者其他尺寸；将缩小后的图片，转为固定级数的灰度，例如，64级灰度。该步骤能够去除网页模块的细节，只保留结构、明暗等基本信息，为比较相似度提供基础数据。

平均值计算步骤：计算所有像素的灰度平均值，将每一个像素的灰度与平均值进行比较，大于或等于平均值则记为1；小于平均值则记为0，得到网页模块的序列；

哈希值计算步骤：计算网页模块的序列的哈希值，得到该网页模块的指纹。

在保存步骤中，对比不同网页模块的指纹的汉明距离，如果不相同的数据位不超过第一阈值，例如，5个，就说明两个网页模块相似程度很高，可以将这两个网页模块归为一类。

该方法的优点是简单快速，不受图片大小缩放影响，从而快速对网页模块进行分类。

可选地，在另一个实施方案中，所述S100公共模块保存步骤可以包括：

网页截取步骤：将网页样本集合的网页图片与其他网页图片逐一相互比较，计算分析出该网页图片与其他网页图片之间相似的部分，将相似的部分截取并保存为公共模块。

该方法将网页图片整体进行比较，在存在相似部分的情况下，截取公共模块，从而能够减少对网页图片拆分的工作量。

长短期记忆网络模型可以包括：前向长短期记忆网络(ForwardLSTM)和后向长短期记忆(BackwardLSTM)。前向长短期记忆网络是长短期记忆网络按照卷积层的正向顺序依次记忆的网络应用形态。在该网络中，按照卷积层运算的顺序将各个特征图和特征向量数据作为输入数据X，将上一个状态h_t-1和X输入前向长短期记忆网络，得到第一输出结果h_t。该第一输出结果表示当前状态，计算过程如下：

其中，F_t、I_t和O_t分别是长短期记忆单元中“遗忘门”、“输入门”、“输出门”的计算公式；

为当前词语向量D(w_ik)保存在记忆单元中的信息，当前最终记忆信息C_t由历史记忆信息C_t-1和

两部分组成；当前状态h_t根据“输出门”O_t和当前最终记忆信息C_t计算。σ为sigmoid激活函数，*表示矩阵点乘，W_F、W_I、W_O、W_C和b_F、b_I、b_O、b_C为模型参数，利用训练数据学习获得，X为卷积层的特征图和特征向量。

后向长短期记忆(Backward LSTM)网络与Forward LSTM结构相同，只是这两个单元的输入不同。Backward LSTM的输入是Forward LSTM输入的逆序后的结果。按照卷积层运算的相反顺序将各个特征图和特征向量作为输入数据，输入后向长短期记忆网络，得到第二输出结果。

本申请中可以利用LSTM网络将第一输出结果和第二输出结果进行运算处理后，最终输出描述该网页模块的代码化数据。

可选地，所述S300模型训练步骤可以包括：

特征提取步骤：将公共模块通过卷积神经网络得到特征图和特征向量。

深度训练步骤：将公共模块的特征图与特征向量以及该公共模块的代码化数据输入到长短期记忆网络模型(LSTM)中进行深度训练。在该步骤中，通过设置输入门、输出门、遗忘门和记忆单元，构建长短期记忆网络模型中的长短期记忆单元；设置长短期记忆网络模型中每一个连接层的时间步长和隐层单元的个数；在长短期记忆网络模型的每一个连接层的长短期记忆单元包括两个输入端和一个输出端，两个输入端的维度分别与通过卷积神经网络的特征图和特征向量的维度和隐层单元参数的维度相等。

模型优化步骤：根据输出的代码化数据与实际的代码化数据的偏差，对长短期记忆网络模型的参数进行优化，得到深度长短期记忆网络。在该步骤中，将公共模块对应的代码化数据映射为向量；将公共模块的特征图和特征向量作为全局信息输入到长短期记忆网络模型中；每一层的长短期记忆单元的输入包括上一层的长短期记忆单元输出和与该层顺序相对应的向量，依层传递得到公共模块的输出描述信息，相应的长短期记忆单元的输出包括上一层的长短期记忆单元的输出、当前长短期单元以前所有层的长短期记忆单元的输出或当前长短期单元的前两层的长短期记忆单元的输出；根据输出描述信息与实际描述信息的误差，对长短期记忆网络模型的参数进行优化，得到深度长短期记忆网络模型。

例如，公共模块是矩形的下拉模块，对于该模块，代码化数据的内容包括：模块的尺寸、位置、边框、背景等数据。例如，代码化数据可以采用下面的形式：Type(类型)：Text(文本)；Width(宽度):200；Height(高度):50；Border(边界):1；Text(文本):“请选择明星”；Bg(指定颜色):“white”。应当理解的是，本文中列举的代码化数据的格式仅是一个优选方式，格式可以根据需要进行设计。

可选地，所述S500数据文件生成步骤可以包括：

图像模块识别步骤：对于每一个图像模块，利用经过训练的长短期记忆网络进行识别，生成与图像模块对应的代码化数据；

在本实施例中，计算机设备可获取待处理的PSD文件，该计算机设备可为终端或服务器，该终端可包括但不限于手机、平板电脑、便携式笔记本或智能穿戴设备等。PSD(Photoshop Document)文件是Adobe公司的图像处理软件Photoshop的专用格式的文件。当该计算机设备为终端时，可提供相应的PSD文件选取界面，并接收用户从该界面上提供的PSD文件选取入口对相应PSD文件的选取操作，或者检测在界面上对PSD文件选取的虚拟按钮点击操作、手势或语音信息等，根据该相应的操作、手势或者语音信息等选取PSD文件。

PSD文件中存储Photoshop中所有的图层，不同图层的属性不同，且不同图层之间具有层级关系。每个图层中均可包含相应的可视信息以及可视信息在相应图层中的位置信息。其中，该可视信息包括图片、文字、通道、参考线、注解和颜色等信息，位置信息为相应可视信息在对应图层中所处的位置。图层的属性包括每个可视信息的属性，例如，图片的属性包括png、bmp等格式。

图4是根据本申请的一个实施例的PSD文件的示意性界面图。如图4所示，PSD设计稿的文件是分层的。第一层可以包括“添加视频”按钮；图5是根据本申请的一个实施例的PSD文件的第二层的示意性界面图，第二层的内容如图5所示。较复杂的层可以设计为包括若干子层。例如，第二层可以包括子层一、子层二、子层三等。图6和图7分别是根据本申请的一个实施例的PSD文件的第二层的子层一和子层二的示意性界面图。其中，子层一包括“王小利”等明星姓名的标签、子层二包括“上传视频”等按钮。

对于图层中的按钮，生成的代码化数据可以是：

{Type(类型)：“Button”；Width(宽度):200；Height(高度):50；Border(边界):1；Text(文本):“添加视频”；Bg(指定颜色):“white”}。

{Type：“Grid”；Width:“100％”,Height:“100％”,Border:1,Col(标签):[{Type：“Label”；Width:200,Height:50,ColName(标签名称):“视频名称”；Content(内容):“七十二层奇楼20170609期”}；{Type：“Tag”；Width:200,Height:50,ColName:“主演”；Content:[“王小利”,“吴xx”]}。

该方法能够对设计人员提供的PSD文件直接进行逐层分析，将其中的模块进行代码化处理，得到与描述图像的代码化数据，节省了前端开发人员的工作量，提高了工作效率。

可选地，所述S700前端界面数据生成步骤包括：

基于前端界面模板，读取每一层图像的配置信息和相应的代码化数据放置在所述前端界面模板的相应位置，得到前端界面数据，例如，HTML数据和CSS数据。

例如，根据层1生成的代码化数据可以是如下格式：

该层的配置信息可以是如下形式：

生成的前端界面数据的HTML格式可以是：

</button>

</div>

生成的前端界面数据的CSS格式可以是：

本申请提供的方法采用机器学习方式识别PSD格式中各个层，并且能够将其转化为前端界面的代码化数据，能够让设计师在设计网页设计稿的同时制作静态网页页面，同时，前端开发人员仅在代码化数据的基础上进行适当调整和修改即可以实现前端网页制作，极大地减少了工作量，提高了整体的开发速度和效率，解决了项目开发过程中的瓶颈问题。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

实施例2

根据本申请实施例，还提供了一种基于机器学习的前端辅助开发装置，该装置是与实施例1所述的方法对应的装置。图8是根据本申请的一个实施例的基于机器学习的前端辅助开发装置的示意性框图。该装置可以包括：

数据文件生成模块500，其配置成用于利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；

前端界面数据生成模块700，其配置成用于基于每一层图像的配置信息和相应的代码化数据，生成前端界面数据。

其中，所述长短期记忆网络通过训练模块进行训练，图9是根据本申请的一个实施例的基于机器学习的前端辅助开发装置的训练模块的示意性框图。该训练模块可以包括：

公共模块保存模块100，其配置成用于将网页样本集合中的每一个网页样本拆分成网页模块，将所述网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；和

模型训练模块300，其配置成用于将所述公共模块和相应的代码化数据作为训练样本，对长短期记忆网络模型进行深度训练，得到深度长短期记忆网络。

可选地，在一个实施方案中，所述公共模块保存模块100步骤可以包括：

图片指纹计算模块，其配置成用于对于每一个网页模块，计算该网页模块的图片指纹；

采用该装置，能够将项目开发过程中利用率最高的网页模块进行代码化处理，从而避免重复性劳动，减轻前端开发人员的工作量，提高工作效率。

所述图片指纹计算模块可以包括以下模块：

网页模块尺寸标准化模块，其配置成用于将网页模块尺寸缩小到固定尺寸，例如，16*16像素，或者其他尺寸；将缩小后的图片，转为固定级数的灰度，例如，64级灰度。该步骤能够去除网页模块的细节，只保留结构、明暗等基本信息，为比较相似度提供基础数据。

平均值计算模块，其配置成用于计算所有像素的灰度平均值，将每一个像素的灰度与平均值进行比较，大于或等于平均值则记为1；小于平均值则记为0，得到网页模块的序列；

哈希值计算模块，其配置成用于计算网页模块的序列的哈希值，得到该网页模块的指纹。

该装置的优点是简单快速，不受图片大小缩放影响，从而快速对网页模块进行分类。

可选地，在另一个实施方案中，所述公共模块保存模块100可以包括：

网页截取模块，其配置成用于将网页样本集合的网页图片与其他网页图片逐一相互比较，计算分析出该网页图片与其他网页图片之间相似的部分，将相似的部分截取并保存为公共模块。

该装置将网页图片整体进行比较，在存在相似部分的情况下，截取公共模块，从而能够减少对网页图片拆分的工作量。

可选地，所述模型训练模块300可以包括：

特征提取模块，其配置成用于将公共模块通过卷积神经网络得到特征图和特征向量。

深度训练模块，其配置成用于将公共模块的特征图与特征向量以及该公共模块的代码化数据输入到长短期记忆网络模型(LSTM)中进行深度训练。在该步骤中，通过设置输入门、输出门、遗忘门和记忆单元，构建长短期记忆网络模型中的长短期记忆单元；设置长短期记忆网络模型中每一个连接层的时间步长和隐层单元的个数；在长短期记忆网络模型的每一个连接层的长短期记忆单元包括两个输入端和一个输出端，两个输入端的维度分别与通过卷积神经网络的特征图和特征向量的维度和隐层单元参数的维度相等。

模型优化模块，其配置成用于根据输出的代码化数据与实际的代码化数据的偏差，对长短期记忆网络模型的参数进行优化，得到深度长短期记忆网络。在该步骤中，将公共模块对应的代码化数据映射为向量；将公共模块的特征图和特征向量作为全局信息输入到长短期记忆网络模型中；每一层的长短期记忆单元的输入包括上一层的长短期记忆单元输出和与该层顺序相对应的向量，依层传递得到公共模块的输出描述信息，相应的长短期记忆单元的输出包括上一层的长短期记忆单元的输出、当前长短期单元以前所有层的长短期记忆单元的输出或当前长短期单元的前两层的长短期记忆单元的输出；根据输出描述信息与实际描述信息的误差，对长短期记忆网络模型的参数进行优化，得到深度长短期记忆网络模型。

该装置通过深度训练，创建了一个具有可进行归纳和探索的LSTM层的模型，利用长短期记忆网络模型能够通过机器学习将图片代码化，从而提高编辑网页的效率，避免了很多重复性劳动，节约了人力成本和时间成本。

可选地，所述数据文件生成模块500可以包括：

图像模块识别模块，其配置成用于对于每一个图像模块，利用经过训练的长短期记忆网络进行识别，生成与图像模块对应的代码化数据；

可选地，所述前端界面数据生成模块700还用于：基于前端界面模板，读取每一层图像的配置信息和相应的代码化数据放置在所述前端界面模板的相应位置，得到前端界面数据，例如，HTML数据和CSS数据。

本申请提供的装置采用机器学习方式识别PSD格式中各个层，并且能够将其转化为前端界面的代码化数据，能够让设计师在设计网页设计稿的同时制作静态网页页面，同时，前端开发人员仅在代码化数据的基础上进行适当调整和修改即可以实现前端网页制作，极大地减少了工作量，提高了整体的开发速度和效率，解决了项目开发过程中的瓶颈问题。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

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

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

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来。

实施例3

本申请的实施例的一个方面提供了一种计算设备，参照图10，该计算设备包括存储器1120、处理器1110和存储在所述存储器1120内并能由所述处理器1110运行的计算机程序，该计算机程序存储于存储器1120中的用于程序代码的空间1130，该计算机程序在由处理器1110执行时实现用于执行任一项根据本申请的方法步骤1131。

本申请的实施例的一个方面还提供了一种计算机可读存储介质。参照图11，该计算机可读存储介质包括用于程序代码的存储单元，该存储单元设置有用于执行根据本申请的方法步骤的程序1131’，该程序被处理器执行。

本申请实施例的一个方面还提供了一种包含指令的计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算设备执行时，导致所述计算设备执行如上所述的方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、获取其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令处理器完成，所述的程序可以存储于计算机可读存储介质中，所述存储介质是非短暂性(英文：non-transitory)介质，例如随机存取存储器，只读存储器，快闪存储器，硬盘，固态硬盘，磁带(英文：magnetic tape)，软盘(英文：floppy disk)，光盘(英文：optical disc)及其任意组合。

以上所述，仅为本申请较佳的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应该以权利要求的保护范围为准。

Claims

1.一种基于机器学习的前端辅助开发方法，包括：

数据文件生成步骤：利用经过训练的长短期记忆网络对PSD格式文件的每一层图像进行识别，生成与该层图像对应的代码化数据；和

其中，所述长短期记忆网络通过以下步骤进行训练：

公共模块保存步骤：将网页样本集合中的每一个网页样本拆分成网页模块，将所述网页样本集合中相似数量高于第一阈值的网页模块保存为公共模块；和

2.根据权利要求1所述的方法，其特征在于，所述公共模块保存步骤包括：

3.根据权利要求1所述的方法，其特征在于，所述模型训练步骤包括：

4.根据权利要求1所述的方法，其特征在于，所述数据文件生成步骤包括：

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述前端界面数据生成步骤包括：

6.一种基于机器学习的前端辅助开发装置，包括：

7.根据权利要求6所述的装置，其特征在于，所述公共模块保存模块包括：

8.根据权利要求6或7所述的装置，其特征在于，所述数据文件生成模块包括：

9.一种计算设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如权利要求1至5中任一项所述的方法。

10.一种计算机可读存储介质，优选为非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现如权利要求1至5中任一项所述的方法。