快速入门TensorFlow.js指南

前言

这两天事情比较多，偶尔玩玩深度学习小游戏也是不错的~

深度学习吃豆人小游戏

TensorFlow.JS，之前就发现这个好玩的东东，但是一直没有时间去看，作为一名深度学习者，没有折腾的心是不行的。我们都知道深度学习在工业和实际项目中有着很好的应用，但是如果用深度学习去做些有趣的应用也是很好玩的。

为什么选择TensorFlow.js,因为有两个很关键的优点：

可以加载TensorFlow和keras预训练好的模型，这个是必须的，因为直接在网页上进行训练的速度是比较慢的，我们可以利用在GPU端的TF和Keras训练好的模型直接在网页上进行预测就可以了。
无缝和webGL结合，webGL是浏览器的图像加速协议，可以借助主机上的显卡对浏览器进行相应的图像加速，这样我们就可以在浏览器上使用显卡来进行训练和预测了。
结合了Keras的高层次layer构建方式，用过Keras的都知道，相比TensorFlow，keras可以很快速构建我们所需要的神经网络，这样的话TensorFlow.js的开发效率还是很高的。

当然，除了在浏览器上执行，现在也已经支持node.js，利用也node.js可以搭建TensorFlow.js应用。

快速入门

JavaScript是每个程序员多多少少应该熟悉的一门编程语言，借助JavaScript我们可以实现很多实用轻巧的web应用，而且JavaScript的语言与C语言类似，学习过程也是比较轻松愉快地。

当然最重要的，JavaScript可以无缝地和深度学习结合，借助深度学习强大的功能和无穷的创意，我们可以完成很多有趣的应用。我们要知道，深度学习在慢慢地改变世界！

一起来玩吧！

通过Script标签运行TensorFlow.js

我们首先在浏览器中直接编辑Script标签添加代码即可，首先我们需要下载Vscode编辑器，安装debug for chrome这个插件：

在.vscode中对launch.json进行正确的设置后：

代码语言：javascript复制

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/test.html"  
        }
    ]
}

创建index.html，将下方的官方示例代码复制过去，可以看到TensorFlow.js的语法和keras以及TensorFlow有些相似，熟悉两者的人，可以很方便地利用JS来实现神经网络：

代码语言：javascript复制

<html>
  <head>
    <!-- 这里加载官方的Tf.js库文件 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.7"> </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>

进行debug调试后即可看到在console中打印的结果：