Face detection not showing in correct position

32
January 11, 2021, at 8:20 PM

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.

READ ALSO
Correct use of Jest test with rejects.toEqual

Correct use of Jest test with rejects.toEqual

I am trying to use jest library:

55
How to locales word in side export default?

How to locales word in side export default?

I have been trying to change the language from English to others,

44
fabric: run() detect if ssh connection is broken during command execution

fabric: run() detect if ssh connection is broken during command execution

I'm using fabricapi to run command in the remote machine

45
Navigation action destination is not being registered

Navigation action destination is not being registered

I have a simple project with 3 fragments and i'm trying to add animations to it transitionsIt navigates when i click the buttons but now i'm trying to add animations to those transitions in the nav graph but for some reason the destination of the actions...

129