How can I get Clarifai API to respond on my request

Question

I'm trying to use the Clarifai API to build a face detection app, but I'm getting no response from it. I'm new to this, and I've done just about everything to get it to work, but I'm getting no response.

This is my code

import React, { Component } from 'react';
import Clarifai from 'clarifai';
import Navigation from "./Components/Navigation/Navigation";
import Rank from './Components/Rank/Rank';
import ImageLinkForm from "./Components/ImageLinkForm/ImageLinkForm";
import FaceDetection from './Components/FaceDetection/FaceDetection';
import Logo from './Components/Logo/Logo';
import ParticlesBg from 'particles-bg';
import './App.css';

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

const Particles = () => {
  return (
    <>
        <div>...</div>
        <ParticlesBg 
          type="cobweb" 
          bg={true} 
          num={40}
        />
      </>
  )
};

class App extends Component {
constructor() {
  super();
  this.state = {
    input: '',
    imageUrl: ''
  }
}; 

onInputChange = (event) => {
  console.log(event.target.value)
};

onButtonClick = () => {
console.log('click');
app.models.predict("https://samples.clarifai.com/face-det.jpg%22").then(
 function(response) {
 console.log(response)
  },
  function(err) {

  }
 )
};

  render() {
    return (
      <div className="App">
        <Particles />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={this.onInputChange} onButtonClick={this.onButtonClick} />
        <FaceDetection />
      </div>
    );
  };
};

export default App;

I tried switching my API key in the hopes that it was the one that wasn't working, but it still wasn't working. And also it's not throwing no error!

Answer 1

When using the Clarifai API with React, you need to call it via HTTP and not using any of the gRPC clients. Also, do not use the deprecated JavaScript client. You can refer to the JavaScript (REST) samples on the Clarifai documentation on how to use the API with React.

Answer 2

Try this, I think the promise is not handled properly

app.models.predict("https://samples.clarifai.com/face-det.jpg%22").then(response => {
 console.log(response)
}).catch(err => {
 console.log(err)
})

Answer 3

I know the course you're taking, and I've been trying to get this to work for quite awhile. The idea that following along with one small React project will give us the knowledge to go figure it out ourselves is not realistic, so don't pull out your hair like I did. An article in Clarifai help after searching "Clarifai React" did help, but it still took finageling. Here's what I have so far, it at least gets a response in array form.

onButtonSubmit = () => {
console.log('button clicked');
this.setState({imageUrl: this.state.input});
const USER_ID = 'oxxxxxxxxxx';//(the code by your name)
const PAT = '96d20xxxxxxxxxxxx';//(your Clarifai api key)
const APP_ID = 'facerec';//(what you named your app in Clarifai)
const MODEL_ID = 'face-detection';
const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';    
const IMAGE_URL = this.state.input;
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(response => {
    const parser = JSON.parse(response)
    console.log('hi', parser.outputs[0].data.regions[0].region_info.bounding_box)
    // console.log(response[])
    if (response) {
      fetch('http://localhost:3000/image', {
        method: 'put',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          id: this.state.user.id
        })
      })
      .then(response => response.json())
      .then(count => {
        this.setState(Object.assign(this.state.user, { entries: count }))
      })
    }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

}