having issues using face detection API from Clarifai API - css

Question

I have added the face detection API from Clarifai APi to my project, however, whenever i copy an image to my project and click on detects, it actually shows the image but it is not detecting the face.
see below App.js and FaceRecognition.js
import React, {Component} from 'react';
import Clarifai from 'clarifai';
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
import Rank from './components/Rank/Rank';
import './App.css';
const app = new Clarifai.App({
apiKey: 'xxxxxxxxxxxx'
});
class App extends Component {
constructor() {
super();
this.state = {
input: '',
imageUrl: '',
box: {}
}
}
calculateFaceLocation =(data) => {
const clarifaiFace = 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: clarifaiFace.left_col * width,
topRow: clarifaiFace.top_row * height,
rightCol: width - (clarifaiFace.right_col * width),
bottomRow: height - (clarifaiFace.bottom_row * height)
}
}
displayFaceBox = (box) => {
console.log(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">
<Navigation />
<Logo />
<Rank />
<ImageLinkForm
onInputChange={this.onInputChange}
onButtonSubmit={this.onButtonSubmit} />
<FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
</div>
);
}
}
export default App;
FaceRecognition.js
import React from 'react';
import './FaceRecognition.css';
const FaceRecognition = ({imageUrl, box}) => {
return (
<div className='center ma'>
<div className='absolute mt2'>
<img id='inputimage' alt='' src={imageUrl} width='500px' height='auto' />
<div className='bounding-box' style=
{{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
</div>
</div>
);
}
export default FaceRecognition;
FaceRecognition.css
bounding-box {
position: absolute;
box-shadow: 0 0 0 3px #149df2 inset;
display: flex;
flex-wrap: wrap;
justify-content: center;
cursor: pointer;
}
what am i doing wrong?
i tried copy paste from the actual Clarifai API code, but no luck
the bounding-box css is not even showing up in the console.
please help me

Answer 1

First of all, please don't use this client: https://github.com/Clarifai/clarifai-javascript, it has been deprecated for a while and several things in this package are very old and broken.
If you're purely developing client-side, you can use the REST endpoints directly: https://docs.clarifai.com/api-guide/predict/images (see "Javascript (REST)" snippets throughout the docs)
I also recommend to use PAT instead of API keys. This will allow you access across all your Clarifai apps with a single token.

Answer 2

Clarifai has changed the way to use their Api. On Clarifai Face detect model , click to use model, then you can copy the code on how to use their Api.
https://clarifai.com/clarifai/main/models/face-detection?utm_source=clarifai&utm_medium=referral&tab=versions
Then you can import your PAT and other credentials requested for in the code from Clarifai portal.
Use this as a guide https://help.clarifai.com/hc/en-us/articles/4408131744407-Integrating-Clarifai-in-your-React-Javascript-project
You are welcome 🤗