Author: vivo Internet front-end team - Su Ning
Using the machine learning model based on the self-attention mechanism to design the layout of the design draft can be combined with the context of the dom node to obtain a reasonable solution.
1. Background
The traditional craft of cutting diagrams as a front-end is a task that most front-end developers are unwilling to face.
In order to solve the various problems of cutting diagrams, people have racked their brains to develop a variety of design draft-to-code (D2C) tools, and these D2C tools continue to iterate as the software used by designers changes.
From the era of Photoshop, the front-end needs to manually mark nodes for separate style export (as shown in Figure 1), to sketch measure, which can be output as a whole page (as shown in Figure 2), and its efficiency and results have been qualitatively improved.
However, the problem of cutting pictures has not been completely solved, because the information contained in the design draft is only responsible for outputting the style, and there is no way to output the layout of the web page. We still have no way to directly copy the generated code and use it directly in our project.
figure 1
figure 2
In the process of studying the existing D2C cases, we found that many mature solutions reference the generation of machine learning-assisted code, most of which are used for visual recognition and semantic recognition, so we wondered whether machine learning can Applied to the layout of the web page?
In order to verify our conjecture and solve the actual pain points in our work, we decided to develop a D2C tool ourselves, hoping to help us realize the process of web page layout through the machine. The overall workflow is roughly as shown in Figure 3. First, get the metadata of the design draft data, and then perform a series of processing on the data of the design draft to export the free dsl, and then generate the code of the corresponding end according to the dsl.
image 3
Second, the page layout
To deal with the layout of web pages, two problems need to be solved, the parent-child relationship of nodes and the positional relationship between nodes.
2.1 Parent-child relationship of nodes
The parent-child relationship of a node refers to which child nodes a node contains and which node it contains. The content of this part can be directly processed by rules, and whether a node is a child node of another node is judged by the vertex position of the node and the position information of the center point. We will not discuss it here.
The positional relationship between nodes at the same level is the problem we focus on solving this time.
2.2 Location relationship between nodes
网页的布局有很多种，线性布局，流式布局，网格布局，还有随意定位的绝对定位等等，而我们在导出样式的时候，无非需要确认两件事情，节点的定位方式（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模型，由此也可以看出了解模型的运行机制可以更好的帮助我们解决实际的应用场景。
END
猜你喜欢
本文分享自微信公众号 - vivo互联网技术（vivoVMIC）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。