How could i implement Demographic Clarify.ai model on project built on react.js?

Question

I've tried to build a simple React app using basic Clarifai.FACE_DETECT_MODEL, but now I wanna change it to more advanced "Demographic", maybe somebody knows how to di it? I know that I have to change clarify model but idk exactly how to do it

 onButtonClick = () =>{
    this.setState({imageUrl: this.state.input});
    app.modelsw
      .predict(
        Clarifai.FACE_DETECT_MODEL,
        this.state.input)
      .then(response =>this.displayFaceBox(this.calculateFaceLocation(response)))
      .catch(err => console.log("OOOOOOPS fix me!!!!"));}````

score 0 · Answer 1 · answered Nov 21 '19 at 15:50

I think you can replace Clarifai.FACE_DETECT_MODEL with "c0c0ac362b03416da06ab3fa36fb58e3" to have it use the Demographics model.

I'm not sure if something like Clarifai.DEMOGRAPHICS will work (you can try if you want) but I believe that is just a variable holding the string representing the model. You could put a breakpoint in the debugging console of the web browser and examine the Clarifai object and look for a field that matches demographics in some way, and that is probably the variable for the hash.

Output from the call is specified here: https://www.clarifai.com/models/demographics-image-recognition-model-c0c0ac362b03416da06ab3fa36fb58e3#documentation

score 0 · Answer 2 · answered Aug 09 '20 at 20:06

it should now be:

onButtonClick = () =>{
  this.setState({imageUrl: this.state.input});
  app.modelsw
    .predict('c0c0ac362b03416da06ab3fa36fb58e3', this.state.input)
    .then(response =>this.displayFaceBox(this.calculateFaceLocation(response)))
    .catch(err => console.log('Oops fix me!'))
}

score 0 · Accepted Answer · edited Jan 08 '21 at 01:24

the demographics now only support requests from the backend. This is the nodejs request.

const {ClarifaiStub} = require("clarifai-nodejs-grpc");
const grpc = require("@grpc/grpc-js");

const metadata = new grpc.Metadata();
metadata.set("authorization", "{My key}");
const stub = ClarifaiStub.json()

stub.PostWorkflowResults(
    {
        workflow_id: "Demographics",
        inputs: [
            {data: {image: {url: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/06/15/Chris-Pratt.jpg"}}}
        ]
    },
    metadata,
    (err, response) => {
        if(response){
            console.log(response.results[0].outputs[2].data.regions[0].data.concepts)
        } else {
            console.log(err)
        }
    }
)

How could i implement Demographic Clarify.ai model on project built on react.js?

3 Answers3