介紹深度學(xué)習(xí)是機(jī)器學(xué)習(xí)和人工智能的一個子集，它模仿人類獲取某些類型知識的方式。它本質(zhì)上是一個具有三層或更多層的神經(jīng)網(wǎng)絡(luò)。深度學(xué)習(xí)有助于解決許多人工智能應(yīng)用程序，這些應(yīng)用程序有助于提高自動化程度，在無需人工干預(yù)的情況下執(zhí)行分析和物理任務(wù)，從而創(chuàng)建智能的應(yīng)用程序和技術(shù)。其中一種應(yīng)用是人體姿勢檢測，其中使用了深度學(xué)習(xí)。

目錄

· 什么是Posenet ？

· PoseNet 是如何工作的？

· 實(shí)時姿勢檢測的應(yīng)用

· 使用 PoseNet 實(shí)現(xiàn)姿勢檢測

 先決條件

 從頭開始編寫完整的項(xiàng)目

 在 GitHub 上部署

· 尾注

什么是Posenet ？

Posenet 是一種實(shí)時姿勢檢測技術(shù)，你可以使用它檢測圖像或視頻中的人類姿勢。它在兩種情況下都可以作為單模式（單個人體姿勢檢測）和多姿勢檢測（多個人體姿勢檢測）工作。簡單來說，Posenet 是一個深度學(xué)習(xí) TensorFlow 模型，它允許你通過檢測肘部、臀部、手腕、膝蓋、腳踝等身體部位來估計(jì)人體姿勢，并通過連接這些點(diǎn)形成姿勢的骨架結(jié)構(gòu)。

PoseNet 是如何工作的？

PoseNet 接受過 MobileNet 架構(gòu)訓(xùn)練。MobileNet 是谷歌開發(fā)的卷積神經(jīng)網(wǎng)絡(luò)，在 ImageNet 數(shù)據(jù)集上訓(xùn)練，主要用于類別中的圖像分類和目標(biāo)估計(jì)。它是一個輕量級模型，它使用深度可分離卷積來加深網(wǎng)絡(luò)并減少參數(shù)、計(jì)算成本并提高準(zhǔn)確性。你可以在 google 上找到大量與 MobileNet 相關(guān)的文章。

預(yù)訓(xùn)練模型在瀏覽器中運(yùn)行，這就是 posenet 與其他依賴API 的庫的區(qū)別。因此，在筆記本電腦／臺式機(jī)中配置有限的任何人都可以輕松使用此類模型并構(gòu)建良好的項(xiàng)目。

Posenet 為我們提供了總共 17 個我們可以使用的關(guān)鍵點(diǎn)，從眼睛到耳朵，再到膝蓋和腳踝。

如果我們提供給 Posenet 的圖像不清晰，則posenet 會以JSON 響應(yīng)的形式顯示它對檢測特定姿勢的置信度分?jǐn)?shù)。

PoseNet 現(xiàn)實(shí)世界中的應(yīng)用

1． 在 Snapchat 過濾器中使用，你可以在其中看到舌頭、側(cè)面、快照、虛擬人臉等。

2． 像 cult 一樣的健身應(yīng)用程序，用于檢測你的運(yùn)動姿勢。

3． 一個非常受歡迎的 Instagram Reels 使用姿勢檢測為你的臉和周圍提供不同的特征。

4． 虛擬游戲來分析球員的投籃。

使用 PoseNet 實(shí)現(xiàn)姿勢檢測

現(xiàn)在我們有了對posenet的理論知識以及為什么使用它。讓我們直接進(jìn)入編碼環(huán)境并實(shí)現(xiàn)姿勢檢測項(xiàng)目。

我們將如何實(shí)施項(xiàng)目

