• 📍 1. Overview
• 📦 2. Features
• 📂 3. Repository Structure
• 🧩 4. Modules
• 🚀 5. Getting Started
  • 📝 5.1. Requirements
  • ⚙️ 5.2. Previous Steps
• 🔧 6. Installation
  • 📦 6.1 With Docker
  • 📚 6.2 Without Docker
    • 💻 6.2.1 Frontend Installation
    • 🥅 6.2.2 Backend Installation
      • 🔌 6.2.2.A With Poetry—easy installation
      • 🎡 6.2.2.B With Pip—step-by-step installation
• 🧐 7. Verify
• 🧪 8. Tests
• 🛠 9. Project Roadmap
• 🤝 10. Contributing
• 📄 11. License
• 👏 12. Acknowledgments

Discover facial expressions within profile pictures using Recognize. This advanced web application harnesses AI and the Django-React stacks to offer a powerful tool for photo analysis. Our software's front-end stack seamlessly integrates with the API implementation provided in the back-end, allowing you to choose the option that suits you best. Explore our demo at https://recognize.joseatolentino.com/ to experience its capabilities firsthand.

└── AI-Facial-recognition/
    ├── README.md
    ├── backend
    │   ├── .editorconfig
    │   ├── .env.example
    │   ├── .flake8
    │   ├── .gitignore
    │   ├── .pre-commit-config.yaml
    │   ├── Dockerfile
    │   ├── Makefile
    │   ├── build
    │   │   └── static
    │   │       └── favicon.ico
    │   ├── core
    │   │   ├── __init__.py
    │   │   ├── admin.py
    │   │   ├── apps.py
    │   │   ├── delete.py
    │   │   ├── emotion_detection.py
    │   │   ├── management
    │   │   │   └── commands
    │   │   │       └── superuser.py
    │   │   ├── models.py
    │   │   ├── permissions.py
    │   │   ├── serializers.py
    │   │   ├── tests.py
    │   │   ├── urls.py
    │   │   └── views.py
    │   ├── custom_rmn
    │   │   └── __init__.py
    │   ├── home
    │   │   ├── __init__.py
    │   │   ├── settings
    │   │   │   ├── __init__.py
    │   │   │   ├── base.py
    │   │   │   ├── dev.py
    │   │   │   └── prod.py
    │   │   ├── urls.py
    │   │   └── wsgi
    │   │       ├── dev.py
    │   │       └── prod.py
    │   ├── manage.py
    │   ├── pyproject.toml
    │   ├── requirements.txt
    │   ├── static
    │   │   └── favicon.ico
    │   └── tests
    │       └── core
    │           ├── emotion_detection
    │           │   ├── test_detect_faces.py
    │           │   ├── test_generate_random_FileName.py
    │           │   └── test_read_image.py
    │           ├── image_detection
    │           │   ├── test_detect_faces.py
    │           │   └── test_read_image.py
    │           ├── models
    │           │   ├── test_File.py
    │           │   ├── test_Membership.py
    │           │   ├── test_Payment.py
    │           │   ├── test_TrackedRequest.py
    │           │   └── test_User.py
    │           ├── permissions
    │           │   └── test_IsMember.py
    │           ├── serializers
    │           │   ├── test_ChangeEmailSerializer.py
    │           │   ├── test_ChangePasswordSerializer.py
    │           │   ├── test_FileSerializer.py
    │           │   ├── test_SubscribeSerializer.py
    │           │   └── test_TokenSerializer.py
    │           └── views
    │               ├── test_APIKeyView.py
    │               ├── test_CancelSubscription.py
    │               ├── test_ChangeEmailView.py
    │               ├── test_ChangePasswordView.py
    │               ├── test_FileUploadView.py
    │               ├── test_ImageRecognitionView.py
    │               ├── test_SubscribeView.py
    │               ├── test_UserDetailsView.py
    │               └── test_UserEmailView.py
    └── frontend
        ├── .env.example
        ├── .gitignore
        ├── Dockerfile
        ├── cypress
        │   ├── features
        │   │   └── test_features
        │   ├── integration
        │   │   └── test_integration
        │   └── support
        │       └── test_support
        ├── cypress.config.js
        ├── package.json
        ├── public
        │   ├── favicon.ico
        │   ├── index.html
        │   └── manifest.json
        ├── src
        │   ├── App.js
        │   ├── __tests__
        │   │   ├── App.test.js
        │   │   └── containers
        │   │       ├── Account
        │   │       ├── Layout
        │   │       └── containers.test.js
        │   ├── assets
        │   │   ├── css
        │   │   │   ├── checkoutform.module.css
        │   │   │   └── landingpage.module.css
        │   │   ├── images
        │   │   │   ├── LogoInsta.js
        │   │   │   ├── api-usage.svg
        │   │   │   ├── apirecognize.svg
        │   │   │   ├── cat.jpg
        │   │   │   ├── face-logo.svg
        │   │   │   ├── face.png
        │   │   │   ├── google-logo.svg
        │   │   │   ├── imagePlaceHolder.png
        │   │   │   ├── insta-logo.svg
        │   │   │   ├── kubernetes.svg
        │   │   │   ├── login.svg
        │   │   │   ├── logo.svg
        │   │   │   ├── logoface-black.svg
        │   │   │   ├── logoface.svg
        │   │   │   ├── logorecognize-black.svg
        │   │   │   ├── logorecognize.svg
        │   │   │   ├── openai.svg
        │   │   │   ├── openai1.svg
        │   │   │   ├── pic1.png
        │   │   │   ├── pic2.png
        │   │   │   ├── pic3.png
        │   │   │   ├── pytorch.svg
        │   │   │   ├── result.svg
        │   │   │   ├── short_paragraph.png
        │   │   │   ├── tensorflow-text.svg
        │   │   │   ├── tensorflow.svg
        │   │   │   └── upload.svg
        │   │   └── videos
        │   │       └── video.mp4
        │   ├── constants.js
        │   ├── containers
        │   │   ├── Account
        │   │   │   ├── APIKey.js
        │   │   │   ├── APIUsage.js
        │   │   │   ├── Billing.js
        │   │   │   ├── ChangeEmail.js
        │   │   │   ├── ChangePassword.js
        │   │   │   ├── Chart.js
        │   │   │   ├── Checkout.js
        │   │   │   ├── CheckoutForm.js
        │   │   │   ├── Completion.js
        │   │   │   ├── Payment.js
        │   │   │   ├── Profile.js
        │   │   │   ├── Profile.jsx.jsx
        │   │   │   ├── Shell.js
        │   │   │   ├── Studio.js
        │   │   │   └── SubscribeForm.js
        │   │   ├── Contact.js
        │   │   ├── CustomLoginForm.js
        │   │   ├── CustomSignupForm.js
        │   │   ├── Demo.js
        │   │   ├── Eye.js
        │   │   ├── EyeSlash.js
        │   │   ├── Footer.js
        │   │   ├── InviteDemo.js
        │   │   ├── LandingPage.js
        │   │   ├── LandingPage.jsx.jsx
        │   │   ├── Layout
        │   │   │   ├── DesktopContainer.js
        │   │   │   └── MobileContainer.js
        │   │   ├── Layout.js
        │   │   ├── Login.js
        │   │   ├── Pricing.js
        │   │   ├── Signup.js
        │   │   └── Steps.js
        │   ├── hoc
        │   │   └── hoc.js
        │   ├── index.js
        │   ├── registerServiceWorker.js
        │   ├── routes.js
        │   ├── store
        │   │   ├── actions
        │   │   │   ├── actionTypes.js
        │   │   │   └── auth.js
        │   │   ├── reducers
        │   │   │   └── auth.js
        │   │   └── utility.js
        │   └── utils.js
        └── tailwind.config.js

