我們很高興宣布推出BodyPix，這是一種開源的機器學習模型，可在瀏覽器中使用TensorFlow.js對人物及身體部位進行分割。默認設(shè)置下，該模型可在 2018 版 15 英寸 MacBook Pro 以及 iPhone X 上分別以 25 fps 和 21 fps 的幀率，估測及呈現(xiàn)人物及身體部位的分割。

人物分割究竟是什么？在計算機視覺中，圖像分割是指將圖像中的像素分成幾組特定語義區(qū)域以確定對象和邊界的技術(shù)。研究期間，我們訓練 BodyPix 模型對人物及 24 個身體部位（如左手、右前小腿或后背等部位）執(zhí)行此項操作。換言之，BodyPix 可將圖像的像素分為以下兩類：1) 表示人物的像素和 2) 表示背景的像素。它還可將表示人物的像素進一步分類為 24 個身體部位中的任一個部位。

若您在此處嘗試實時演示，這一切可能會更加明了。

注：此處 鏈接

https://storage.googleapis.com/tfjs-models/demos/body-pix/index.html

人物分割有何用途？這項技術(shù)可廣泛應用于多個多領(lǐng)域，包括增強現(xiàn)實、攝影編輯以及圖像或視頻的藝術(shù)效果等。具體應用由您決定！去年，當我們推出PoseNet（首個能夠在瀏覽器中使用簡易網(wǎng)絡(luò)攝像頭估測身體部位（Kinect 的功能）的模型）時，人們便對此項技術(shù)設(shè)想出各類用例。我們希望 BodyPix 也能用于開展同樣的創(chuàng)意實驗。

為何要在瀏覽器中執(zhí)行此操作？與 PoseNet 的情況類似，您過去只能借助專用硬件，或?qū)ο到y(tǒng)要求嚴苛且安裝難度較高的軟件，才能進行實時人物分割。相比之下，您無需執(zhí)行安裝步驟，而僅憑幾行代碼即可使用 BodyPix 和 PoseNet。使用這些模型時無需任何專用鏡頭，因為它們能與任何基本的網(wǎng)絡(luò)攝像頭或手機相機配合使用。最后，用戶只需打開網(wǎng)址即可訪問這些應用。由于所有計算均在設(shè)備上完成，因此數(shù)據(jù)可以保持私密性。鑒于以上所有原因，我們認為，對于藝術(shù)家、創(chuàng)意程序員和編程新手而言，BodyPix 是一個可輕松上手的工具。

在深入介紹 BodyPix 之前，我們要感謝 Google Research 團隊的Tyler Zhu（此模型的幕后研究員，專攻人體姿勢估測）[1，2]、Google Brain 團隊工程師Nikhil Thorat與Daniel Smilkov（TensorFlow.js庫的幕后研究員），以及Daniel Shiffman，同時還要感謝Google Faculty Research Award為 Dan Oved 的研究工作提供資助。

注：1 鏈接

https://arxiv.org/abs/1701.01779

2 鏈接

https://arxiv.org/abs/1803.08225

BodyPix 入門指南

讓我們深入了解使用此模型時的技術(shù)細節(jié)。BodyPix 可用于將圖像分割為人物像素和非人物像素。人物像素又可進一步分類為24 個身體部位中的任一部位。重要的是，此模型僅適用于單個人物，因此請確保您的輸入數(shù)據(jù)不包含多個人。

第 1 部分：導入 TensorFlow.js 和 BodyPix 庫

讓我們回顧一下有關(guān)如何建立 BodyPix 項目的基礎(chǔ)知識。

您可通過 npm install @tensorflow-models/body-pix 安裝此庫，然后使用 es6 模塊將其導入：

import * as bodyPix from '@tensorflow-models/body-pix'; async function loadAndUseBodyPix() { const net = await bodyPix.load(); // BodyPix model loaded}

您也可通過網(wǎng)頁中的軟件包將其導入，而無需執(zhí)行任何安裝步驟：

bodypix.load().then(function(net) { // BodyPix model loaded });

第 2a 部分：人物分割

應用于圖像的人物分割算法示例。圖像來源：“Microsoft Coco：Common Objects in Context Dataset”，http://cocodataset.org

在基礎(chǔ)層面，人物分割將圖像分割為人物像素和非人物像素。但實際過程并非如此簡單，圖像在輸入模型后會轉(zhuǎn)化為二維圖像，其中每個像素處的浮點值均介于 0 到 1 之間，表示該像素中存在人物的概率。我們需設(shè)定一個名為“分割閾值”的值，其表示像素分值必須達到此最小值后，方可視作人物的一部分。通過使用分割閾值，這些介于 0 到 1 之間的浮點值會成為二進制數(shù)值 0 或 1（即表示，若閾值為 0.5 ，則任何高于 0.5 的值均會變?yōu)?1，而低于 0.5 的值則變?yōu)?0）。

我們調(diào)用 API 方法estimatePersonSegmentation對圖像或視頻執(zhí)行人物分割操作；下方簡短的代碼塊展示了如何使用此方法：

const imageElement = document.getElementById('image');// load the BodyPix model from a checkpointconst net = await bodyPix.load();// arguments for estimating person segmentation.const outputStride = 16;const segmentationThreshold = 0.5;const personSegmentation = await net.estimatePersonSegmentation(imageElement, outputStride, segmentationThreshold);

人物分割輸出示例如下所示：

{ width: 640, height: 480, data: Uint8Array(307200) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, …]}// the data array contains 307200 values, one for each pixel of the 640x480 image that was passed to the function.

