面部检测未显示在正确位置

Question

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

预测API返回媒体包含人脸的可能性的概率得分。如果检测到人脸，模型还将使用边界框返回这些人脸的坐标位置。

返回的"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"one_answers"right_col"(和高度(对于"top_row"one_answers"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;

React组件中的HTML5

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

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

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

Answer 2

在您的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
)