在瀏覽器中使用TensorFlow.js和Python構建機器學習模型

瀏覽器機器學習 Python Google HTML JavaScript 文本編輯器電腦 RStudio 深度學習維基百科 THU數據派 2019-07-08

作者：MOHD SANAD ZAKI RIZVI

翻譯：吳金笛

校對：丁楠雅

本文約5500字，建議閱讀15分鐘。

本文首先介紹了TensorFlow.js的重要性及其組件，並介紹使用其在瀏覽器中構建機器學習模型的方法。然後，構建使用計算機的網絡攝像頭檢測身體姿勢的應用程序。

概述

TensorFlow.js (deeplearn.js)使我們能夠在瀏覽器中構建機器學習和深度學習模型，而無需任何複雜的安裝步驟。
TensorFlow.js的兩個組件——Core API和Layer API。
瞭解如何構建一個很棒的使用Tensorflow.js對網絡攝像頭中的圖像進行分類的模型。

介紹

你最喜歡用什麼工具來編寫機器學習模型？數據科學家們對這個永恆的問題會給出各種不同的答案。一些人喜歡RStudio，另一些人更喜歡Jupyter Notebooks。我絕對屬於後者。

所以，當我第一次遇到TensorFlow.js(以前是deeplearn.js)時，我的心都要炸開了。在瀏覽器中構建機器學習模型？使用JavaScript？聽起來好得令人難以置信！

超過43億人使用網絡瀏覽器——約佔世界人口的55%。——維基百科(2019年3月)

谷歌的TensorFlow.js不僅將機器學習引入瀏覽器中，使機器學習大眾化，而且對於經常使用JavaScript的開發人員來說，它也是一個完美的機器學習門戶。

我們的網絡瀏覽器是最容易訪問的平臺之一。這就是為什麼構建不僅能夠訓練機器學習模型而且能夠在瀏覽器本身中“學習”或“遷移學習”的應用程序是有意義的。

在本文中，我們將首先了解使用TensorFlow.js的重要性及其它的不同組件。然後，我們將深入討論使用TensorFlow.js在瀏覽器中構建我們自己的機器學習模型。然後我們將構建一個應用程序，來使用計算機的網絡攝像頭檢測你的身體姿勢！

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

TensorFlow 101: Understanding Tensors and Graphs to get you Started with Deep Learning
Introduction to Implementing Neural Networks using TensorFlow

一、為什麼要使用TensorFlow.js?

我將用一種獨特的方法來回答這個問題。我不會深入研究TensorFlow.js的理論方面，也不會列出它為什麼是一個如此不可思議的工具。

相反，我將簡單地向你展示如果不使用TensorFlow.js將會錯過什麼。那麼，讓我們在5分鐘內構建一個應用程序，來使用你的網絡攝像頭對圖像進行分類。沒錯——我們將直接進入代碼部分！

這是最好的部分——你不需要安裝任何東西來做這個！只要一個文本編輯器和一個網絡瀏覽器即可。下面的動圖展示了我們將要構建的應用程序：

這多酷啊！我在瀏覽器裡幾分鐘就完成了。那麼，讓我們看一下步驟和代碼，以幫助你在Web瀏覽器中構建自己的圖像分類模型。

1.1 使用網絡攝像頭在瀏覽器中構建圖像分類模型

打開你選擇的文本編輯器並創建一個文件index.html。將以下代碼保存於此文件內：

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <!-- title of the page --> 
 <title>image_classification</title> 
 <!-- load processing library--> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script> 
 <!-- load ml5.js --> 
 <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script> 
 <!-- load index.js --> 
 <script src="index.js"></script> 
</head> 
<body> 
 <!-- this is where the video will be shown --> 
 <video id="video"></video> 
</body> 
</html>

接下來，創建另一個文件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); 
}

保存這兩個文件，然後在谷歌Chrome或Mozilla Firefox等瀏覽器中打開index.html文件。就是這樣！你現在已經創建了一個可以使用你的網絡攝像頭在瀏覽器本身實時分類圖像的應用程序！下面是它在我的計算機上的樣子：

視頻連接：

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

在這個例子中需要注意的要點：

在上面的例子中，我們使用了一個預先訓練的圖像分類模型MobileNet（https://ai.googleblog.com/2017/06/mobilenets-open-source-models-for.html）
我們使用ml5.js（https://ml5js.org/）一個構建在TensorFlow之上的庫。它將MobileNet模型加載到瀏覽器中，並對視頻提要執行推理。
我們還利用P5.js（https://p5js.org/）庫來處理視頻輸入並在視頻本身上顯示標籤。

