前端也能玩机器学习 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