一种基于手绘网页图像的前端工程化代码生成方法专利检索-隐式确认人工智能专利检索查询-专利查询网

一种基于手绘网页图像的前端工程化代码生成方法

阅读：694发布：2020-05-11

专利汇可以提供一种基于手绘网页图像的前端工程化代码生成方法专利检索，专利查询，专利分析的服务。并且本发明涉及一种基于手绘网页图像的前端工程化代码生成方法。本发明的主要内容为：(1)设计领域特定语言对网页布局进行泛化；(2)对普通的网页进行预处理，使其趋近于手绘风格方便训练；(3)建立视觉模型、语言模型和解码器构成Draft2Code 算法对手绘网页图像与其对应的领域特定语言代码进行训练得到识别模型，进而对手绘网页进行识别和转换；(4)对生成的领域特定语言代码进行处理转换为符合Vue或React 框架语法的前端代码。本发明减少了UI设计工序，最终生成的代码文件可供前端工程师进行进一步开发，缩短了代码构建时间，从而提高开发效率。，下面是一种基于手绘网页图像的前端工程化代码生成方法专利的具体信息内容。

权利要求

1.一种基于手绘网页图像的前端工程化代码生成方法，其特征在于，设计基于手绘网页图像的前端代码自动生成算法Draft2Code，包含3个部分：
(1)建立视觉模型
在视觉模型的设计中，采用CNN非监督学习，将输入图像转换为学习定长向量作为输出；
将输入图像调整为256×256的彩色图片，激活函数均为ReLU，并且只进行卷积，不对边界做处理；首层的卷积核数目设定为16，第二层为32，第三层为64，最后一层为128；
经过四层卷积输出向量p待后续处理；
(2)建立语言模型
引入LSTM的变体GRU来对长时间序列数据的关系进行建模，该模型由2层分别包含128个细胞的GRU神经网络组成；
GRU中的新记忆h～是通过使用递归连接来学习记忆信息的，利用t时刻输入的向量xt和前一步骤中产生的输出向量qt-1经过权重相乘通过sigmoid函数激活，即根据公式zt＝σ(Wz·[qt-1,xt])和rt＝σ(Wr·[qt-1,xt])得到两个门值，更新门权重zt和重置门权重rt；σ为激活函数sigmoid；在qt-1与权重乘积之后和重置门rt相乘，之后根据公式得到最终的新记忆其中Wz为隐藏层到更新门的权值矩
阵，Wr为隐藏层到重置门的权值矩阵，W为隐藏层到待选状态的权值矩阵；最后根据公式得到当前步骤的输出向量qt；
对于每个t时刻都会输出向量qt待后续处理；
(3)建立解码器
视觉编码向量p和t时刻的语言编码向量qt连接组成向量rt，输入到第二个基于GRU的解码器模型中，该模型由2层分别包含512个细胞的GRU神经网络组成，用于解码此前通过视觉模型和语言模型学习得到的表现数据；
(4)训练阶段
模型使用监督学习的方法进行训练；为了更好的平衡长期依赖和计算损耗，使用长度为48的滑动窗口对用于训练的每个DSL输入文件进行分割，得到特征序列；每个时刻都会输入手绘图像I和对应的特征序列xt，输出预测的下一个特征yt；模型使用交叉熵代价函数作为其损失函数，它会将模型预测的下一个特征yt和实际的下一个特征xt+1进行比较；
当用于训练的上下文在每个时刻通过滑动窗口进行更新时，对于与同一页面样式相关联的样本，将重用相同的输入图像I；最后设置两种标记：和，分别作为DSL文件前缀和后缀的占位标志，以方便后续编译时替换前后缀的具体内容；
训练是通过计算损失相对于用反向传播计算的网络权重的偏导数来执行的，以最小化多分类对数损失，损失计算公式如下：
上述公式中，xt+1为下一时刻的输入向量，yt是当前时刻的输出向量；
-4
用RMSProp即Root Mean Square Prop算法训练，学习率设置为1×10 ，并将输出梯度限制在[-1.0，1.0]范围内，以应对数值不稳定性；为了防止模型过拟合，引入了随机失活正则化，对视觉模型的完全连接层后设置0.3的失活率，即在该层训练中每次随机删除30％的神经元，使模型不太依赖某些局部特征，泛化性更强；
训练方式采用每64组图像序列为一批的小批量训练；
训练后建立图像数据和用DSL代码表示的相关特征序列之间关系模型；
(5)测试阶段
为了生成DSL代码，向上述Draft2Code模型中输入手绘网页图像I和特征数为48的上下文序列X；将xt...xT-1初始化设置为空向量，序列的最后一个特征向量xT设置为；然后使用预测的特征向量yt来更新下一个特征序列；也就是要将xt...xT-1分别设置为xt+
1...xT，再将xt设置为yt；重复该过程，直到模型生成标记；最后使用传统编译方法将生成的DSL特征序列编译为所需的目标语言。
2.根据权利要求1所述的方法，其特征在于：编写了多种DSL与前端代码的映射关系，存储在.json格式的文件中，其内容用于替换所生成的DSL；且对于所有替换内容，提出三种替换标志：大括号({})用于替换子元素内容，如一个

