Hello Guys,
I want to made react component for image segmentation can anyone help me how to do this
I faced everytime with new issue

I think bodypix works, what exactly is your problem, (if I can help you) but body-segmentation doesn’t work with npm i @tensorflow /body-segmentation . have you tried?
for body-pix you can try this code on your App.js script : (don’t forget to install by ‘npm i @’ all what you gonna need

import React, { useRef, useEffect, createRef, Component } from 'react';
import * as bodyPix from '@tensorflow-models/body-pix';
import * as tf from '@tensorflow/tfjs';
      this.videoRef.current.autoplay = true;
      this.videoRef.current.addEventListener('loadedmetadata', () => {
        //diali
        //this.videoRef.current.width = this.videoRef.current.videoWidth;
        //this.videoRef.current.height = this.videoRef.current.videoheight;
        this.loadAndBlur(this.videoRef.current,this.canvasRef.current);
        //test loadAndBlur prblm
        //this.loadAndBlur();
        console.log("spongbob-start-video")
      this.videoRef.current.srcObject = stream;
      //essayer de l'appliquer?
      //videoRef.bodyPix.srcObject = stream;
      //videoRef.bodyPix.play();
      //appel de la fonction
  //il entre pas dans la fct
  //BodyPixMultiplier comment je peut modifier le nombre de layers pour etre plus rapide ?
  loadAndBlur = async (video, canvas) => {
    const net = await bodyPix.load({
      architecture: 'MobileNetV1',  
      //architecture: 'ResNet50',
      outputStride: 16,
      multiplier: 1.0,
      quantBytes: 2
    async function blur(){
      const segmentation = await net.segmentPerson(video);
      //net.segmentPerson(video);
      console.log("segmentation : " + segmentation)
      console.dir(segmentation)
      //je peux modifier les params
      const backgroundBlurAmount = 5;
      const edgeBlurAmount = 20;
      const flipHorizontal = false;
      //const BodyPixMultiplier =
      //detectionde probleme ici !
      // console.dir( video.current)
      // console.log("Current cnv : ", canvas)
      // console.log("video width :" + video.current.width);
      // console.log("video height :" + video.current.height);
      console.log("spongbob-before")
      //voir si ce se fait une seule capture et execute sur cette capture
      bodyPix.drawBokehEffect(canvas, video, segmentation, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
      console.log("spongbob-after") //non trouvée sur la console !
      requestAnimationFrame(blur)
    blur();
  render(){
    return (
      <video id="video" ref={this.videoRef} width={1280} height={720}></video>
      <canvas id="canvas" ref={this.canvasRef} ></canvas>
export default App;