Face Detection model bounding box

Question

I'm using the claraifai API I've retrieved the regions for the face to form the bounding box but actually drawing the box gives me seriously off values as seen in the image.

code:

 return {
      topRow: face.top_row * height,
      leftCol: face.left_col * width,
      bottomRow: (face.bottom_row * height) - (face.top_row * height),
      rightCol: (face.right_col * width) - (face.left_col * width)
    }

Answer 1

Try to add a div relatively positioned inside the parent div.

Before:

const FaceImage = ({image, boxs}) => {
    return (
        <div className="faceimage">
            <img id="imgA" alt='' src={image}/>
            <div className="bounding-box" style={{
                top: boxs.top_row, 
                left: boxs.left_col,
                bottom: boxs.bottom_row,
                right: boxs.right_col 
            }}></div>
        </div>
    );
}

After:

const FaceImage = ({image, boxs}) => {
    return (
        <div className="faceimage">
            <div className="relative">
                <img id="imgA" alt='' src={image}/>
                <div className="bounding-box" style={{
                    top: boxs.top_row, 
                    left: boxs.left_col,
                    bottom: boxs.bottom_row,
                    right: boxs.right_col 
                }}></div>
            </div>
        </div>
    );
}

Css:

.relative {
    position: relative;
}