大资料文摘授权转载自资料派THU

作者：MOHD SANAD ZAKI RIZVI

本文主要介绍了：

概述

你最喜欢用什么工具来编写机器学习模型？资料科学家们对这个永恒的问题会给出各种不同的答案。一些人喜欢RStudio，另一些人更喜欢Jupyter Notebooks。我绝对属于后者。

所以，当我第一次遇到TensorFlow.js(以前是deeplearn.js)时，我的心都要炸开了。在浏览器中构建机器学习模型？使用Java？听起来好得令人难以置信！

超过43亿人使用网络浏览器——约占世界人口的55%。——维基百科(2019年3月)

Google的TensorFlow.js不仅将机器学习引入浏览器中，使机器学习大众化，而且对于经常使用Java的开发人员来说，它也是一个完美的机器学习门户。

我们的网络浏览器是最容易访问的平台之一。这就是为什么构建不仅能够训练机器学习模型而且能够在浏览器本身中“学习”或“迁移学习”的应用程序是有意义的。

在本文中，我们将首先了解使用TensorFlow.js的重要性及其它的不同元件。然后，我们将深入讨论使用TensorFlow.js在浏览器中构建我们自己的机器学习模型。然后我们将构建一个应用程序，来使用计算机的网络摄像头检测你的身体姿势！

如果你是TensorFlow的新手，你可以在下面文章中了解更多:

一、为什么你应该使用TensorFlow.js？

1.1 使用网络摄像头在浏览器中进行影象分类

1.2 TensorFlow.js的特征

二、了解浏览器中的机器学习

2.1 Core API：使用Tensors工作

2.2 Layer API：像Keras一样构建模型

三、利用Google的预训练模型：PoseNet

为什么要使用TensorFlow.js?

我将用一种独特的方法来回答这个问题。我不会深入研究TensorFlow.js的理论方面，也不会列出它为什么是一个如此不可思议的工具。

相反，我将简单地向你展示如果不使用TensorFlow.js将会错过什么。那么，让我们在5分钟内构建一个应用程序，来使用你的网络摄像头对影象进行分类。没错——我们将直接进入程式码部分！

这是最好的部分——你不需要安装任何东西来做这个！只要一个文字编辑器和一个网络浏览器即可。下面的动图展示了我们将要构建的应用程序：

这多酷啊！我在浏览器里几分钟就完成了。那么，让我们看一下步骤和程式码，以帮助你在Web浏览器中构建自己的影象分类模型。

使用网络摄像头在浏览器中构建影象分类模型

开启你选择的文字编辑器并建立一个档案index.html。将以下程式码储存于此档案内：

image_classification

> > > > 接下来，建立另一个档案index.js并在其中编写以下程式码：

let mobilenet; let video; let label = ''; // when model is ready make predictions function modelReady() { console.log('Model is ready!!!'); mobilenet.predict(gotResults); } function gotResults(error, results) { if (error) { console.error(error); } else { label = results[0].className; // loop the inference by calling itself mobilenet.predict(gotResults); } } // setup function function setup() { createCanvas(640, 550); // ml5 to create video capture video = createCapture(VIDEO); video.hide(); background(0); // load the MobileNet and apply it on video feed mobilenet = ml5.imageClassifier('MobileNet', video, modelReady); } function draw() { background(0); // show video image(video, 0, 0); fill(255); textSize(32); // show prediction label text(label, 10, height - 20); }

储存这两个档案，然后在GoogleChrome或Mozilla Firefox等浏览器中开启index.html档案。就是这样！你现在已经建立了一个可以使用你的网络摄像头在浏览器本身实时分类影象的应用程序！下面是它在我的计算机上的样子：

视讯连线：

https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/05/mobilenet_demo.mp4?_=1

在这个例子中需要注意的要点：

我不需要在电脑上安装任何东西。这个例子应该适用于任何现代系统，不管它是Linux、Windows还是MacOS——这就是使用Java在web上构建模型的强大功能。

现在，让我们看看TensorFlow.js提供的强大功能，以及如何利用它们在浏览器中部署机器学习模型。

TensorFlow.js的特征

