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

目錄

· 什么是Posenet ？

· PoseNet 是如何工作的？

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

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

 先決條件

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

 在 GitHub 上部署

· 尾注

什么是Posenet ？

Posenet 是一種實(shí)時(shí)姿勢(shì)檢測(cè)技術(shù)，你可以使用它檢測(cè)圖像或視頻中的人類姿勢(shì)。它在兩種情況下都可以作為單模式（單個(gè)人體姿勢(shì)檢測(cè)）和多姿勢(shì)檢測(cè)（多個(gè)人體姿勢(shì)檢測(cè)）工作。簡單來說，Posenet 是一個(gè)深度學(xué)習(xí) TensorFlow 模型，它允許你通過檢測(cè)肘部、臀部、手腕、膝蓋、腳踝等身體部位來估計(jì)人體姿勢(shì)，并通過連接這些點(diǎn)形成姿勢(shì)的骨架結(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ì)。它是一個(gè)輕量級(jí)模型，它使用深度可分離卷積來加深網(wǎng)絡(luò)并減少參數(shù)、計(jì)算成本并提高準(zhǔn)確性。你可以在 google 上找到大量與 MobileNet 相關(guān)的文章。

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

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

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

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

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

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

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

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

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

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

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

我們不會(huì)遵循 Python 的方式來實(shí)現(xiàn)這個(gè)項(xiàng)目，而是會(huì)使用 javascript，因?yàn)槲覀儽仨氃跒g覽器中完成所有這些工作，而在瀏覽器中實(shí)現(xiàn) Python 幾乎是不可能的。你可以在服務(wù)器上運(yùn)行 Python。Tensorflow 有一個(gè)流行的庫名稱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)建一個(gè)新文件夾并創(chuàng)建一個(gè) 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)行姿勢(shì)檢測(cè)

2） p5．js

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

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

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

創(chuàng)建一個(gè) javascript 文件，在這里我們將嘗試學(xué)習(xí) P5．JS，以及我們?yōu)槭裁词褂眠@個(gè)庫。在 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 ：在這個(gè)函數(shù)中，你編寫一個(gè)與你的界面中需要的基本配置相關(guān)的代碼。你創(chuàng)建的一件事是畫布并在此處指定其大小。你實(shí)現(xiàn)的所有東西只會(huì)出現(xiàn)在這個(gè)畫布上。它的工作是設(shè)置所有的東西。

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

   createCanvas（800， 500）；

｝

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

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

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

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

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

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

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

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

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

P5．js的一個(gè)重要特性是setup函數(shù)只運(yùn)行一次設(shè)置，而draw函數(shù)代碼無限循環(huán)運(yùn)行，直到界面打開。你可以通過使用控制臺(tái)日志命令打印任何內(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)建了一個(gè)圍繞tensorflow．js的包裝器，并通過使用一些函數(shù)使任務(wù)變得簡單，你將間接地通過ML5．js處理tensorflow．js。你可以在Ml5．js的官方文檔中讀到同樣的內(nèi)容因此，它是由各種深度學(xué)習(xí)模型組成的主要庫，你可以在這些模型上構(gòu)建項(xiàng)目。在這個(gè)項(xiàng)目中，我們使用了這個(gè)庫中也存在的 PoseNet 模型。讓我們導(dǎo)入庫并使用它。在 HTML 文件中粘貼以下腳本代碼以加載庫�，F(xiàn)在讓我們?cè)O(shè)置圖像捕獲并加載 PoseNet 模型。capture 變量是一個(gè)全局變量，我們將創(chuàng)建的所有變量都具有全局作用域。

let capture；

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

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

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

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

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

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

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

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）；
                     ｝
                ｝
        ｝

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

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

現(xiàn)在我們將學(xué)習(xí)如何將圖像強(qiáng)加到臉部或你在不同過濾器中看到的任何其他位置�？雌饋碛悬c(diǎn)模糊和有趣，但這個(gè)應(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）；

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

部署項(xiàng)目

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

尾注

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