偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

在瀏覽器中使用TensorFlow.js和Python構建機器學習模型

作者：THU數據派
開發(fā) 前端 后端 機器學習
本文首先介紹了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的開發(fā)人員來說，它也是一個完美的機器學習門戶。

[[271482]]

我們的網絡瀏覽器是最容易訪問的平臺之一。這就是為什么構建不僅能夠訓練機器學習模型而且能夠在瀏覽器本身中“學習”或“遷移學習”的應用程序是有意義的。

在本文中，我們將首先了解使用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分鐘內構建一個應用程序，來使用你的網絡攝像頭對圖像進行分類。沒錯——我們將直接進入代碼部分！

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

 

在瀏覽器中使用TensorFlow.js和Python構建機器學習模型

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

1.1 使用網絡攝像頭在瀏覽器中構建圖像分類模型

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

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.  <meta charset="UTF-8">   
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">   
  6.  <meta name="viewport" content="width=device-width, initial-scale=1">   
  7.  <!-- title of the page -->   
  8.  <title>image_classification</title>   
  9.  <!-- load processing library-->   
  10.  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>   
  11.  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>   
  12.  <!-- load ml5.js -->   
  13.  <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>   
  14.  <!-- load index.js -->   
  15.  <script src="index.js"></script>   
  16. </head>   
  17. <body>   
  18.  <!-- this is where the video will be shown -->   
  19.  <video id="video"></video>   
  20. </body>   
  21. </html>  

接下來，創(chuàng)建另一個文件index.js并在其中編寫以下代碼： 

  1.  let mobilenet;   
  2.  let video;   
  3.  let label = '';   
  4.  // when model is ready make predictions   
  5.  function modelReady() {   
  6.  console.log('Model is ready!!!');   
  7.  mobilenet.predict(gotResults);   
  8.  }   
  9. function gotResults(error, results) {   
  10.  if (error) {   
  11.  console.error(error);   
  12.  } else {   
  13.  label = results[0].className;   
  14.  // loop the inference by calling itself   
  15.  mobilenet.predict(gotResults);   
  16.  }   
  17. }   
  18. // setup function   
  19. function setup() {   
  20.  createCanvas(640, 550);   
  21.  // ml5 to create video capture   
  22.  video = createCapture(VIDEO);   
  23.  video.hide();   
  24.  background(0);   
  25.  // load the MobileNet and apply it on video feed   
  26.  mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);   
  27. }   
  28. function draw() {   
  29.  background(0);   
  30.  // show video   
  31.  image(video, 0, 0);   
  32.  fill(255);   
  33.  textSize(32);   
  34.  // show prediction label   
  35.  text(label, 10, height - 20);   
  36. }  

保存這兩個文件，然后在谷歌Chrome或Mozilla Firefox等瀏覽器中打開index.html文件。就是這樣！你現在已經創(chuàng)建了一個可以使用你的網絡攝像頭在瀏覽器本身實時分類圖像的應用程序！下面是它在我的計算機上的樣子：

視頻連接：   

  1. 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模型加載到瀏覽器中，并對視頻提要執(zhí)行推理。
  •  我們還利用P5.js（https://p5js.org/）庫來處理視頻輸入并在視頻本身上顯示標簽。

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

現在，讓我們看看TensorFlow.js提供的強大功能，以及如何利用它們在瀏覽器中部署機器學習模型。

1.2 TensorFlow.js的特征

TensorFlow.js是一個庫，用于JavaScript開發(fā)和訓練ML模型，并在瀏覽器或Node.js上部署。

TensorFlow.js提供了許多的功能來供我們使用。

它是TensorFlow在JavaScript中的擴展，JavaScript是我們在互聯網上使用的幾乎所有網站、瀏覽器或應用程序邏輯背后的編程語言。JavaScript和Python一樣用途廣泛，所以使用它來開發(fā)機器學習模型給我們帶來了很多好處:

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

  •  由于所有主流瀏覽器都支持JavaScript，所以你可以無處不在地使用它，而不必擔心平臺類型或其他兼容性問題。對于你的用戶也是如此。
  •  TensorFlow.js是一個客戶端庫，這意味著它可以在用戶的瀏覽器中訓練或運行ML模型。這減輕了與數據隱私有關的任何擔憂。
  •  在你的客戶端上運行實時推斷可使你的應用程序更具交互性，因為它們可以立即響應用戶輸入(例如我們前面構建的webcam應用程序)。

