Face_Detector_Model of Clarifai Api in react project

Question

Can anybody help me, how to use face detect model of clarifai api to detect multiple faces. I have created App.js like this.

const app = new Clarifai.App({
  apiKey: 'my_api_key'
});
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      input: '',
      imageUrl: '',
      box: {},
    }
  }
  calculateFaceLocation = (response) => {   
    let width;
    let height;
    let clarifaiFace;
    response.outputs[0].data.regions.forEach(function differentfaces(item){
      clarifaiFace = item.region_info.bounding_box;
      const image = document.getElementById('inputImage');
      width = Number(image.width);
      height = Number(image.height);
    });
      return {
        leftCol: clarifaiFace.left_col * width,
        topRow: clarifaiFace.top_row * height,
        rightCol: width - (clarifaiFace.right_col * width),
        bottomRow: height - (clarifaiFace.bottom_row * height),
      }
  }

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

  onInputChange = (event) => {
    this.setState({input: event.target.value});
  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
      .predict(
        Clarifai.FACE_DETECT_MODEL,
        this.state.input      
      )
      .then(response => this.displayFaceBox(this.calculateFaceLocation(response)))
      .catch(err => console.log(err));
  }

  render() {
    return (
            <div className="App">
             <Particles className='particles' params={particlesOptions} />
              <Navigation />
              <Logo />
              <Rank />
              <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit} />
              <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl} /> 
            </div>
    );
  }

}

export default App;

Link to clarifai api face detect model: https://www.clarifai.com/models/face-detection-image-recognition-model-a403429f2ddf4b49b307e318f00e528b-detection

Answer 1

Clarifai Support here. Could you please try replacing

FACE_DETECT_MODEL

with

FACE_DETECTION_MODEL

It might just be as simple as a syntax error.