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
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.