帮助理解GAN的内部机制的交互式可视化工具

生成对抗网络（GAN）是通过竞争（“对抗”）学习从特定分布中选取样本（“生成”）的神经网络。GAN由生成网络和判别网络组成，并通过生成网络和判别网络的相互对抗进行训练。因此，要理解GAN，不仅需要理解生成网络和判别网络两部分，还需要理解这两个网络在训练过程中是如何相互影响的。而理解这两个网络在训练过程中迭代、动态、复杂的相互作用对初学者而言很有挑战性，有时甚至专家也没有完全理解整个过程。

为此，佐治亚理工学院Minsuk Kahng、Polo Chau和Google Brain的Nikhil Thorat、Fernanda Viégas、Martin Wattenberg合作开发了GAN Lab。这一交互式的可视化工具，可以帮助理解GAN的内部机制。

GAN Lab

闲话少叙，现在就随论智君一起上手体验下GAN Lab吧。

首先，访问https://poloclub.github.io/ganlab/，稍等片刻，让页面加载完毕。之后在左上角选择数据样本。GAN常用于生成图像，但可视化图像这样的高维数据很麻烦。为了尽可能清晰地展示数据分布，GAN Lab使用了二维数据点(x, y)。

如图所示，左侧的模型概览包含数据分布的小图，右侧显示数据分布的大图。

点击运行按钮，开始训练后，我们能在最右看到不断更新的测度，上为生成网络、判别网络的损失，下为KL散度和GL散度。

而右侧的数据分布视图中，除了原先的绿点（真实样本），我们还能看到一些紫点（生成样本）。在训练过程中，生成样本的位置持续更新，最终趋向于和真实样本的分布重叠。GAN Lab使用了绿色和紫色，而不是通常的绿色和红色，是因为不想让人将生成样本联想为负面情形。

然后左侧就是GAN模型架构，训练过程中，虚线将示意数据流动方向。运行按钮边上有一个慢动作按钮，点击后能放慢训练过程，更清楚细致地查看数据的流动。

鼠标悬浮于生成网络（Generator），可以看到从随机噪声到生成样本的流形变换过程。透明度编码了密度，也就是说，透明度越高，生成数据点所在空间就越小。另外，勾选Generator下的小框后，在右侧的数据分布视图中也将显示生成数据点的流形。

判别网络（Discriminator）上，决策边界可视化为二维热图。绿色表示判别网络分类为真实样本，紫色表示判别网络分类为生成样本。颜色深浅编码了置信度，也就是说，颜色越深，判别网络对自己的判断就越自信。随着训练的进行，判别网络的热图总体趋向于灰色，意味着判别网络越来越难以分辨真实样本和虚假样本。另外，判别网络输出的预测，同样使用颜色深浅编码置信度。同样，勾选Discriminator下的小框后，右侧的数据分布视图也将显示热图。

最后，右侧的数据分布视图用紫线可视化了生成网络的梯度。在训练中，梯度刺向背景热图的绿色区域，这意味着生成网络正努力尝试欺骗判别网络。

下图为训练了111个epoch后的整体效果：

交互性

慢动作模式按钮旁，有步进按钮，点击一下就训练一个epoch。而且，甚至可以选择只训练生成网络或判别网络。

上：只训练生成网络；中：只训练判别网络；下：同步训练

点击模型概览上的铅笔图标可以修改模型的超参数，包括随机噪声分布（均匀、高斯），生成网络和判别网络的隐藏层层数、每层神经元数、优化方法、学习率、损失函数。

论智君胡乱调参后，模型崩塌了

除了修改模型超参数之外，还可以自行设置分布。点击左上角数据分布区域的铅笔图标，可以自行绘制新分布。

实现技术

GAN Lab基于TensorFlow.js实现（作者之一 Nikhil Thorat是TensorFlow.js的领导开发者），整个GAN网络的训练都在浏览器中完成！

作者开源了代码，只需输入如下几个命令，就可以在自己的机器上运行GAN Lab：

git clone https://github.com/poloclub/ganlab.git

cd ganlab

yarn prep

./scripts/watch-demo

>> Waitingfor initial compile...

>> 3462522 bytes written to demo/bundle.js (2.17 seconds) at 00:00:00

>> Starting up http-server, serving ./

>> Available on:

>> http://127.0.0.1:8080

>> Hit CTRL-C to stop the server

GAN网络的变体很多，如果想要可视化偏爱的GAN变体，欢迎参与GAN Lab开发。