Search code examples
reactjsclarifai

I keep getting an error when using the clarifai 'Demographics" model


TypeError: Cannot read property 'language' of undefined

The demographics model was working few months ago when I used it as 'Clarifai.DEMOGRAPHICS_MODEL' but now it gives a 404 error for the same. I think now I am supposed to use it as 'Clarifai.Demographics' but it gives the error shown in picture. Am I doing something wrong or is it some Clarifai issue? I am relatively new to react programming and just noticed the app that I had made before using 'Clarifai.DEMOGRAPHICS_MODEL' started showing errors suddenly.

For now, I am just trying to make this work

const onSubmit = () => {
    app.models.predict(Clarifai.Demographics, "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/06/06/15/Chris-Pratt.jpg")
    .then(res => console.log(res))
}

NEW EDIT :

Finally, now I can retrieve data from clarifai and send it to frontend. Keeping the backend code here for reference if anyone needs.

--------server.js---------
const express = require('express')
const cors = require('cors')
const posts = require('./demographics.js')

const app = express()
app.use(cors())
app.use(express.json())

const PORT = process.env.PORT || 5000

app.post('/data', posts.demographics)

app.listen(PORT, ()=> {
    console.log('Working at port ',PORT)
})


--------demographics.js---------
const {ClarifaiStub, grpc} = require("clarifai-nodejs-grpc");
const stringify = require('json-stringify-safe');

const demographics = (req,res) => {
    const stub = ClarifaiStub.grpc()
    const metadata = new grpc.Metadata();
    metadata.set("authorization", "Key {My_Key}");
    stub.PostWorkflowResults(
        {
            workflow_id: "Demographics",
            inputs: [
                {data: {image: {url: req.body.input}}}
            ]
        },

        metadata,
        (err, response) => {
            if(response){                
                const data = stringify(response.results[0].outputs[4].data.regions, null, 2)
                res.send(data)
            }
            else {
                console.log(err)
                res.status(400)
            }
        }
    )
}

Solution

  • You have to call the request either from the front end or from the backend. And the demographics now only support requests from the backend.

    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)
                        }
    

    use this for returning results

    // response.results[0].outputs[2].data.regions[0].data.concepts, muliticulture,
            // response.results[0].outputs[3].data.regions[0].data.concepts, gender,
            //response.results[0].outputs[4].data.regions[0].data.concepts, age,