云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！
概述
对于一些设计和端上展示的场景，布局都是一个非常重要的环节。在一个设计上的布局中，首先我们会对基础元素定一些分类，这些分类的维度可以取决于当前的场景，比如把元素划分成图片，文字，或是把元素划分为标题，段落等。同时，每个元素会有其在这个设计文档中的相应的位置。结合最近的一些样本生成和样本增强的研究，如何可以设计一个模型，自动的生成一些布局就成为了研究的一个方向。
'READ: Recursive Autoencoders for Document Layout Generation' 这篇论文提出了一种使用递归神经网络和自编码器结合的方法从随机的高斯分布中自动生成不同的布局，同时，引入了一个组合度量方法来衡量方法的好坏。后面的篇幅中我们将主要介绍这篇文章的方法以及在前端场景落地的一些思考。
递归神经网络和自编码器
在介绍这篇文章之前，我想要简单的介绍一些递归神经网络 (RVNN) 和 变分自编码器 (VAE) 这两种技术，这里只是一个概述，读者可以通过查阅资料对这两种技术进行更深入的了解。
递归神经网络
递归神经网络乍一听可能很像循环神经网络，正好两者又都可以称作 RNN，也都可以处理变长的数据，但是内在的思想还是不一样的。其本质要解决是样本空间蕴含着树或者图状结构这一类问题。
如上图所示，对于每一次神经网络的输入来说，都是两个向量，这里面我们把它叫做子向量，经过网络的前向运算之后，将生成一个父向量，然后这个父向量再和另一个子节点进入网络，产出一个向量，这样子就形成了一个递归的过程，最终会生成一个根结点或者叫根向量
比如如上这个例子，如果每一个叶子节点都是一个词语的表达，那么最终训练出来的网络就可以把这些词最终合为语义空间的一个向量，这个向量可以代表这句话，同时也意味着相近的向量可以表达相同的语义。
VAE
VAE 是自编码器的一种，相信了解 GAN 的读者也同样对 VAE 很熟悉了，先简单介绍一下自编码器
自编码器大概的思想就是说今天假如你有两个网络，第一个网络负责将一个高维空间的向量 x 映射到一个低维空间的向量 z，例如图中的我们把图片映射到一个一维的向量, 然后第二个网络负责把这个 z 向量再映射到一个高维空间的向量 x1, 我们训练的目标就是 x 和 x1 要尽可能的相近。这样一来，我们就可以认为这个 z 向量是 x 的一种表示，同样，我们把训练好的 x1 拿出来也就成为了一个生成网络，可以生成 z 表示的相应的图片。
而 VAE 在自编码器上做了一些改进，VAE 即使就是在自编码器的基础上让 encoder 再额外产生一个 varaince 的随机向量，同时这个 varaince 和 z 组合起来一起进入下一步从而让模型更加稳定
怎么表示训练数据
要解决自动生成布局的问题，首先我们需要一种表示数据的方式。在这个研究中，我们的原始数据是一些设计文档和这个文档相应的每个基础元素的分类和位置大小，也就是注解。现在，为了训练我们的递归神经网络，我们需要一种方式把这些注解进行结构化的拆解，转化成相应的训练数据。
如上图所示，为了更好的适配递归网络，我们首先把数据转化为二叉树的形式，我们会对设计文档进行从左到右，从上到下的扫描，对于每个基础元素，实际就相当于一个叶子节点，然后按照扫描的顺序自下而上 (bottom top) 进行节点的合并，合并后的节点我们称之为内部节点，这样，最终就会合并成为一个根结点。注意，每个内部节点实际上有一个相对位置的信息，就是合并前的两个元素的相对位置，可以分为 right, bottom right, bottom, enclosed, bottom left 等。每个叶子节点的 bounding box 的宽高都会首先被归一化到 [0, 1] 中
递归模型搭建
对于训练数据，我们会把每个叶子节点的宽高和分类信息连接成一个向量，宽高数值在 [0, 1] 之间，分类是一个 one-hot vector，然后我们使用一个单层的神经网络把这个连接向量映射成一个 n-D 稠密向量中，n 在论文中介绍的经验值为 300。这样，实际上输入的就是一个 300 维的向量
编码器 (spatial relationship encoder SRE)
递归网络中的编码器实际上就是一个多层感知器，在论文中这个感知器的隐藏层一般只有一到两层，这个感知器输入为两个节点，输出为合并后的节点
如公式所示，x1 x2 就是输入的两个节点的 n_D 向量，r 代表两个向量的相对位置，以左边的那个元素为基准。f 函数表示当前编码器的多层感知器的表达式。这样不断的在递归网络中进行编码，最终合并成一个代表根节点的向量
解码器 (spatial relationship decoder SRD)
很简单，解码器就是上面的一个向过程，把父节点再给分解成两个节点
在递归中，对于编码器和解码器是可以同一个重复使用的，例如可以根据相对位置的类别分成不同的编码器和解码器，相同类别的服用同一个网络进行训练，同时我们可以训练一个神经网络来判断当前节点应该还是内部节点还是叶子节点，如果是内部节点，那么将继续解码，如果是叶子节点，则把节点映射成为元素的 bounding box 和分类。
训练模型
在我们模型确定好了之后现在我们来定义训练的损失函数，我们先来看一下表达式
达标了叶子节点的 reconstruction error, 意思也就是一开始叶子节点的向量和最终解码器解码回来的叶子节点向量的差别。
衡量了相对位置的 reconstruction error, 也就是一开始的相对位置和解码器解码回来的相对位置的向量的差别。
衡量了相对位置类别的分类损失，也就是一个标准的交叉熵损失函数。
是最终根节点的向量所代表的空间 p(z) 和标准高斯分布 q(z) 的一个 KL divergence，这是由于我们最终希望我们解码器的输入是一个从高斯分布 sample 出来的一个随机向量，然后模型可以自动的生成一个布局，所以我们希望根节点的向量可以尽可能的像高斯分布
具体上面的四个损失函数的式子我在这里就不一一赘述了，形式都非常的简单，通过这一个合成的损失函数，我们就可以开始训练我们的模型啦。
衡量模型
这篇文章提供了他们自己的衡量方法，他们把这套方法命名为 DocSim, 顾名思义就是衡量文档的相似度。这套方法实际上是基于 BLEU 方法的，也就是用来衡量翻译系统的一套方案。DocSim 类似地比较了两个给定的文档, D，D' , 对于任意一对 bounding box B ∈ D 和 B' ∈ D，我们分配一个指标衡量 B 和 B' 在形状，位置和分类上有多相似，最终的衡量分数就是这个把很多对 bounding box 的衡量指标的总权重。
实验数据集
ICDAR2015 数据集
ICDAR2015 数据集是一套公开的数据集，包含 478 个设计文档，主要是杂志文章。对于这些文档，我们考虑以下语义类别: 标题、段落、页脚、页码和图形。
User-Solicited (US) 数据集
一个包含了 2036 的设计文档的数据集，主要是一些用户提交表达的数据，包括税务表格和银行申请等。这些文件通常表现出高度复杂的结构和大量的原子元素类型。这些特性为生成模型生成文档提出了一个挑战
实验结果
这是将这篇论文中提出的方法和 probabilistic approach 在 ICDAR 数据集比较的结果，数值表示 latent distribution 的相似性，可以看出论文中提出的方法是更优的
这是这篇论文的方法和 LayoutGAN 比较的结果，可以看出，首先论文的方法对训练数据样本的数量要求更少，其次，这篇论文的方法可以产出更多的元素。
一些思考
这篇文章主要提出的方法是用来产出布局的，对于前端场景，同样存在着从一个原始设计稿转化为合理的布局的问题。例如，当我们有一个原始图片的时候，我们怎么可以正确的对图片中的基础元素进行提取，确定每个基础元素的类型（图片还是文字图层）和这个元素的位置。
毫无疑问，这个研究是需要大量的训练数据作为支撑的，如果把论文中的方案应用到前端场景的数据中，或许可以为我们的目标提供一种样本生成和样本增强的方法，从而获得一些合理的训练数据。之后，我们也快在这块做一些相应的研究以验证这种方案的可行性。
【云栖号在线课堂】每天都有产品技术专家分享！
课程地址：https://yqh.aliyun.com/zhibo立即加入社群，与专家面对面，及时了解课程最新动态！
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间：2020-04-09
本文作者：设计稿智能生成代码
本文来自：“掘金”，了解相关信息可以关注“掘金”