我不需要在電腦上安裝任何東西。這個例子應該適用於任何現代系統，不管它是Linux、Windows還是MacOS——這就是使用JavaScript在web上構建模型的強大功能。

現在，讓我們看看TensorFlow.js提供的強大功能，以及如何利用它們在瀏覽器中部署機器學習模型。

1.2 TensorFlow.js的特徵

TensorFlow.js是一個庫，用於JavaScript開發和訓練ML模型，並在瀏覽器或Node.js上部署。

TensorFlow.js提供了許多的功能來供我們使用。

它是TensorFlow在JavaScript中的擴展，JavaScript是我們在互聯網上使用的幾乎所有網站、瀏覽器或應用程序邏輯背後的編程語言。JavaScript和Python一樣用途廣泛，所以使用它來開發機器學習模型給我們帶來了很多好處:

如果ML模型是用web語言編寫的，則更容易部署。
由於所有主流瀏覽器都支持JavaScript，所以你可以無處不在地使用它，而不必擔心平臺類型或其他兼容性問題。對於你的用戶也是如此。
TensorFlow.js是一個客戶端庫，這意味著它可以在用戶的瀏覽器中訓練或運行ML模型。這減輕了與數據隱私有關的任何擔憂。
在你的客戶端上運行實時推斷可使你的應用程序更具交互性，因為它們可以立即響應用戶輸入(例如我們前面構建的webcam應用程序)。

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

瀏覽器中的機器學習：你可以使用TensorFlow.js在瀏覽器中創建和訓練ML模型。
谷歌的預訓練模型：TensorFlow.js配備了一套由谷歌預訓練的模型，用於對象檢測、圖像分割、語音識別、文本毒性分類等任務。
遷移學習：你可以通過對已經訓練過的模型的部分進行再訓練來執行轉移學習，比如TensorFlow.js中的MobileNet。
部署python模型：使用Keras或TensorFlow訓練的模型可以很容易地導入瀏覽器/使用TensorFlow.js的部署。

在本文中，我們將關注前兩個功能。在本系列的第二部分(即將推出！)中，我們將討論如何在Python中轉移學習和部署我們的模型。

二、瀏覽器中的機器學習

TensorFlow.js提供了兩種方法來訓練模型(非常類似於TensorFlow)：

第一種方法是使用Core API使用低級張量操作來定義模型。
第二種方法是使用Layers API定義模型，類似於Keras。

讓我們通過幾個例子來理解這兩種方法。畢竟，學習一個概念最好的方法就是把它付諸實踐！

首先，設置你的HTML文件：

在你的電腦上建立一個新的index.html文件，並在其中編寫以下代碼：

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- load Tensorflow.js -->
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
</head>
<body>
 <h1>Tensorflow.js Core API</h1>
 <!-- <script src="index.js"></script> -->
 <script type="text/javascript">
</script>
</body>
</html>

我們創建了一個基本的HTML頁面，並從雲URL中加載了Tensorflow.js（第7行）。

關於安裝TensorFlow.js（deeplearn.js）的說明：

由於TensorFlow.js是為瀏覽器而設計的，所以安裝和使用TensorFlow.js最簡單的方法就是根本不安裝它。你可以簡單地從HTML中的URL加載它即可。

如果你想在本地工作怎麼辦呢？實際上，你可以在Jupyter Notebook中使用TensorFlow.js，就像你在Python或R中通常做的那樣。這是一個適合每個人的解決方案！

這種本地方法稍微長一些，並且需要一些時間，所以本文不會使用它。如果你確實想學習如何操作，可以從為Jupyter安裝ijavascript內核開始。下面是我的Jupyter Notebook的截圖：

現在，使用TensorFlow.js的推薦方法是使用庫的官方URL直接加載它。你只需將以下行添加到HTML文件中：

<scriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>

完成了！這真的很簡單。

2.1 Core API：使用Tensors工作

Core API與TensorFlowCore非常相似，我們可以使用低級張量運算和線性代數定義模型。

如果我們想要構建自定義模型或想要從頭開始構建神經網絡，這非常有用。讓我們舉一個在瀏覽器中使用張量的例子。

首先在index.html文件中的<script> </ script>標記之間添加以下代碼：

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();

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- load Tensorflow.js -->
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
</head>
<body>
 <h1>Tensorflow.js Core API</h1>
 <!-- <script src="index.js"></script> -->
 <script type="text/javascript">
 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();
</script>
</body>
</html>

在上面的代碼中，我們在兩個張量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

2.2 Layer API：像Keras一樣構建模型

Layers API與Python中的Keras非常相似。就像Keras一樣，你可以使用序列的和函數的方法創建模型。

讓我們通過一個例子仔細研究序列方法。我們將在這些數據點上訓練迴歸模型：