元素内包含一个

说明书全文

一种基于手绘网页图像的前端工程化代码生成方法

技术领域

[0001] 本发明属于软件效率工程领域，是一种基于深度神经网络，用于将网页手绘稿图像转换前端工程化代码的自动代码生成算法。

背景技术

[0002] 典型的设计工作流分为三个阶段：首先，产品经理依据用户需求绘制草图；然后，设计师依据草图进行UI(User Interface，用户界面)设计原型；最后，前端工程师依据设计原型实现页面开发。这种冗长的开发流程很多时候会成为制约企业的瓶颈问题，尤其对于一些并不过于注重前端设计的应用，如很多公司内部使用的B端业务应用，并不需要设计师进行过于精细化的设计，如果能够精简掉这一步将会使工作效率大大提升。如果可以直接将产品经理草图利用深度神经网络提取特征并转换成HTML(Hyper Text Markup Language，超文本标记语言)代码，不但可以省略设计师对草图进行优化设计的步骤，还能够节约前端工程师初期编码的时间，从而精简设计流。

[0003] 现有针对自动生成网页的研究和实现，很难满足现今的前端开发需求，原因主要有两点：其一，输入内容为其他网页的截图或设计图，但是当网页没有其他网站作为蓝本，或为不需要设计师参与的中小型B端项目，则无法提供相应的输入，实际工程中更需要能够将手绘网页图像作为输入；其二，输出内容为原生HTML页面，但实际开发中更需要生成基于框架的组件化代码。

[0004] 本发明参考图1架构设计了基于CNN和GRU等深度学习算法实现了对手绘网页图像的前端代码的自动生成算法Draft2Code，让程序自动的将草图转换为可以让前端工程师直接开始逻辑开发的页面HTML代码；同时把算法与最流行的前端框架结合，为使用者提供自定义组件、组件化输出的功能，增强UI样式的可重用性。

发明内容

[0005] 本发明基于手绘网页图像和深度学习算法，设计了前端代码自动生成算法Draft2Code。本发明涉及以下2点：

[0006] (1)本发明参考图1架构设计模型训练算法。即对输入的手绘网页图像使用卷积神经网络进行特征提取，对输入的源代码使用门控循环单元进行编码，最后再使用门控循环单元将二者输出相结合，训练得到模型；

[0007] (2)本发明参考图2架构设计代码生成算法。即对输入的手绘网页图像使用卷积神经网络进行特征提取，并根据已训练的模型生成DSL，根据映射关系生成前端工程化代码，实现代码生成算法。

[0008] (1)设计基于手绘网页图像的前端代码自动生成算法Draft2Code

[0009] 算法架构主要包含3个主要部分：

[0010] 1)基于CNN的计算机视觉模型，作用是从输入的页面设计图图像中提取特征；

[0011] 2)基于GRU的语言模型，作用是编码源代码特征序列；

[0012] 3)基于GRU的解码器，作用是对1)中获得的图像特征和2)中获得的编码相结合进行计算，预测序列中的下一个特征。

[0013] 依照系统的总体架构，对于每个t时刻，首先图像I输入到基于CNN的视觉模型，经过编码后输出向量p；同时特征向量xt输入到第一个基于GRU的语言模型，经过编码后输出向量qt。上述视觉编码向量p和语言编码向量qt连接组成向量rt，输入到基于GRU的解码器中，用于解码此前通过视觉模型和语言模型学习得到的表现数据，即特征向量yt，并将其赋值给xt+1供下一时刻使用。以下为上述系统的公式表示：

[0014] p＝CNN(I)

[0015] qt＝GRU(xt)

[0016] rt＝[p,qt]

[0017] yt＝softmax(GRU’(rt))

[0018] xt+1＝yt

[0019] (2)建立视觉模型

[0020] CNN广泛应用于视觉领域，作为多层感知机的一种，得益于其局部连接和共享权值的特点，具有很强的泛化能力，因此很适合用于物体和图形的识别与检测。在视觉模型的设计中，本发明采用CNN非监督学习，将输入图像转换为学习定长向量作为输出。

