作者：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难以解决的长期依赖问题，用来训练网页布局看起来是一个不错的选择。
