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

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

若您在此處嘗試實(shí)時(shí)演示，這一切可能會(huì)更加明了。

注：此處 鏈接

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

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

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

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

注：1 鏈接

https://arxiv.org/abs/1701.01779

2 鏈接

https://arxiv.org/abs/1803.08225

BodyPix 入門(mén)指南

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

第 1 部分：導(dǎo)入 TensorFlow.js 和 BodyPix 庫(kù)

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

您可通過(guò) npm install @tensorflow-models/body-pix 安裝此庫(kù)，然后使用 es6 模塊將其導(dǎo)入：

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

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

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

第 2a 部分：人物分割

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

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

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

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ù)的完整說(shuō)明，請(qǐng)參閱GitHub readme。

注：GitHub readme 鏈接

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

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

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

toMaskImageData會(huì)提取經(jīng)估測(cè)的人物分割的輸出結(jié)果，并生成透明圖像，該圖像會(huì)在人物或背景所處位置顯示模糊圖像，具體視 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會(huì)在畫(huà)布上繪制圖像，同時(shí)會(huì)繪制包含掩膜的 ImageData，使其帶有特定的模糊度。

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

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

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

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

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

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

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ù)的完整說(shuō)明，請(qǐng)參閱GitHub readme。

注：GitHub readme 鏈接

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

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

借助 estimatePartSegmentation 的輸出結(jié)果，以及按部位 id 索引的顏色數(shù)組，toColoredPartImageData可在每個(gè)像素處為每個(gè)部位生成帶有相應(yīng)顏色的圖像。然后，可在畫(huà)布上使用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);

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

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

注：GitHubreadme 鏈接

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

如何讓 BodyPix 運(yùn)行得更快或更精確

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

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

運(yùn)行分割時(shí)，我們會(huì)設(shè)置輸出步長(zhǎng)，此參數(shù)值可能為 8、16 或 32?？傮w來(lái)看，步長(zhǎng)值還會(huì)影響姿勢(shì)估測(cè)的精確度和速度。輸出步長(zhǎng)的值越低，精確度就越高，但速度也會(huì)越慢；而此值越高，預(yù)測(cè)時(shí)間則會(huì)越短，但精確度也會(huì)越低。

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

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

BodyPix 的創(chuàng)建過(guò)程

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

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

人物分割

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

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

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

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

身體部位分割

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

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

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

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

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

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

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

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

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

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

本示例展示了如何將 ResNet“老師”模型的預(yù)測(cè)功能提取至 BodyPix 所采用的 MobileNet“學(xué)生”模型

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

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