如需了解此方法及其參數(shù)的完整說明，請參閱GitHub readme。

注：GitHub readme 鏈接

https://github.com/tensorflow/tfjs-models/tree/master/body-pix#person-segmentation

繪制人物分割輸出結(jié)果

BodyPix 在瀏覽器中的另一優(yōu)勢是，其允許我們訪問Canvas 合成等網(wǎng)絡(luò) API。通過這些 API，我們可以使用 BodyPix 的輸出結(jié)果遮蓋或替換部分圖像內(nèi)容。為幫助您入門，我們提供了包含此功能的實用函數(shù)，具體如下：

toMaskImageData會提取經(jīng)估測的人物分割的輸出結(jié)果，并生成透明圖像，該圖像會在人物或背景所處位置顯示模糊圖像，具體視 maskBackground 而定。然后，可使用drawMask方法在原始圖像上將其繪制為掩膜：

const imageElement = document.getElementById('image');const net = await bodyPix.load();const segmentation = await net.estimatePersonSegmentation(imageElement);const maskBackground = true;// Convert the personSegmentation into a mask to darken the background.const backgroundDarkeningMask = bodyPix.toMaskImageData(personSegmentation, maskBackground);const opacity = 0.7;const canvas = document.getElementById('canvas');// draw the mask onto the image on a canvas. With opacity set to 0.7 this will darken the background.bodyPix.drawMask( canvas, imageElement, backgroundDarkeningMask, opacity);

drawMask會在畫布上繪制圖像，同時會繪制包含掩膜的 ImageData，使其帶有特定的模糊度。

借助對上方第一張圖像執(zhí)行estimatePersonSegmentation后的輸出結(jié)果，toMaskImageData將生成ImageData。若將 maskBackground 設(shè)為 true（默認設(shè)置），則 ImageData 便會如上方第二張圖像所示；若將 maskBackground 設(shè)為 false，則其會與第三張圖像類似

然后，可使用drawMask在圖像上繪制此掩膜

第 2b 部分：身體部位分割

應用于圖像的身體部位分割算法示例。圖像來源：“Microsoft Coco：Common Objects in Context Dataset”，https://cocodataset.org.hb

除了簡單的人物/非人物分類，BodyPix 還能將圖像分割為表示24 個身體部位中任一個部位的像素。圖像在輸入模型后會轉(zhuǎn)化為二維圖像，其中每個像素處的整數(shù)值均介于 0 到 23 之間，表示該像素在 24 個身體部位中的所屬部位。對于非身體部位的像素，此值為 -1。

我們調(diào)用 API 方法estimatePartSegmentation對圖像或視頻執(zhí)行身體部位分割操作；下方簡短的代碼塊展示了如何使用此方法：

const imageElement = document.getElementById('image');// load the BodyPix model from a checkpointconst net = await bodyPix.load();// arguments for estimating body part segmentation.const outputStride = 16;const segmentationThreshold = 0.5;// load the person segmentation model from a checkpointconst net = await bodyPix.load();const partSegmentation = await net.estimatePartSegmentation(imageElement, outputStride, segmentationThreshold);

身體部位分割輸出示例如下所示：

{ width: 680, height: 480, data: Int32Array(307200) [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3, 3, 3, 3, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 0, 0, 0, 0, 0, 1, 1, 2, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 15, 15, 15, 15, 16, 16, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 23, 23, 23, 22, 22, -1, -1, -1, -1, …]}// the ‘data’ array contains 307200 values, one for each pixel of the 640x480 image that was passed to the function.

如需了解此方法及其參數(shù)的完整說明，請參閱GitHub readme。

注：GitHub readme 鏈接

https://github.com/tensorflow/tfjs-models/tree/master/body-pix#person-segmentation

繪制身體部位分割輸出結(jié)果