TensorFlow.js是一个库，用于Java开发和训练ML模型，并在浏览器或Node.js上部署。

TensorFlow.js提供了许多的功能来供我们使用。

它是TensorFlow在Java中的扩充套件，Java是我们在互联网上使用的几乎所有网站、浏览器或应用程序逻辑背后的程式语言。Java和Python一样用途广泛，所以使用它来开发机器学习模型给我们带来了很多好处:

TensorFlow.js以其当前的形式提供了以下主要功能：

在本文中，我们将关注前两个功能。在本系列的第二部分(即将推出！)中，我们将讨论如何在Python中转移学习和部署我们的模型。

浏览器中的机器学习

TensorFlow.js提供了两种方法来训练模型(非常类似于TensorFlow)：

让我们通过几个例子来理解这两种方法。毕竟，学习一个概念最好的方法就是把它付诸实践！

首先，设定你的HTML档案：

在你的电脑上建立一个新的index.html档案，并在其中编写以下程式码：

Tensorflow.js Core API

>我们建立了一个基本的HTML页面，并从云URL中载入了Tensorflow.js（第7行）。

关于安装TensorFlow.js（deeplearn.js）的说明：

由于TensorFlow.js是为浏览器而设计的，所以安装和使用TensorFlow.js最简单的方法就是根本不安装它。你可以简单地从HTML中的URL载入它即可。

如果你想在本地工作怎么办呢？实际上，你可以在Jupyter Notebook中使用TensorFlow.js，就像你在Python或R中通常做的那样。这是一个适合每个人的解决方案！

这种本地方法稍微长一些，并且需要一些时间，所以本文不会使用它。如果你确实想学习如何操作，可以从为Jupyter安装ijava核心开始。下面是我的Jupyter Notebook的截图：

现在，使用TensorFlow.js的推荐方法是使用库的官方URL直接载入它。你只需将以下行新增到HTML档案中：

完成了！这真的很简单。

Core API：使用Tensors工作

Core API与TensorFlowCore非常相似，我们可以使用低阶张量运算和线性代数定义模型。

如果我们想要构建自定义模型或想要从头开始构建神经网络，这非常有用。让我们举一个在浏览器中使用张量的例子。

首先在index.html档案中的 >标记之间新增以下程式码：

const a = tf.tensor([1, 2, 3, 4]);const b = tf.tensor([10, 20, 30, 40]);const y = a.add(b); // equivalent to tf.add(a, b)const z = a.mul(b);y.print();z.print();

标签基本上表示Java。我们在这些标签之间写的任何内容都将作为Java程式码执行。以下是index.html现在的样子：

Tensorflow.js Core API

const a = tf.tensor([1, 2, 3, 4]); const b = tf.tensor([10, 20, 30, 40]); const y = a.add(b); // equivalent to tf.add(a, b) const z = a.mul(b); // equivalent to tf.mul(a, b) y.print(); z.print();>在上面的程式码中，我们在两个张量a和b上执行基本的加法和乘法运算，并将结果打印在浏览器中。现在，转到终端，开启专案资料夹，然后使用以下命令启动Python服务器：

python3 -m http.server

然后在你的浏览器开启以下地址：

http://localhost:8000/

当你看到一个页面显示“Tensorflow.js Core API”时，使用Ctrl+Shift+I键开启控制台（console）。这应该在Chrome和Firefox都适用。我们在控制台得到上述操作的输出：

如果你想深入阅读有关Core API的更多资讯，那么我建议你阅读CoreAPI官方档案。

CoreAPI档案：

https://www.tensorflow.org/js/guide/tensors_operations

Layer API：像Keras一样构建模型

Layers API与Python中的Keras非常相似。就像Keras一样，你可以使用序列的和函式的方法建立模型。

让我们通过一个例子仔细研究序列方法。我们将在这些资料点上训练回归模型：

这里，X和Y有一个线性关系——每个Y对应于X + i(其中i是0、1、2、3……n+1)。让我们在这个资料集上训练一个基本的回归模型。你可以在index.html档案中的>标记之间编写以下程式码：