這裡，X和Y有一個線性關係——每個Y對應於X + i(其中i是0、1、2、3……n+1)。讓我們在這個數據集上訓練一個基本的迴歸模型。你可以在index.html文件中的<script></script>標記之間編寫以下代碼：

const callbacks = {
 onEpochEnd: async (epoch, logs) => {
 console.log("epoch: " + epoch + JSON.stringify(logs))
 }
 };
 // Generate some synthetic data for training.
 const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]);
 const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]);
 // Build and compile model.
 async function basicRegression(){
 // Build a sequential model
 const model = tf.sequential();
 model.add(tf.layers.dense({units: 1, inputShape: [1]}));
 model.add(tf.layers.dense({units: 1, inputShape: [1]}));
 model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});
 // Train model with fit().
 await model.fit(xs, ys, {epochs: 100, validationSplit: 0.1, callbacks: callbacks});
 // Run inference with predict().
 model.predict(tf.tensor2d([[5]], [1, 1])).print();
 }
 // Create a basic regression model
 basicRegression();

敏銳的讀者一定注意到，上面的語法與用Python構建順序模型的Keras語法非常相似。我們回到瀏覽器控制檯（console）時會得到預測。

我們的簡單迴歸模型預測7.556，非常接近8的期望值。這是一個基本的例子，但我們可以清楚地看到，在瀏覽器中直接構建機器學習模型是多麼容易和有用。

TensorFlow.js能夠在瀏覽器中構建機器學習和深度學習模型。它還自動利用GPU(s)的強大功能，如果在你的系統模型訓練期間可用。

下面是一些使用TensorFlow.js在一些標準數據集上訓練的深度學習模型的例子：

你可以在tfjs-examples repository中瀏覽這些示例。

tfjs-examples repository：

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

三、利用谷歌的預訓練模型：PoseNet

TensorFlow.js提供了大量來自谷歌的預訓練模型，用於許多有用的任務，如目標檢測、語音識別、圖像分割等。預先訓練的模型的優點是，我們可以使用它們而不需要任何重大的依賴關係或安裝，並且可以開箱即用。

人們普遍預計谷歌將在未來幾個月推出更多模型。你可以在下面鏈接查看可用的預訓練模型：

相關鏈接：

https://www.tensorflow.org/js/models

我們將在本文中使用PoseNet。PoseNet是一種視覺模型，可以通過估計人體關鍵關節的位置來估計一個人在圖像或視頻中的姿勢。

PoseNet是如何工作的？

這是一個迷人的概念。姿勢估計是一種計算機視覺技術，用於檢測圖像和視頻中的人物。例如，這可以幫助我們確定某人的肘部在圖像中出現的位置。

只是要清楚-姿勢估計不是關於識別誰在一個圖像中。該算法只是簡單地估計關鍵身體關節的位置。

檢測到的關鍵點設置為“Part”和“ID”索引，置信度得分在0.0和1.0之間(1.0是最高的)。

以下是PoseNet給出的輸出類型的示例：

難以置信，對吧？！我們將使用ml5.js庫來使用PoseNet。ml5.js是一個基於TensorFlow.js和p5.js的庫。p5.js是另一個庫可以使你更容易在瀏覽器中訪問網絡攝像頭。

ml5.js旨在使機器學習對廣大的藝術家，創意編碼員和學生來說變得平易近人。該庫以TensorFlow.js為基礎，通過簡單的語法在瀏覽器中提供對機器學習算法和模型的訪問。

例如，你可以使用ml5.js在5行代碼中使用MobileNet創建圖像分類模型，如下所示：

正是由於Ml5.js的簡單性，使得它非常適合在瀏覽器中快速構建原型，這也是我們在項目中使用它的原因。

讓我們回到PoseNet。創建一個新文件index.html並添加以下代碼：

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- load p5.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
 <!-- load ml5.js -->
 <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
 <!-- keep the video in center of browser -->
 <style type="text/css">
 body{
 text-align: center;
 }
</style>
</head>
<body>
 <h1>PoseNet demo with Ml5.js</h1>
 <p id="status">Loading Model...</p>
 <div id="videoContainer"></div>
 <!-- load the posenet.js file -->
 <script src="posenet.js"></script>
</body>
</html>

這將創建一個基本的HTML網頁並加載必要的文件。

ml5.js和p5.js是通過其官方URL加載的。
posenet.js是我們將編寫用於使用PoseNet的代碼的文件。

現在，我們將編寫用於使用PoseNet的JavaScript代碼。在與index.html相同的文件夾中創建一個新文件posenet.js。以下是完成此項工作所需的步驟：

