-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (49 loc) · 1.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>
<!-- Load BodyPix -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
</head>
<body>
<img id='image' src='person.jpg' crossorigin='anonymous'/>
<canvas id="output">
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
const img = document.getElementById('image');
console.log(img);
async function loadAndPredict() {
const net = await bodyPix.load({
architecture: 'MobileNetV1',
outputStride: 16,
multiplier: 0.75,
quantBytes: 2
});
/**
* One of (see documentation below):
* - net.segmentPerson
* - net.segmentPersonParts
* - net.segmentMultiPerson
* - net.segmentMultiPersonParts
* See documentation below for details on each method.
*/
const segmentation = await net.segmentPerson(img);
console.log(segmentation);
// The mask image is an binary mask image with a 1 where there is a person and
// a 0 where there is not.
const coloredPartImage = bodyPix.toMask(segmentation);
const opacity = 0.7;
const flipHorizontal = false;
const maskBlurAmount = 0;
const canvas = document.getElementById('output');
// Draw the mask 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, img, coloredPartImage, opacity, maskBlurAmount,
flipHorizontal);
}
loadAndPredict();
</script>
</html>