概述

10余年的霍城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整霍城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“霍城網(wǎng)站設(shè)計(jì)”,“霍城網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

•  TensorFlow.js (deeplearn.js)使我們能夠在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)和深度學(xué)習(xí)模型，而無(wú)需任何復(fù)雜的安裝步驟。
•  TensorFlow.js的兩個(gè)組件——Core API和Layer API。
•  了解如何構(gòu)建一個(gè)很棒的使用Tensorflow.js對(duì)網(wǎng)絡(luò)攝像頭中的圖像進(jìn)行分類的模型。

介紹

你喜歡用什么工具來(lái)編寫機(jī)器學(xué)習(xí)模型？數(shù)據(jù)科學(xué)家們對(duì)這個(gè)永恒的問(wèn)題會(huì)給出各種不同的答案。一些人喜歡RStudio，另一些人更喜歡Jupyter Notebooks。我絕對(duì)屬于后者。

所以，當(dāng)我第一次遇到TensorFlow.js(以前是deeplearn.js)時(shí)，我的心都要炸開了。在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)模型？使用JavaScript？聽起來(lái)好得令人難以置信！

超過(guò)43億人使用網(wǎng)絡(luò)瀏覽器——約占世界人口的55%?！S基百科(2019年3月)

谷歌的TensorFlow.js不僅將機(jī)器學(xué)習(xí)引入瀏覽器中，使機(jī)器學(xué)習(xí)大眾化，而且對(duì)于經(jīng)常使用JavaScript的開發(fā)人員來(lái)說(shuō)，它也是一個(gè)完美的機(jī)器學(xué)習(xí)門戶。

我們的網(wǎng)絡(luò)瀏覽器是最容易訪問(wèn)的平臺(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)用程序，來(lái)使用計(jì)算機(jī)的網(wǎng)絡(luò)攝像頭檢測(cè)你的身體姿勢(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ú)特的方法來(lái)回答這個(gè)問(wèn)題。我不會(huì)深入研究TensorFlow.js的理論方面，也不會(huì)列出它為什么是一個(gè)如此不可思議的工具。

相反，我將簡(jiǎn)單地向你展示如果不使用TensorFlow.js將會(huì)錯(cuò)過(guò)什么。那么，讓我們?cè)?分鐘內(nèi)構(gòu)建一個(gè)應(yīng)用程序，來(lái)使用你的網(wǎng)絡(luò)攝像頭對(duì)圖像進(jìn)行分類。沒(méi)錯(cuò)——我們將直接進(jìn)入代碼部分！

這是最好的部分——你不需要安裝任何東西來(lái)做這個(gè)！只要一個(gè)文本編輯器和一個(gè)網(wǎng)絡(luò)瀏覽器即可。下面的動(dòng)圖展示了我們將要構(gòu)建的應(yīng)用程序：

在瀏覽器中使用TensorFlow.js和Python構(gòu)建機(jī)器學(xué)習(xí)模型

這多酷?。∥以跒g覽器里幾分鐘就完成了。那么，讓我們看一下步驟和代碼，以幫助你在Web瀏覽器中構(gòu)建自己的圖像分類模型。

1.1 使用網(wǎng)絡(luò)攝像頭在瀏覽器中構(gòu)建圖像分類模型

打開你選擇的文本編輯器并創(chuàng)建一個(gè)文件index.html。將以下代碼保存于此文件內(nèi)： 

接下來(lái)，創(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之上的庫(kù)。它將MobileNet模型加載到瀏覽器中，并對(duì)視頻提要執(zhí)行推理。
•  我們還利用P5.js（https://p5js.org/）庫(kù)來(lái)處理視頻輸入并在視頻本身上顯示標(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è)庫(kù)，用于JavaScript開發(fā)和訓(xùn)練ML模型，并在瀏覽器或Node.js上部署。

TensorFlow.js提供了許多的功能來(lái)供我們使用。

它是TensorFlow在JavaScript中的擴(kuò)展，JavaScript是我們?cè)诨ヂ?lián)網(wǎng)上使用的幾乎所有網(wǎng)站、瀏覽器或應(yīng)用程序邏輯背后的編程語(yǔ)言。JavaScript和Python一樣用途廣泛，所以使用它來(lái)開發(fā)機(jī)器學(xué)習(xí)模型給我們帶來(lái)了很多好處:

    如果ML模型是用web語(yǔ)言編寫的，則更容易部署。