我們不會遵循 Python 的方式來實(shí)現(xiàn)這個項(xiàng)目，而是會使用 javascript，因?yàn)槲覀儽仨氃跒g覽器中完成所有這些工作，而在瀏覽器中實(shí)現(xiàn) Python 幾乎是不可能的。你可以在服務(wù)器上運(yùn)行 Python。Tensorflow 有一個流行的庫名稱tensorflow．js，它提供了在客戶端系統(tǒng)上運(yùn)行模型的功能。如果你還沒有閱讀或了解使用 javascript 進(jìn)行機(jī)器學(xué)習(xí)，那么無需擔(dān)心，代碼量很少。

讓我們開始吧

你可以使用任何 IDE 來實(shí)現(xiàn)項(xiàng)目，例如 Visual Studio 代碼、sublime 文本等。

1） Boiler 模板

創(chuàng)建一個新文件夾并創(chuàng)建一個 HTML 文件，它將作為我們的網(wǎng)站供用戶使用。在這里我們將導(dǎo)入我們將使用的 javascript 文件、機(jī)器學(xué)習(xí)和深度學(xué)習(xí)庫。

＜html＞
          ＜head＞
              ＜title＞PoseNet Detection＜／title＞
          ＜／head＞
          ＜body＞
              ＜h1 style＝＂text－align：center＂＞Posture Detection using PoseNet＜／h1＞
          ＜／body＞
     ＜／html＞

使用 PoseNet 進(jìn)行姿勢檢測

2） p5．js

它是一個用于創(chuàng)意編碼的 javascript 庫。有一種稱為Processing 的軟件，P5．js 正是基于該軟件。

Processing 是用 Java 制作的，這有助于在桌面應(yīng)用程序中進(jìn)行創(chuàng)造性編碼，但在那之后，當(dāng)網(wǎng)站需要同樣的東西時，就實(shí)現(xiàn)了 P5．js。

創(chuàng)意編碼意味著它可以幫助你通過調(diào)用內(nèi)置函數(shù)以創(chuàng)造性的方式（彩色或動畫）在瀏覽器上繪制各種形狀和圖形，如線條、矩形、正方形、圓形、點(diǎn)等，并提供高度和寬度你想要的形狀。

創(chuàng)建一個 javascript 文件，在這里我們將嘗試學(xué)習(xí) P5．JS，以及我們?yōu)槭裁词褂眠@個庫。在 javascript 文件中寫入任何內(nèi)容之前，首先導(dǎo)入 P5．js，在 HTML 文件中添加指向創(chuàng)建的 javascript 文件的鏈接。

＜html＞

    ＜head＞
                ＜title＞PoseNet Detection＜／title＞
               ＜script src＝＂https：／／unpkg．com／ml5＠latest／dist／ml5．min．js＂＞＜／script＞
               ＜script src＝＂https：／／cdn．jsdelivr．net／npm／p5＠1．4．0／lib／p5．js＂＞＜／script＞
               ＜script src＝＂sketch．js＂＞＜／script＞ ＜！－－js file－－＞
           ＜／head＞
           ＜body＞
                ＜h1 style＝＂text－align：center＂＞Posture Detection using PoseNet＜／h1＞
          ＜／body＞

＜／html＞

你可以在 P5．js 中實(shí)現(xiàn)兩件事。在javascript文件中編寫以下代碼。

a） setup ：在這個函數(shù)中，你編寫一個與你的界面中需要的基本配置相關(guān)的代碼。你創(chuàng)建的一件事是畫布并在此處指定其大小。你實(shí)現(xiàn)的所有東西只會出現(xiàn)在這個畫布上。它的工作是設(shè)置所有的東西。

function setup（） ｛  ／／ this function runs only once while running

   createCanvas（800， 500）；

｝

b） 繪圖：第二個功能是在你繪制所有你想要的東西的地方繪圖，比如形狀、放置圖像、播放視頻。所有的實(shí)現(xiàn)代碼都放在這個函數(shù)中。將其理解為編譯語言中的主要功能。它的工作是在屏幕上顯示東西。讓我們嘗試?yán)L制一些形狀，并親身體驗(yàn) P5．Js 庫。最好的是每個圖形都有一個內(nèi)置函數(shù)，你只需要調(diào)用并傳遞一些坐標(biāo)即可繪制形狀。為畫布提供背景顏色調(diào)用背景函數(shù)并傳遞顏色代碼。

