前端也能玩机器学习 TensorFlow.js初体验

TensorFlow.js 是Google将机器学习(Machine Learning)TensorFlow框架的JavaScript版本,通过TensorFlow.js,让JavaScript开发人员也有机会加入机器学习的领域。加上前端领域的生态圈支持,让机器学习在浏览器上有了更多发挥的空间!例如结合摄影机、移动设备的陀螺仪等等,只要设备与浏览器支援,都能够发生更多不同的变化,同时借由在客户端浏览器上执行的优势,节省后端学习的成本。

今天我们就来简单介绍一下TensorFlow.js,以及简单的机器学习的学习方式吧!

关于 TensorFlow.js 的基础知识

这是一篇很基础很间单的TensorFlow.js介绍与范例,因此我们还是先简单的介绍一下 TensorFlow.js。

TensorFlow.js的特色与基本组成

由于TensorFlow.js是由JavaScript编写而成,因此只要与浏览器相关的应用,都可以与TensorFlow.js直接整合,这意味着我们可以将浏览器功能与机器学习搭配起来,组合成更多元的Web Application。

TensorFlow.js也支持WebGL,因此即使在浏览器上,我们也能使用GPU来加速运算结果,不用担心在浏览器上的性能限制。

TensorFlow.js分成低阶与高阶两组API。

低阶的API是由 deeplearn.js 衍生,负责处理一些低阶如线性代数的数据运算等等,来协助我们处理机器学习中的数学运算部分。

而高阶的API则是用来包装一些常用的机器学习演算法,同时允许我们载入训练好的模型,像是由Keras学习的模型等等。

TensorFlow.js的限制

目前TensorFlow.js不支持Node.js开发,因此我们只能在浏览器上使用,未来会支持Node.js,但时间未定。

开始使用 TensorFlow.js

直接使用CDN

接下来我们就可以开始使用TensorFlow.js啦!由于TensorFlow.js目前只能在浏览器上运行,为了简化前期准备,我们直接建立一个index.html,并加入TensorFlow.js的CDN,如下:

之后我们就能在index.js中开始使用TensorFlow.js进行机器学习啦!

使用 npm 或 yarn

当然,作为熟练的前端工程师,我们也能使用npm或yarn来安装,如下:

之后再用import的方式加入TensorFlow即可

当然,你就需要使用babel或webpack等工具来转换程序啰。

机器学习基本概念

先来简单讲讲一般机器学习是怎么做的,在机器学习中,通常我们会针对一个题目,给予一组学习数据清单,这些数据包含了问题与答案,接着通过机器学习的各种算法,来训练出一个针对这个题目的模型。

这个模型通常就代表了一个公式,只要将题目带进去公式,就能够算出答案,而这个公式怎么来的呢?就是通过机器学习算法,这些算法通常会先随机产生一个公式(也就是模型),接着将学习数据带进去计算出预测值,并与正确答案比较,并通过不断的调整模型内容,不断想办法降低预测值与正确答案的差距,直到预测值与足够接近正确答案为止。

简单来说,就是经验法则啦!刚开始学一项知识的时候,得到的结果会与预期落差很大,借由不断学到正确知识后,就会与预期越来越接近!

有了这样的基本概念后,就让我们来学习一个简单的模型吧!

另外,有时间的话建议可以先看过Core Concepts in TensorFlow.js,对于TensorFlow.js的低阶API有基础的认知,会比较好理解后续的程序。(或是有机会再来简单介绍一个TensorFlow.js的低阶API)

产生第一个待学习模型

首先我们先看一个简单的数学公式代表我们的正确模型。

x 代表输入值,y代表输出结果,2是这个模型的重点参数,也是我们在学习过程中期望达到的目标!

但目前我们还没有任何模型可用,因此我们先在程序中加入一个全局变量,把它当做要被学习的模型参数

上述程序中,tf是载入CDN程序后,用来放入TensorFlow.js相关程序的全局变量。

我们透过tf.scalar()将Math.random()的随机数当作TensorFlow的数值数据,再使用tf.variable()将这个数值当作是一个变量,因此上面程序中我们可以解读为:在TensorFlow中定义一个变量,并赋值给一个随机数值。

接下来,我们再来以这个参数来产生一个模型公式

tf.tidy()是用来避免变数在TensorFlow运算中站用过多内存的一种管理机制,在这里我们不用想太多,大部分情况下,关于运算的都放在tf.tidy()中就对了,剩下的TensorFlow.js会帮我们处理!

.mul(),则是TensorFlow.js低阶运算API的一种,主要用来进行乘法运算。

通过这个predict()函数,我们能运算出目前模式产生出来的预测值

定义损失函式(Loss Function)

损失函式是用来评估模型预测值与真实值的差距,在学习过程中,这个损失函式的输出应该会越来越小,在这边我们使用Mean Square Error函数作为评估的公式,代表的是预测结果与学习数据中所有答案平方差的平均:

定义学习函数

接下来我们要定义学习的方法,TensorFlow.js中提供了几种学习的算法,我们选择使用Stochastic Gradient Descent(SGD)算法,这种算法会根据学习结果来随机调升或调降参数的值,另外我们也需要设定一个学习率(learning rate),这代表学习的跳跃程度,数值越低代表学习速度越慢,越高代表学习速度越快,但也可能会造成太过跳跃式的学习,导致学习成果容易出差错。

参数xs代表学习用问题数据集,ys代表答案数据集,numIterations代表学习次数,理论上学习次数越多,就越接近结果,当然也越花时间,同时在学习率太高的情况下,学习走偏的机率也会增加。

tf.train.sgd(0.5)代表使用SGD学习算法,并以0.5的学习率进行学习。

最后看到optimizer.minimize()方法,来调整参数,方法的callback中,我们将通过损失函数算出误差值并回传,minimize()方法会自动帮助我们调整损失函数中关联到的参数,并通过调整参数把误差值降到最低。

执行学习

有了损失函数与学习函数后,我们就可以将这些内容组合起来执行学习啦!

前两行是利用正确的模型产生学习数据,现实中则可能是准备好文字档并读取进来generateData内容如下:

接着通过学习函数,把问题、答案和学习次数传进去,让学习函数去把结果学习出来,就可以得到一个正确的模型啦!

我们可以试着打开浏览器的console看一下执行结果:

学习的结果就与我们的正确答案十分接近啦!

前端人员要进入机器学习领域,门槛又降低不少了呢!

本日小结

今天我们介绍了TensorFlow.js这关机器学习的架构,并且做了一个简单的学习函数,通过机器学习帮助我们解决一个数学问题。

通过TensorFlow.js,前端JavaScript开发人员可以在不需要了解其他程序语言的前提下,进入机器学习的领域,当然啦,我们还是要有机器学习相关的知识,才能够正确的使用TensorFlow.js;同时也能搭配各种前端应用,组合出各式各样的有趣应用,TensorFlow.js上也有一些结合web产生的DEMO程序,有兴趣的话也可以上去玩玩看。

希望这篇文章可以帮助对于机器学习有兴趣的前端朋友更容易入门,之后有机会的话,再来写TensorFlow.js与神经网络等等的相关应用吧!

Demo代码在这里:https://github.com/wellwind/tensorflow-js-practice

相关资源

TensorFlow.js

Core Concepts in TensorFlow.js

Training First Steps: Fitting a Curve to Synthetic Data

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态,推动web标准化的发展

官网:http://fequan.com

微博:fequancom | QQ群:41378087

长按二维码关注我们

投稿:content@fequan.com

赞助合作:apply@fequan.com

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180413B07Y8800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券