💡 Smart Brain App

A face recognition app that uses the Clarifai API to detect and locate a human face in the picture.

A full-fledged app with user registration and login system. Frontend built with React.js, backend server and APIs with Node.js & Express.js, and PostgresSQL as database to keep track of how many entries a user has made. Deployed on Heroku.

📕 How to Use the App

• Sign Up / Log In
• Input an image url and click detect button
• The app detects the face in the picture and highlight it with a blue bounding box.

✨ Features

• A complete user registration system
• Modern & Responsive UI, particle background effects created with Particle.js library
• Separate frontend and backend, easy modifications

⚙️ Installation

From your command line, first clone the project:

Clone this repository

$ git clone https://github.com/clairepeng0808/smart-brain-app

Go into the repository
$ cd smart-brain-app

# Remove current origin repository
$ git remote remove origin

Install the dependencies

# Install dependencies
$ npm install

# Start dev development server
$ npm run dev

After installation, open http://localhost:3000, or if you are running both frontend and the backend, you can run it on http://localhost:3001 to view it in the browser.

Clone the backend repo here

Changed the API URLs

Original

fetch("https://radiant-forest-01776.herokuapp.com/imageurl", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        input: this.state.input,
      }),
    })

If your backend is running on port 3000, changed your code to:

fetch("http://localhost:3000/imageurl", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        input: this.state.input,
      }),
    })

New Build

$ npm run start

Deploy to Heroku

Please Refer to the official document

🤟 Languages

🛠️ Technologies

APIs

• Clarifai API - Predict api to tell what is in your images, videos or text. Capture data about the physical world through images.

• Smart Brain API - Smart Brain API endpoints.

NPM Packages

• Material UI - React UI framework
• particles.js - Lightweight JS library for creating particles.
• serve - for serving a single page app or static files
• jQuery - to include jQuery in the project

💎 Credits

This project is a clone of one of the projects Smart Brain in the course: The Complete Web Developer in 2020. Thanks for the support from the instructor Andrei and the ZTM community.

📚 License