TensorFlow从1到2（十五）（完结）在浏览器做机器学习

TensorFlow的Javascript版

TensorFlow一直努力扩展自己的基础平台环境，除了熟悉的Python，当前的TensorFlow还实现了支持Javascript/C++/Java/Go/Swift(预发布版)共6种语言。 越来越多的普通程序员，可以容易的在自己工作的环境加入机器学习特征，让产品更智能。

在Javascript语言方面，TensorFlow又分为两个版本。一个是使用node.js支持，用于服务器端开发的@tensorflow/tfjs-node。安装方法：

另一个则是在浏览器中就可以使用的前端机器学习包@tensorflow/tfjs。安装方法：

前者跟Python的版本一样，可以工作在单机、工作站、服务器环境。后者则只需要支持HTML5的浏览器就能良好的执行，浏览器版本目前还不支持GPU运算。

浏览器机器学习快速入门

浏览器版本的TensorFlow是其家族中性能最弱的一个发布，但很可能也是容易产生最多应用的版本。毕竟无需考虑运行环境，浏览即执行，能最大限度上降低对用户的额外要求。 我觉得将来很可能发展为在服务器端通过GPU支持完成模型的开发和训练，然后浏览器作为最方便的客户端只用来完成预测和反馈给用户直接的结果。

很多前端程序员还不喜欢使用node.js和npm帮助管理整体开发。所以我们直接从网页入手。而且这种方式，也更容易让人理解程序完整的运行方式。 首先是基础的网页，我在下面给出一个模板。TensorFlow.js的开发，都集中在js程序中，所以这个网页可以保存下来。不同的项目，只要更换不同的js程序就好。

其实就是一个空白的网页，分别引入了三个js文件。第一个js是TensorFlow的主要库，必不可少。第二个是用于TensorFlow可视化图表显示的，在正式发布的程序中根据需要使用。第三个是自己编写的程序。

接着我们使用《TensorFlow从1到2（七）》中，油耗预测的数据集，也完成一个简单的油耗预测的示例。 原始的数据结构请到第七篇中查看。这里为了js处理的方便，已经预先转成了json格式。下面是头两条记录的样子:

我们只是想演示TensorFlow.js的使用，所以把问题简化一下，只保留功率数据(Horsepower)和油耗数据(MPG)，MPG这里同时也是标注信息。 因为我们做过这个练习，我们知道样本中有无效数据。所以数据预处理的时候，还要把数据做一个清洗（当然数据清洗应当养成习惯）。 随后，浏览器不是命令行，不能简单的在命令行输出信息。这时候轮到TensorFlow-vis出场了，我们做一个二维映射把基础数据显示在屏幕上。 第一步先不走那么快，我们只完成这一部分功能，先执行起来看一看。 下面是完成刚才所说功能的代码，别忘了文件名是script.js，跟index.html要放在同一目录：

在支持HTML5的浏览器中打开index.html文件就开始了程序执行，因为是本地文件，通常双击打开就可以。程序一开始首先下载样本数据，视网络环境不同，速度会有区别。执行结束后会自动在浏览器的右侧弹出图表窗口显示我们绘制的样本分布图。 除了可能的输入拼写错误，文件下载是最可能出现的问题，如果碰到这种情况，请根据数据文件的路径自行下载到本地来进行试验。

这部分相当于一个Hello World吧。从示例中可以看出，js在数据处理中，虽然没有Python的优势，但对于确定的数据类型也有自己的优点。在图表的显示上更是方便，无需第三方模块的支持。何况大多数现代浏览器也都包括console工具，必要情况下通过输出console的调试信息也可以达到很多目的。 此外有一点需要说明的，是稍微可能耗时的函数，应当尽量使用异步方式，也就是function关键字之前的async。以避免阻塞整个程序的执行。 当然使用了异步方式，程序的整体逻辑一定要多思考，想清楚，避免执行过程中顺序混乱。

用js定义模型

TensorFlow.js完整模仿了Keras的模型定义方式，所以如果使用过Keras，那使用TensorFlow.js完全无压力。 下面就是本例中的模型定义：

代码中除了没有了tf.keras的关键字其它没有什么特殊的东西。你可能也注意到了，定义模型操作本身速度是很快的，并不需要异步执行。 模型定义完成后，可视化工具提供了modelSummary方法，用于将模型显示在浏览器中供用户检查。

数据预处理

在数据载入的时候我们已经进行了一些预处理的工作。这个数据预处理主要是指把js数据转换为TensorFlow处理起来更高效的张量类型。此外还需要做数据的规范化。 在这里有很重要的一点需要说明。js语言在大规模数据的处理上，不如Python的高效。当然这一定程度上是浏览器的限制。 其中最突出的问题是内存的垃圾回收，这个问题困扰js已久，相信不做机器学习你也碰到过。而同时，用户对于浏览器的内存占用本身也是非常敏感的。 TensorFlow.js为了解决这个问题，专门提供了tf.tidy()函数。使用方法是把大规模的内存操作，放置在这个函数的回调中执行。函数调用完成后，tf.tidy()得到控制权，进行内存的清理工作，防止内存泄露。 其它没有什么需要特殊说明的，可以看源码中的注释：

完整代码

程序核心的训练和测试（预测）的代码在TensorFlow中非常简单，我们早就有经验了。唯一需要说明的是，除了跟Python中一样使用model.fit()做训练，以及model.predict()做预测，我们的过程和结果，也会使用TensorFLow-vis图表工具可视化出来，显示在浏览器中。 其中训练部分，是使用回调函数，这种机制我们在Python中也见过。目的是能够动态的显示训练的过程，而不是全部训练枯燥、漫长的等待完成才显示一次。

预测部分的数据少，速度很快，就是执行完成后一次显示。 但预测部分的数据有大量的转换过程，这个过程消耗内存大，所以放在tf.tidy()中执行以防止内存泄露。 好了，代码秀出，请参考注释阅读：

程序执行，最终预测测试的输出结果如下：

结语

本连载目标定位让已经有TensorFlow使用经验的技术人员，快速上手TensorFlow 2.0开发。 不知不觉，连载15篇。但还有很多内容未能包含进来。比如分布式训练、比如图像内容描述等。建议有需要的朋友继续到官网文档中学习。 水平所限，文中错误、疏漏不少，欢迎批评指正。

（连载完）