layoutGAN是如何实现自动排版布局的

​这是ICLR2019的论文，内容是关于机器学习在自动排版的应用。过年宅着，正好可以研究下现在AI在设计中的进展。

《LayoutGAN: Generating Graphic Layouts with Wireframe Discriminators》

https://arxiv.org/abs/1901.06767

简介

layoutGAN提出了一种是利用数据学习布局排版的新方法。

说的更通俗一些，随便输入一组参数，layoutGAN会输出一组微调后的参数以及一张线框图，然后与真实数据的参数与线框图构成GAN的对抗训练，最后经过训练，实现输出的参数与线框图接近真实数据。

先前数据驱动的布局排版学习主要由两种方式，一种使用CNN结构学习已标注的线框图，输入输出都是线框图。另一种是使用多层全连接结构，学习元素的几何参数（位置、大小），输入输出都是一组几何参数。layoutGAN将两种方式结合，通过一个可微分的几何参数到线框图的渲染公式，实现输入是一组几何参数，输出是一组新几何参数与对应的线框图，这样一来GAN的判别器可以对新几何参数与线框图都做真假识别，进一步提高布局的真实性。

 

效果

与DCGAN或者直接训练几何参数的relation-based方法相比，layoutGAN（图中的wireframe rendering）引入线框图做图像判断后，生成的数据更真实。如下图红框内所示，DCGAN和relation-based方法都出现了帽子戴在脸上的瑕疵，而layoutGAN则帽子稳稳的戴在头上。

 

 

在MNIST手写数字数据集上，引入线框图后，生成效果也比纯几何参数训练要好一些（但感觉不是很多）

 

学习手机APP布局的效果，可以看到layoutGAN在元素对齐方面仍有欠缺

步骤拆解

全文核心思想可以用下图来概括：

每一步介绍如下：

1. 输入随机元素类别+几何参数

传统GAN输入的是一段随机数组Z，而layoutGAN输入的也是一段随机数组，只不过数组的形式以（p_i, θ_i）

的形式输入。p_i表示第i个元素属于某种类别的概率，例如上图拼贴画中，第三个元素是[男孩，女孩，太阳，树，墨镜，帽子]的概率就写为p_i。θ_i表示几何参数，以最常见的线框为例，θ_i就代表线框左上角与右下角的坐标（x1,y1,x2,y2）

2. 带注意力层的多层全连接网络

这一步骤就是把上一步的随机数，输入到一个深度神经网络中，这个网络基本由全连接层构成，中间带了多个self-attention（自注意力层）层，以捕捉各元素之间的全局关系。

3+4 输出调整后的元素类别+几何参数，计算对抗损失

经过上一步的网络模型后，输入的元素类别+几何参数就发生了变化，从随机变得更真实了。指导其变化方向的就是在此处加了一个判别网络（图中未画出），计算了一个几何参数的对抗损失。

5 通过几何公式，把参数转化为线框图

此处是全文最关键的步骤，经过一个计算公式，把原本几何参数给还原成了图像。

起初我觉得这很简单，根据几何参数θ_i的实际的数值（x1,y1,x2,y2），用opencv画图函数在图上画出来不就行了，但很快意识到这样做，网络在这里就断了，后续损失计算就没法反向传播了。用更严谨点的说法，opencv画图是个不可微分的操作，无法实现梯度的传导，因此无法训练网络。

具体把几何参数转化为几何图像的公式如下图蓝色文字所示。这块基本属于高中解析几何的内容，即已知线段两端坐标，写出这条线段的解析表达式。考虑到图像像素问题，线段其实是一个有内外边界的区域，稍作修改即可得到一组不等式来表示这个区域，而这个不等式恰好可以用Relu函数来表达，Relu即max（0，x）

 

通过这样一个可微分公式转化，原本的几何参数就转化为了线框图，实现后续网络训练。

6 用CNN判别器判断线框图真假

这块就属于GAN的基本用法，真假线框图做对抗训练。

 

总结

我论文看的不多，这是第一次见到把几何参数与图像结合在一起用的方法，挺神奇的，通过解析几何的方法把几何参数转化为了图像，实现把几何参数精准性、CNN善于捕捉空间关系的特点融合在一起，提高了排版效果。

离实用还有一段距离，最基本元素对齐方面仍有欠缺。现阶段用纯机器学习的方法约束太小，还是要依靠人为规则做强约束

 

 

参考代码：https://github.com/jianh1994/layoutgan （不是我）