Face detection not showing in correct position

Question

my face Detection app doesnt work correctly even though I have added the correct math. The borders are shown in different areas. I'm using react as frontend and Clarifai as the API

The Predict API returns probability scores on the likelihood that the media contains human faces. If human faces are detected, the model will also return the coordinate locations of those faces with a bounding box.

The returned ‘bounding_box’ values are the coordinates of the box outlining each face within the image. They are specified as float values between 0 and 1, relative to the image size; the top-left coordinate of the image is (0.0, 0.0), and the bottom-right of the image is (1.0, 1.0). If the original image size is (500 width, 333 height), then the box above corresponds to the box with top-left corner at (208 x, 83 y) and bottom-right corner at (175 x, 139 y). Note that if the image is rescaled (by the same amount in x and y), then box coordinates remain the same. To convert back to pixel values, multiply by the image size, width (for “left_col” and “right_col”) and height (for “top_row” and “bottom_row”).

React JS

import React, {Component} from 'react';
import './App.css';
import Navigation from '../components/Navigation/Navigation'
import ImageDumper from '../components/ImageDumper/ImageDumper'
import ImageURL from '../components/ImageURL/ImageURL'
import Image from '../components/Image/Image'
import Particles from 'react-particles-js';
import Clarifai from 'clarifai'

// module.exports = global.Clarifai = {
//   FACE_DETECT_MODEL: '<id here>',
//   DEMOGRAPHICS_MODEL: '<id here>',
//   CELEBRITY_MODEL: '<id here>'
// };

var app = new Clarifai.App({
 apiKey: "<key here>"
});

var paramsOpts = {
  particles: {
    number: {
      value: 30,
      density: {
        enable: true,
        value_area: 800
      }
    }
  }
}
                

class App extends Component {
    constructor() {
        super();
        this.state = {
            input: '',
            imageUrl: '',
            box: {},
            route: 'signin',
            isSignedIn: false,
            user: {
              id: '',
              name: '',
              email: '',
              entries: 0,
              joined: ''
            }
        }
    }
    
      calculateFaceLocation = (data) => {
        var clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
        var image = document.getElementById('inputimage');
        var width = Number(image.width);
        var height = Number(image.height);
        console.log(clarifaiFace);
        return {
          leftCol: clarifaiFace.left_col * width,
          topRow: clarifaiFace.top_row * height,
          rightCol: width - (clarifaiFace.right_col * width),
          bottomRow: height - (clarifaiFace.bottom_row * height)
        }
      }

    OnButtonSubmit = (click) => {
        this.setState({imageURL: this.state.input})
        console.log(click)
        //  Clarifai.DEMOGRAPHICS_MODEL, Clarifai.CELEBRITY_MODEL,
        app.models.predict(Clarifai.FACE_DETECT_MODEL, this.state.input).then(response => this.displayFaceBox(this.calculateFaceLocation(response))).catch(error => console.log(error));
    }
    OnInputChange = (event) => {
        this.setState({input: event.target.value});
    }

    displayFaceBox = (box) => {
        this.setState({box: box});
    }

    render() {
        return (
            <div className="App">
                <Particles params={ paramsOpts } className="particles" />
                <Navigation />
                <ImageDumper /> 
                <ImageURL OnInputChange={this.OnInputChange} OnButtonSubmit={this.OnButtonSubmit} />
                <Image box={this.state.box} imageURL={this.state.imageURL}/>
            </div>
        );}
}

export default App;

HTML5 in React Component

import React from 'react';
import './Image.css';

function Image({ imageURL, box }) {
  return (
    <div className="Image" id="Image">
        <div className="polaroid">
        <img id="inputimage" src={imageURL} alt="No Image Detected" width="500" height="auto" />
        <div className="bound-box" style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
        </div>
    </div>
  );
}

export default Image;

CSS3

.polaroid {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    align-content: center;
    text-align: center;
    width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
}
.bound-box {
    position: absolute;
    box-shadow: 0 0 0 3px #149df2;
    display: inline-block;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}

Answer 1

In your React JS, try:

return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: clarifaiFace.right_col * width,
      bottomRow: clarifaiFace.bottom_row * height
    }

For reference, in Python we had used the following function with success:

def convert_bbox(img, bbox):
w, h = img.size
return (
    w * bbox.left_col,    # left
    h * bbox.top_row,     # top
    w * bbox.right_col,   # right
    h * bbox.bottom_row,  # bottom
)

Answer 2

You're using position: absolute in the element, but its parent element does not have position: relative.

As you're positioning the bounding box relative to the .polaroid element, set its position to relative with position: relative.