加載PoseNet模型並從網絡攝像頭捕獲視頻
檢測身體關節的關鍵點
顯示檢測到的身體關節
繪製估計的身體骨骼

讓我們從第一步開始。

步驟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')
}

以上代碼塊中最重要的是：

createCapture(VIDEO)：它是一個p5.js函數，用於通過攝像頭捕獲視頻來創建視頻元素。
ml5.poseNet(video,modelRead)：我們使用ml5.js加載poseNet模式。通過傳入視頻，我們告訴模型處理視頻輸入。
PoseNet.on()：每當檢測到一個新的姿勢時，就執行這個函數。
modelReady()：當PoseNet完成加載時，我們調用這個函數來顯示模型的狀態。

步驟2：檢測身體關節的關鍵點

下一步是檢測姿勢。你可能已經注意到，在前面的步驟中，我們通過調用poseNet.on()將每個檢測到的位姿保存到pose變量中。這個函數在後臺連續運行。無論何時找到一個新的姿勢，它都會以以下格式給出身體關節的位置：

'score'是指模型的置信度
'part'表示檢測到的身體關節/關鍵點
'position'包含檢測到的部分的x和y位置

我們不必為此部分編寫代碼，因為它是自動生成的。

步驟3：顯示檢測到的人體關節

我們知道被檢測到的人體關節及其x和y位置。現在，我們只需要在視頻上畫出它們來顯示檢測到的人體關節。我們已經看到，PoseNet給出了一個檢測到的人體關節列表，每個關節及其x和y位置的置信度評分。

我們將使用20%的閾值(keypoint.score > 0.2)置信度得分，以便繪製一個關鍵點。下面是實現這一操作的代碼：

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
 // Loop through all the poses detected
 for (let i = 0; i < poses.length; i++) {
 // For each pose detected, loop through all the keypoints
 let pose = poses[i].pose;
 for (let j = 0; j < pose.keypoints.length; j++) {
 // A keypoint is an object describing a body part (like rightArm or leftShoulder)
 let keypoint = pose.keypoints[j];
 // Only draw an ellipse is the pose probability is bigger than 0.2
 if (keypoint.score > 0.2) {
 fill(255, 0, 0);
 noStroke();
 ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
 }
 }
 }
}

步驟4：繪製估計的身體骨架

除了關鍵點或身體關節，PoseNet還可以檢測估計的身體骨架。我們可以使用pose變量來繪製骨架：

// A function to draw the skeletons
function drawSkeleton() {
 // Loop through all the skeletons detected
 for (let i = 0; i < poses.length; i++) {
 let skeleton = poses[i].skeleton;
 // For every skeleton, loop through all body connections
 for (let j = 0; j < skeleton.length; j++) {
 let partA = skeleton[j][0];
 let partB = skeleton[j][1];
 stroke(255, 0, 0);
 line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
 }
 }
}

在這裡，我們遍歷檢測到的骨架並創建連接關鍵點的線。代碼還是相當簡單。

現在，最後一步是重複調用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/

瞧！你的PoseNet應該很好地檢測到了你的身體姿勢（如果你已經正確地遵循了所有步驟）。以下是我的模型的情況：

尾記

你可以看到我為什麼喜歡TensorFlow.js。它非常有效率，甚至不需要你在構建模型時擔心複雜的安裝步驟。

TensorFlow.js展示了通過將機器學習帶到瀏覽器中使機器學習更容易訪問的許多前景。同時，它還具有數據隱私、交互性等優點。這種組合使得它成為數據科學家工具箱中的一個非常強大的工具，特別是如果你想部署你的機器學習應用程序的話。

在下一篇文章中，我們將探討如何在瀏覽器中應用遷移學習，並使用TensorFlow.js部署機器學習或深度學習模型。

我們用PoseNet做的項目可以更進一步，通過訓練另一個分類器來構建一個姿態識別應用程序。我鼓勵你去嘗試一下！

原文標題：

Build a Machine Learning Model in your Browser using TensorFlow.jsand Python

原文鏈接：

https://www.analyticsvidhya.com/blog/2019/06/build-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js/

譯者簡介

吳金笛，雪城大學計算機科學碩士一年級在讀。迎難而上是我最舒服的狀態，動心忍性，曾益我所不能。我的目標是做個早睡早起的Cool Girl。

— 完 —

關注清華-青島數據科學研究院官方微信公眾平臺“THU數據派”及姊妹號“數據派THU”獲取更多講座福利及優質內容。

在瀏覽器中使用TensorFlow.js和Python構建機器學習模型

概述

介紹

目錄

一、為什麼要使用TensorFlow.js?

二、瀏覽器中的機器學習

三、利用谷歌的預訓練模型：PoseNet

尾記

相關推薦