405 POST method not allowed (clarifai)

Question

am trying to use the clarify face detection api on my react app but i keep getting an error POST: 405 method not allowed i have tried going through some solutions here on stack overflow but it seems am using the updated version of clarifai api request method and is not in line with the solutions i have come across can someone please help me out with this am new to this

below is the app.js code

import NavBar from "../components/navbar/NavBar";
import ImageLinkFrom from "../components/imagelinkform/ImageLinkFrom";
import ImageRecognition from "../components/imagerecognition/Imagerecognition";
import Logo from "../components/logo/Logo";
import "./App.css";
import Rank from "../components/rank/Rank";
import { useState } from "react";
import Clarifai from "clarifai";

function App() {
  const [input, setInput] = useState("");
  const [imageurl, setImageurl] = useState("");

  const onInputChange = (e) => {
    setInput(e.target.value);
  };

  const onButtonSubmit = () => {
    setImageurl(input);
    const USER_ID = "myUserId";
    // Your PAT (Personal Access Token) can be found in the portal under Authentification
    const PAT = "myPAT";
    const APP_ID = "myAppId";
    const MODEL_ID = "color-recognition";
    // const MODEL_VERSION_ID = "45fb9a671625463fa646c3523a3087d5";
    // Change this to whatever image URL you want to process
    const IMAGE_URL = "https://samples.clarifai.com/metro-north.jpg";

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

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

    fetch(
      "https://api.clarifai.com/v2/models/" +
        MODEL_ID +
        "/versions/" +
        "/outputs",
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

  return (
    <div className="App">
      <NavBar />
      <Logo />
      <Rank />
      <ImageLinkFrom
        onInputChange={onInputChange}
        onButtonSubmit={onButtonSubmit}
      />
      <ImageRecognition imageurl={imageurl} />
    </div>
  );
}

export default App;

score 0 · Accepted Answer · answered May 10 '22 at 06:34

0

User, app and version id need to go to the url.

Remove this part from the req body:

user_app_id: {
    user_id: USER_ID,
    app_id: APP_ID,
  },

Change the path:

fetch(
      "https://api.clarifai.com/v2/users/"+
        USER_ID +
        "/apps/" +
        APP_ID +
        "/models/" +
        MODEL_ID +
        "/versions/" +
        MODEL_VERSION_ID +
        "/outputs",
      requestOptions
    )

Or without version (using the latest by default)

fetch(
      "https://api.clarifai.com/v2/users/"+
        USER_ID +
        "/apps/" +
        APP_ID +
        "/models/" +
        MODEL_ID +
        "/outputs",
      requestOptions
    )

answered May 10 '22 at 06:34

Martin Kask

54
3

It does actually also work with the UserID and AppID being in the body, but the preferred way of using the API is providing these in the url. The issue you were having is that you used "versions/", but did not define the VERSION_ID. so the "outputs" was probably interpreted as version id, but we do not have a path for this schema. I now noticed that the input you provide is also wrong - you are sending url as base64. It should be inputs: [ { data: { image: { url: IMAGE_URL, }, }, }, ], – Martin Kask May 10 '22 at 06:46

405 POST method not allowed (clarifai)

1 Answers1