有了TensorFlow.js，瀏覽器中也能夠實時人體姿式估計【轉載】

時間 2020-04-15

標籤有了 tensorflow.js tensorflow 瀏覽器能夠實時估計轉載欄目 JavaScript 简体版

原文原文鏈接

翻譯文章，內容有刪減。原文地址： https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5

與谷歌創意實驗室合做，我很高興地宣佈發佈TensorFlow.js版本的PoseNet，這是一種機器學習模型，容許在瀏覽器中進行實時人體姿式估計。您能夠訪問https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html嘗試一下在線演示。javascript

PoseNet可使用單姿態或多姿態算法檢測圖像和視頻中的人物形象 - 所有來自瀏覽器。html

那麼，問題來了，什麼是姿態估計？姿態估計是指在圖像和視頻中檢測人物的計算機視覺技術，以便人們能夠肯定某我的的肘部在圖像中出現的位置。須要澄清的是，這項技術並不能識別誰在圖像中 - 沒有任何與識別身份相關的我的身份信息。該算法僅僅估計關鍵身體關節的位置。java

好吧，爲何這是使人興奮的開始？姿態估計有不少用途，從對身體作出反應的交互式安裝到加強現實、動畫、健身用途等等。咱們但願此模型的輔助能力可以激勵更多的開發人員和製造商嘗試將姿態檢測應用到他們本身的項目中。雖然許多可選的姿態檢測系統已經開源，但都須要專門的硬件和/或相機，以及至關多的系統設置。PoseNet運行在TensorFlow.js上，任何擁有攝像頭的PC或手機的人均可以在網絡瀏覽器中體驗這種技術。並且因爲咱們已經開源了這個模型，JavaScript開發人員能夠用幾行代碼來使用這個技術。更重要的是，這實際上能夠幫助保護用戶隱私。因爲TensorFlow.js上的PoseNet在瀏覽器中運行，所以任何姿態數據都不會留在用戶的計算機上。es6

PoseNet入門

PoseNet可用於估計單個姿式或多個姿式，這意味着該算法的一個版本只能檢測圖像/視頻中的一我的，而另外一個版本能夠檢測圖像/視頻中的多我的。爲何會有兩個版本？單人姿式檢測器更快，更簡單，但圖像中只能有一個主體（稍後會深刻探討）。咱們先探討更容易使用的單個姿式。算法

在上層看來，姿式估計發生在兩個階段：npm

輸入RGB圖像到卷積神經網絡。
使用單姿態或多姿態解碼算法來解碼姿式、構建置信度得分、關鍵點位置和來自模型輸出的關鍵點置信度得分。

等等，這些關鍵詞的含義是什麼？讓咱們回顧一下最重要的：api

姿式- 在最上層看來，PoseNet將返回一個姿式對象，其中包含每一個檢測到的人物的關鍵點列表和實例層的置信度分數。

PoseNet返回檢測到的每一個人的置信度值以及檢測到的每一個姿式關鍵點。圖片來源：「Microsoft Coco：上下文數據集中的通用對象」，https://cocodataset.org。數組

姿式置信度- 這決定了對姿式估計的總體置信度。它介於0.0和1.0之間。它能夠用來隱藏不夠肯定的姿式。
關鍵點- 估計的人體姿式的一部分，例如鼻子、右耳、左膝、右腳等。它包含位置和關鍵點置信度分數。PoseNet目前可檢測到下圖所示的17個關鍵點：

PosNet檢測的17個姿式關鍵點。瀏覽器

關鍵點置信度得分- 這決定了估計關鍵點位置精度的置信度。它介於0.0和1.0之間。它能夠用來隱藏不夠肯定的關鍵點。
關鍵點位置- 檢測到的關鍵點在原始輸入圖像中的x和y二維座標。

第1步：導入TensorFlow.js和PoseNet庫

將模型的複雜性抽象化並將功能封裝爲易於使用的方法，這放面已經作了不少工做。讓咱們回顧一下如何配置PoseNet項目的基礎知識。網絡

該庫能夠經過npm安裝：

npm install @tensorflow-models/posnet

使用es6模塊導入：

import * as posenet from '@tensorflow-models/posenet';
const net = await posenet.load();

或經過頁面的bundle：

<html>
  <body>
    <!-- Load TensorFlow.js -->
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://unpkg.com/@tensorflow-models/posenet">
    </script>
    <script type="text/javascript">
      posenet.load().then(function(net) {
        // posenet model loaded
      });
    </script>
  </body>
</html>

第2a步：單人姿態估計

應用於圖像的單人姿式估計算法示例。圖片來源：「Microsoft Coco：上下文數據集中的通用對象」，https://cocodataset.org。

如前面所說的，單姿態估計算法更簡單、速度更快。它的理想場景是隻有一我的在輸入圖像或視頻的中間。缺點是，若是圖像中有多我的，那麼來自兩我的的關鍵點可能會被估計爲是同一個單一姿式的一部分 - 例如，＃1的左臂和＃2的右膝由該算法肯定爲屬於相同姿式而可能被合併。若是輸入圖像可能包含多人，則應該使用多姿態估計算法。

咱們來看看單姿態估計算法的輸入：

