前言

近两年人工智能，机器学习等各种概念漫天飞舞，那么这些唬人的名词之间到底有什么区别和联系呢？

有句很有意思话：“怎样分辨AI和Machine Learning呢？用Python写的是Machine Learning，用PowerPoint写的是AI。”

还是言归正传，人工智能、机器学习和深度学习准确来说是层层包含的关系。如果用三个同心圆来解释的话，人工智能是最大的圆，机器学习是中间的圆，深度学习是最小的圆。具体解释如下：

  • 机器学习是实现人工智能的一种手段
  • 深度学习是实现机器学习的一种技术

今天我们要介绍的TensorFlow.js是由Google的AI团队发布一款机器学习框架，基于DeepLearn.js(已经停止更新)。这款机器学习框架的特点是使用JavaScript语言，在浏览器中就可以使用它提供的各种API来进行建模和训练，并且支持Node.js。所以对于前端来说，有什么理由不了解一下呢？

这里有一个利用TensorFlow.js实现的机器学习的小游戏，大家可以感受一下。点我开始游戏！

这篇文章基于 TensorFlow.js的英文官方文档 写成，重点在于 TensorFlow.js 的入门，关于机器学习更多的知识点可参考 Google机器学习课程。

前言唠叨完了，让我们正式开始旅程吧！

安装

直接引入

第一种方式是直接引入，在浏览器中运行下面的代码，在控制台中可以看到结果。

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
30
31
32
33
<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.0"> </script>

    <!-- Place your code in the script tag below. You can also use an external .js file -->
    <script>
      // Notice there is no 'import' statement. 'tf' is available on the index-page
      // because of the script tag above.

      // Define a model for linear regression.
      const model = tf.sequential();
      model.add(tf.layers.dense({units: 1, inputShape: [1]}));

      // Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

      // Generate some synthetic data for training.
      const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
      const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

      // Train the model using the data.
      model.fit(xs, ys, {epochs: 10}).then(() => {
        // Use the model to do inference on a data point the model hasn't seen before:
        // Open the browser devtools to see the output
        model.predict(tf.tensor2d([5], [1, 1])).print();
      });
    </script>
  </head>

  <body>
  </body>
</html>

npm 或 yarn

第二种方式是通过npm或yarn将TensorFlow.js的库引入到你的项目中。

1
2
yarn add @tensorflow/tfjs  
npm install @tensorflow/tfjs

你可以在你的main.js中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import * as tf from '@tensorflow/tfjs';

// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model using the data.
model.fit(xs, ys, {epochs: 10}).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  model.predict(tf.tensor2d([5], [1, 1])).print();
});

如果不理解上面代码，请不要心急，继续看后面的一些基础概念和用法。

Tensor 和 Variable

Tensor和Variable是TensorFlow.js中最基础的两种数据形式。那他们到底是什么意思呢？

Tensor在谷歌翻译中是“张量”的意思，“张量”这个词是数学和物理中的一个术语，我们暂且不深究它的意思，你只需要记住，Tensor（张量）是不可变的，类似于const，一旦定义就不能改变它的值。

Variable就很容易理解了，它是变量的意思，顾名思义，它的值是可以改变的。

总之一句话，Tensor（张量）不可变，Variable（变量）可变。

Tensor

张量通常是一个0到多维的数组，构造张量时会用到shape属性，用来规定这是一个几行几列的数组。
请看下面构造一个张量的例子。shape用来规定这个张量是两行三列的数组，然后可以看到最后的输出，我们得到了一个两行三列的二维数组。

1
2
3
4
5
const shape = [2, 3]; // 表示两行三列的矩阵
const a = tf.tensor([1.0, 2.0, 3.0, 10.0, 20.0, 30.0], shape);
a.print(); // 打印a的值
// 输出：[[1 , 2 , 3 ],
//      [10, 20, 30]]

也可以用下面这种方式，直接表示这是一个两行三列的二维数组。

1
2
3
4
5
// 也可以像下面这样创建一个两行三列的矩阵
const b = tf.tensor([[1.0, 2.0, 3.0], [10.0, 20.0, 30.0]]);
b.print();
// 输出: [[1 , 2 , 3 ],
//      [10, 20, 30]]

然而实际上，我们通常使用tf.scalar, tf.tensor1d, tf.tensor2d, tf.tensor3d和tf.tensor4d来构造张量。tf.scalar是构造一个零维数组，也就是一个数字，tf.tensor1d是构造一位数组，tf.tensor2d是构造二维数组，以此类推。例如：

1
2
3
4
const c = tf.tensor2d([[1.0, 2.0, 3.0], [10.0, 20.0, 30.0]]);
c.print();
// 输出: [[1 , 2 , 3 ],
//       [10, 20, 30]]

或者使用tf.zeros生成全是0的数组，tf.ones生成全是1的数组，例如：

