Examples of using Tensorflow and the body pix package for identifying people from images also how to strip the background or identify components such as the head arm legs etc script src https cdn jsdelivr net npm tensorflow tfjs dist tf min js type text javascript script script src https cdn jsdelivr net npm tensorflow models body pix 2 0 script script onload function BodyPix loaded console log bodyPix console log BodyPix ready to party console log ready script script src https cdn jsdelivr net npm tensorflow tfjs dist tf min js type text javascript script If you get this error Uncaught in promise TypeError net estimatePersonSegmentation is not a function at onload anonymous 18 39 Due to an issue with Chrome you can fix it using this or as in the next example move to a differnet version of the package Open Developer Tools go to Settings for Developer Tools then uncheck Enable JavaScript Sourcemaps under the Sources settings Restart Browser if needed script src https cdn jsdelivr net npm tensorflow models body pix 2 0 script img id myimage width 100 height 100 src https images pexels com photos 4350057 pexels photo 4350057 jpeg auto compress cs tinysrgb dpr 3 h 750 w 1260 script onload async function BodyPix loaded console log bodyPix const imageElement document getElementById myimage console log imageElement imageElement load the BodyPix model from a checkpoint const net await bodyPix load console log net arguments for estimating person segmentation const outputStride 16 const segmentationThreshold 0 5 const personSegmentation await net estimatePersonSegmentation imageElement outputStride segmentationThreshold console log personSegmentation personSegmentation end onload console log done script img id myimage width 200 height 200 src https notebook xbdev net var images face jpg script src https cdn jsdelivr net npm tensorflow tfjs 1 0 0 dist tf min js script script src https cdn jsdelivr net npm tensorflow models body pix 1 0 0 script script async const imageElement document getElementById myimage load the BodyPix model from a checkpoint const net await bodyPix load arguments for estimating body part segmentation const outputStride 16 const segmentationThreshold 0 5 const partSegmentation await net estimatePartSegmentation imageElement outputStride segmentationThreshold console log partSegmentation console log ready script img id myimage width 200 height 200 src https notebook xbdev net var images face jpg canvas id mycanvas width 200 height 200 cavnas script src https cdn jsdelivr net npm tensorflow tfjs 1 0 0 dist tf min js script script src https cdn jsdelivr net npm tensorflow models body pix 1 0 0 script script async const imageElement document getElementById myimage const net await bodyPix load const outputStride 16 const segmentationThreshold 0 5 const personSegmentation await net estimatePersonSegmentation imageElement outputStride segmentationThreshold 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 mycanvas 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 console log ready script img id myimage width 200 height 200 src https notebook xbdev net var images face jpg canvas id mycanvas width 100 height 100 cavnas script src https cdn jsdelivr net npm tensorflow tfjs 1 0 0 dist tf min js script script src https cdn jsdelivr net npm tensorflow models body pix 1 0 0 script script async const imageElement document getElementById myimage 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 coloredPartImageData bodyPix toColoredPartImageData partSegmentation rainbow const opacity 0 7 const canvas document getElementById mycanvas 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 console log ready script References Remove body from live web cam link https codepen io jasonmayes pen GRJqgma Tensorflow article link https blog tensorflow org 2019 11 updated bodypix 2 html
mycanvas width 200 height 200 cavnas script src https cdn jsdelivr net npm tensorflow tfjs 1 0 0 dist tf min js script script src https cdn jsdelivr net npm tensorflow models body pix 1 0 0 script script async const imageElement document getElementById myimage const net await bodyPix load const outputStride 16 const segmentationThreshold 0 5 const personSegmentation await net estimatePersonSegmentation imageElement outputStride segmentationThreshold 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 mycanvas 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 console log ready script img id myimage width 200 height 200 src https notebook xbdev net var images face jpg canvas id mycanvas width 100 height 100 cavnas script src https cdn jsdelivr net npm tensorflow tfjs 1 0 0 dist tf min js script script src https cdn jsdelivr net npm tensorflow models body pix 1 0 0 script script async const imageElement document getElementById myimage 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 coloredPartImageData bodyPix toColoredPartImageData partSegmentation rainbow const opacity 0 7 const canvas document getElementById mycanvas 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 console log ready script References Remove body from live web cam link https codepen io jasonmayes pen GRJqgma Tensorflow article link https blog tensorflow org 2019 11 updated bodypix 2 html