TensorFlow.js以其當前的形式提供了以下主要功能：

  •  瀏覽器中的機器學習：你可以使用TensorFlow.js在瀏覽器中創(chuàng)建和訓練ML模型。
  •  谷歌的預訓練模型：TensorFlow.js配備了一套由谷歌預訓練的模型，用于對象檢測、圖像分割、語音識別、文本毒性分類等任務。
  •  遷移學習：你可以通過對已經訓練過的模型的部分進行再訓練來執(zhí)行轉移學習，比如TensorFlow.js中的MobileNet。
  •  部署python模型：使用Keras或TensorFlow訓練的模型可以很容易地導入瀏覽器/使用TensorFlow.js的部署。

在本文中，我們將關注前兩個功能。在本系列的第二部分(即將推出！)中，我們將討論如何在Python中轉移學習和部署我們的模型。

二、瀏覽器中的機器學習

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

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

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

首先，設置你的HTML文件：

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

  1. <html lang="en">  
  2. <head>  
  3.  <meta charset="UTF-8">  
  4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5.  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  6.  <!-- load Tensorflow.js -->  
  7.  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>  
  8. </head>  
  9. <body>  
  10.  <h1>Tensorflow.js Core API</h1>  
  11.  <!-- <script src="index.js"></script> -->  
  12.  <script type="text/javascript">  
  13. </script>  
  14. </body>  
  15. </html> 

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

關于安裝TensorFlow.js（deeplearn.js）的說明：

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

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

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

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

  1. <scriptsrcscriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script> 

完成了！這真的很簡單。

2.1 Core API：使用Tensors工作

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

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

首先在index.html文件中的<script> </ script>標記之間添加以下代碼： 

  1. const a = tf.tensor([1, 2, 3, 4]);  
  2. const b = tf.tensor([10, 20, 30, 40]);  
  3. const y = a.add(b); // equivalent to tf.add(a, b)  
  4. const z = a.mul(b);  
  5. y.print();  
  6. z.print(); 

<script>標簽基本上表示JavaScript。我們在這些標簽之間寫的任何內容都將作為JavaScript代碼執(zhí)行。以下是index.html現在的樣子： 

  1. <html lang="en">  
  2. <head>  
  3.  <meta charset="UTF-8">  
  4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5.  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  6.  <!-- load Tensorflow.js -->  
  7.  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>  
  8. </head>  
  9. <body>  
  10.  <h1>Tensorflow.js Core API</h1>  
  11.  <!-- <script src="index.js"></script> -->  
  12.  <script type="text/javascript">  
  13.  const a = tf.tensor([1, 2, 3, 4]);  
  14.  const b = tf.tensor([10, 20, 30, 40]);  
  15.  const y = a.add(b); // equivalent to tf.add(a, b)  
  16.  const z = a.mul(b); // equivalent to tf.mul(a, b)  
  17.  y.print();  
  18.  z.print();  
  19. </script>  
  20. </body>  
  21. </html> 

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

  1. python3 -m http.server 

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

  1. http://localhost:8000/ 

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

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

CoreAPI文檔：   

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

2.2 Layer API：像Keras一樣構建模型

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

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

