大數(shù)據(jù)文摘授權(quán)轉(zhuǎn)載自數(shù)據(jù)派THU
作者： MOHD SANAD ZAKI RIZVI
?
本文主要介紹了：
-
TensorFlow.js (deeplearn.js)使我們能夠在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)和深度學(xué)習(xí)模型，而無需任何復(fù)雜的安裝步驟。
-
TensorFlow.js的兩個(gè)組件——Core API和Layer API。
-
了解如何構(gòu)建一個(gè)很棒的使用Tensorflow.js對網(wǎng)絡(luò)攝像頭中的圖像進(jìn)行分類的模型。
?
概述
?
你最喜歡用什么工具來編寫機(jī)器學(xué)習(xí)模型？數(shù)據(jù)科學(xué)家們對這個(gè)永恒的問題會給出各種不同的答案。一些人喜歡RStudio，另一些人更喜歡Jupyter Notebooks。我絕對屬于后者。
?
所以，當(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í)大眾化，而且對于經(jīng)常使用JavaScript的開發(fā)人員來說，它也是一個(gè)完美的機(jī)器學(xué)習(xí)門戶。
?
我們的網(wǎng)絡(luò)瀏覽器是最容易訪問的平臺之一。這就是為什么構(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ò)攝像頭檢測你的身體姿勢！
?
如果你是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è)問題。我不會深入研究TensorFlow.js的理論方面，也不會列出它為什么是一個(gè)如此不可思議的工具。
?
相反，我將簡單地向你展示如果不使用TensorFlow.js將會錯過什么。那么，讓我們在5分鐘內(nèi)構(gòu)建一個(gè)應(yīng)用程序，來使用你的網(wǎng)絡(luò)攝像頭對圖像進(jìn)行分類。沒錯——我們將直接進(jìn)入代碼部分！
?
這是最好的部分——你不需要安裝任何東西來做這個(gè)！只要一個(gè)文本編輯器和一個(gè)網(wǎng)絡(luò)瀏覽器即可。下面的動圖展示了我們將要構(gòu)建的應(yīng)用程序：
?
?
這多酷啊！我在瀏覽器里幾分鐘就完成了。那么，讓我們看一下步驟和代碼，以幫助你在Web瀏覽器中構(gòu)建自己的圖像分類模型。
?
?使用網(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模型加載到瀏覽器中，并對視頻提要執(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)大功能，以及如何利用它們在瀏覽器中部署機(jī)器學(xué)習(xí)模型。
?
TensorFlow.js的特征
?
TensorFlow.js是一個(gè)庫，用于JavaScript開發(fā)和訓(xùn)練ML模型，并在瀏覽器或Node.js上部署。
?
TensorFlow.js提供了許多的功能來供我們使用。
?
它是TensorFlow在JavaScript中的擴(kuò)展，JavaScript是我們在互聯(lián)網(wǎng)上使用的幾乎所有網(wǎng)站、瀏覽器或應(yīng)用程序邏輯背后的編程語言。JavaScript和Python一樣用途廣泛，所以使用它來開發(fā)機(jī)器學(xué)習(xí)模型給我們帶來了很多好處:
?
-
如果ML模型是用web語言編寫的，則更容易部署。
-
由于所有主流瀏覽器都支持JavaScript，所以你可以無處不在地使用它，而不必?fù)?dān)心平臺類型或其他兼容性問題。對于你的用戶也是如此。
-
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)練的模型，用于對象檢測、圖像分割、語音識別、文本毒性分類等任務(wù)。
-
遷移學(xué)習(xí)：你可以通過對已經(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使用低級張量操作來定義模型。
-
第二種方法是使用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í)，就執(zhí)行這個(gè)函數(shù)。
-
modelReady() ：當(dāng)PoseNet完成加載時(shí)，我們調(diào)用這個(gè)函數(shù)來顯示模型的狀態(tài)。
?
步驟2：檢測身體關(guān)節(jié)的關(guān)鍵點(diǎn)
?
下一步是檢測姿勢。你可能已經(jīng)注意到，在前面的步驟中，我們通過調(diào)用poseNet.on()將每個(gè)檢測到的位姿保存到pose變量中。這個(gè)函數(shù)在后臺連續(xù)運(yùn)行。無論何時(shí)找到一個(gè)新的姿勢，它都會以以下格式給出身體關(guān)節(jié)的位置：
?
?
-
'score'是指模型的置信度
-
'part'表示檢測到的身體關(guān)節(jié)/關(guān)鍵點(diǎn)
-
'position'包含檢測到的部分的x和y位置
?
我們不必為此部分編寫代碼，因?yàn)樗亲詣由傻摹?
?
步驟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位置的置信度評分。
?
我們將使用20%的閾值(keypoint.score > 0.2)置信度得分，以便繪制一個(gè)關(guān)鍵點(diǎn)。下面是實(shí)現(xiàn)這一操作的代碼：
?
?
// A function to draw ellipses over the detected keypointsfunction 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 skeletonsfunction 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)目文件夾，然后啟動Python服務(wù)器：
?
?
?
python3 -m http.server
?
然后轉(zhuǎn)到你的瀏覽器并打開以下地址：
http://localhost:8000/
?
?
瞧！你的PoseNet應(yīng)該很好地檢測到了你的身體姿勢（如果你已經(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)識別應(yīng)用程序。我鼓勵你去嘗試一下！
?
原文鏈接：
https://www.analyticsvidhya.com/blog/2019/06/build-machine-learning-model-in-your-browser-tensorflow-js-deeplearn-js/
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
