用谷歌新开源的deeplearnJS预测互补颜色

本文翻译自deeplearnJS的示例教程，并结合了我在学习过程中的理解。

deeplearnJS简介：

deeplearn.js是用于机器学习的开源WebGL加速JavaScript库。

deeplearn.js让您可以在浏览器中训练神经网络，或运行预先训练好的模型。它提供了与TensorFlow一致的数据流图（data flow graphs）的API，及用于数值计算的函数库。

本教程模型的超参数还需要再优化，比如可以添加更多的层，产生更接近互补颜色的预测，我们没有花费大量时间优化超参数，我们更希望开源社区的参与。

hyper-parameters 超参数：包括学习率learning rate、正则化系数、mini-batch size、网路的层数、每一层的neurons个数等等。

应用场景：

用户随机输入一个颜色，神经网络自动生成其互补颜色。

预测效果：

第一个颜色为随机输入的颜色originColor；

第二个为神经网络预测的互补颜色predictedColor；

第三个为使用算法计算的互补颜色computeComplementaryColor，作为标准答案；

我们可以对比下，第二个跟第三个之间的差异。

上图为训练次数10次以内的结果，可以看到预测结果跟标准答案之间还存在较大的差异。

上图为训练次数100次以内的结果，预测跟标准答案之间已经差距越来越小了。

上图为训练次数500次以上的结果，预测结果与标准答案之间已基本没有区别了。

接下来，我们动手一步步进行实验：

1

准备环境

本教程采用的是纯前端的方式，直接在script引用deeplearn.js文件即可，

为了使得使用更方便，我把deeplearn对象下的所有方法、属性添加到window对象了，方便引用。

2

创建训练数据

Creating Input Examples

我们首先生成训练数据，本教程采用的是在RGB空间中生成随机颜色，并根据Stack Overflow上Edd的算法生成对应的互补颜色。

https://stackoverflow.com/a/37657940

随机生成颜色的函数：

计算互补颜色的函数：

Stack Overflow上Edd的答案，可以通过上文的链接访问，按其思路写一个。

这里我们归一化处理训练数据，通过将每个颜色通道除以255来归一化。

normalizeColor是归一化颜色的函数，denormalizeColor是对归一化的颜色，处理成正常颜色数值的方法。

通过exampleCount控制生成的训练数据数量，调用generateRandomChannelValue函数生成rawInputs颜色数组。

我们把训练数据rawInputs归一化后，存储为Array1D的数据形式，作为deeplearn.js中的输入。

在这里，inputArray和targetArray是由0和1之间数值组成的长度为3的一维矩阵（相当于JS里的数组）。

deeplearn.js中用于神经网络计算的数据类型是NDArray。一个NDArray 是由一组浮点值组成的任意数量的数组。NDArray有一个shape属性来定义它的shape。有5种子类型： Scalar，Array1D，Array2D，Array3D，Array4D。

我们可以在控制台里实验下，打印出来理解下：

2x3 的二维矩阵:

[

1.0 2.0

3.0 10.0

20.0 30.0

]

在使用之前还要进行随机打乱的操作shuffle，这里deeplearnJS已经封装好了一个方法，直接调用即可。

创建用于将数据传递到模型的Feed条目

3

构建图

Setting Up the Graph

这部分是令人兴奋的，因为我们将动手构建神经网络模型。

像TensorFlow一样，deeplearn.js是一个基于图的库：我们先设计一个神经网络模型，再使用sessions来运行它。

我们创建一个Graph对象和2个Tensor：

1个Tensor为输入颜色，

另1个Tensor为目标颜色。

目标颜色仅在训练期间使用 ；

在预测阶段，我们只能输入输入颜色。

我们把构建图的过程写到setupSession函数里。

我们编写一个全连接层的功能graph.layers.dense。

全链接层（Dense Layer，dense）的每一个结点都与上一层的所有结点相连，用来把前边提取到的特征综合起来，主要对特性向量执行分类操作。由于其全相连的特性，一般全连接层的参数也是最多的。

使用该功能，我们创建了具有64,32和16个节点的3个全链接层。

再创建一个输出预测互补颜色的图层predictionTensor，它有3个输出，每个通道1个输出;

还要定义一个损失函数（Loss Function），用于衡量预测值与真实值不一致的程度。损失函数又称为代价函数(Cost Function)。

损失函数选择的是 mean squared，即使用欧式距离作为误差度量（即Mean squared error， MSE），主要有以下几个原因：

• 简单，计算方便；
• 欧氏距离是一种很好的相似性度量标准；
• 在不同的表示域变换后特征性质不变。

最后，我们创建一个sessions，用于运行训练和推理。

4

训练及预测

Train and Predict

为了训练模型，我们一个初始学习率为0.042的梯度下降优化器对象。

然后写一个训练一批颜色的功能。

创建一个根据输入颜色预测其互补颜色的方法

5

开始训练

编写一个循环训练的函数，并设置好训练次数，初始化即可在控制台看到神经网络的输出啦。

最后，

总结一下整体的思路：

1、创建训练数据

• 归一化处理数据、
• 随机打乱训练数据shuffle；
• 将数据传递到Feed

2、构建图

• 创建1个Graph对象；
• 创建2个Tensor：1个Tensor为输入颜色，另1个Tensor为目标颜色。
• 创建具有64,32和16个节点的3个全链接层；
• 创建一个输出预测互补颜色的图层predictionTensor；
• 定义一个损失函数；
• 创建一个sessions，用于运行训练和推理；

3、训练及预测

• 初始学习率为0.042的梯度下降优化器对象；
• 写一个训练一批颜色的函数；
• 创建一个根据输入颜色预测其互补颜色的方法；

4、开始训练

• 编写一个循环训练的函数；
• 设置好训练次数；
• 运行。

代码我整理了下，

有兴趣的朋友可以在本文后留言，

我将在留言区抽取10位读者，

这10位读者将获得整理后的代码（可直接在浏览器运行体验?），

同时还可进入本Lab的微信群，交流学习。

当然，如果你习惯看英文，

也可以看原版的教程，

作者是用typescript写的。

原文链接：

https://pair-code.github.io/deeplearnjs/demos/complementary-color-prediction/complementary_color_prediction.html