這里，X和Y有一個線性關系——每個Y對應于X + i(其中i是0、1、2、3……n+1)。讓我們在這個數據集上訓練一個基本的回歸模型。你可以在index.html文件中的<script></script>標記之間編寫以下代碼： 

  1. const callbacks = {  
  2.  onEpochEnd: async (epoch, logs) => {  
  3.  console.log("epoch: " + epoch + JSON.stringify(logs))  
  4.  }  
  5.  };  
  6.  // Generate some synthetic data for training.  
  7.  const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]);  
  8.  const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]);  
  9.  // Build and compile model.  
  10.  async function basicRegression(){  
  11.  // Build a sequential model  
  12.  const model = tf.sequential();  
  13.  model.add(tf.layers.dense({units: 1, inputShape: [1]}));  
  14.  model.add(tf.layers.dense({units: 1, inputShape: [1]}));  
  15.  model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});  
  16.  // Train model with fit().  
  17.  await model.fit(xs, ys, {epochs: 100, validationSplit: 0.1, callbacks: callbacks});  
  18.  // Run inference with predict().  
  19.  model.predict(tf.tensor2d([[5]], [1, 1])).print();  
  20.  }  
  21.  // Create a basic regression model  
  22.  basicRegression(); 

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

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

TensorFlow.js能夠在瀏覽器中構建機器學習和深度學習模型。它還自動利用GPU(s)的強大功能，如果在你的系統(tǒng)模型訓練期間可用。

下面是一些使用TensorFlow.js在一些標準數據集上訓練的深度學習模型的例子：

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

tfjs-examples repository： 

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

三、利用谷歌的預訓練模型：PoseNet

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

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

相關鏈接：   

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

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

PoseNet是如何工作的？

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

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

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

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

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

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

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

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

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

  1. <html lang="en">  
  2. <head>  
  3.  <meta charset="UTF-8">  
  4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5.  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  6.  <!-- load p5.js -->  
  7.  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>  
  8.  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>  
  9.  <!-- load ml5.js -->  
  10.  <script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>  
  11.  <!-- keep the video in center of browser -->  
  12.  <style type="text/css">  
  13.  body{  
  14.  text-align: center;  
  15.  }  
  16. </style>  
  17. </head>  
  18. <body>  
  19.  <h1>PoseNet demo with Ml5.js</h1>  
  20.  <p id="status">Loading Model...</p>  
  21.  <div id="videoContainer"></div>  
  22.  <!-- load the posenet.js file -->  
  23.  <script src="posenet.js"></script>  
  24. </body>  
  25. </html> 

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

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

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

  1.  加載PoseNet模型并從網絡攝像頭捕獲視頻
  2.  檢測身體關節(jié)的關鍵點
  3.  顯示檢測到的身體關節(jié)
  4.  繪制估計的身體骨骼

讓我們從第一步開始。

步驟1：加載PoseNet模型并從網絡攝像頭捕獲視頻

