作者： 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？
???? 1.1 使用網絡攝像頭在瀏覽器中進行圖像分類
???? 1.2 TensorFlow.js的特征
二、了解瀏覽器中的機器學習
???? 2.1 Core API：使用Tensors工作
???? 2.2 Layer API：像Keras一樣構建模型
三、利用谷歌的預訓練模型：PoseNet
?
一、為什么要使用TensorFlow.js?
我將用一種獨特的方法來回答這個問題。我不會深入研究TensorFlow.js的理論方面，也不會列出它為什么是一個如此不可思議的工具。
?
相反，我將簡單地向你展示如果不使用TensorFlow.js將會錯過什么。那么，讓我們在5分鐘內構建一個應用程序，來使用你的網絡攝像頭對圖像進行分類。沒錯——我們將直接進入代碼部分！
?
這是最好的部分——你不需要安裝任何東西來做這個！只要一個文本編輯器和一個網絡瀏覽器即可。下面的動圖展示了我們將要構建的應用程序：
?
?
這多酷啊！我在瀏覽器里幾分鐘就完成了。那么，讓我們看一下步驟和代碼，以幫助你在Web瀏覽器中構建自己的圖像分類模型。
?
1.1 使用網絡攝像頭在瀏覽器中構建圖像分類模型
打開你選擇的文本編輯器并創建一個文件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);??
}??
保存這兩個文件，然后在谷歌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文件，并在其中編寫以下代碼：
Tensorflow.js Core API
PoseNet demo with Ml5.js
Loading Model...
這將創建一個基本的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產學研的背景為志愿者帶來好的發展機遇。
其他福利： 來自于名企的數據科學工作者，北大清華以及海外等名校學生他們都將成為你在翻譯小組的伙伴。
點擊文末“ 閱讀原文 ”加入數據派團隊~
點擊 “閱讀原文” 擁抱組織
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