輸入圖像元素- 包含要預測圖像的html元素，例如video或img標籤。重要的是，圖像或視頻元素應該是方形的。
圖像比例因子- 0.2和1之間的數字。默認爲0.50。在輸入到網絡以前的縮放圖像比例。將此數字設置得較低能夠縮小圖像，以犧牲精度爲代價加快速度。
水平翻轉- 默認爲false。若是姿式應該水平翻轉/鏡像。對於默認水平翻轉（好比網絡攝像頭）的視頻，這應該設置爲true，這樣返回的姿式方向才正確。
輸出步幅- 必須爲3二、16或8。默認值爲16。在內部，此參數會影響神經網絡中圖層的高度和寬度。在上層看來，它會影響姿態估計的精度和速度。輸出步幅值越低精度越高但速度越慢，數值越高速度越快，但精度越低。查看輸出步幅對輸出質量的影響的最好方法是嘗試使用這個單姿態估計的示例:https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html。

如今讓咱們看一下單姿態估計算法的輸出：

包含姿式置信度得分和17個關鍵點數組的姿式。
每一個關鍵點都包含關鍵點位置和關鍵點置信度分數。一樣，全部關鍵點位置在輸入圖像空間中都有x和y座標，而且能夠直接映射到圖像上。

一下這個簡短的代碼塊展現瞭如何使用單姿態估計算法：

const imageScaleFactor = 0.50;
const flipHorizontal = false;
const outputStride = 16;
const imageElement = document.getElementById('cat');
// load the posenet model
const net = await posenet.load();
const pose = await net.estimateSinglePose(imageElement, scaleFactor, flipHorizontal, outputStride);

一個輸出姿式的例子以下所示：

{
  "score": 0.32371445304906,
  "keypoints": [
    { // nose
      "position": {
        "x": 301.42237830162,
        "y": 177.69162777066
      },
      "score": 0.99799561500549
    },
    { // left eye
      "position": {
        "x": 326.05302262306,
        "y": 122.9596464932
      },
      "score": 0.99766051769257
    },
    { // right eye
      "position": {
        "x": 258.72196650505,
        "y": 127.51624706388
      },
      "score": 0.99926537275314
    },
    ...
  ]
}

第2b步：多人姿態估計

一個應用於圖像的多人姿態估計算法的示例。圖片來源：「Microsoft Coco：上下文數據集中的通用對象」，https://cocodataset.org

多人姿式估計算法能夠估計圖像中的許多姿式/人物。它比單姿態算法更復雜而且速度稍慢，但它的優勢是，若是圖片中出現多我的，他們檢測到的關鍵點不太可能與錯誤的姿式相關聯。出於這個緣由，即便應用場景是檢測單人姿式，該算法也可能更合乎須要。

此外，該算法的一個吸引人的特性是性能不受輸入圖像中人數的影響。不管是15人仍是5人，計算時間都是同樣的。

讓咱們看看輸入：

輸入圖像元素- 與單姿態估計相同
圖像比例因子- 與單姿態估計相同
水平翻轉- 與單姿態估計相同
輸出步幅- 與單姿態估計相同
最大姿式檢測- 整數，默認爲5，要檢測的姿態的最大數量。
姿式可信度閾值- 0.0至1.0，默認爲0.5。在上層看來，這將控制返回姿式的最低置信度分數。
非最大抑制（NMS）半徑- 以像素爲單位的數字。在上層看來，這控制了返回姿式之間的最小距離。該值默認爲20，這對大多數狀況來講多是正確的。它應該增長/減小，以濾除不太準確的姿式，但只有在調整姿式置信度分數不夠好時使用。

查看這些參數有什麼效果的最好方法是嘗試使用這個多姿態估計的示例：https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html。

讓咱們看一下輸出：

一組姿式數組。
每一個姿式包含與單人估計算法中相同的信息。

下面這段簡單的代碼塊展示瞭如何使用多姿態估計算法：

const imageScaleFactor = 0.50;
const flipHorizontal = false;
const outputStride = 16;
// get up to 5 poses
const maxPoseDetections = 5;
// minimum confidence of the root part of a pose
const scoreThreshold = 0.5;
// minimum distance in pixels between the root parts of poses
const nmsRadius = 20;
const imageElement = document.getElementById('cat');
// load posenet
const net = await posenet.load();
const poses = await net.estimateMultiplePoses(
  imageElement, imageScaleFactor, flipHorizontal, outputStride,    
  maxPoseDetections, scoreThreshold, nmsRadius);

姿式數組輸出的樣例以下所示：

// array of poses/persons
[ 
  { // pose #1
    "score": 0.42985695206067,
    "keypoints": [
      { // nose
        "position": {
          "x": 126.09371757507,
          "y": 97.861720561981
         },
        "score": 0.99710708856583
      },
      ... 
    ]
  },
  { // pose #2
    "score": 0.13461434583673,
    "keypositions": [
      { // nose
        "position": {
          "x": 116.58444058895,
          "y": 99.772533416748
        },
      "score": 0.9978438615799
      },
      ...
    ]
  },
  ... 
]

讀到這兒，您就得到了足夠的知識理解PoseNet示例。若是您想了解更多關於該模型和實施的技術細節，請閱讀原文：https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5，裏面附錄了更多的技術細節。