Hello Everyone,
I am new to tensorflow (using 3.0) and want to set up a basic video with blurred background written in JS/TS. Therefore I created a HTMLVideoElement and an HTMLCanvas Element. Next I want to setup my BodyPix function, based on the example for bodySegmentation.drawBokehEffect from
“tfjs-models/body-segmentation at master · tensorflow/tfjs-models · GitHub
my function looks like this
private loadBodyPix = async () => {
const segmenter = await bodySegmentation.createSegmenter(
bodySegmentation.SupportedModels.BodyPix
);
const segmentation = await segmenter.segmentPeople(this.videoElement);
const foregroundThreshold = 0.5;
const backgroundBlurAmount = 3;
const edgeBlurAmount = 3;
const flipHorizontal = false;
await bodySegmentation.drawBokehEffect(
this.canvasElement,
this.videoElement,
segmentation,
foregroundThreshold,
backgroundBlurAmount,
edgeBlurAmount,
flipHorizontal
);
};
but when running this Code I am getting the error “Uncaught (in promise) Error: Expect modelConfig.runtime to be either ‘tfjs’ or ‘mediapipe’, but got undefined”.
According to createSegementer function in github (https://github.com/tensorflow/tfjs-models/blob/master/body-segmentation/src/create_segmenter.ts) I can add a modelConfig which can be of 3 different types. None of these types provide a solution by adding it as attribute. Even if 2 of them contain the property runtime
Here the properties I tried:
const modelConfig1: MediaPipeSelfieSegmentationMediaPipeModelConfig = {
runtime: “mediapipe”,
};
const modelConfig2: MediaPipeSelfieSegmentationTfjsModelConfig = {
runtime: “tfjs”,
};
const modelConfig3: BodyPixModelConfig = {
architecture: “MobileNetV1”,
outputStride: 16, //8 // 16 // 32
multiplier: 0.5, //0.75 // 0.5 // 1.0
quantBytes: 2, //1 //2 //4
};
Can someone explain why this error still occurs and what is lacking in my code/config?
My dependencies look like this:
“dependencies”: {
“@mediapipe/selfie_segmentation”: “^0.1.1632777926”,
“@tensorflow-models/body-segmentation”: “^1.0.1”,
“@tensorflow/tfjs”: “^3.18.0”,
“@tensorflow/tfjs-backend-webgl”: “^3.18.0”,
“@tensorflow/tfjs-converter”: “^3.18.0”,
“@tensorflow/tfjs-core”: “^3.18.0”,
“detectrtc”: “^1.4.1”,
“fetch-retry”: “^5.0.2”,
“html-to-image”: “^1.9.0”,
“isomorphic-fetch”: “^3.0.0”,
“typescript”: “4.3.2”,
“whatwg-url”: “^11.0.0”
},
“devDependencies”: {
“@types/jest”: “^27.4.1”,
“@types/node”: “^17.0.25”,
“@typescript-eslint/eslint-plugin”: “^5.20.0”,
“@typescript-eslint/parser”: “^5.20.0”,
“eslint”: “^8.13.0”,
“eslint-config-prettier”: “^8.5.0”,
“eslint-plugin-jest”: “^26.1.4”,
“eslint-plugin-prettier”: “^4.0.0”,
“jest”: “^26.4.2”,
“jest-fetch-mock”: “^3.0.3”,
“jest-sonar-reporter”: “^2.0.0”,
“jest-websocket-mock”: “^2.1.0”,
“mock-socket”: “^9.1.3”,
“prettier”: “^2.6.2”,
“rollup”: “^2.70.2”,
“rollup-plugin-commonjs”: “^10.1.0”,
“rollup-plugin-node-resolve”: “^5.2.0”,
“rollup-plugin-typescript2”: “^0.31.2”,
“sonarqube-scanner”: “^2.8.1”,
“ts-jest”: “^26.3.0”
},