[0021] 将输入图像调整为256×256的彩色图片，激活函数均为ReLU(Rectified Linear Unit，线性整流函数)，并且只进行有效卷积，不对边界做处理。首层的卷积核数目设定为16，第二层为32，第三层为64，最后一层为128。经过四层卷积输出向量p待后续处理。

[0022] (3)建立语言模型

[0023] 从目标输出内容出发，无论是生成基于Vue框架的.vue文件，还是基于React框架的.jsx文件，在页面布局描述方面均需要基于HTML语法。本发明采用了一种更为轻量的语言作为DSL(Domain-Specific Language，领域特定语言)参与训练。不同于HTML所具有的可适应多种布局要求的能力，如块级元素

和行内元素等标签，本文所使用的DSL仅针对固定布局形式，因此总体布局元素仅设置了以下7种类型来表示不同应用场景下的块级元素：

[0024] ·row:水平方向放置的布局元素

[0025] ·stack:垂直方向放置的布局元素

[0026] ·header:放置于页面顶端占据全部页宽的布局元素，一般包含页面标题或导航链接等相关内容

[0027] ·footer:放置于页面底部占据全部页宽的布局元素，一般包含导航链接或联系方式

[0028] ·single:几乎充满页面一整行的卡片式布局元素

[0029] ·double:一行可以放置两个的卡片式布局元素

[0030] ·quadruple:一行可以放置四个的卡片式布局元素

[0031] 同样的，对于块级文本元素和按钮等元素，需要再设置8种类型作为完善补充：

[0032] ·btn-active:激活状态的按钮

[0033] ·btn-inactive:未激活状态的按钮

[0034] ·btn-success:成功/确认按钮

[0035] ·btn-warning:警告操作按钮

[0036] ·btn-danger:危险操作按钮

[0037] ·big-title:大标题

[0038] ·small-title:小标题

[0039] ·text:文本

[0040] 此举可以极大地简化语言复杂度，以达到减少搜索空间和词汇量的目的。

[0041] 在绝大多数标记语言中，每一个元素都是由一个开放标签表示，当其内部嵌套子元素时，则需要设置父元素的闭合标签，才能使解析器理解这样的层级关系。通常父元素会包含多个子元素，从而引出在何处设置闭合标签的问题，进而转换为处理远距离依赖的问题。传统的RNN架构存在梯度爆炸和梯度消失的问题，无法处理长序列数据，因此本文引入LSTM的变体GRU来对这类长时间序列数据的关系进行建模，该模型由2层分别包含128个细胞的GRU神经网络组成。

[0042] GRU中的新记忆是通过使用递归连接来学习记忆信息的，利用t时刻输入的向量xt和前一步骤中产生的输出向量qt-1经过权重相乘通过sigmoid函数激活，即根据公式zt＝σ(Wz·[qt-1,xt])和rt＝σ(Wr·[qt-1,xt])得到两个门值，更新门权重zt和重置门权重rt；σ为激活函数sigmoid；在qt-1与权重乘积之后和重置门rt相乘，之后根据公式得到最终的新记忆其中Wz为隐藏层到更新门的权值矩阵，Wr为隐藏层到重置门的权值矩阵，W为隐藏层到待选状态的权值矩阵。最后根据公式qt＝(1-zt) 得到当前步骤的输出向量qt。对于每个t时刻都会输出向量qt待后续处理。

[0043] (4)建立解码器

[0044] 视觉编码向量p和t时刻的语言编码向量qt连接组成向量rt，输入到第二个基于GRU的解码器模型中，该模型由2层分别包含512个细胞的GRU神经网络组成，用于解码此前通过视觉模型和语言模型学习得到的表现数据。

[0045] 训练阶段：

[0046] 模型使用监督学习的方法进行训练。为了更好的平衡长期依赖和计算损耗，使用长度为48的滑动窗口对用于训练的每个DSL输入文件进行分割，得到特征序列。每个时刻都会输入手绘图像I和对应的特征序列xt，输出预测的下一个特征yt。模型使用交叉熵代价函数(cross-entropy cost)作为其损失函数，它会将模型预测的下一个特征yt和实际的下一个特征xt+1进行比较。

[0047] 当用于训练的上下文在每个时刻通过滑动窗口进行更新时，对于与同一页面样式相关联的样本，将重用相同的输入图像I；最后设置两种标记：和，分别作为DSL文件前缀和后缀的占位标志，以方便后续编译时替换前后缀的具体内容；

[0048] 训练是通过计算损失相对于用反向传播计算的网络权重的偏导数来执行的，以最小化多分类对数损失，损失计算公式如下：

[0049]

