vivo前端智能化实践：机器学习在自动网页布局中的应用

作者：vivo 互联网前端团队- Su Ning

在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局，能够结合dom节点的上下文得出合理的方案。

一、背景

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:6189047d-5d61-46a7-9c20-7ac0415ead75

为了解决切图的各种问题，人们绞尽脑汁开发了各种各样的设计稿转代码（D2C）工具，这些D2C工具随着设计师使用的软件的变更又在不断地迭代。

从Photoshop时代，前端需要手动标记节点进行单独的样式导出（如图1），到sketch measure，可以整体页面输出（如图2），其效率、结果都已经有了一个质的提升。

但是还是未能彻底解决切图的问题，因为设计稿所包含的信息只负责输出样式，而没有办法输出网页布局，我们还是没有办法直接copy生成的代码到我们的项目中直接使用。

图1

图2

在学习现有的D2C案例的过程中，我们发现很多成熟的方案中引用了机器学习辅助代码的生成，其中绝大多数的工作是用于视觉识别和语义识别，于是我们想，机器学习是否能够应用到网页的布局中呢？

为了验证我们的猜想，也为了解决我们工作中的实际痛点，我们决定自己开发一个D2C工具，希望能够通过机器帮我们实现网页布局的过程，整体工作流程大致如图3，首先获取设计稿的元数据，然后对设计稿的数据进行一系列的处理导出自由的dsl，然后根据这个dsl生成相应端的代码。

图3

二、页面布局

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:ffec876a-081c-4c2a-8e5a-af87d0ce4a2f

2.1 节点的父子关系

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:874333f3-261b-4841-bffe-106833849229

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:195bb274-fd0d-40fe-9131-f9a696cc6379

2.2 节点之间的位置关系

网页的布局有很多种，线性布局，流式布局，网格布局，还有随意定位的绝对定位等等，而我们在导出样式的时候，无非需要确认两件事情，节点的定位方式（relative、absolute、fixed）和节点的布局方向（纵向、横向）。

线性布局

流式布局

网格布局

按照时切图的习惯，我们会首先识别一组级节点之间有没有明显的上下或者左右的位置关系，然后将他们放入到网格中，最后独立在这些节点外面的节点就是绝对定位。

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:893c6e43-d12a-4c0b-ba46-666a205139f7

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:8a57d572-b468-439c-840a-d1d7bd610274

[
    {
        width:200,
        height:50,
        x:0,
        y:0
    },
    {
        width:200,
        height:100,
        x:0,
        y:60
    },
    {
        width:200,
        height:100,
        x:210,
        y:60
    }
]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:2a66e708-39f7-4fde-96f5-975f64521e00

[
    {
        layout:'col'
    },
    {
        layout:'row'
    },
    {
        layout:'absolute'
    }
]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:5fa0d0e8-01f1-4893-a910-951ea2a942ad

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:20673362-145a-4491-b35e-36d9c6f4d4c1

三、为什么是self-attention？

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:93a2896e-2583-4da4-8c9f-6bdcf3eaec3f

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:0ce67d90-6b0b-4bc7-8e01-6fc2f8b68475

在处理词性标记这块，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加速极大地提升了训练的效率。

五、数据准备

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:631975cb-a76a-4963-9a90-bf3e2dbc3740

5.1 设计稿的标记

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:175afd13-9768-492b-b1c4-efdc4606814f

5.2 真实网页的抓取

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:735c3b39-7243-4736-a271-a1ad904c0207

由于实现横向排列的方式千奇百怪，可以通过float，inline-block，flex等等方法，我们如果只获取网页中节点的定位和宽高信息，还是需要手动标记他的布局，所以还是要从节点的css入手，在批量获取之后进行手动筛选，去掉低质量的数据。相对于标记的设计稿是一个有效的补充。

5.3 网页生成器

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:f2340250-4d6c-47c6-9c8b-22d04cc2b919

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:d0c8f587-c326-4303-8941-f860b823519e

使用真实的dom进行回归验证，可以看出准确的识别出了网页的横向竖向布局以及绝对定位的节点。

六、优化方向

6.1 元素换行

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:3fcf0864-37c5-4e0f-a247-fc52f97a68a7

6.2 分组问题

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:cefbbd91-8190-4d69-a3df-4afef1fe23db

6.3 通用布局

通过self-attention机制我们不仅可以判断单个节点在其层级的布局信息，我们也可以进行发散，通过训练整个层级的节点数据得出当前节点属于卡片流，标签，个人信息页等功能性的标记，进一步推导出每个节点的功能，再结合节点具体的布局信息，不仅可以更好的实现网页的排布，还可以节点的功能推到实现标签的语义化。

6.4 数据生成

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:ae733824-d508-46bc-9cc1-52d23fd8f214

七、总结

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:36ec576e-fb5d-4269-ae86-6374f71d6c3c

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:5c6d0a67-b89e-4349-bc42-b80e1cacbbc8

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:168048ad-fed5-46a1-b1d1-37d23f2131da

运用机器学习解决网页布局问题的核心在于建立节点的上下文的关联，通过了解各种经典的神经网络模型的运行原理我们选出了循环神经网络和自注意力机制这种能够建立上下文关联的模型，而通过对于其运行原理的进一步了解我们选择了更贴*网页布局场景以及运行效率更高的self-attention模型，由此也可以看出了解模型的运行机制可以更好的帮助我们解决实际的应用场景。

Original: https://www.cnblogs.com/vivotech/p/16627481.html
Author: vivo互联网技术
Title: vivo前端智能化实践：机器学习在自动网页布局中的应用