点击左侧箭头调整阅读页面大小

快速入门TensorFlow.js指南

《快速入门TensorFlow.js指南》

前言

这两天事情比较多,偶尔玩玩深度学习小游戏也是不错的~
《快速入门TensorFlow.js指南》

深度学习吃豆人小游戏

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

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

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

《快速入门TensorFlow.js指南》

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

快速入门

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

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

一起来玩吧!

通过Script标签运行TensorFlow.js

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

《快速入门TensorFlow.js指南》

在.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中打印的结果:

《快速入门TensorFlow.js指南》

需要注意上面这个过程我们是通过cdn载入官方JavaScript库来实现的,如果我们想要离线实现,那么就需要parcel打包或者node.js绑定运行了。

通过parcel打包执行

如果想要将我们设计好的神经网络应用打包到web应用中,那样应该会很有趣,这里我们简单利用parcel对TF.js进行简单的打包。

首先我们下载官方的示例程序:

《快速入门TensorFlow.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。

《快速入门TensorFlow.js指南》

我们可以看到parcel的watch和build命令。

这时,在此目录的命令行中运行:

npm watch(下图中是yarn,与npm是一样的)

《快速入门TensorFlow.js指南》

编译过程中会自动打开浏览器加载官方这个示例,下载数据需要一分钟时间,下来好数据集后随即开始训练:

《快速入门TensorFlow.js指南》

结果如下:

《快速入门TensorFlow.js指南》

后记

当然上面两个示例只是简单的演示罢了,但我们可以发现,TensorFlow.js的语法很容易上手,通过和网页端的结合,我们可以开发出很多好玩的应用。

至于效率速度问题,官方宣传在训练的时候速度是差不多的,但是在reference的时候速度会慢一倍左右,当然这个不是问题,我们关心的只是实现以及其中的乐趣。

《快速入门TensorFlow.js指南》

  点赞
本篇文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
转载请务必注明来源: https://oldpan.me/archives/quick-to-tensorflow-js

   欢迎关注Oldpan博客微信公众号,同步更新博客深度学习文章。


说点什么吧(邮箱、网址选填)

avatar
280
  订阅  
提醒