Tensorflow.js（二）：深度学习如何在前端发挥作用

2022-03-25

A) 机器学习 & 深度学习

这两个概念非常容易混淆，在开始之前，需要简单介绍一下这两个概念，简单来说，机器学习需要提前设置算法模型进行约束，而深度学习不需要。

a) 机器学习

这是机器学习训练模型的步骤

选择一个模型结构
将训练数据输入模型
在大量运算后，机器输出最优模型（即具有使训练错误最小化的特定参数的模型）

线性回归，逻辑回归，决策树，支持向量机，贝叶斯模型，正则化模型...这些都是机器学习发展所带来的预测模型。这些预测模型中的每一个都基于特定的算法结构，参数都是可调的。

每个模型对不同的实际场景，所发挥的效果也不尽相同，如果选错模型，会使结果差强人意，会出现“过拟合”和“欠拟合”的情况，

简单来说，当模型较为复杂（复杂模型具有丰富的参数并且可以适应广泛的数据形状），但是可供训练的数据量较少时，会出现过拟合现象，过拟合是指形状过分紧密贴合训练数据，这种情况下，模型对于以往的事情会体现出高准确率的预测值，但是对于未来，会体现出极不理想的预测值。

欠拟合则是指选定的模型不足以适应训练数据，通常是指模型过于简单，而实际情况较为复杂。举个例子：用线性模型（y=ax+b）去拟合含有二次方关系的数据（y=5x^2），效果会非常不理想。为了缓解“不适应的问题”，人们通常会运用他们的“领域知识”来提出“输入特征”，上面的例子，通过创建一个特征z = x ^ 2，就可以通过线性回归模型进行拟合了(y=5z)

b) 深度学习

对机器学习来说，特征提取并不简单，往往需要大量的时间去优化，而深度学习便机器可以自动学习特征和任务之间的关联，还能从简单特征中提取复杂的特征。深度学习的概念源于人工神经网络的研究，而人工神经网络又来源于对生物神经网络的研究。

当人们受到外界刺激时，会通过神经末梢传导电信号到神经元，神经元会开始联结，产生特定的记忆。在下次遇到同样刺激时，会根据神经元的联结做出相应反馈。

neuron

上个世纪六十年代，"人造神经元"模型被提出，叫做"感知器"（perceptron），直到今天还在用。比如下图中的感知器，上面三个外部输入就是因素，最后感知器的输出就是结果。根据因素的权重和整体的阈值，可以影响输出。

一个感知器可以解决较为简单的事情，现实生活的事情往往要比这复杂很多。这时，我们可以将多个感知器连接，以处理更复杂的事情。这样一来，我们就有了层的概念。

通过不断改变神经元的权重与阈值，来观察与样本数据的误差，并通过反向传播优化，这就是所谓的训练了

总体而言，人工神经网络靠的是正向和反向传播来更新神经元, 从而形成一个理想的神经网络, 本质上, 这是一个能让计算机处理和优化问题的数学模型. 而生物神经网络是通过刺激, 产生新的联结, 让信号能够通过新的联结传递而形成反馈，两者有很大的不同。

B) 基本单位

无论是 tfjs 还是 tfpy，无论是在浏览器还是在系统内执行，都是在通过同一套规范进行运作。在开始之前，对于机器学习的基本单位 Tensor，我们需要重温一下它的概念。

就像上一期 tensorflow 系列所介绍的那样，标量（0阶）如下图，它的形状（shape）是[]

scalar

向量（1阶）如下图，它的形状是[3]

vector

矩阵（2阶）如下图，它的形状是[3, 2]

vector

来到3阶及以上，我们称为n阶张量。下面是一个三阶张量，它有着不同的表现形式，它的形状是[3, 2, 5]

tensor3-1 tensor3-2 tensor3-3

四阶张量可以理解为多个三阶张量的结合，下面这个4阶张量的形状是[3, 2, 4, 5]

tensor4

有点晕，该如何理解形状（shape）？其实就是多维数组中每一维的长度。

const tensor = 4 // [null]

// [tensor1d.length] => [3]
const tensor1d = [2, 3, 4]

// [tensor2d.length, tensor2d[0].length] => [3, 2]
const tensor2d = [[1, 2], [3, 4], [5, 6]]

// [tensor3d.length, tensor3d[0].length, tensor3d[0][0].length] => [3, 2, 5]
const tensor3d = 
[[[ 0  1  2  3  4]
  [ 5  6  7  8  9]]

 [[10 11 12 13 14]
  [15 16 17 18 19]]

 [[20 21 22 23 24]
  [25 26 27 28 29]]]

C) 第一例

简单了解了上述内容后，我们就可使开始动手做一些事情了。就从简单的线性回归开始吧。

let x = [1, 2, 3, 4, 5, 6];
let y = [7, 12, 17, 22, 27, 32];

我们需要知道输入输出，以及神经网络的结构。参照 demo-1，我们给出了 x 和 y，分别对应输入和输出，

model.add(
  tf.layers.dense({
    inputShape: [1],
    units: 1,
  })
);

我们添加了一个稠密层，内含一个神经元，这对于我们解决线性回归问题，已经足够了。

model.compile({
  optimizer: tf.train.adam(0.1),
  loss: "meanSquaredError",
});

接下来定义优化器和损失函数，就可以开始训练了。在上一期中，我们已经介绍了优化器和损失函数的作用，在这里不再赘述。

D) 预测鼠标轨迹

鼠标轨迹或许是普通人能轻而易举大量获取的数据了，只需要动动手指而已。

a) 设计模型与训练

我们该如何定义输入和输出呢？我们可以很轻易的知道，输出是一个向量，是一个包含 x 和 y 坐标的数组。那么输入呢？也是一个向量？

当然可以这样，但这显然不是最好的方案。想象一下，我们拿着一个坐标去预测下一个坐标，很容易让人摸不着头脑，一个坐标能让我们知道位置，但是一段时间内的坐标组，能让我们知道路径。我们需要一组坐标作为参考。

let input = [
  [
    [1, 1], [2, 2], [3, 3] ... [9, 9]
  ],
  [
    [1, 2], [3, 4], [5, 6] ... [8, 9]
  ],
  ...
]

let output = [
  [2, 3],
  [4, 5],
  ...
]

那么输入和输出就已经搞定了，接下来是神经网络的设计问题。在这里，我们引入“时间序列”会更好的解决问题，但是这涉及到递归神经网络的范畴，会带来更多抽象且复杂的概念，所以暂时先不用这个，我们依旧用稠密层来解决问题，顺便加了个激活函数来提升效果。

model.add(
  tf.layers.dense({
    inputShape: [cont, 2],
    units: 80,
  })
);

model.add(
  tf.layers.dense({
    activation: "relu",
    units: 40,
  })
);

model.add(tf.layers.flatten()); // 降维

model.add(
  tf.layers.dense({
    units: 2,
  })
);

见 demo-2 代码，我们首先收集了1000个鼠标的连续坐标信息，并将每20个连续坐标合并成一个小组，输出是一个坐标。

不出意外的话，训练结果会符合预期，能基本判断出鼠标在10步之后的坐标。