How can I get Clarifai API to respond on my request-CodePudding

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"").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!

CodePudding user response：

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.

CodePudding user response：

Try this, I think the promise is not handled properly

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