＊i） Point ：＊使用 point 函數(shù)繪制一個簡單的點(diǎn)并傳遞 x 和 y 坐標(biāo)

＊ii）＊line：線連接兩點(diǎn)，只需調(diào)用直線函數(shù)，并傳遞2個點(diǎn)的坐標(biāo)。

iii） rectangle  ：調(diào)用 rect 函數(shù)并傳遞高度和寬度。如果高度和寬度相同，那么它將是正方形。

用于創(chuàng)造力的一些其他功能是。

＊i）stroke——＊它定義了形狀的外邊界線

＊ii）stroke－weight –＊它定義了外線的寬度。

iii） fill ——你想在形狀中填充的顏色

下面是一個代碼片段，作為我們學(xué)習(xí)的每個函數(shù)的示例。嘗試運(yùn)行此代碼，并通過像在實(shí)時服務(wù)器上一樣運(yùn)行 HTML 文件來觀察瀏覽器中的變化和數(shù)字。

P5．js的一個重要特性是setup函數(shù)只運(yùn)行一次設(shè)置，而draw函數(shù)代碼無限循環(huán)運(yùn)行，直到界面打開。你可以通過使用控制臺日志命令打印任何內(nèi)容來檢查這一點(diǎn)。使用 P5js，你可以加載圖像、捕獲圖像、視頻等。

在draw函數(shù)和上面的new函數(shù)中運(yùn)行上面注釋的這段代碼，觀察瀏覽器的變化，體驗(yàn)P5．js庫的神奇。

3） ML5．js

與他人共享代碼應(yīng)用程序的最佳方式是網(wǎng)絡(luò)。只有共享URL，你才能使用系統(tǒng)上的其他應(yīng)用程序。所以，ML5．js構(gòu)建了一個圍繞tensorflow．js的包裝器，并通過使用一些函數(shù)使任務(wù)變得簡單，你將間接地通過ML5．js處理tensorflow．js。你可以在Ml5．js的官方文檔中讀到同樣的內(nèi)容因此，它是由各種深度學(xué)習(xí)模型組成的主要庫，你可以在這些模型上構(gòu)建項(xiàng)目。在這個項(xiàng)目中，我們使用了這個庫中也存在的 PoseNet 模型。讓我們導(dǎo)入庫并使用它。在 HTML 文件中粘貼以下腳本代碼以加載庫�，F(xiàn)在讓我們設(shè)置圖像捕獲并加載 PoseNet 模型。capture 變量是一個全局變量，我們將創(chuàng)建的所有變量都具有全局作用域。

let capture；

當(dāng)我們加載并運(yùn)行代碼時，Posenet 將檢測 17 個身體點(diǎn)（5 個面部點(diǎn)，12 個身體點(diǎn)）以及在圖像中檢測到該點(diǎn)的像素的信息。

如果你打印這些姿勢，那么它將返回一個數(shù)組（python 列表），該數(shù)組由一個字典組成，其中有 2 個鍵作為我們評估過的姿勢和骨架。

· 姿勢 － 這又是一個字典，由各種鍵和一系列值組成，如關(guān)鍵點(diǎn)、左眼、左耳、鼻子等。

· 骨架 － 在骨架中，每個字典由兩個子字典組成，分別為 0 和 1，它們具有置信度分?jǐn)?shù)、部件名稱和位置坐標(biāo)。所以我們可以用它來制作一條線并構(gòu)建一個骨架結(jié)構(gòu)。

現(xiàn)在，如果你想在姿勢前顯示任何單個點(diǎn)，則可以通過在姿勢中使用這些單獨(dú)的點(diǎn)來實(shí)現(xiàn)。

我們將如何顯示所有點(diǎn)并將它們連接為骨架？