Please make sure you have the following dependencies installed on your system:

Compulsory

- ℹ️ NodeJS >= 10.18.0

- ℹ️ NPM >= 6.13.4

- ℹ️ Python = 3.8.0

- ℹ️ Pip >= 19.2.3

Optional

- ℹ️ Poetry >= 1.8.2

Setting you up!

• Before installing the application—either online or locally—it is necessary that you configure your Stripe & Cloudinary accounts, as well as your PostgreSQL database; the later, only if you are planning to deploy the software on the internet.

  Get your Stripe API keys here

  Configure your Cludinary account, learn here

  Set your PostgreSQL DB locally or online1/online2/online3

After you have made those configurations, prepare these environment variables that will be required. See an example below.

• In ./frontend/.env

  # REACT CONFIG: DEVELOPMENT or PRODUCTION
  REACT_APP_ENVIRONMENT=DEVELOPMENT
  REACT_APP_DEBUG=true
  
  # BASE URL OF THE HOST FOR DEV. & PROD. (the backend host)
  REACT_APP_DEV_URL=http://127.0.0.1:8000
  REACT_APP_PROD_URL=https://www.example.com
  
  # CLOUDINARY CONFIG
  REACT_APP_CLOUDINARY_API_KEY=00000034034
  REACT_APP_CLOUDINARY_API_SECRET=yoursecreteapikey
  REACT_APP_CLOUDINARY_CLOUD_NAME=yourcloudname
  
  # STRIPE CONFIG
  REACT_APP_STRIPE_PUBLISH_KEY_DEV=pk_test_TYooMQauvdEDq54NiTphI7jx
  REACT_APP_STRIPE_PUBLISH_KEY_PROD=pk_test_TYooMQauvdEDq54NiTphI7jx