借助 estimatePartSegmentation 的輸出結(jié)果，以及按部位 id 索引的顏色數(shù)組，toColoredPartImageData可在每個像素處為每個部位生成帶有相應顏色的圖像。然后，可在畫布上使用drawMask方法將其繪制為原始圖像的掩膜：

const imageElement = document.getElementById('person');const net = await bodyPix.load();const partSegmentation = await net.estimatePartSegmentation(imageElement);const rainbow = [ [110, 64, 170], [106, 72, 183], [100, 81, 196], [92, 91, 206], [84, 101, 214], [75, 113, 221], [66, 125, 224], [56, 138, 226], [48, 150, 224], [40, 163, 220], [33, 176, 214], [29, 188, 205], [26, 199, 194], [26, 210, 182], [28, 219, 169], [33, 227, 155], [41, 234, 141], [51, 240, 128], [64, 243, 116], [79, 246, 105], [96, 247, 97], [115, 246, 91], [134, 245, 88], [155, 243, 88]];// the colored part image is an rgb image with a corresponding color from the rainbow colors for each part at each pixel.const coloredPartImage = bodyPix.toColoredPartImageData(partSegmentation, rainbow);const opacity = 0.7;const canvas = document.getElementById('canvas');// draw the colored part image on top of the original image onto a canvas. The colored part image will be drawn semi-transparent, with an opacity of 0.7, allowing for the original image to be visible under.bodyPix.drawMask( canvas, imageElement, coloredPartImageData, opacity);

借助對上方第一張圖像執(zhí)行estimatePartSegmentation后的輸出結(jié)果，以及提供的色度，toColoredPartImageData將生成類似于第二張圖像的 ImageData。之后，可在畫布上使用drawMask以將彩色部位圖像繪制在原始圖像上，并將模糊度設(shè)為 0.7；所得結(jié)果如上方第三張圖所示

如需了解有關(guān)這些方法及其具體用法的詳細說明，請參閱 GitHubreadme。

注：GitHubreadme 鏈接

https://github.com/tensorflow/tfjs-models/tree/master/body-pix#output-utility-functions

如何讓 BodyPix 運行得更快或更精確

模型大小和輸出步長最能影響性能和精確度，您可以設(shè)置二者的值，讓 BodyPix 以低精確度高速運行，或以高精確度低速運行。

加載模型時，我們會設(shè)置模型大小和mobileNetMultiplier參數(shù)，參數(shù)值可能為 0.25、0.50、0.75 或 1.00。該值與 MobileNet 架構(gòu)和檢查點相對應。值越大，層的規(guī)模就越大，模型也會越精確，但其運行速度會相應降低。將其設(shè)為較小值有助于提升模型速度，但精確度也會相應降低。

運行分割時，我們會設(shè)置輸出步長，此參數(shù)值可能為 8、16 或 32。總體來看，步長值還會影響姿勢估測的精確度和速度。輸出步長的值越低，精確度就越高，但速度也會越慢；而此值越高，預測時間則會越短，但精確度也會越低。

此外，原始圖像的大小也會影響性能。由于分割的估測結(jié)果之后會放大為原始圖像大小，因此原始圖像越大，放大及繪制結(jié)果所需執(zhí)行的計算就會越多。如要提高速度，您可以嘗試縮小圖像，然后再將其輸入 API。

如果您想上手嘗試 BodyPix，不妨在此處暫停片刻。若您有興趣了解此模型的創(chuàng)建方法，可前往下一節(jié)閱讀更多技術(shù)細節(jié)。

BodyPix 的創(chuàng)建過程

BodyPix 使用卷積神經(jīng)網(wǎng)絡(luò)算法。我們訓練了 ResNet 和 MobileNet 這兩個模型。盡管基于 ResNet 的模型更為精確，但本篇博文關(guān)注的是 MobileNet 已經(jīng)過開源，能夠在移動設(shè)備和標準消費類計算機上高效運行。MobileNet 模型用 1x1 卷積層代替?zhèn)鹘y(tǒng)分類模型最后的全連接池化層，以便預測密集的 2D 分割圖。下圖展示了使用 MobileNet 處理輸入圖像時所發(fā)生的情況：

本示例展示了 MobileNet 從輸入圖像到輸出層的逐層激活過程（為便于演示，我們省略了特征圖下采樣操作）

人物分割

BodyPix 的核心是執(zhí)行人物分割操作的算法，換言之，該算法會為輸入圖像的每個像素執(zhí)行二進制決策，從而估測該像素是否屬于人物的一部分。讓我們通覽一下此算法的運作過程：

上圖說明人物區(qū)域分割任務可表示為對每個像素的二進制決策任務。1 表示像素屬于人物區(qū)域，0 表示像素不屬于人物區(qū)域（為便于演示，我們已降低分割分辨率）

