-1

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

Predict 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”和“right_col”）和高度（“top_row”和“bottom_row”）。

反应 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;
}
4

2 回答 2

0

在你的 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
)
于 2021-01-11T12:58:42.790 回答
0

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

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

于 2021-01-11T13:48:02.943 回答