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

概述

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

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

介紹

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

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

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

谷歌的TensorFlow.js不僅將機(jī)器學(xué)習(xí)引入瀏覽器中，使機(jī)器學(xué)習(xí)大眾化，而且對于經(jīng)常使用JavaScript的開發(fā)人員來說，它也是一個完美的機(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)建一個應(yīng)用程序，來使用計算機(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?

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

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

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

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

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

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

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

 
 
 
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
      
  
  
  
      
  
  
  
      
  
  
  
      
  
  
  
   image_classification

接下來，創(chuàng)建另一個文件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文件。就是這樣！你現(xiàn)在已經(jīng)創(chuàng)建了一個可以使用你的網(wǎng)絡(luò)攝像頭在瀏覽器本身實時分類圖像的應(yīng)用程序！下面是它在我的計算機(jī)上的樣子：

視頻連接：

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

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

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

我不需要在電腦上安裝任何東西。這個例子應(yīng)該適用于任何現(xiàn)代系統(tǒng)，不管它是Linux、Windows還是MacOS——這就是使用JavaScript在web上構(gòu)建模型的強(qiáng)大功能。

現(xiàn)在，讓我們看看TensorFlow.js提供的強(qiáng)大功能，以及如何利用它們在瀏覽器中部署機(jī)器學(xué)習(xí)模型。

1.2 TensorFlow.js的特征

TensorFlow.js是一個庫，用于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是一個客戶端庫，這意味著它可以在用戶的瀏覽器中訓(xùn)練或運行ML模型。這減輕了與數(shù)據(jù)隱私有關(guān)的任何擔(dān)憂。
在你的客戶端上運行實時推斷可使你的應(yīng)用程序更具交互性，因為它們可以立即響應(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)注前兩個功能。在本系列的第二部分(即將推出！)中，我們將討論如何在Python中轉(zhuǎn)移學(xué)習(xí)和部署我們的模型。

二、瀏覽器中的機(jī)器學(xué)習(xí)

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

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

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

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

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

 
 
 
 
  
  
  
    
  
  
  
    
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
    
  
  
  
    
  
  
  
   Tensorflow.js Core API

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

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

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

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

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

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

完成了！這真的很簡單。

2.1 Core API：使用Tensors工作

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

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

首先在index.html文件中的

Tensorflow.js Core API

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

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

 
 
 
 
  
  
  
  python3 -m http.server

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

 
 
 
 
  
  
  
  http://localhost:8000/

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

如果你想深入閱讀有關(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)建模型。

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

這里，X和Y有一個線性關(guān)系——每個Y對應(yīng)于X + i(其中i是0、1、2、3……n+1)。讓我們在這個數(shù)據(jù)集上訓(xùn)練一個基本的回歸模型。你可以在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();

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

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

TensorFlow.js能夠在瀏覽器中構(gòu)建機(jī)器學(xué)習(xí)和深度學(xué)習(xí)模型。它還自動利用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提供了大量來自谷歌的預(yù)訓(xùn)練模型，用于許多有用的任務(wù)，如目標(biāo)檢測、語音識別、圖像分割等。預(yù)先訓(xùn)練的模型的優(yōu)點是，我們可以使用它們而不需要任何重大的依賴關(guān)系或安裝，并且可以開箱即用。

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

相關(guān)鏈接：

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

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

PoseNet是如何工作的？

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

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

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

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

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

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

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

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

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

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

這將創(chuàng)建一個基本的HTML網(wǎng)頁并加載必要的文件。

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

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

加載PoseNet模型并從網(wǎng)絡(luò)攝像頭捕獲視頻
檢測身體關(guān)節(jié)的關(guān)鍵點
顯示檢測到的身體關(guān)節(jié)
繪制估計的身體骨骼

讓我們從第一步開始。

步驟1：加載PoseNet模型并從網(wǎng)絡(luò)攝像頭捕獲視頻

我們將使用ml5.js加載PoseNet。與此同時，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)：它是一個p5.js函數(shù)，用于通過攝像頭捕獲視頻來創(chuàng)建視頻元素。
ml5.poseNet(video,modelRead)：我們使用ml5.js加載poseNet模式。通過傳入視頻，我們告訴模型處理視頻輸入。
PoseNet.on()：每當(dāng)檢測到一個新的姿勢時，就執(zhí)行這個函數(shù)。
modelReady()：當(dāng)PoseNet完成加載時，我們調(diào)用這個函數(shù)來顯示模型的狀態(tài)。

