作者：vivo互联网前端团队-苏宁使用基于self-attention机制的机器学习模型进行排版设计draft将设计稿转换为网页。结合dom节点的上下文可以得到合理的解决方案。1.背景切割作为一种传统的前端技术，是大多数前端开发者不愿意面对的工作。为了解决图像裁剪的各种问题，人们绞尽脑汁开发了各种设计到代码（design-to-code，D2C）工具，而这些D2C工具随着设计师使用的软件的变化而不断迭代。从Photoshop时代，前端需要手动标记节点进行个别样式导出（如图1），到sketchmeasure，可以输出整个页面（如图2），其效率和结果得到了质的提升。但是图片裁剪的问题还是没有完全解决，因为设计稿中包含的信息只负责输出样式，而没有办法输出网页版面。我们还是没有办法直接将生成的代码复制到我们的项目中直接使用。图1图2在研究现有D2C案例的过程中，我们发现很多成熟的解决方案都参考了机器学习辅助代码的生成，其中大部分用于视觉识别和语义识别，所以我们想，机器学习是否可以应用于网页的布局？为了验证我们的猜想，解决我们工作中的实际痛点，我们决定自己开发一款D2C工具，希望能帮助我们实现通过机器进行网页布局的过程。整体工作流程大致如图3所示。首先，获取设计稿。数据，然后对设计稿的数据进行一系列的处理导出免费的dsl，然后根据dsl生成相应的代码。图32.页面布局处理一个网页的布局，需要解决两个问题，节点的父子关系和节点之间的位置关系。2.1节点的父子关系节点的父子关系是指一个节点包含哪些子节点，又包含了哪些节点。这部分内容可以直接用规则处理，通过节点的顶点位置和中心点的位置信息判断一个节点是否是另一个节点的子节点。我们不会在这里讨论它。同级节点之间的位置关系是我们这次需要重点关注的。2.2节点之间的位置关系网页的布局有很多种，线性布局，流式布局，网格布局，以及随机定位的绝对定位等，我们在导出样式的时候，需要确认两点，节点定位方式（相对，绝对，固定）和节点布局方向（垂直，水平）。LinearLayoutFlowLayoutGridLayout根据平时切图的习惯，我们会先判断一组对等节点之间是否存在明显的上下或左右位置关系，然后将它们放入网格中，最后独立于这些节点之外的节点是绝对定位的。让机器识别节点之间的位置关系，成为解决问题的关键一环。判断节点之间的位置关系只需要节点的位置和宽高信息，所以我们的输入数据设计如下：[{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'}]一开始我们希望通过编写一定的规则来判断布局，通过判断前后节点的位置关系是上下还是左右来进行布局。但是，仅关注两个节点之间的位置关系很难判断节点的绝对定位，而且固定的规则并不总是足够灵活。于是我们想到了擅长处理分类问题的机器学习。显然，用大量数据训练出来的机器学习模型可以很好地模仿我们平时切图的习惯，在处理各种边缘场景时也能更加灵活。只要进行合理的模型设计，就可以辅助我们进行排版的处理。3.为什么要自我关注？从上面我们可以看出，我们需要训练一个模型，输入一个节点列表，输出一个节点的布局信息。是不是有点像文字识别中的词性翻译？对于一个具体的节点，我们没有办法判断它的真实布局。只有放到文档流中，结合上下文来看，才能体现出它的实际意义。在词性标注的处理上，RNN（递归神经网络）和LSTM（长短期记忆网络）更适合此类场景。作为经典的神经网络模型，RNN是通过将上一次训练的权重带入下一次训练而建立的。上下文关联，LSTM作为RNN的一个变体，解决了RNN难以解决的长期依赖问题，似乎是训练网页布局的不错选择。RNN（recurrentneuralnetworkLSperiodmemorynetwork）使用LSTM确实可以解决我们的问题，但是由于这类神经网络对时序的依赖，无法并行处理上下文数据，这使得我们的计算机没办法被更高效。训练模型，网页的布局只需要获取不同节点的定位信息，对加载顺序没有强要求。随着2017年一篇文章《Attention is All you Need》的发表，整个机器学习领域迎来了新一轮的革命。目前最主流的框架transformer、BERT、GPT都是在attettion的基础上发展起来的。self-attention自注意力机制是注意力机制的一种变体。通过全局关联权重得到世界上单个向量的加权信息。因为每个节点使用相同的操作方式，相同序列的节点可以同时进行上下文计算，大大提高了模型训练的效率，也让我们更容易优化和回归模型。Self-attention综上所述，考虑到attention与上下文的关联性更好，并行性能更好，我们决定基于此建模。4.模型设计我们最初设计了一个输出向量来标识数据处理的结果，[1,0,0,0]代表正常的垂直排列，[0,1,0,0]代表水平排列，等等on依次表示absolute和fixed定位方式，但是后来发现fixed是相对于整个页面的定位方式，所以很难在单一level下标注，所以我们将输出值简化为垂直排列，水平对齐和绝对定位三种情况。模型的总体设计如下。通过self-attention将节点转化为上下文信息，再通过前馈神经网络将上下文信息训练成特定的布局。(1)得到一组数据后，为了去除值大小的影响，我们首先对数据进行归一化处理，将输入数据的每一个值除以这组数据中的最大值.(2)对每组数据进行三次线性变换，得到每组数据对应的Q、K、V，然后我们就可以进行self-attention操作了。(3)我们以node1为例。如果需要计算node1与其他节点的相关性，需要用Q1与各个节点的key做点积运算，将它们的和乘以V1。相乘后太大，最后进行softmax计算，得到node1和其他节点的上下文信息。我们把一组数据中的所有QKV看成三个矩阵，得到的上下文集可以看成是一个矩阵计算。(4)为了提高训练效果，将每个节点的上下文信息输入前馈神经网络进行最终的布局结果训练，得到的结果通过softmax计算得到单个节点的概率分布在一组数据布局上是的，由于同一组节点的操作没有先后顺序，单个节点的操作可以同时进行，大大提高了GPU加速训练的效率。5.数据准备由于机器学习需要海量数据，数据的数量和质量将极大地影响模型最终的训练效果，因此数据的数量和质量非常重要。我们使用三个数据源进行数据训练。它们是标注好的设计稿、抓取的真实网页数据和自动生成的数据。5.1设计稿的标注。拿到设计稿数据后，只取每个节点的定位和宽高数据。处理完上面的父子关系，就得到了每一层的节点数据。为了防止过拟合，我们去掉了节点数比较少的A层，每一层的布局都是人工标注的。设计稿标注数据是质量最好的，也是最费时费力的工作，所以需要其他数据源来补充数量。5.2真实网页的爬取作为对标记设计稿的补充，网页中的真实数据也是一个可靠的数据源，但是爬取网页过程中最大的难点在于判断页面中的节点是横向还是横向。垂直的。由于实现水平排列的方式多种多样，我们可以使用float、inline-block、flex等方式。如果我们只是获取网页中节点的定位和宽高信息，我们还是需要手动标记他的布局，所以还是需要从节点的CSS着手。批量采集后开始手动筛选，以去除低质量数据。是对商标设计稿的有效补充。5.3网页生成器为了更快的生成大量数据，我们写了一个生成网页的算法，一开始就确定节点的定位方式，然后将节点渲染成网页，最后抓取节点的定位信息，但是随机生成的数据中存在一些不稳定的边界场景，比如生成的绝对定位的节点会恰好定位在水平布局的右边。这时候就需要人工筛选了。我们最终收集了两万多条数据。经过反复训练和调试，最终准确率稳定在99.4%左右，达到了比较可用的水平。使用真实dom进行回归验证，可以看出准确识别了网页的水平和垂直布局以及绝对定位的节点。6.优化方向6.1元素换行在设计稿中，会出现一行列表放不下再换行的情况。这些节点应该属于水平位置关系，但是机器在面对两条线时，会将每行的第一个元素识别为垂直排列，这就需要对重复的节点进行相似度检测，对相似的节点采用相同的布局策略。6.2分组问题基于规则的分组会导致两个不相交的节点不能归为一组，比如网格中的图标和文本，这会导致布局被分成两个独立的组，可以通过共同布局来训练组合内容识别以进行更精确的分组。6.3Generallayout通过self-attention机制，我们不仅可以判断单个节点在其层级的布局信息，还可以发散。通过对整个关卡的节点数据进行训练，可以找出当前节点属于卡流、标签、个人信息页等功能标记，并进一步推导出各个节点的功能，结合关卡的具体布局信息节点，不仅可以更好的实现网页的布局，还可以推送节点的功能，实现标签的语义化。6.4数据生成为了解决更多的网页布局问题，减少我们人工标注的工作量，我们可以利用强化学习模型开发一套网页生成工具，让我们的数据更接近真实的网页布局，从而布局模型训练结果更接近生产场景。7.总结机器学习非常擅长处理分类问题。相比传统的手写规则布局，机器学习是根据我们现有的开发习惯进行训练，最终生成的代码更接近我们平时的切图习惯。可读性和可维护性都得到了提高。与不同人编写的静态页面相比，机器生成的静态页面遵循一致的代码规范，代码风格更加统一。在模型构建过程中，可以将特定的使用场景与文本或图像领域的内容进行对比，方便寻找已有模型进行迁移学习。使用机器学习解决网页布局问题的核心是建立节点的上下文关联。通过了解各种经典神经网络模型的运行原理，我们选择了可以建立上下文关联的模型，例如递归神经网络和自注意力机制。通过进一步了解其运行原理，我们选择了更贴近网页布局场景、运行效率更高的self-attention模型。也可以看出，了解模型的运行机制，可以更好的帮助我们解决实际的应用场景。.