• And in ./backend/.env

  # DJANGO SETUP, ENVIROMENT 2 options: DEVELOPMENT OR PRODUCTION
  # set preferably debug to false in production 
  ENVIRONMENT=DEVELOPMENT
  DEBUG=True
  SECRET_KEY=yourscetedjangobackendkey
  
  # CLOUDINARY SETUP
  API_KEY=00000034034
  API_SECRET=yoursecreteapikey
  CLOUD_NAME=yourcloudname
  
  # POSTGRESQL DATABASE SETUP
  DB_ENGINE=django.db.backends.postgresql_psycopg2
  DB_NAME=dbname
  DB_USER=dbusername
  DB_PASSWORD=dbpassword
  DB_HOST=dbhost
  DB_PORT=5432
  
  # FOR STRIPE PAYMENT IN TEST (DEVELOPMENT) MODE
  # these are the default keys provided by Stripe
  STRIPE_TEST_PUBLISH_KEY=pk_test_TYooMQauvdEDq54NiTphI7jx
  STRIPE_TEST_SECRET_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc
  
  # FOR STRIPE PAYMENT IN LIVE (PRODUCTION) MODE
  # Change this to your keys
  STRIPE_LIVE_PUBLISH_KEY=pk_test_TYooMQauvdEDq54NiTphI7jx
  STRIPE_LIVE_SECRET_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc

  Note that in production, your will require a non-local PostgreSQL setup, and on development you can go for the default Django database Sqlite3, which doesn't require any DB previous configuration.

If you want to test the software asap, go for 6.1 and if you want to install everything manually, begin at 6.2 onwards.

• Pull the Frontend Image

  docker pull joseaidocker/recognize:recognizefront

• Pull the Backend Image

  docker pull joseaidocker/recognize:recognizeback

