How to integrate Clarifai Api in JS React Project?

Question

I'm working on a Face Detection Project from Udemy Course (Zero to Mastery) with Clarifai API. Unfortunately, I get an error that I don't understand. Here is the code:

App.js:

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

process.nextTick = setImmediate;

const app = new Clarifai.App({
  apiKey: "7a2f4c6565204e56bc4e6c1fc52e2dd8",
});

const particlesOptions = {
  particles: {
    number: {
      value: 3,
      density: {
        enable: true,
        value_area: 800,
      },
    },
  },
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: "",
    };
  }
  onInputChange = (event) => {
    console.log(event.target.value);
  };

  onButtonSubmit = () => {
    console.log("click!");
    app.models
      .predict(
        "6dc7e46bc9124c5c8824be4822abe105",
        "https://samples.clarifai.com/face-det.jpg"
      )
      .then((response) =>
        this.displayFaceBox(this.calculateFaceLocation(response))
      )
      .catch((err) => console.log(err));
  };

  render() {
    return (
      <div className="App">
        <ParticlesBg
          className="particles"
          params={particlesOptions}
          bg={true}
        />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm
          onInputChange={this.onInputChange}
          onButtonSubmit={this.onButtonSubmit}
        />
        <FaceRecognition />
      </div>
    );
  }
}
export default App;

and ImageLink Form:

import React from "react";

const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
  return (
    <div>
      <p className="f3">{"This magic brain will detect faces"}</p>
      <div className="center">
        <div className="form center pa4 br3 shadow-5">
          <input
            className="f4 pa2 w-70 center"
            type="text"
            onChange={onInputChange}
          ></input>
          <button
            className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple"
            onClick={onButtonSubmit}
          >
            Detect
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImageLinkForm;

Here is the error: error from DevTools Thanks for your help!

I tried to change react-scrpits to version 4.0.2 and to install axios npm ( -> Im getting this error trying to use the clarifai api, how can i fix it?). I tried also to change the version of Clarifai Module (notning changes). Probably there is a problem with XML Request that I don't understand so good yet. I have a problem with integrate RestAPI for JS by another way than it was done in the course. Thanks for your help!

score 0 · Answer 1 · answered Mar 07 '23 at 14:38

If using ReactJS with the Clarifai API, it's recommended you consume it via the JavaScript HTTP channel. You can check the JavaScript (REST) samples on their docs platform, and learn how to integrate the Clarifai API into your React project. The Node gRPC client is recommended for Node.js projects.

How to integrate Clarifai Api in JS React Project?

1 Answers1