步驟2：檢測身體關(guān)節(jié)的關(guān)鍵點

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

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

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

步驟3：顯示檢測到的人體關(guān)節(jié)

我們知道被檢測到的人體關(guān)節(jié)及其x和y位置?，F(xiàn)在，我們只需要在視頻上畫出它們來顯示檢測到的人體關(guān)節(jié)。我們已經(jīng)看到，PoseNet給出了一個檢測到的人體關(guān)節(jié)列表，每個關(guān)節(jié)及其x和y位置的置信度評分。

我們將使用20%的閾值(keypoint.score > 0.2)置信度得分，以便繪制一個關(guān)鍵點。下面是實現(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：繪制估計的身體骨架

除了關(guān)鍵點或身體關(guān)節(jié)，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);  
  
  
  
   }  
  
  
  
   }  
  
  
  
  }

在這里，我們遍歷檢測到的骨架并創(chuàng)建連接關(guān)鍵點的線。代碼還是相當(dāng)簡單。

現(xiàn)在，最后一步是重復(fù)調(diào)用drawSkeleton()和drawKeypoints()函數(shù)，以及我們從網(wǎng)絡(luò)攝像頭捕獲的視頻源。我們可以使用p5.js的draw()函數(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)入項目文件夾，然后啟動Python服務(wù)器：

 
 
 
 
  
  
  
  python3 -m http.server

然后轉(zhuǎn)到你的瀏覽器并打開以下地址：

 
 
 
 
  
  
  
  http://localhost:8000/

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

尾記

你可以看到我為什么喜歡TensorFlow.js。它非常有效率，甚至不需要你在構(gòu)建模型時擔(dān)心復(fù)雜的安裝步驟。

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

在下一篇文章中，我們將探討如何在瀏覽器中應(yīng)用遷移學(xué)習(xí)，并使用TensorFlow.js部署機(jī)器學(xué)習(xí)或深度學(xué)習(xí)模型。

我們用PoseNet做的項目可以更進(jìn)一步，通過訓(xùn)練另一個分類器來構(gòu)建一個姿態(tài)識別應(yīng)用程序。我鼓勵你去嘗試一下！

標(biāo)題名稱：在瀏覽器中使用TensorFlow.js和Python構(gòu)建機(jī)器學(xué)習(xí)模型
文章鏈接：http://uogjgqi.cn/article/cdedhdj.html

掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

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

Tensorflow.js Core API

Tensorflow.js Core API

PoseNet demo with Ml5.js

掃二維碼與項目經(jīng)理溝通

其他資訊

行業(yè)動態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

服務(wù)項目

網(wǎng)站建設(shè)

移動端/APP

微信/小程序

技術(shù)支持

其它服務(wù)

更多服務(wù)項目

聯(lián)系吧在百度地圖上找到我們

電話：13518219792

av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

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

Tensorflow.js Core API

Tensorflow.js Core API

PoseNet demo with Ml5.js

掃二維碼與項目經(jīng)理溝通

其他資訊

行業(yè)動態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

服務(wù)項目

網(wǎng)站建設(shè)

移動端/APP

微信/小程序

技術(shù)支持

其它服務(wù)

更多服務(wù)項目

聯(lián)系吧 在百度地圖上找到我們

電話：13518219792

企業(yè)網(wǎng)站建設(shè)的重要性！

聯(lián)系吧在百度地圖上找到我們