作者： MOHD SANAD ZAKI RIZVI
翻譯：吳金笛
校對(duì)：丁楠雅
本文 約 5500字 ，建議閱讀 15分鐘 。
本文首先介紹了TensorFlow.js的重要性及其組件，并介紹使用其在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)模型的方法。然后，構(gòu)建使用計(jì)算機(jī)的網(wǎng)絡(luò)攝像頭檢測身體姿勢(shì)的應(yīng)用程序。
概述
-
TensorFlow.js (deeplearn.js)使我們能夠在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)和深度學(xué)習(xí)模型，而無需任何復(fù)雜的安裝步驟。
-
TensorFlow.js的兩個(gè)組件——Core API和Layer API。
-
了解如何構(gòu)建一個(gè)很棒的使用Tensorflow.js對(duì)網(wǎng)絡(luò)攝像頭中的圖像進(jìn)行分類的模型。
?
介紹
你最喜歡用什么工具來編寫機(jī)器學(xué)習(xí)模型？數(shù)據(jù)科學(xué)家們對(duì)這個(gè)永恒的問題會(huì)給出各種不同的答案。一些人喜歡RStudio，另一些人更喜歡Jupyter Notebooks。我絕對(duì)屬于后者。
?
所以，當(dāng)我第一次遇到TensorFlow.js(以前是deeplearn.js)時(shí)，我的心都要炸開了。在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)模型？使用JavaScript？聽起來好得令人難以置信！
?
超過43億人使用網(wǎng)絡(luò)瀏覽器——約占世界人口的55%。——維基百科(2019年3月)
?
谷歌的TensorFlow.js不僅將機(jī)器學(xué)習(xí)引入瀏覽器中，使機(jī)器學(xué)習(xí)大眾化，而且對(duì)于經(jīng)常使用JavaScript的開發(fā)人員來說，它也是一個(gè)完美的機(jī)器學(xué)習(xí)門戶。
?
?
我們的網(wǎng)絡(luò)瀏覽器是最容易訪問的平臺(tái)之一。這就是為什么構(gòu)建不僅能夠訓(xùn)練機(jī)器學(xué)習(xí)模型而且能夠在瀏覽器本身中“學(xué)習(xí)”或“遷移學(xué)習(xí)”的應(yīng)用程序是有意義的。
?
在本文中，我們將首先了解使用TensorFlow.js的重要性及其它的不同組件。然后，我們將深入討論使用TensorFlow.js在瀏覽器中構(gòu)建我們自己的機(jī)器學(xué)習(xí)模型。然后我們將構(gòu)建一個(gè)應(yīng)用程序，來使用計(jì)算機(jī)的網(wǎng)絡(luò)攝像頭檢測你的身體姿勢(shì)！
?
如果你是TensorFlow的新手，你可以在下面文章中了解更多:
-
TensorFlow 101: Understanding Tensors and Graphs to get you ? ? Started with Deep Learning
-
Introduction to Implementing Neural Networks using ? ? TensorFlow
目錄
一、為什么你應(yīng)該使用TensorFlow.js？
???? 1.1 使用網(wǎng)絡(luò)攝像頭在瀏覽器中進(jìn)行圖像分類
???? 1.2 TensorFlow.js的特征
二、了解瀏覽器中的機(jī)器學(xué)習(xí)
???? 2.1 Core API：使用Tensors工作
???? 2.2 Layer API：像Keras一樣構(gòu)建模型
三、利用谷歌的預(yù)訓(xùn)練模型：PoseNet
?
一、為什么要使用TensorFlow.js?
我將用一種獨(dú)特的方法來回答這個(gè)問題。我不會(huì)深入研究TensorFlow.js的理論方面，也不會(huì)列出它為什么是一個(gè)如此不可思議的工具。
?
相反，我將簡單地向你展示如果不使用TensorFlow.js將會(huì)錯(cuò)過什么。那么，讓我們?cè)?分鐘內(nèi)構(gòu)建一個(gè)應(yīng)用程序，來使用你的網(wǎng)絡(luò)攝像頭對(duì)圖像進(jìn)行分類。沒錯(cuò)——我們將直接進(jìn)入代碼部分！
?
這是最好的部分——你不需要安裝任何東西來做這個(gè)！只要一個(gè)文本編輯器和一個(gè)網(wǎng)絡(luò)瀏覽器即可。下面的動(dòng)圖展示了我們將要構(gòu)建的應(yīng)用程序：
?
?
這多酷啊！我在瀏覽器里幾分鐘就完成了。那么，讓我們看一下步驟和代碼，以幫助你在Web瀏覽器中構(gòu)建自己的圖像分類模型。
?
1.1 使用網(wǎng)絡(luò)攝像頭在瀏覽器中構(gòu)建圖像分類模型
打開你選擇的文本編輯器并創(chuàng)建一個(gè)文件index.html。將以下代碼保存于此文件內(nèi)：
image_classification
接下來，創(chuàng)建另一個(gè)文件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);??
}??
保存這兩個(gè)文件，然后在谷歌Chrome或Mozilla Firefox等瀏覽器中打開index.html文件。 就是這樣！你現(xiàn)在已經(jīng)創(chuàng)建了一個(gè)可以使用你的網(wǎng)絡(luò)攝像頭在瀏覽器本身實(shí)時(shí)分類圖像的應(yīng)用程序！ 下面是它在我的計(jì)算機(jī)上的樣子：
視頻連接：
https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/05/mobilenet_demo.mp4?_=1
?
在這個(gè)例子中需要注意的要點(diǎn)：
?
-
在上面的例子中，我們使用了一個(gè)預(yù)先訓(xùn)練的圖像分類模型MobileNet （https://ai.googleblog.com/2017/06/mobilenets-open-source-models-for.html）
-
我們使用ml5.js （https://ml5js.org/） 一個(gè)構(gòu)建在TensorFlow之上的庫。它將MobileNet模型加載到瀏覽器中，并對(duì)視頻提要執(zhí)行推理。
-
我們還利用P5.js （https://p5js.org/） 庫來處理視頻輸入并在視頻本身上顯示標(biāo)簽。
?
我不需要在電腦上安裝任何東西。這個(gè)例子應(yīng)該適用于任何現(xiàn)代系統(tǒng)，不管它是Linux、Windows還是MacOS——這就是使用JavaScript在web上構(gòu)建模型的強(qiáng)大功能。
?
現(xiàn)在，讓我們看看TensorFlow.js提供的強(qiáng)大功能，以及如何利用它們?cè)跒g覽器中部署機(jī)器學(xué)習(xí)模型。
?
1.2 TensorFlow.js的特征
?
TensorFlow.js是一個(gè)庫，用于JavaScript開發(fā)和訓(xùn)練ML模型，并在瀏覽器或Node.js上部署。
?
TensorFlow.js提供了許多的功能來供我們使用。
?
它是TensorFlow在JavaScript中的擴(kuò)展，JavaScript是我們?cè)诨ヂ?lián)網(wǎng)上使用的幾乎所有網(wǎng)站、瀏覽器或應(yīng)用程序邏輯背后的編程語言。JavaScript和Python一樣用途廣泛，所以使用它來開發(fā)機(jī)器學(xué)習(xí)模型給我們帶來了很多好處:
?
-
如果ML模型是用web語言編寫的，則更容易部署。
-
由于所有主流瀏覽器都支持JavaScript，所以你可以無處不在地使用它，而不必?fù)?dān)心平臺(tái)類型或其他兼容性問題。對(duì)于你的用戶也是如此。
-
TensorFlow.js是一個(gè)客戶端庫，這意味著它可以在用戶的瀏覽器中訓(xùn)練或運(yùn)行ML模型。這減輕了與數(shù)據(jù)隱私有關(guān)的任何擔(dān)憂。
-
在你的客戶端上運(yùn)行實(shí)時(shí)推斷可使你的應(yīng)用程序更具交互性，因?yàn)樗鼈兛梢粤⒓错憫?yīng)用戶輸入(例如我們前面構(gòu)建的webcam應(yīng)用程序)。
TensorFlow.js以其當(dāng)前的形式提供了以下主要功能：
?
-
瀏覽器中的機(jī)器學(xué)習(xí)： 你可以使用TensorFlow.js在瀏覽器中創(chuàng)建和訓(xùn)練ML模型。
-
谷歌的預(yù)訓(xùn)練模型： TensorFlow.js配備了一套由谷歌預(yù)訓(xùn)練的模型，用于對(duì)象檢測、圖像分割、語音識(shí)別、文本毒性分類等任務(wù)。
-
遷移學(xué)習(xí)： 你可以通過對(duì)已經(jīng)訓(xùn)練過的模型的部分進(jìn)行再訓(xùn)練來執(zhí)行轉(zhuǎn)移學(xué)習(xí)，比如TensorFlow.js中的MobileNet。
-
部署python模型： 使用Keras或TensorFlow訓(xùn)練的模型可以很容易地導(dǎo)入瀏覽器/使用TensorFlow.js的部署。
?
在本文中，我們將關(guān)注前兩個(gè)功能。在本系列的第二部分(即將推出！)中，我們將討論如何在Python中轉(zhuǎn)移學(xué)習(xí)和部署我們的模型。
?
二、瀏覽器中的機(jī)器學(xué)習(xí)
TensorFlow.js提供了兩種方法來訓(xùn)練模型(非常類似于TensorFlow)：
?
-
第一種方法是使用Core API使用低級(jí)張量操作來定義模型。
-
第二種方法是使用Layers API定義模型，類似于Keras。
?
讓我們通過幾個(gè)例子來理解這兩種方法。畢竟，學(xué)習(xí)一個(gè)概念最好的方法就是把它付諸實(shí)踐！
?
首先，設(shè)置你的HTML文件：
?
在你的電腦上建立一個(gè)新的index.html文件，并在其中編寫以下代碼：
Tensorflow.js Core API
PoseNet demo with Ml5.js
Loading Model...
這將創(chuàng)建一個(gè)基本的HTML網(wǎng)頁并加載必要的文件：
?
-
ml5.js和p5.js是通過其官方URL加載的。
-
posenet.js是我們將編寫用于使用PoseNet的代碼的文件。
?
現(xiàn)在，我們將編寫用于使用PoseNet的JavaScript代碼。在與index.html相同的文件夾中創(chuàng)建一個(gè)新文件posenet.js。以下是完成此項(xiàng)工作所需的步驟：
?
-
加載PoseNet模型并從網(wǎng)絡(luò)攝像頭捕獲視頻
-
檢測身體關(guān)節(jié)的關(guān)鍵點(diǎn)
-
顯示檢測到的身體關(guān)節(jié)
-
繪制估計(jì)的身體骨骼
?
讓我們從第一步開始。
?
步驟1：加載PoseNet模型并從網(wǎng)絡(luò)攝像頭捕獲視頻
?
我們將使用ml5.js加載PoseNet。與此同時(shí)，p5.js使我們可以用幾行代碼從網(wǎng)絡(luò)攝像頭捕獲視頻：
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)：它是一個(gè)p5.js函數(shù)，用于通過攝像頭捕獲視頻來創(chuàng)建視頻元素。
-
ml5.poseNet(video,modelRead)：我們使用ml5.js加載poseNet模式。通過傳入視頻，我們告訴模型處理視頻輸入。
-
PoseNet.on()：每當(dāng)檢測到一個(gè)新的姿勢(shì)時(shí)，就執(zhí)行這個(gè)函數(shù)。
-
modelReady()：當(dāng)PoseNet完成加載時(shí)，我們調(diào)用這個(gè)函數(shù)來顯示模型的狀態(tài)。
?
步驟2：檢測身體關(guān)節(jié)的關(guān)鍵點(diǎn)
?
下一步是檢測姿勢(shì)。你可能已經(jīng)注意到，在前面的步驟中，我們通過調(diào)用poseNet.on()將每個(gè)檢測到的位姿保存到pose變量中。這個(gè)函數(shù)在后臺(tái)連續(xù)運(yùn)行。無論何時(shí)找到一個(gè)新的姿勢(shì)，它都會(huì)以以下格式給出身體關(guān)節(jié)的位置：
?
?
-
'score' 是指模型的置信度
-
'part' 表示檢測到的身體關(guān)節(jié)/關(guān)鍵點(diǎn)
-
'position' 包含檢測到的部分的x和y位置
?
我們不必為此部分編寫代碼，因?yàn)樗亲詣?dòng)生成的。
?
步驟3：顯示檢測到的人體關(guān)節(jié)
?
我們知道被檢測到的人體關(guān)節(jié)及其x和y位置。現(xiàn)在，我們只需要在視頻上畫出它們來顯示檢測到的人體關(guān)節(jié)。我們已經(jīng)看到，PoseNet給出了一個(gè)檢測到的人體關(guān)節(jié)列表，每個(gè)關(guān)節(jié)及其x和y位置的置信度評(píng)分。
?
我們將使用20%的閾值(keypoint.score > 0.2)置信度得分，以便繪制一個(gè)關(guān)鍵點(diǎn)。下面是實(shí)現(xiàn)這一操作的代碼：
// 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：繪制估計(jì)的身體骨架
?
除了關(guān)鍵點(diǎn)或身體關(guān)節(jié)，PoseNet還可以檢測估計(jì)的身體骨架。我們可以使用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);
}
}
}
在這里，我們遍歷檢測到的骨架并創(chuàng)建連接關(guān)鍵點(diǎn)的線。代碼還是相當(dāng)簡單。
?
現(xiàn)在，最后一步是重復(fù)調(diào)用drawSkeleton()和drawKeypoints()函數(shù)，以及我們從網(wǎng)絡(luò)攝像頭捕獲的視頻源。我們可以使用p5.js的draw()函數(shù)來實(shí)現(xiàn)，該函數(shù)在setup()之后直接調(diào)用，并重復(fù)執(zhí)行：
function draw() {
image(video, 0, 0, width, height);
// We can call both functions to draw all keypoints and the skeletons
drawKeypoints();
drawSkeleton();
}
接下來，轉(zhuǎn)到終端窗口，進(jìn)入項(xiàng)目文件夾，然后啟動(dòng)Python服務(wù)器：
python3?-m?http.server
然后轉(zhuǎn)到你的瀏覽器并打開以下地址：
http://localhost:8000/
?
瞧！你的PoseNet應(yīng)該很好地檢測到了你的身體姿勢(shì)（如果你已經(jīng)正確地遵循了所有步驟）。以下是我的模型的情況：
?
尾記
你可以看到我為什么喜歡TensorFlow.js。它非常有效率，甚至不需要你在構(gòu)建模型時(shí)擔(dān)心復(fù)雜的安裝步驟。
?
TensorFlow.js展示了通過將機(jī)器學(xué)習(xí)帶到瀏覽器中使機(jī)器學(xué)習(xí)更容易訪問的許多前景。同時(shí)，它還具有數(shù)據(jù)隱私、交互性等優(yōu)點(diǎn)。這種組合使得它成為數(shù)據(jù)科學(xué)家工具箱中的一個(gè)非常強(qiáng)大的工具，特別是如果你想部署你的機(jī)器學(xué)習(xí)應(yīng)用程序的話。
?
在下一篇文章中，我們將探討如何在瀏覽器中應(yīng)用遷移學(xué)習(xí)，并使用TensorFlow.js部署機(jī)器學(xué)習(xí)或深度學(xué)習(xí)模型。
?
我們用PoseNet做的項(xiàng)目可以更進(jìn)一步，通過訓(xùn)練另一個(gè)分類器來構(gòu)建一個(gè)姿態(tài)識(shí)別應(yīng)用程序。我鼓勵(lì)你去嘗試一下！
原文標(biāo)題：
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/
譯者簡介
吳金笛 ，雪城大學(xué)計(jì)算機(jī)科學(xué)碩士一年級(jí)在讀。迎難而上是我最舒服的狀態(tài)，動(dòng)心忍性，曾益我所不能。我的目標(biāo)是做個(gè)早睡早起的Cool Girl。
翻譯組招募信息
工作內(nèi)容：
需要一顆細(xì)致的心，將選取好的外文文章翻譯成流暢的中文。如果你是數(shù)據(jù)科學(xué)/統(tǒng)計(jì)學(xué)/計(jì)算機(jī)類的留學(xué)生，或在海外從事相關(guān)工作，或?qū)ψ约和庹Z水平有信心的朋友歡迎加入翻譯小組。
你能得到： 定期的翻譯培訓(xùn)提高志愿者的翻譯水平，提高對(duì)于數(shù)據(jù)科學(xué)前沿的認(rèn)知，海外的朋友可以和國內(nèi)技術(shù)應(yīng)用發(fā)展保持聯(lián)系，數(shù)據(jù)派THU產(chǎn)學(xué)研的背景為志愿者帶來好的發(fā)展機(jī)遇。
其他福利： 來自于名企的數(shù)據(jù)科學(xué)工作者，北大清華以及海外等名校學(xué)生他們都將成為你在翻譯小組的伙伴。
點(diǎn)擊文末“ 閱讀原文 ”加入數(shù)據(jù)派團(tuán)隊(duì)~
點(diǎn)擊 “閱讀原文” 擁抱組織
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