敏锐的读者一定注意到，上面的语法与用Python构建顺序模型的Keras语法非常相似。我们回到浏览器控制台（console）时会得到预测。

我们的简单回归模型预测7.556，非常接近8的期望值。这是一个基本的例子，但我们可以清楚地看到，在浏览器中直接构建机器学习模型是多么容易和有用。

TensorFlow.js能够在浏览器中构建机器学习和深度学习模型。它还自动利用GPU(s)的强大功能，如果在你的系统模型训练期间可用。

下面是一些使用TensorFlow.js在一些标准资料集上训练的深度学习模型的例子：

你可以在tfjs-examples repository中浏览这些示例。

tfjs-examples repository：

https://github.com/tensorflow/tfjs-examples

利用Google的预训练模型：PoseNet

TensorFlow.js提供了大量来自Google的预训练模型，用于许多有用的任务，如目标检测、语音识别、影象分割等。预先训练的模型的优点是，我们可以使用它们而不需要任何重大的依赖关系或安装，并且可以开箱即用。

人们普遍预计Google将在未来几个月推出更多模型。你可以在下面连结检视可用的预训练模型：

PoseNet demo with Ml5.js

Loading Model...

>这将建立一个基本的HTML网页并载入必要的档案：

现在，我们将编写用于使用PoseNet的Java程式码。在与index.html相同的资料夹中建立一个新档案posenet.js。以下是完成此项工作所需的步骤：

让我们从第一步开始。

步骤1：载入PoseNet模型并从网络摄像头捕获视讯

我们将使用ml5.js载入PoseNet。与此同时，p5.js使我们可以用几行程式码从网络摄像头捕获视讯：

let video;let poseNet;let poses = [];function setup() { const canvas = createCanvas(640, 480); canvas.parent('videoContainer');// Video capture video = createCapture(VIDEO); video.size(width, height);// Create a new poseNet method with a single detection poseNet = ml5.poseNet(video, modelReady); // This sets up an event that fills the global variable "poses" // with an array every time new poses are detected poseNet.on('pose', function(results) { poses = results; }); function modelReady(){ select('#status').html('model Loaded')}

以上程式码块中最重要的是：

步骤2：检测身体关节的关键点

下一步是检测姿势。你可能已经注意到，在前面的步骤中，我们通过呼叫poseNet.on()将每个检测到的位姿储存到pose变数中。这个函式在后台连续执行。无论何时找到一个新的姿势，它都会以以下格式给出身体关节的位置：

我们不必为此部分编写程式码，因为它是自动生成的。

步骤3：显示检测到的人体关节

我们知道被检测到的人体关节及其x和y位置。现在，我们只需要在视讯上画出它们来显示检测到的人体关节。我们已经看到，PoseNet给出了一个检测到的人体关节列表，每个关节及其x和y位置的置信度评分。

我们将使用20%的阈值(keypoint.score > 0.2)置信度得分，以便绘制一个关键点。下面是实现这一操作的程式码：

// A function to draw ellipses over the detected keypointsfunction drawKeypoints() { // Loop through all the poses detected for (let i = 0; i 0.2) { fill(255, 0, 0); noStroke(); ellipse(keypoint.position.x, keypoint.position.y, 10, 10); } } }}

步骤4：绘制估计的身体骨架

除了关键点或身体关节，PoseNet还可以检测估计的身体骨架。我们可以使用pose变数来绘制骨架：

// A function to draw the skeletonsfunction drawSkeleton() { // Loop through all the skeletons detected for (let i = 0; i

在这里，我们遍历检测到的骨架并建立连线关键点的线。程式码还是相当简单。

现在，最后一步是重复呼叫drawSkeleton()和drawKeypoints()函式，以及我们从网络摄像头捕获的视讯源。我们可以使用p5.js的draw()函式来实现，该函式在setup()之后直接呼叫，并重复执行：

function draw() { image(video, 0, 0, width, height);// We can call both functions to draw all keypoints and the skeletons drawKeypoints(); drawSkeleton();}

接下来，转到终端视窗，进入专案资料夹，然后启动Python服务器：

python3 -m http.server

然后转到你的浏览器并开启以下地址：

http://localhost:8000/