•  由于所有主流瀏覽器都支持JavaScript，所以你可以無(wú)處不在地使用它，而不必?fù)?dān)心平臺(tái)類型或其他兼容性問(wèn)題。對(duì)于你的用戶也是如此。
•  TensorFlow.js是一個(gè)客戶端庫(kù)，這意味著它可以在用戶的瀏覽器中訓(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ì)象檢測(cè)、圖像分割、語(yǔ)音識(shí)別、文本毒性分類等任務(wù)。
•  遷移學(xué)習(xí)：你可以通過(guò)對(duì)已經(jīng)訓(xùn)練過(guò)的模型的部分進(jìn)行再訓(xùn)練來(lái)執(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提供了兩種方法來(lái)訓(xùn)練模型(非常類似于TensorFlow)：

•  第一種方法是使用Core API使用低級(jí)張量操作來(lái)定義模型。
•  第二種方法是使用Layers API定義模型，類似于Keras。

讓我們通過(guò)幾個(gè)例子來(lái)理解這兩種方法。畢竟，學(xué)習(xí)一個(gè)概念最好的方法就是把它付諸實(shí)踐！

首先，設(shè)置你的HTML文件：

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

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
Tensorflow.js Core API
  
  
  
  
  
   
  
  
  
  
   
  
  
  
  
  
  
  
  
  
 
 
 
 
 

我們創(chuàng)建了一個(gè)基本的HTML頁(yè)面，并從云URL中加載了Tensorflow.js（第7行）。

關(guān)于安裝TensorFlow.js（deeplearn.js）的說(shuō)明：

由于TensorFlow.js是為瀏覽器而設(shè)計(jì)的，所以安裝和使用TensorFlow.js最簡(jiǎn)單的方法就是根本不安裝它。你可以簡(jiǎn)單地從HTML中的URL加載它即可。

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

這種本地方法稍微長(zhǎng)一些，并且需要一些時(shí)間，所以本文不會(huì)使用它。如果你確實(shí)想學(xué)習(xí)如何操作，可以從為Jupyter安裝ijavascript內(nèi)核開始。下面是我的Jupyter Notebook的截圖：

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

完成了！這真的很簡(jiǎn)單。

2.1 Core API：使用Tensors工作

Core API與TensorFlowCore非常相似，我們可以使用低級(jí)張量運(yùn)算和線性代數(shù)定義模型。

如果我們想要構(gòu)建自定義模型或想要從頭開始構(gòu)建神經(jīng)網(wǎng)絡(luò)，這非常有用。讓我們舉一個(gè)在瀏覽器中使用張量的例子。

首先在index.html文件中的  

在上面的代碼中，我們?cè)趦蓚€(gè)張量a和b上執(zhí)行基本的加法和乘法運(yùn)算，并將結(jié)果打印在瀏覽器中?，F(xiàn)在，轉(zhuǎn)到終端，打開項(xiàng)目文件夾，然后使用以下命令啟動(dòng)Python服務(wù)器： 

 
 
 
 

  
  
  
  
python3 -m http.server 
 
 
 
 

然后在你的瀏覽器打開以下地址： 

 
 
 
 

  
  
  
  
http://localhost:8000/ 
 
 
 
 

當(dāng)你看到一個(gè)頁(yè)面顯示“Tensorflow.js Core API”時(shí)，使用Ctrl+Shift+I鍵打開控制臺(tái)（console）。這應(yīng)該在Chrome和Firefox都適用。我們?cè)诳刂婆_(tái)得到上述操作的輸出：

如果你想深入閱讀有關(guān)Core API的更多信息，那么我建議你閱讀CoreAPI官方文檔。

CoreAPI文檔：   

 
 
 
 

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

2.2 Layer API：像Keras一樣構(gòu)建模型

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

讓我們通過(guò)一個(gè)例子仔細(xì)研究序列方法。我們將在這些數(shù)據(jù)點(diǎn)上訓(xùn)練回歸模型：