[0050] 上述公式中，xt+1为下一时刻的输入向量，yt是当前时刻的输出向量。用RMSProp(Root Mean Square Prop)算法训练，学习率设置为1×10-4，并将输出梯度限制在[-1.0，1.0]范围内，以应对数值不稳定性。为了防止模型过拟合，引入了随机失活(Dropout)正则化，对视觉模型的完全连接层后设置0.3的失活率，即在该层训练中每次随机删除30％的神经元，使模型不太依赖某些局部特征，泛化性更强。训练方式采用每64组图像序列为一批的小批量(mini-batch)训练。训练后即建立图像数据和用DSL代码表示的相关特征序列之间关系模型。

[0051] 测试阶段：

[0052] 为了生成DSL代码，向上述Draft2Code模型中输入手绘网页图像I和特征数为48的上下文序列X。将xt...xT-1初始化设置为空向量，最后一个序列xT设置为。然后使用预测的特征向量yt来更新下一个上下文特征序列。也就是要将xt...xT-1分别设置为xt+1...xT，再将xt设置为yt。重复该过程，直到模型生成标记。最后使用传统编译方法将生成的DSL特征序列编译为所需的目标语言。整个过程如图2所示。

[0053] 针对不同框架的代码规范需求，本发明编写了多种DSL与前端代码的映射关系，存储在.json格式的文件中，其内容用于替换所生成的DSL使之满足开发需求。且对于所有替换内容，提出三种替换标志：大括号({})用于替换子元素内容，如一个

元素内包含一个

[0054] 通过将网页设计手绘稿图像转换为工程化的前端代码，可以解决前端项目中没有参考网页截图或专业设计图情况下的网页代码自动生成需求，同时可输出符合Vue和React框架的组件化规范代码，方便工程师进行二次开发，显著提升工作效率。Draft2Code模型系统的双语评估替换评分达到7.7分，能够较为精准的生成手绘稿对应的网页。

[0055] 本专利的核心技术包括：

[0056] (1)引入DSL简化HTML语法用于优化训练过程，一定程度上减少了训练所需数据量[0057] (2)构造了针对手绘网页图像的前端代码自动生成算法(Draft2Code)，可以较为准确的输出符合前端工程化的代码，方便进一步开发。附图说明

[0058] 图1是本发明架构设计模型训练算法。

[0059] 图2是本发明架构设计代码生成算法。

具体实施方式

[0060] (1)本发明可在Windows/Linux/MacOS 操作系统的计算机运行，环境软件要求Keras为2.1.2版本，tensorflow为1.4.0版本，nltk为3.2.5版本，opencv-python为3.3.0.10版本，numpy为1.13.1版本，h5py为2.7.1版本，matplotlib为2.0.2版本，Pillow为
4.3.0版本，tqdm为4.17.1版本，scipy为1.0.0版本。

[0061] (2)本发明的训练数据集需要让网页图像看起来是用手画出来的一样，对训练集进行了两步操作：修改数据集中网页的CSS样式表，首先改变网页上各元素的边框形状和粗细，将原本为矩形的按钮和

元素改为圆角，同时适当的加入阴影效果，然后将字体改为看上去像手写的字体，最后增强图像的效果，比如为图像添加斜线、移位和旋转等效果，模仿真实手绘中变化多端的风格；修改每张图像的信息，比如灰度转换、轮廓检测等。

[0062] (3)本发明采用1700对手绘网页图像和GUI数据对Draft2Code系统进行了训练，按照8:2的比例将数据集分为训练集和验证集。

[0063] (4)前端工程化代码生成算法的输入为手绘网页图像，输出为其对应网页布局且基于Vue/React的前端代码文件。

标题	发布/更新时间	阅读量
一种实现号码安全和隐私保护的方法	2020-05-12	471
电子式针灸取穴精度评判仪	2020-05-11	68
一种淋浴中跌倒的快速检测方法及系统	2020-05-12	271
基于虚拟现实及多模态信息的孤独症辅助干预系统及方法	2020-05-13	492
联合多种情景模式的自适应定位方法	2020-05-08	23
用于输出关于交通工具的物体的信息的方法、系统和汽车	2020-05-08	381
一种BRCA1/2基因变异的解读方法	2020-05-12	653
基于区块链的智慧小区设备监控系统及密钥管理方法	2020-05-12	161
技能服务招投标系统	2020-05-08	396
一种应用于电力公司的调控智能网络化交互系统	2020-05-12	291

一种基于手绘网页图像的前端工程化代码生成方法

一种基于手绘网页图像的前端工程化代码生成方法

技术领域

背景技术

发明内容

具体实施方式

该功能需要专业版企业版VIP权限，您可以：