aneagoie / face-recognition-brain

Final project for ZTM course

SmartBrain - v1

Final project for ZTM course

1. Clone this repo
2. Run npm install
3. Run npm start
4. You must add your own API key in the src/App.js file to connect to Clarifai.

You can grab Clarifai API key here

visist https://zerotomastery.io/ for more

face-recognition-brain's Issues

Multiple face recognition is not supported!

It cant recognize multiple faces, but only one.

Another way of login except .this method

Can please tell me how can we do login using react hooks

Clarifai for JavaScript is depreciated.

Clarify API ISSUE

Other than using a third party package that will force us to downgrade our reacts scripts, I have found a way how I can access clarify API.
I have however worked on the front end part of the course only. Still learning backend.
Can I create a pull request for the same?

Getting an error in Signin.js (SyntaxError)

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
(anonymous function)
src/Components/Signin/Signin.js:29

26 |     password: this.state.signInPassword
27 |   })
28 | })
> 29 |   .then(response => response.json())
30 |   .then(user => {
31 |     if (user.id) {
32 |       this.props.loadUser(user)

Uncaught ReferenceError: process is not defined at App._init

Hi,
I use the apiKey method and I created my own API.
But I get this error and my app does not work with the apiKey method
Does anyone know the reason?
Is it because it is deprecated?

cors error

cors working for signin component with no error but at the time when registration is run it says:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/register. (Reason: CORS request did not succeed).

If signin component is working then why register process gives this error?

Deploy to Heroku, app crashes with error H10

The app is running on the localhost, but it is not getting depoyed on heroku. Server is not displaying public index.html
at=error code=H10 desc="App crashed" method=GET path="/" host=facedetectapp101.herokuapp.com request_id=39713edf-7f4f-44f6-95b1-8b7caca2b728 fwd="109.177.73.111" dyno= connect= service= status=503 bytes= protocol=https

Code typescript error importing

Multiple issues, a direct clone will not produce a functioning website, there is no way to reach the image scan upload page.

importing the clarifai gives you this error,
Could not find a declaration file for module 'clarifai'. 'c:/Users/yamor/Desktop/brain/face-recognition-brain/node_modules/clarifai/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/clarifai if it exists or add a new declaration (.d.ts) file containing declare module 'clarifai';ts(7016)
.
All dependencies are installed, no idea how to fix these issues yet.

home page is not opening

Unable to go on page by clicking on signin/register button.

And in console this error is coming whenever I click on signin/register button:

POST http://localhost:3000/signin net::ERR_CONNECTION_REFUSED
Uncaught (in promise) TypeError: Failed to fetch

😩

Axios package missing, causes error: axios.post is not a function.

The Problem

When cloning this repo, adding a valid API key in ./src/App.js, and installing Node packages, the web app is not functional.

The Error

When adding valid URL in the "Image Link Form", and clicking "Detect", the console shows an error of:

"TypeError: axios.post is not a function"

The Fix

A dependency in package.json needs added:

"axios": "0.27.2"

Also, in ./src/App.js, axios will need imported:

import Axios from 'axios';

This will then allow the web app to work with a valid Clarifai API.

I can make these changes and send a pull request if wanted.

On submit sign in Error

Dear Andrie,

I am blocked by a issue, when i try to make fetch call on sign in, the post method doesnt work and the user details can be seen in query params, below is the code
onSubmitSignIn = () => {
fetch('http://localhost:3000/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword
})
})
.then(response => response.json())
.then(data => {
// console.log(data)
if (data == 'success') {
this.props.onRouteChange('home')
}
})

    // this.props.onRouteChange('home')

}

Typo in imageLinkForm.js

Not very essential but theres is a typo in the above mentioned file in line 8 :

{'This Magic Brain will detect faces in your pictures. **Git** it a try.'}

Recommend changing to :

{'This Magic Brain will detect faces in your pictures. **Give** it a try.'}

Sign in error

POST http://localhost:3000/signin 500 (Internal Server Error)
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

i copied the server.js and the signin.js just to be sure and the error still keeps coming , register and all other functions are working fine but not sign in

VM1661:1 Uncaught (in promise) SyntaxError: Unexpected token s in JSON at position 0

Register.js-26

a new error and there are 2,3 more errors

the logo is not appearing after running npm start

onChange is not calling function onInputChange, working while shift input to app.js

Hi,
I am facing problem with the components ImageLinkForm.js. The onChange is not calling function onInputChange while change in inputs. However, work well if shift the input box to App.js.
Tried both microsoft edge and google chrome.
Can you please help?
Thanks Ahsan

it gets only the first face

const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
this from this Repository https://github.com/aneagoie/face-recognition-brain

import Clarifai from 'clarifai';

The above-mentioned line doesn't work as the Clarifai is depreciated. what is the other way to proceed further in this project? Later in the project if still carry on it throws an error here :

app.models.predict(Clarifai.GENERAL_MODELs, 'https://samples.clarifai.com/face-det.jpg')
.then(function(response){
console.log(response)
},

i am getting this Error => TypeError: axios.post is not a function

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

app.models
.predict("af5a54585af246268c4c47d1cb9bf816", this.state.input)
.then(
(response) => {
console.log(response)
},
(error)=> {
console.error(error);
}
);`

Error after register

I found this message after fill in all field in register form and click Register button. Do I missed any configuration?