Body Segmentation Blog Tutorial not working

Hello :slight_smile:

I was trying to test the body segmentation for bokeh effect. I followed the steps in this blog article: Body Segmentation with MediaPipe and TensorFlow.js — The TensorFlow Blog
Unfortunately it seems like it is not up to date.
Importing the libs via script tag alone gives me the error:

Uncaught TypeError: n.env is not a function
tfjs-backend-webgl:17:16469

I can’t remember how, but I found that importing tfjs-core fixes this?

Then the selfie_segmentation script seems to look for the following resource
http://selfie_segmentation_solution_simd_wasm_bin.js/
Which resulted in an CORS error

So I downloaded all libraries to host by myself and edited selfie_segmentation.js to look for the …wasm_bin.js file on my localhost

Now I get the following error:

Uncaught (in promise) RuntimeError: Aborted(LinkError: import object field 'invoke_viid' is not a Function)
selfie_segmentation:84:225

The more I struggle with this, the more I think that either the tutorial is deprecated, or I am doing something fundamentally wrong…

Is anyone of you able to run the given example when following step by step?
Any help is appreciated!

Thanks!
Thomas

Update:

Now I include the following scripts:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-segmentation"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>

And I am able to create the segmenter like so:

const model = bodySegmentation.SupportedModels.BodyPix;
const segmenterConfig = {
    runtime: 'tfjs',
    modelType: 'general'
};
segmenter = await bodySegmentation.createSegmenter(model, segmenterConfig);

but I still get an error when I try to use the segmenter

const people = await segmenter.segmentPeople(img);

body-segmentation:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'segmentBodyParts')
    at t.<anonymous> (body-segmentation:17:33407)
    at body-segmentation:17:2197
    at Object.next (body-segmentation:17:2302)
    at body-segmentation:17:1239
    at new Promise (<anonymous>)
    at s (body-segmentation:17:984)
    at t.segmentPeople (body-segmentation:17:33200)
    at index3.html:45:56

Any ideas what causes the issue?

Thanks!

Do you have a codepen or glitch.com live version of your code in its entirety I can check?


Thanks for your time!

I am pretty sure you cant just start a video without user interaction. See my working bodypix demo here to compare: