用 TensorFlow.js 在浏览器中训练神经网络

本文结构:

  1. 什么是 TensorFlow.js
  2. 为什么要在浏览器中运行机器学习算法
  3. 应用举例:regression
  4. 和 tflearn 的代码比较

1. 什么是 TensorFlow.js

TensorFlow.js 是一个开源库,不仅可以在浏览器中运行机器学习模型,还可以训练模型。
具有 GPU 加速功能,并自动支持 WebGL
可以导入已经训练好的模型,也可以在浏览器中重新训练现有的所有机器学习模型
运行 Tensorflow.js 只需要你的浏览器,而且在本地开发的代码与发送给用户的代码是相同的。

TensorFlow.js 对未来 web 开发有着重要的影响,JS 开发者可以更容易地实现机器学习,工程师和数据科学家们可以有一种新的方法来训练算法,例如官网上 Emoji Scavenger Hunt 这样的游戏界面,让用户一边玩游戏一边将模型训练地更好。

用 Tensorflow.js 可以做很多事情,
例如 object detection in images, speech recognition, music composition,
而且 不需要安装任何库,也不用一次又一次地编译这些代码。


2. 为什么要在浏览器中运行机器学习算法

TensorFlow.js 可以为用户解锁巨大价值:

  1. 隐私:用户端的机器学习,用来训练模型的数据还有模型的使用都在用户的设备上完成,这意味着不需要把数据传送或存储在服务器上。
  2. 更广泛的使用:几乎每个电脑手机平板上都有浏览器,并且几乎每个浏览器都可以运行JS,无需下载或安装任何应用程序,在浏览器中就可以运行机器学习框架来实现更高的用户转换率,提高满意度,例如虚拟试衣间等服务。
  3. 分布式计算:每次用户使用系统时,他都是在自己的设备上运行机器学习算法,之后新的数据点将被推送到服务器来帮助改进模型,那么未来的用户就可以使用训练的更好的算法了,这样可以减少训练成本,并且持续训练模型。

3. 应用举例:regression

为了很快地看看效果,有下面三种方式:

  1. 可以直接从浏览器里写代码,例如 chrome 的 View > Developer > Javascript Console,
  2. 还可以在线写
    有三个流行的在线 JS 平台:CodePen, JSFiddle, JSBin.
    https://codepen.io/thekevinscott/pen/aGapZL
    https://jsfiddle.net/
    https://jsbin.com/?html,output
  3. 当然还可以在本地把代码保存为.html文件并用浏览器打开

那么先来看一下下面这段代码,可以在 codepen 中运行:
https://codepen.io/pen?&editors=1011

这段代码的目的是做个回归预测,

数据集为:
构造符合 Y=2X-1 的几个点,
那么当 X 取 [-1, 0, 1, 2, 3, 4] 时,
y 为 [-3, -1, 1, 3, 5, 7],

<html>

 <head>
    <!-- Load TensorFlow.js -->
    <!-- Get latest version at https://github.com/tensorflow/tfjs -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.2">   
    </script>
 </head>
 
 <body>
   <div id="output_field"></div>
 </body>
 
 <script>
    async function learnLinear(){
    
        const model = tf.sequential();
        model.add(tf.layers.dense({
            units: 1, 
            inputShape: [1]
        }));
        
        model.compile({
            loss: 'meanSquaredError',
            optimizer: 'sgd'
        });
  
        const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
        const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);
  
        await model.fit(xs, ys, {epochs: 500});
  
        document.getElementById('output_field').innerText =
            model.predict( tf.tensor2d([10], [1, 1]) );
    }
    
    learnLinear();
 </script>
 
<html>
  • 首先是熟悉的 js 的基础结构:
<html>
<head></head>
<body></body>
</html>
        const model = tf.sequential();
        model.add(tf.layers.dense({
            units: 1, 
            inputShape: [1]
        }));
  • 接着定义 loss 为 MSE 和 optimizer 为 SGD:
        model.compile({
            loss: 'meanSquaredError',
            optimizer: 'sgd'
        });
  • 同时需要定义 input 的 tensor,X 和 y,以及它们的维度都是 [6, 1]:
        const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
        const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);
  • 然后用 fit 来训练模型,因为要等模型训练完才能预测,所以要用 await:
        await model.fit(xs, ys, {epochs: 500});
  • 训练结束后,用 predict 进行预测,输入的是 [1, 1] 维的 值为 10 的tensor ,
        document.getElementById('output_field').innerText =
            model.predict( tf.tensor2d([10], [1, 1]) );
  • 最后得到的输出为
Tensor 
[[18.9862976],]

4. 和 tflearn 的代码比较

再来通过一个简单的例子来比较一下 Tensorflow.js 和 tflearn,
可以看出如果熟悉 tflearn 的话,那么 Tensorflow.js 会非常容易上手,


学习资料:
https://medium.com/tensorflow/getting-started-with-tensorflow-js-50f6783489b2
https://thekevinscott.com/reasons-for-machine-learning-in-the-browser/
https://www.analyticsvidhya.com/blog/2018/04/tensorflow-js-build-machine-learning-models-javascript/
https://hackernoon.com/introducing-tensorflow-js-3f31d70f5904
https://thekevinscott.com/tensorflowjs-hello-world/


推荐阅读 历史技术博文链接汇总
http://www.jianshu.com/p/28f02bb59fe5
也许可以找到你想要的:
[入门问题][TensorFlow][深度学习][强化学习][神经网络][机器学习][自然语言处理][聊天机器人]

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容