• Create two environment files back.env and front.env, containing the following variables (change them at your convenience):

  • For the back.env file:

    ENVIRONMENT=DEVELOPMENT
    DEBUG=True
    SECRET_KEY=yourscetedjangobackendkey
    API_KEY=00000034034
    API_SECRET=yoursecreteapikey
    CLOUD_NAME=yourcloudname
    DB_ENGINE=django.db.backends.postgresql_psycopg2
    DB_NAME=dbname
    DB_USER=dbusername
    DB_PASSWORD=dbpassword
    DB_HOST=dbhost
    DB_PORT=5432
    STRIPE_TEST_PUBLISH_KEY=pk_test_TYooMQauvdEDq54NiTphI7jx
    STRIPE_TEST_SECRET_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc
    STRIPE_LIVE_PUBLISH_KEY=pk_test_TYooMQauvdEDq54NiTphI7jx
    STRIPE_LIVE_SECRET_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc

  • For the front.env file:

    REACT_APP_ENVIRONMENT=DEVELOPMENT
    REACT_APP_DEBUG=true
    REACT_APP_DEV_URL=http://127.0.0.1:8000
    REACT_APP_PROD_URL=https://www.example.com
    REACT_APP_CLOUDINARY_API_KEY=00000034034
    REACT_APP_CLOUDINARY_API_SECRET=yoursecreteapikey
    REACT_APP_CLOUDINARY_CLOUD_NAME=yourcloudname
    REACT_APP_STRIPE_PUBLISH_KEY_DEV=pk_test_TYooMQauvdEDq54NiTphI7jx
    REACT_APP_STRIPE_PUBLISH_KEY_PROD=pk_test_TYooMQauvdEDq54NiTphI7jx

• Finally, run the docker images with:

  docker run  -p 3000:3000 --name recognizeFRONT --env-file front.env recognizefront
  docker run  -p 8000:8080 --name recognizeBACK --env-file back.env recognizeback

Note that on development, the parameter port of REACT_APP_DEV_URL (8000, according to the example) should match the output port of the command in docker run -p 8000:8080 --name recognizeBACK --env-file back.env recognizeback, so that frontend can communicate with the backend locally :)

• Clone the repository and move to the root folder:

  git clone https://github.com/jatolentino/AI-Facial-recognition
  cd AI-Facial-recognition

• Navigate to the ./frontend folder and run:

  npm install

• Run the frontend with:

  npm start

To start the frontend site, you should have previously configured ./frontend/.env, at least with the development environment parameters.

Change to the project directory, and choose either the Poetry (2.2.2.A) or Pip (2.2.2.B) installation:

cd ./backend

make full

The above command will create a virtual environment, install all the django & python packages needed, create a superuser called admin and a user called user, both with password: password, and run the application in localhost:8000. For more information read the ./backend/Makefile file.

• Create a virtual environment

  python -m venv env

• Switch to the virtual env in Windows

  source env/Scripts/activate

  Or in Linux/Mac

  source env/bin/activate

• Install the requirements

  pip install -r requirements.txt 

• Make the migrations

  python manage.py makemigrations 
  python migrate --run-syncdb

• Modify the rmn package for face recognition

  cp custom_rmn/__init__.py env/Lib/site-packages/rmn/

• Collect the static files

  python manage.py collectstatic

• Create a superuser & user

  python manage.py superuser --username admin --password password --noinput --email '[email protected]'

  This will create and admin & user, both with the same name respectively and with a password: password. For more information, check this file: ./backend/core/management/commands/superuser.py.

• Run the application

  python manage.py runserver

• For the Frontend

  Visit the following urls:

  • http://localhost:3000/: Note that the /admin path is a honeypot

• For the Backend

  Visit the following urls:

  • http://localhost:8000/secretadmin/: Note that the /admin path is a honeypot
  • http://localhost:8000/rest-auth/registration/: To login
  • http://localhost:8000/api-auth/login/?next=/api/demo/: To register an account
  • http://localhost:8000/api/demo/: To test the API

To execute tests, run:

npm test

• ► User registration
• ► User login
• ► User Dashboard
• ► API key assignement
• ► API consumption tracking
• ► Payment System: Cost per API request
• ► Admin Dashboard
• ► New API key generation
• ► Admin creates new Membership Plans

Contributions are welcome! Here are several ways you can contribute:

• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.
• Report Issues: Submit bugs found or log feature requests for Ai-facial-recognition.

This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.

[1] L. Pham, T. H. Vu and T. A. Tran, "Facial Expression Recognition Using Residual Masking Network," 2020 25th International Conference on Pattern Recognition (ICPR), Milan, Italy, 2021, pp. 4513-4519, doi: 10.1109/ICPR48806.2021.9411919. Repo here

Return