原文网址：https://www.youyong.top/article/115998089d54f
本文翻译自deeplearnJS的示例教程，并结合了我在学习过程中的理解。
原文网址：https://www.youyong.top/article/115998089d54f
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、开始训练
编写一个循环训练的函数；
设置好训练次数；
运行。
当然，如果你习惯看英文， 也可以看原版的教程， 作者是用 typescript 写的。
英文版原文链接：
