I've gone thru the Zero To Mastery course all the way thru building the facial detection app with Clarifai using JAVASCRIPT. I've completed all of the code, updated with every update that's actually accessible on Clarifai's site pertaining to the Javascript REST setup (a couple of pages give the 'Ooops, this page no longer exists' error). But every attempt to see this thing in action gives me the dreaded WHITE SCREEN OF DEATH.
I'm sure I can't be the only one. Any input would be appreciated.
Complete App.js code listed below: ``
import React, {Component} from 'react';
import Clarifai from 'clarifai';
import ParticlesBg from 'particles-bg'
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import Rank from './components/Rank/Rank';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
import './App.css';
const PAT = '6ff576691c034b2da140922bf0f1fb0e';
const USER_ID = 'tybyers21';
const APP_ID = 'Face-Detector';
const MODEL_ID = 'face-detection';
const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';
const IMAGE_URL = 'https://samples.clarifai.com/metro-north.jpg';
const app = new Clarifai.App({
apiKey: '057657601d694b899ded85a360495f0b'
});
const raw = JSON.stringify({
"user_app_id": {
"user_id": USER_ID,
"app_id": APP_ID
},
"inputs": [
{
"data": {
"image": {
"url": IMAGE_URL
}
}
}
]
});
const requestOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Authorization': 'Key ' + PAT
},
body: raw
};
fetch("https://api.clarifai.com/v2/models/" + MODEL_ID + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
. catch(error => console.log('error', error));
class App extends Component {
constructor() {
super();
this.state = {
input: '',
imageUrl: '',
box: {},
}
}
onInputChange = (event) => {
this.setState({input: event.target.value})
}
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_rol * height)
}
}
displayFaceBox = (box) => {
this.setState({box: box});
}
onButtonSubmit = () => {
this.setState=({imageUrl: this.state.input});
app.models.predict({
id: "a403429f2ddf4b49b307e318f00e528b",
version: "6dc7e46bc9124c5c8824be4822abe105",
},
this.state.input)
.then(response => this.displayFaceBox(this.calculateFaceLocation(response)))
.catch(err => console.log(err));
}
render() {
return (
<div className="App">
<ParticlesBg num={400} type="cobweb" bg={true} />
<Navigation />
<Logo />
<Rank />
<ImageLinkForm
onInputChange={this.onInputChange}
onButtonSubmit={this.onButtonSubmit} />
<FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
</div>
);
}
}
export default App;
``