我們有一個關(guān)鍵點(diǎn)名稱字典，其中包含每個點(diǎn)的 X 和 y 坐標(biāo)。所以我們可以在其中遍歷關(guān)鍵點(diǎn)字典和訪問位置字典，并在其中使用 x 和 y 坐標(biāo)�，F(xiàn)在要畫線，我們可以使用第二個字典作為骨架，它由坐標(biāo)的所有點(diǎn)信息組成，以連接兩個身體部位。

function draw（） ｛
              ／／ images and video（webcam）
              image（capture， 0， 0）；
              fill（255， 0， 0）；
              if（singlePose） ｛ ／／ if someone is captured then only
                     ／／ Capture all estimated points and draw a circle of 20 radius
                     for（let i＝0； i＜singlePose．keypoints．length； i＋＋） ｛
                     ellipse（singlePose．keypoints［i］．position．x， singlePose．keypoints［i］．position．y， 20）；
                      ｝
                     stroke（255， 255， 255）；
                     strokeWeight（5）；
                    ／／ construct skeleton structure by joining 2 parts with line
                     for（let j＝0； j＜skeleton．length； j＋＋） ｛
                     line（skeleton［j］［0］．position．x， skeleton［j］［0］．position．y， skeleton［j］［1］．position．x， skeleton［j］［1］．position．y）；
                     ｝
                ｝
        ｝

在光線充足的情況下，它有時無法在模糊或黑暗的背景下準(zhǔn)確捕捉。

如何強(qiáng)加圖像？

現(xiàn)在我們將學(xué)習(xí)如何將圖像強(qiáng)加到臉部或你在不同過濾器中看到的任何其他位置�？雌饋碛悬c(diǎn)模糊和有趣，但這個應(yīng)用程序正在作為許多社交媒體的助推器。只需在 setup 函數(shù)中加載圖像，并使用 image 函數(shù)調(diào)整圖像作為坐標(biāo)，你希望在繪制函數(shù)中在循環(huán)骨架結(jié)束后顯示該圖像。假設(shè)我們正在顯示規(guī)格和雪茄圖像。

specs ＝ loadImage（＇images／spects．png＇）；

smoke ＝ loadImage（＇images／cigar．png＇）；

／／ Apply specs and cigar

image（specs， singlePose．nose．x－40， singlePose．nose．y－70， 125， 125）；

image（smoke， singlePose．nose．x－35， singlePose．nose．y＋28， 50， 50）；

所有的圖像都保存在一個名為圖像的單獨(dú)文件夾中，我們使用加載圖像功能加載每個圖像。規(guī)格將在鼻子上方，雪茄在鼻子下方。完整的代碼鏈接如下，大家可以參考。

部署項(xiàng)目

由于該項(xiàng)目在瀏覽器上，因此你可以簡單地將其部署在 Github 上并使其可供其他人使用。只需將所有文件和圖像上傳到 Github 上的新存儲庫，就像它們在本地系統(tǒng)中一樣。上傳后訪問存儲庫的設(shè)置并訪問 Github 頁面。將 none 更改為 main 分支，然后單擊保存。它將為你提供一個項(xiàng)目的 URL，該項(xiàng)目將在一段時間后生效，你可以與他人共享。

尾注

歡呼！我們使用預(yù)訓(xùn)練的 PoseNet 模型創(chuàng)建了一個完整的端到端姿勢檢測項(xiàng)目。我希望能夠輕松掌握所有概念，因?yàn)槲铱梢岳斫�，如果你第一次看到使�?JavaScript 進(jìn)行機(jī)器學(xué)習(xí)會感覺有點(diǎn)困難。但是相信我，這是一件簡單的事情，并再次閱讀文章并使用不同的配置，不同的設(shè)計(jì)自己嘗試。我們已經(jīng)進(jìn)行了單人姿勢檢測，我鼓勵你進(jìn)行多人姿勢檢測。你可以嘗試添加不同的選項(xiàng)，調(diào)整適用于所有相機(jī)的點(diǎn)。你可以在這個項(xiàng)目上繼續(xù)推進(jìn)很多事情。