App.js

import React,{Component} from 'react';
import './App.css';
import Navigation from './component/Navigation/Navigation';
import Logo from './component/Logo/Logo';
import ImageLinkForm from './component/ImageLinkForm/ImageLinkForm';
import Rank from './component/Rank/Rank';
import Particles from 'react-particles-js';
import FaceRecognition from './component/FaceRecognition/FaceRecognition';


import Clarifai from 'clarifai';

const app = new Clarifai.App({
 apiKey: '87b5eb01a1b44f60aa27702bed42544d'
});


const particlesOptions ={
        particles: {
          number:{
            value:40,
            density:{
              enable:true,
              value_area:300
            }
          }
        }
}
class App extends Component {
  constructor(){
    super()
    this.state ={
      input:'',
      imageUrl:'',
      box:{}
    }
  }
  calculateFaceLocation=(data)=>{
    const clarafaiFace = data.outputs[0].data.regions[0].region_info.bounding_box ;
    const image= document.getElementById('inputimage');
    const width = Number(image.width);
    const height = Number(image.height);
    return{
          leftCol:clarafaiFace.left_col*width,
          topRow:clarafaiFace.top_row*height ,
          rightCol:width - (clarafaiFace.right_col*width),
          bottomRow:height - (clarafaiFace.bottom_row*height),
    }
  }
  displayFaceBox=(box)=>{
    console.log(box)
    this.setState({box:box});
  }

  onInputChange= (event) =>{
    this.setState({input:event.target.value});
  }
  onSubmitButton =() =>{
    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}
          onSubmitButton={this.onSubmitButton}
        />
        <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
      </div>
    );
  }
  
}

export default App;