人脸检测未显示在正确的位置

Question

即使我添加了正确的数学运算，我的人脸检测应用程序仍无法正常工作。边界显示在不同的区域。我使用 React 作为前端，使用 Clarifai 作为 API

预测 API return 媒体包含人脸的可能性的概率得分。如果检测到人脸，该模型还将 return 那些带有边界框的人脸的坐标位置。

return编辑的“bounding_box”值是框的坐标，勾勒出图像中的每个面孔。它们被指定为 0 到 1 之间的浮点值，相对于图像大小；图像的左上坐标为 (0.0, 0.0)，图像的右下坐标为 (1.0, 1.0)。如果原始图像大小为（500 宽，333 高），则上面的框对应于左上角在 (208 x, 83 y) 和右下角在 (175 x, 139 y) 的框。请注意，如果图像被重新缩放（在 x 和 y 中缩放相同的数量），则框坐标保持不变。要转换回像素值，请乘以图像大小、宽度（对于“left_col”和“right_col”）和高度（对于“top_row”和“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 在 React 组件中

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

在你的 React JS 中，尝试：

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

作为参考，在Python中我们成功使用了以下函数：

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

您在元素中使用 position: absolute，但其父元素没有 position: relative。

当您相对于 .polaroid 元素定位边界框时，将其位置设置为相对于 position: relative。

人脸检测未显示在正确的位置

Face detection not showing in correct position

javascript

npm

web

reactjs

clarifai