作者：vivo 互联网前端团队 - Su Ning
在设计稿转网页中使用基于 self-attention 机制设计的机器学习模型进行设计稿的布局，可能联合 dom 节点的上下文得出正当的计划。
一、背景
切图作为前端的传统手艺却是大多数前端开发者都不愿面对的工作。
为了解决切图的各种问题，人们搜索枯肠开发了各种各样的设计稿转代码（D2C）工具，这些 D2C 工具随着设计师应用的软件的变更又在一直地迭代。
从 Photoshop 时代，前端须要手动标记节点进行独自的款式导出（如图 1），到 sketch measure，能够整体页面输入（如图 2），其效率、后果都曾经有了一个质的晋升。
然而还是未能彻底解决切图的问题，因为设计稿所蕴含的信息只负责输入款式，而没有方法输入网页布局，咱们还是没有方法间接 copy 生成的代码到咱们的我的项目中间接应用。
图 1
图 2
在学习现有的 D2C 案例的过程中，咱们发现很多成熟的计划中援用了机器学习辅助代码的生成，其中绝大多数的工作是用于视觉辨认和语义辨认，于是咱们想，机器学习是否可能利用到网页的布局中呢？
为了验证咱们的猜测，也为了解决咱们工作中的理论痛点，咱们决定本人开发一个 D2C 工具，心愿可能通过机器帮咱们实现网页布局的过程，整体工作流程大抵如图 3，首先获取设计稿的元数据，而后对设计稿的数据进行一系列的解决导出自在的 dsl，而后依据这个 dsl 生成相应端的代码。
图 3
二、页面布局
要解决网页的布局须要解决两个问题，节点的父子关系以及节点之间的地位关系。
2.1 节点的父子关系
节点的父子关系指的是一个节点蕴含了哪些子节点，又被哪个节点所蕴含。这部分的内容能够间接应用规定解决，通过节点的顶点地位和中心点的地位信息判断一个节点是否是另一个节点的子节点。这里咱们就不展开讨论了。
同一层级节点之间的地位关系，才是咱们这次着重须要解决的问题。
2.2 节点之间的地位关系
网页的布局有很多种，线性布局，流式布局，网格布局，还有随便定位的相对定位等等，而咱们在导出款式的时候，无非须要确认两件事件，节点的定位形式（relative、absolute、fixed）和节点的布局方向（纵向、横向）。
线性布局
流式布局
网格布局
依照平时切图的习惯，咱们会首先辨认一组平级节点之间有没有显著的高低或者左右的地位关系，而后将他们放入到网格中，最初独立在这些节点里面的节点就是相对定位。
让机器辨认节点之间的地位关系，就成了解决问题的要害一环。
判断节点之间的地位关系只须要节点的地位和宽高信息，因而咱们的输出数据设计如下：
[
{
width:200,
height:50,
x:0,
y:0
},
{
width:200,
height:100,
x:0,
y:60
},
{
width:200,
height:100,
x:210,
y:60
}
]同时咱们心愿取得的输入后果是每一个节点是高低排列，左右排列，还是相对定位的，输入的数据设计如下：
[
{layout:'col'},
{layout:'row'},
{layout:'absolute'}
]起初咱们是心愿通过书写肯定的规定进行布局的判断，通过判断前后两个节点的地位关系是高低还是左右来进行布局，然而这样只关注两个节点地位关系的规定却很难判断相对定位的节点，并且固定的规定总是不够灵便。于是咱们想到了长于解决分类问题的机器学习。
很显然通过大量数据训练的机器学习模型能够很好的模拟咱们平时切图的习惯，在解决各种边缘场景的时候也可能更加的灵便。只有进行正当的模型设计，就能够辅助咱们进行布局的解决。
三、为什么是 self-attention？
从上文咱们能够看出，咱们须要训练一个模型，输出一个节点的列表，输入一个节点的布局信息，是不是有点像文本辨认外面的词性翻译呢？
对于具体的一个节点，咱们是没有方法判断其真正的布局的，只有将其放到文档流中联合上下文来看能力体现出其理论的意义。
在解决词性标记这块，RNN(循环神经网络)、LSTM(长短期记忆网络) 都比拟适合此类场景，RNN 作为经典的神经网络模型通过将前一次训练的权重带入到下一次训练中建设上下文的关联，LSTM 作为 RNN 的一种变体解决了 RNN 难以解决的长期依赖问题，用来训练网页布局看起来是一个不错的抉择。
RNN（循环神经网络）
665px LSTM(长短期记忆网络)
应用 LSTM 确实能够解决咱们的问题，然而因为此类神经网络对于时序的依赖导致上下文的数据没有方法进行并行运算，这使得咱们的计算机没有方法更高效的训练模型，并且网页布局只须要获取不同节点的定位信息，对于装载的程序并没有强要求。
随着 2017 年的一篇文章《Attention is All you Need》的横空出世，整个机器学习畛域迎来了新一轮的反动，目前最支流的框架 transformer、BERT、GPT 全是在 attention 的根底上倒退起来的。
self-attention 自注意力机制是 attention 机制的变体，通过全局关联权重得出单个向量在全局中的加权信息，因为每一个节点都采纳雷同的运算形式，所以同一个序列中的节点能够同时进行上下文计算，极大地晋升了模型训练的效率，也更不便咱们优化和回归模型。
self-attention
综上，思考到 attention 对于上下文更好的关联和更好的并行性能，咱们决定基于此进行建模。
四、模型设计
咱们起初设计了一个输入的向量用于辨认数据处理的后果，[1,0,0,0] 代表是失常的竖向排列，[0,1,0,0] 代表了横向排列，以此类推顺次代表了 absolute 和 fixed 定位形式，然而起初咱们发现 fixed 因为是绝对于整个页面的定位形式，所以在繁多层级下很难做标记，所以咱们将输入值精简成了竖向排列，横向排列和相对定位三种状况。
模型的整体设计如下，通过 self-attention 将节点转化为上下文信息，再通过前馈神经网络将上下文信息训练成具体的布局。
（1）在获取到一组数据后，为了去掉数值的大小的影响，咱们首先对数据进行一次归一解决，将输出数据的每一个值别离除以这一组数据中的最大值。
（2）将每一组数据别离进行三次线性变换，失去每组数据相应的 Q，K，V，接下来咱们就能够进行 self-attention 运算了。
（3）咱们以 node1 为例，如果须要计算 node1 和其余节点的相关性，则须要应用 Q1 别离和每一个节点的 key 进行点积操作，将他们的和与 V1 相乘，为了避免权重值相乘当前过大，最初进行一次 softmax 计算，就失去了 node1 和其余节点的上下文信息。
咱们将一组数据中所有 QKV 看成三个矩阵，失去的上下文 context 的汇合就能够看成一个矩阵计算。
（4）为了晋升训练的成果，每个节点的上下文信息输出到前馈神经网络进行最初的布局后果的训练，将失去的后果进行 softmax 计算就能够失去单个节点在一组数据中布局的概率分布了，因为同一组节点的运算没有前后程序，故单个节点的运算能够同时进行，配合 GPU 减速极大地晋升了训练的效率。
五、数据筹备
因为机器学习须要海量的数据，数据的数量和品质都会极大地影响模型最终的训练成果，所以数据的数量和品质都十分重要，咱们采纳了三种数据源用于数据的训练，别离是标记过的设计稿，抓取的实在网页数据，以及主动生成的数据。
5.1 设计稿的标记
在获取到设计稿数据当前只取每个节点的定位和宽高数据，通过上文的父子关系解决后获取每一层的节点数据，为了防止出现过拟合的状况咱们去掉节点数量绝对较少的层级，并对每一层的布局进行手动标记。设计稿标记数据是品质最好，但也是最费时费力的工作，所以须要其余的数据源进行数量的补充。
5.2 实在网页的抓取
作为标记设计稿的补充，网页中的实在数据也是牢靠的数据源，然而抓取网页的过程中最大的难点在于判断页面中的节点属于横向还是纵向。
因为实现横向排列的形式千奇百怪，能够通过 float，inline-block，flex 等等办法，咱们如果只获取网页中节点的定位和宽高信息，还是须要手动标记他的布局，所以还是要从节点的 css 动手，在批量获取之后进行手动筛选，去掉低质量的数据。绝对于标记的设计稿是一个无效的补充。
5.3 网页生成器
为了更快的生成大量的数据，咱们写了一个网页生成的算法，在一开始就决定节点的定位形式，而后将节点渲染成网页，最初在抓取节点的定位信息，然而随机生成的数据存在一些不稳固的边界场景，譬如生成的相对定位的节点会正好定位到横向布局的左边。这时就须要手动进行甄别。
咱们最终收集了大概两万多条数据，通过重复的训练与调试，最终准确率稳固在 99.4% 左右，达到一个绝对可用的程度。
应用实在的 dom 进行回归验证，能够看出精确的辨认出了网页的横向竖向布局以及相对定位的节点。
六、优化方向
6.1 元素换行
设计稿中会呈现列表一行放不下而后换行的状况，这些节点应该是属于横向的地位关系，然而机器面对两行会将每一行的首个元素辨认成纵向排布，这就须要对反复节点进行类似度检测，对类似节点采纳雷同的布局策略。
6.2 分组问题
基于规定的分组会导致两个不相交的节点不会调配到一个组外面，比方网格中的图标和文字，导致布局的时候会分成两个独立的组，能够通过训练常见的布局联合内容辨认进行更精准的分组。
6.3 通用布局
通过 self-attention 机制咱们不仅能够判断单个节点在其层级的布局信息，咱们也能够进行发散，通过训练整个层级的节点数据得出以后节点属于卡片流，标签，个人信息页等功能性的标记，进一步推导出每个节点的性能，再联合节点具体的布局信息，不仅能够更好的实现网页的排布，还能够节点的性能推到实现标签的语义化。
6.4 数据生成
为了解决更多的网页布局问题，同时缩小咱们人工标记的工作量，能够使用强化学习模型开发一套网页生成工具，让咱们的数据更靠近实在的网页布局，从而使布局模型训练的后果更加贴近生产的场景。
七、总结
机器学习十分善于解决分类问题，相比于传统的手写规定布局，机器学习是基于咱们现有的开发习惯进行训练，最终生成的代码也更加贴近咱们平时的切图习惯，代码的可读性和可维护性都更上一层楼。
而机器生成的动态页面相较于不同的人手写的动态页面，遵循统一的代码标准，代码格调也更加对立。
在模型搭建的过程中能够将具体的应用场景类比为文本或者图像畛域的内容，便于寻找现有的模型进行迁徙学习。
使用机器学习解决网页布局问题的外围在于建设节点的上下文的关联，通过理解各种经典的神经网络模型的运行原理咱们选出了循环神经网络和自注意力机制这种可能建设上下文关联的模型，而通过对于其运行原理的进一步理解咱们抉择了更贴近网页布局场景以及运行效率更高的 self-attention 模型，由此也能够看出理解模型的运行机制能够更好的帮忙咱们解决理论的利用场景。