將圖像輸入 MobileNet 網(wǎng)絡(luò)，并使用 sigmoid 激活函數(shù)將輸出結(jié)果轉(zhuǎn)換為 0 到 1 之間的值，該值可表示像素是否屬于人物區(qū)域。分割閾值（如 0.5）能夠確定像素分值必須達到哪一最小值后，方可視作人物的一部分，進而能將此過程轉(zhuǎn)化為二進制分割。

應用于圖像的人物分割算法的數(shù)據(jù)表示示例。從左到右依次為：輸入圖像、網(wǎng)絡(luò)在使用 sigmoid 函數(shù)后作出的分割預測，以及使用閾值后的二進制分割。插圖作者：Ashley Jane Lewis。圖像來源：“Microsoft Coco：Common Objects in Context Dataset”，https://cocodataset.org

身體部位分割

為對身體部位分割作出估測，我們使用相同的 MobileNet 模型作為演示，但這次會通過預測一個附加的 24通道輸出張量P來重復上述過程，其中24表示身體部位的數(shù)量。每個通道會將身體部位存在與否的概率編成代碼。

示例表明，分割人體部位區(qū)域的任務可表示為對每像素的多通道二進制決策任務。對于每個身體部位通道，1 表示像素屬于身體部位區(qū)域，0 表示像素不屬于身體部位區(qū)域（從左到右依次為：輸入圖像、右臉通道和左臉通道）

本示例展示了 MobileNet 從輸入圖像到附加的 24 通道身體部位分割輸出層的逐層激活過程（為便于演示，我們省略了特征圖下采樣操作）

由于圖像各位置的輸出張量P中均有 24 個通道，因此我們需要在這些通道中找到最佳部位。推理期間，對于身體部位輸出張量 P 的各像素位置 (u,v)，我們使用以下公式來選擇概率最高的最佳body_part_id：

如此便會生成一張二維圖像（大小與原始圖像相同），且圖像中的每個像素都包含一個整數(shù)，用以表示該像素所屬的身體部位。人物分割輸出結(jié)果用于裁剪完整圖像中的人物，方法是將對應的人物分割輸出值小于分割閾值的像素值設(shè)為 -1。

本示例展示了如何將 24 通道身體部位分割與人物分割合并為單通道部位 id 輸出。插圖作者：Ashley Jane Lewis。圖像來源：“Microsoft Coco：Common Objects in Context Dataset”，https://cocodataset.org

本示例展示了在使用上述 argmax 公式合并 24 通道身體部位掩膜，并使用人物分割裁剪出人物區(qū)域后，最終形成的單通道身體部位 id 輸出（每個body_part_id 均由唯一的顏色表示，且為便于演示，我們已降低輸出分辨率）

使用真實數(shù)據(jù)與模擬數(shù)據(jù)進行訓練

在將圖像中的像素分割成 24 個身體部位區(qū)域的任務中，手動標注大量訓練數(shù)據(jù)的方法相當耗時。于是，我們在內(nèi)部使用計算機圖形技術(shù)，以生成具有真實身體部位分割標注數(shù)據(jù)的圖像。為訓練模型，我們將生成的圖像與真實的 COCO 圖像（帶有 2D 關(guān)鍵點和實例分割標注）混在一起使用。通過利用混合訓練策略和多任務損失函數(shù)，我們的 ResNet 模型能夠完全從模擬的標注數(shù)據(jù)中學習掌握對 24 個身體部位的預測功能。最后，我們將 ResNet “老師” 模型對 COCO 圖像的預測功能提取至 BodyPix 所采用的 MobileNet “學生” 模型。

本示例展示了 ResNet “老師” 模型在真實圖像與計算機圖形技術(shù)所生成圖像上的訓練過程。身體部位的真實標注只出現(xiàn)在由計算機圖形技術(shù)生成的圖像上

本示例展示了如何將 ResNet“老師”模型的預測功能提取至 BodyPix 所采用的 MobileNet“學生”模型

我們相信 BodyPix 將成為除 PoseNet 之外，助我們邁向如下目標的又一小步，即幫助用戶利用消費類設(shè)備在本地完成野外動作捕捉。目前，我們?nèi)杂胁簧傺芯繂栴}尚未完全解決，如捕捉 3D 身型、高頻軟組織肌肉運動，以及詳細展示服飾外觀及其變形等。盡管前路漫漫，但我們?nèi)詷酚^期待動作捕捉技術(shù)能夠更方便地應用于各個領(lǐng)域和行業(yè)，同時帶來更大用處。

我們已提供一些示例和實用方法，旨在幫助您啟用 BodyPix 模型，并希望以此啟發(fā)您對模型作出進一步修改。