這里，X和Y有一個(gè)線性關(guān)系——每個(gè)Y對(duì)應(yīng)于X + i(其中i是0、1、2、3……n+1)。讓我們?cè)谶@個(gè)數(shù)據(jù)集上訓(xùn)練一個(gè)基本的回歸模型。你可以在index.html文件中的標(biāo)記之間編寫以下代碼： 

 
 
 
 

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

敏銳的讀者一定注意到，上面的語(yǔ)法與用Python構(gòu)建順序模型的Keras語(yǔ)法非常相似。我們回到瀏覽器控制臺(tái)（console）時(shí)會(huì)得到預(yù)測(cè)。

我們的簡(jiǎn)單回歸模型預(yù)測(cè)7.556，非常接近8的期望值。這是一個(gè)基本的例子，但我們可以清楚地看到，在瀏覽器中直接構(gòu)建機(jī)器學(xué)習(xí)模型是多么容易和有用。

TensorFlow.js能夠在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)和深度學(xué)習(xí)模型。它還自動(dòng)利用GPU(s)的強(qiáng)大功能，如果在你的系統(tǒng)模型訓(xùn)練期間可用。

下面是一些使用TensorFlow.js在一些標(biāo)準(zhǔn)數(shù)據(jù)集上訓(xùn)練的深度學(xué)習(xí)模型的例子：

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

tfjs-examples repository： 

 
 
 
 

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

三、利用谷歌的預(yù)訓(xùn)練模型：PoseNet

TensorFlow.js提供了大量來(lái)自谷歌的預(yù)訓(xùn)練模型，用于許多有用的任務(wù)，如目標(biāo)檢測(cè)、語(yǔ)音識(shí)別、圖像分割等。預(yù)先訓(xùn)練的模型的優(yōu)點(diǎn)是，我們可以使用它們而不需要任何重大的依賴關(guān)系或安裝，并且可以開箱即用。

人們普遍預(yù)計(jì)谷歌將在未來(lái)幾個(gè)月推出更多模型。你可以在下面鏈接查看可用的預(yù)訓(xùn)練模型：

相關(guān)鏈接：   

 
 
 
 

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

我們將在本文中使用PoseNet。PoseNet是一種視覺(jué)模型，可以通過(guò)估計(jì)人體關(guān)鍵關(guān)節(jié)的位置來(lái)估計(jì)一個(gè)人在圖像或視頻中的姿勢(shì)。

PoseNet是如何工作的？

這是一個(gè)迷人的概念。姿勢(shì)估計(jì)是一種計(jì)算機(jī)視覺(jué)技術(shù)，用于檢測(cè)圖像和視頻中的人物。例如，這可以幫助我們確定某人的肘部在圖像中出現(xiàn)的位置。

只是要清楚-姿勢(shì)估計(jì)不是關(guān)于識(shí)別誰(shuí)在一個(gè)圖像中。該算法只是簡(jiǎn)單地估計(jì)關(guān)鍵身體關(guān)節(jié)的位置。

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

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

難以置信，對(duì)吧？！我們將使用ml5.js庫(kù)來(lái)使用PoseNet。ml5.js是一個(gè)基于TensorFlow.js和p5.js的庫(kù)。p5.js是另一個(gè)庫(kù)可以使你更容易在瀏覽器中訪問(wèn)網(wǎng)絡(luò)攝像頭。

ml5.js旨在使機(jī)器學(xué)習(xí)對(duì)廣大的藝術(shù)家，創(chuàng)意編碼員和學(xué)生來(lái)說(shuō)變得平易近人。該庫(kù)以TensorFlow.js為基礎(chǔ)，通過(guò)簡(jiǎn)單的語(yǔ)法在瀏覽器中提供對(duì)機(jī)器學(xué)習(xí)算法和模型的訪問(wèn)。

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

正是由于Ml5.js的簡(jiǎn)單性，使得它非常適合在瀏覽器中快速構(gòu)建原型，這也是我們?cè)陧?xiàng)目中使用它的原因。

讓我們回到PoseNet。創(chuàng)建一個(gè)新文件index.html并添加以下代碼： 

 
 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
 body{  
  
  
  
  
 text-align: center;  
  
  
  
  
 }  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
PoseNet demo with Ml5.js
  
  
  
  
  
 Loading Model...