我們將使用ml5.js加載PoseNet。與此同時，p5.js使我們可以用幾行代碼從網絡攝像頭捕獲視頻： 

  1. let video;  
  2. let poseNet;  
  3. let poses = [];  
  4. function setup() {  
  5.  const canvas = createCanvas(640, 480);  
  6.  canvas.parent('videoContainer');  
  7.  // Video capture  
  8.  video = createCapture(VIDEO);  
  9.  video.size(width, height);  
  10.  // Create a new poseNet method with a single detection  
  11.  poseNet = ml5.poseNet(video, modelReady);  
  12.  // This sets up an event that fills the global variable "poses"  
  13.  // with an array every time new poses are detected  
  14.  poseNet.on('pose', function(results) {  
  15.  poses = results;  
  16.  });  
  17.  function modelReady(){  
  18.  select('#status').html('model Loaded')  
  19. } 

以上代碼塊中最重要的是：

  •  createCapture(VIDEO)：它是一個p5.js函數，用于通過攝像頭捕獲視頻來創(chuàng)建視頻元素。
  •  ml5.poseNet(video,modelRead)：我們使用ml5.js加載poseNet模式。通過傳入視頻，我們告訴模型處理視頻輸入。
  •  PoseNet.on()：每當檢測到一個新的姿勢時，就執(zhí)行這個函數。
  •  modelReady()：當PoseNet完成加載時，我們調用這個函數來顯示模型的狀態(tài)。

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

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

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

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

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

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

我們將使用20%的閾值(keypoint.score > 0.2)置信度得分，以便繪制一個關鍵點。下面是實現這一操作的代碼： 

  1. // A function to draw ellipses over the detected keypoints  
  2. function drawKeypoints() {  
  3.  // Loop through all the poses detected  
  4.  for (let i = 0; i < poses.length; i++) {  
  5.  // For each pose detected, loop through all the keypoints  
  6.  let pose = poses[i].pose;  
  7.  for (let j = 0; j < pose.keypoints.length; j++) {  
  8.  // A keypoint is an object describing a body part (like rightArm or leftShoulder)  
  9.  let keypoint = pose.keypoints[j];  
  10.  // Only draw an ellipse is the pose probability is bigger than 0.2  
  11.  if (keypoint.score > 0.2) {  
  12.  fill(255, 0, 0);  
  13.  noStroke();  
  14.  ellipse(keypoint.position.x, keypoint.position.y, 10, 10);  
  15.  }  
  16.  }  
  17.  }  
  18. } 

步驟4：繪制估計的身體骨架

除了關鍵點或身體關節(jié)，PoseNet還可以檢測估計的身體骨架。我們可以使用pose變量來繪制骨架： 

  1. // A function to draw the skeletons  
  2. function drawSkeleton() {  
  3.  // Loop through all the skeletons detected  
  4.  for (let i = 0; i < poses.length; i++) {  
  5.  let skeleton = poses[i].skeleton;  
  6.  // For every skeleton, loop through all body connections  
  7.  for (let j = 0; j < skeleton.length; j++) {  
  8.  let partA = skeleton[j][0];  
  9.  let partB = skeleton[j][1];  
  10.  stroke(255, 0, 0);  
  11.  line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);  
  12.  }  
  13.  }  
  14. } 

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

現在，最后一步是重復調用drawSkeleton()和drawKeypoints()函數，以及我們從網絡攝像頭捕獲的視頻源。我們可以使用p5.js的draw()函數來實現，該函數在setup()之后直接調用，并重復執(zhí)行： 

  1. function draw() {  
  2.  image(video, 0, 0, width, height);  
  3.  // We can call both functions to draw all keypoints and the skeletons  
  4.  drawKeypoints();  
  5.  drawSkeleton();  
  6. } 

接下來，轉到終端窗口，進入項目文件夾，然后啟動Python服務器： 

  1. python3 -m http.server 

然后轉到你的瀏覽器并打開以下地址： 

  1. http://localhost:8000/ 

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

尾記

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

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

在下一篇文章中，我們將探討如何在瀏覽器中應用遷移學習，并使用TensorFlow.js部署機器學習或深度學習模型。

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

 

責任編輯：龐桂玉 來源： 今日頭條
TensorFlow.jsPython機器學習
相關推薦

2022-12-27 10:35:20

TensorFlow

2020-09-09 07:00:00

TensorFlow神經網絡人工智能

2018-09-10 14:38:16

編程語言TensorFlow.機器學習

2021-11-02 09:40:50

TensorFlow機器學習人工智能

2017-07-24 13:37:42

深度學習KerasTensorFlow

2017-07-07 14:41:13

機器學習神經網絡JavaScript

2011-05-18 09:30:40

Linux瀏覽器

2022-05-03 09:59:43

網絡釣魚數據集機器學習

2010-09-16 11:21:54

FirefoxJS

2025-03-04 08:00:00

機器學習Rust開發(fā)

2020-07-17 07:21:36

TensorFlow機器學習計算機視覺

2018-06-26 15:40:49

Tensorflow.MNIST圖像數據

2014-01-16 10:48:29

瀏覽器ChromeOS

2019-07-24 15:25:29

框架AI開發(fā)

2022-02-10 09:30:00

VRARWeb應用程序

2017-11-20 15:12:42

PythonTensorFlowWord2Vec

2018-08-30 09:36:10

編程語言Python機器學習

2018-08-02 08:45:48

物聯網機器學習Tensorflow

2020-03-26 08:00:00

機器學習人工智能AI

2018-10-20 15:30:44

深度學習前端前端工程師
點贊
收藏

51CTO技術棧公眾號