Smart-Brain App

A face detection web application created with React using the Clarifai API - Face Detection Model.

• Live demo of the application can be found: here
• Backend Smart-Brain-API Repository: here

This is the front-end of the Capstone (final) project in the Zero to Mastery: The Complete Web Developer in 2022. The back-end server and database are integrated and linked.

How to run this app

1. Clone the repo:

   git clone https://github.com/yourusername/smart-brain-frontend.git

2. Navigate to the project directory:

   cd smart-brain-frontend

3. Install dependencies:

   npm install

4. Create a .env file in the root directory and add your environment variables:

   REACT_APP_BACKEND_URL=https://your-backend-url
   

5. Run the app:

   npm start

Note: Ensure the backend URL in the .env file is correct.

Features

• User can input an image URL, click the detect button, and the API displays a blue-lined box around the face detected in the image.
• User inputs (image URL) are displayed below the input area.
• User can create a free account with the registration form available.
• User can sign into their account.

---

Project Resources

Face Detection model

• Clarifai Face Detection Model

How the API was used in this particular project

• Clarifai JavaScript SDK Basic Use

Clarifai Model info

• Clarifai JavaScript SDK Index

Clarifai API Models

• Clarifai Model Gallery

Zero to Mastery Instructor: Andrei Neagoie's GitHub Repo for the project front-end

• Face Recognition Brain Repo

tsparticles Matteo Bruni GitHub repo

• React implementation
• Triangles presets - options

This project was bootstrapped with Create React App.