Clarifai Face Detection API model used to work but now it won't fetch and throws a 404

Question

Here is the long story short. I am entering an image URL in a text input. The app will pop up the image and then I ask it to fetch Clarifai face-detection model to draw a box on the face. It used to work but now it throws a 404 as soon as I hit find face button.

Here is the part of the code that is not working at the last fetch onSubmit.

const PAT = <my PAT>;
const USER_ID = <my user id>;
const APP_ID = <my app id>;
const MODEL_ID = 'face-detection';
const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';

function App() {
  const [userInput, setUserInput] = useState("")
  const [faceBox, setFaceBox] = useState({})

  const raw = JSON.stringify({
    "user_app_id": {
      "user_id": USER_ID,
      "app_id": APP_ID
    },
    "inputs": [
      {
        "data": {
          "image": {
            "url": userInput
          }
        }
      }
    ]
  });

  const requestOptions = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Authorization': 'Key ' + PAT
    },
    body: raw
  };

  const findFaceNodes = (data) => {
    const nodes = data.outputs[0].data.regions[0].region_info.bounding_box;
    const photo = document.getElementById("face");
    const width = Number(photo.width);
    const height = Number(photo.height);
    const calculatedBox =
    {
      leftCol: nodes.left_col * width,
      topRow: nodes.top_row * height,
      rightCol: width - (nodes.right_col * width),
      bottomRow: height - (nodes.bottom_row * height)
    };

    setFaceBox(calculatedBox)
  }

  const onSubmit = () => {
    fetch("https://api.clarifai.com/v2/models/" + MODEL_ID + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
      .then(response => response.json())
      .then(result => { findFaceNodes(result) })
      .catch(error => console.log('error', error));
  }

  return (
    <div className='App' >
            <SubmitForm onSubmit={onSubmit} />
            <ImageBox imageURL={userInput} box={faceBox} />
    </div>
  );
}

export default App;

Answer 1

Try authenticating to the Clarifai API like this:

const PAT = <my PAT>;
const USER_ID = 'clarifai';
const APP_ID = 'main';
const MODEL_ID = 'face-detection';
const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';

According to the Clarifai's recently updated documentation, you need to specify the correct user_id/app_id pairings of the owner of the resource, if making inferences outside your app's scope.

Try that if it can work.