Clarifai Face Detection (React White Screen Of Death)

Question

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;
 ``

Answer 1

First, I would strongly suggest that you remove the token from your message and create a new one as this token has now been compromised.

Second, it seems like you're using our deprecated Javascript package, you should switch to our new gRPC one: https://github.com/Clarifai/clarifai-nodejs-grpc or directly use our REST API for client-side call.

Also, it looks like you've added a bunch of code together here, your fetch doesn't seem to be used for anything for example. Make sure to double-check your call.