前言
这两天事情比较多，偶尔玩玩深度学习小游戏也是不错的~
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进行正确的设置后：
{ "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来实现神经网络：
<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中打印的结果：
需要注意上面这个过程我们是通过cdn载入官方JavaScript库来实现的，如果我们想要离线实现，那么就需要parcel打包或者node.js绑定运行了。
通过parcel打包执行
如果想要将我们设计好的神经网络应用打包到web应用中，那样应该会很有趣，这里我们简单利用parcel对TF.js进行简单的打包。
首先我们下载官方的示例程序：
然后用VSCODE打开mnist-core目录，然后调用内置的terminal管理器。
首先安装node.js，这里以mac os环境进行示例：
- 执行
brew install node,安装node后，会自动捆绑npm管理包。 - 安装TensorFlow.js:
npm install @tensorflow/tfjs - 安装
parcel打包工具npm install -g parcel-bundler
初次使用parcel时，会生成一个package.json的文件，但是我们在打开官方示例时，其中已经有生成好的package.json。
我们可以看到parcel的watch和build命令。
这时，在此目录的命令行中运行：
npm watch(下图中是yarn,与npm是一样的)
编译过程中会自动打开浏览器加载官方这个示例，下载数据需要一分钟时间，下来好数据集后随即开始训练：
结果如下：
后记
当然上面两个示例只是简单的演示罢了，但我们可以发现，TensorFlow.js的语法很容易上手，通过和网页端的结合，我们可以开发出很多好玩的应用。
至于效率速度问题，官方宣传在训练的时候速度是差不多的，但是在reference的时候速度会慢一倍左右，当然这个不是问题，我们关心的只是实现以及其中的乐趣。
挺有意思的, 还有没有实践过别的案例, 发出来分享一下?