浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位

2019年7月14日 659次阅读来源: 量子位

分栗子发自凹非寺
量子位出品 | 公众号 QbitAI

《浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位》

TensorFlow开源了一个实时人物分割模型，叫BodyPix。

这个模型，在浏览器上用TensorFlow.js就能跑。

而且，帧率还很可观，在默认设定下：

用2018版15吋MacBook Pro跑，每秒
25帧。
用iPhone X跑，每秒
21帧。

注意，有线上Demo可以玩耍。

怎样分割

在BodyPix眼里，人体可以分成24个部位。比如，左手、右前小腿、后背等等。

对每个像素来说，模型首先需要判断，它是不是人体的一部分。

《浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位》

如果判断属于人体，再分辨它到底在人体的哪个部位：

《浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位》

这样，黑色剪影就变成了色彩丰富的分割成果。

开始食用

现在，来仔细看一下，这个模型该怎么用。

首先明确，如果不和其他模型搭配食用，BodyPix只适用于单人影像。

第一部分：导入

用npm install @tensorflow-models/body-pix安装，然后用es6模块来导入：

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

或者，通过页面上的bundle来食用，就不用安装了：

 1 <html> 
 2     <body> 
 3         <!-- Load TensorFlow.js --> 
 4         <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3"></script> 
 5         <!-- Load BodyPix -->
 6         <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script> 
 7             bodypix.load().then(function(net) {
 8                 // BodyPix model loaded
 9             });
10         </script>
11     </body>
12 </html>

第二部分A：把人抠出来

这里，只是把像素分成人和非人。

《浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位》

每个像素，都会给出一个0-1之间的数值。

然后，设定一个阈值 (如0.5) 。数值大于等于阈值视为1，小于视为0。

要召唤出一个API，叫estimatePersonSegmentation，来执行这个任务：

1 const imageElement = document.getElementById('image');
2
3 // load the BodyPix model from a checkpoint
4 const net = await bodyPix.load();
5
6 // arguments for estimating person segmentation.
7 const outputStride = 16;
8 const segmentationThreshold = 0.5;

第二部分B：区分身体部位

《浏览器上跑：TensorFlow开源了实时人物分割模型，秒速25帧，24个部位》

24个身体部位，对应0-23的数字。非人体则是-1。

这里，要召唤出另一个API，叫estimatePartSegmentation：

 1 const imageElement = document.getElementById('image');
 2
 3 // load the BodyPix model from a checkpoint
 4 const net = await bodyPix.load();
 5
 6 // arguments for estimating body part segmentation.
 7 const outputStride = 16;
 8 const segmentationThreshold = 0.5;
 9
10 // load the person segmentation model from a checkpoint
11 const net = await bodyPix.load();
12
13 const partSegmentation = await net.estimatePartSegmentation(imageElement, outputStride, segmentationThreshold);