1
2
3
4
5
// 创建一个三行五列全是0的矩阵
const zeros = tf.zeros([3, 5]);
// 输出: [[0, 0, 0, 0, 0],
//       [0, 0, 0, 0, 0],
//       [0, 0, 0, 0, 0]]

Variable

而Variable（变量）只能通过Tensor（张量）生成。我们可以使用assign给变量重新赋值。例如：

1
2
3
4
5
6
7
const initialValues = tf.zeros([5]);
const biases = tf.variable(initialValues);
biases.print(); // 输出: [0, 0, 0, 0, 0]

const updatedValues = tf.tensor1d([0, 1, 0, 1, 0]);
biases.assign(updatedValues); // 重新赋值
biases.print(); // 输出: [0, 1, 0, 1, 0]

Operations

TensorFlow.js提供了各种向量运算的API，我们可以称这些为Operations。下面是张量平方和张量相加的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
const d = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);
const d_squared = d.square();
d_squared.print();
// 输出: [[1, 4 ],
//       [9, 16]]

const e = tf.tensor2d([[1.0, 2.0], [3.0, 4.0]]);
const f = tf.tensor2d([[5.0, 6.0], [7.0, 8.0]]);

const e_plus_f = e.add(f);
e_plus_f.print();
// 输出: [[6 , 8 ],
//       [10, 12]]

而且TensorFlow.js还提供了链式运算，请看例子：

1
2
3
4
5
6
7
8
const sq_sum = e.add(f).square();
sq_sum.print();
// 输出: [[36 , 64 ],
//       [100, 144]]


// 你也可以这样做：
const sq_sum = tf.square(tf.add(e, f));

Model

上面我们介绍了张量，变量和一些基础运算，下面我们引入Model（模型）这个概念。

模型就是一个函数，给定这个函数特定的输入，会返回特定的输出。

所以请记住，模型就是一个函数而已。

我们来看一个定义模型的例子, 以下代码构造了一个y = a * x ^ 2 + b * x + c的函数表达式，给定一个x，我们会得到一个 y。

代码中tf.tidy()看不懂请忽略，我们将在下一节介绍，它只是用来清除内存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义函数
function predict(input) {
  // y = a * x ^ 2 + b * x + c
  return tf.tidy(() => {
    const x = tf.scalar(input);

    const ax2 = a.mul(x.square());
    const bx = b.mul(x);
    const y = ax2.add(bx).add(c);

    return y;
  });
}

// y = 2x^2 + 4x + 8
const a = tf.scalar(2);
const b = tf.scalar(4);
const c = tf.scalar(8);

// 当输入是 2 时得到结果
const result = predict(2);
result.print() // 输出: 24

但是通常，我们会使用一个更高级的API去构造模型，那就是用tf.model的形式，这里的model只是模型的总称，并没有 tf.modal这个方法。TensorFlow中最常用的是tf.sequential，例如：

1
2
3
4
5
6
7
8
9
10
11
12
const model = tf.sequential();
model.add(
  tf.layers.simpleRNN({
    units: 20,
    recurrentInitializer: 'GlorotNormal',
    inputShape: [80, 4]
  })
);

const optimizer = tf.train.sgd(LEARNING_RATE);
model.compile({optimizer, loss: 'categoricalCrossentropy'});
model.fit({x: data, y: labels});

上面代码中一定有很多你不理解的地方，比如什么是tf.layer？什么是tf.train.sgd？这里可以先忽略细节，先从总体上体会这些基本概念，关于tf.train.sg等我们在后面的文章介绍。如果你忍不住，在这里可以查到官方API文档！

内存管理

TensorFlow.js使用GPU来加速运算，所以合理地释放内存是一件很必要的事情。TensorFlow.js提供了dispose函数来释放内存，请看例子：

1
2
3
4
5
const x = tf.tensor2d([[0.0, 2.0], [4.0, 6.0]]);
const x_squared = x.square();

x.dispose();
x_squared.dispose();

但是通常实际中我们会面对很多的张量和操作，这时候tf.tidy更加方便，因为它是批量释放内存，请看例子：

1
2
3
4
5
6
7
8
9
// 给 ty.tidy 传入一个函数，这个函数会被清理。把计算函数放在 ty.tidy 中是官方推荐的做法。
const average = tf.tidy(() => {
  const y = tf.tensor1d([1.0, 2.0, 3.0, 4.0]);
  const z = tf.ones([4]);

  return y.sub(z).square().mean();
});

average.print() // Output: 3.5

使用tf.tidy有两个要点：

  • 传递给tf.tidy的函数必须是同步的。
  • tf.tidy不会清理变量，你只能通过dispose手动清理。

总结

关于TensorFlow.js的基础概念介绍完了，但是TensorFlow.js只是我们探索机器学习的一个工具而已，具体的实践还需要更多的学习，后面我也会跟大家一起学习，并及时分享。