recognize-commercial-github.mp4
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.
Features | Users | Admin | Website |
---|---|---|---|
Users' Registration | ✔️ | ✔️ | ✔️ |
Users' Login/Logout | ✔️ | ✔️ | ✔️ |
Reset Password | ✔️ | ✔️ | ✔️ |
Add/Edit Users | ❌ | ✔️ | ➖ |
Dashboard (Studio) | ✔️ | ✔️ | ✔️ |
Upload Photos | ✔️ | ✔️ | ✔️ |
Analyze Photos with AI | ✔️ | ✔️ | ✔️ |
Store Photos | ❌ | ❌ | ❌ |
Credit/Debit card payment | ✔️ | ✔️ | ✔️ |
API key access | ✔️ | ✔️ | ✔️ |
API Consumption tracking | ✔️ | ✔️ | ✔️ |
Terms & Condition | ➖ | ✔️ | ✔️ |
Privacy & Policy | ➖ | ✔️ | ✔️ |
Newsletter Subscription | ➖ | ✔️ | ✔️ |
FAQs | ➖ | ✔️ | ✔️ |
└── 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
backend
File | Summary |
---|---|
Dockerfile | HTTP error 401 for prompt backend/Dockerfile |
.editorconfig | HTTP error 401 for prompt backend/.editorconfig |
Makefile | HTTP error 401 for prompt backend/Makefile |
.env.example | HTTP error 401 for prompt backend/.env.example |
pyproject.toml | HTTP error 401 for prompt backend/pyproject.toml |
manage.py | HTTP error 401 for prompt backend/manage.py |
requirements.txt | HTTP error 401 for prompt backend/requirements.txt |
backend.home
File | Summary |
---|---|
urls.py | HTTP error 401 for prompt backend/home/urls.py |
backend.home.wsgi
File | Summary |
---|---|
dev.py | HTTP error 401 for prompt backend/home/wsgi/dev.py |
prod.py | HTTP error 401 for prompt backend/home/wsgi/prod.py |
backend.home.settings
File | Summary |
---|---|
base.py | HTTP error 401 for prompt backend/home/settings/base.py |
dev.py | HTTP error 401 for prompt backend/home/settings/dev.py |
prod.py | HTTP error 401 for prompt backend/home/settings/prod.py |
backend.core
File | Summary |
---|---|
serializers.py | HTTP error 401 for prompt backend/core/serializers.py |
permissions.py | HTTP error 401 for prompt backend/core/permissions.py |
admin.py | HTTP error 401 for prompt backend/core/admin.py |
apps.py | HTTP error 401 for prompt backend/core/apps.py |
tests.py | HTTP error 401 for prompt backend/core/tests.py |
views.py | HTTP error 401 for prompt backend/core/views.py |
delete.py | HTTP error 401 for prompt backend/core/delete.py |
urls.py | HTTP error 401 for prompt backend/core/urls.py |
models.py | HTTP error 401 for prompt backend/core/models.py |
emotion_detection.py | HTTP error 401 for prompt backend/core/emotion_detection.py |
backend.core.management.commands
File | Summary |
---|---|
superuser.py | HTTP error 401 for prompt backend/core/management/commands/superuser.py |
frontend
File | Summary |
---|---|
Dockerfile | HTTP error 401 for prompt frontend/Dockerfile |
package.json | HTTP error 401 for prompt frontend/package.json |
.env.example | HTTP error 401 for prompt frontend/.env.example |
tailwind.config.js | HTTP error 401 for prompt frontend/tailwind.config.js |
cypress.config.js | HTTP error 401 for prompt frontend/cypress.config.js |
frontend.cypress.integration
File | Summary |
---|---|
test_integration | HTTP error 401 for prompt frontend/cypress/integration/test_integration |
frontend.cypress.support
File | Summary |
---|---|
test_support | HTTP error 401 for prompt frontend/cypress/support/test_support |
frontend.cypress.features
File | Summary |
---|---|
test_features | HTTP error 401 for prompt frontend/cypress/features/test_features |
frontend.public
File | Summary |
---|---|
index.html | HTTP error 401 for prompt frontend/public/index.html |
manifest.json | HTTP error 401 for prompt frontend/public/manifest.json |
frontend.src
File | Summary |
---|---|
constants.js | HTTP error 401 for prompt frontend/src/constants.js |
utils.js | HTTP error 401 for prompt frontend/src/utils.js |
registerServiceWorker.js | HTTP error 401 for prompt frontend/src/registerServiceWorker.js |
App.js | HTTP error 401 for prompt frontend/src/App.js |
routes.js | HTTP error 401 for prompt frontend/src/routes.js |
index.js | HTTP error 401 for prompt frontend/src/index.js |
frontend.src.hoc
File | Summary |
---|---|
hoc.js | HTTP error 401 for prompt frontend/src/hoc/hoc.js |
frontend.src.store
File | Summary |
---|---|
utility.js | HTTP error 401 for prompt frontend/src/store/utility.js |
frontend.src.store.reducers
File | Summary |
---|---|
auth.js | HTTP error 401 for prompt frontend/src/store/reducers/auth.js |
frontend.src.store.actions
File | Summary |
---|---|
auth.js | HTTP error 401 for prompt frontend/src/store/actions/auth.js |
actionTypes.js | HTTP error 401 for prompt frontend/src/store/actions/actionTypes.js |
frontend.src.__tests__
File | Summary |
---|---|
App.test.js | HTTP error 401 for prompt frontend/src/__tests__/App.test.js |
frontend.src.__tests__.containers
File | Summary |
---|---|
containers.test.js | HTTP error 401 for prompt frontend/src/__tests__/containers/containers.test.js |
frontend.src.__tests__.containers.Account
File | Summary |
---|---|
Account.test.js | HTTP error 401 for prompt frontend/src/__tests__/containers/Account/Account.test.js |
frontend.src.__tests__.containers.Layout
File | Summary |
---|---|
Layout.test.js | HTTP error 401 for prompt frontend/src/__tests__/containers/Layout/Layout.test.js |
frontend.src.containers
File | Summary |
---|---|
Signup.js | HTTP error 401 for prompt frontend/src/containers/Signup.js |
Login.js | HTTP error 401 for prompt frontend/src/containers/Login.js |
Contact.js | HTTP error 401 for prompt frontend/src/containers/Contact.js |
CustomLoginForm.js | HTTP error 401 for prompt frontend/src/containers/CustomLoginForm.js |
Steps.js | HTTP error 401 for prompt frontend/src/containers/Steps.js |
InviteDemo.js | HTTP error 401 for prompt frontend/src/containers/InviteDemo.js |
EyeSlash.js | HTTP error 401 for prompt frontend/src/containers/EyeSlash.js |
Footer.js | HTTP error 401 for prompt frontend/src/containers/Footer.js |
Demo.js | HTTP error 401 for prompt frontend/src/containers/Demo.js |
CustomSignupForm.js | HTTP error 401 for prompt frontend/src/containers/CustomSignupForm.js |
Eye.js | HTTP error 401 for prompt frontend/src/containers/Eye.js |
Layout.js | HTTP error 401 for prompt frontend/src/containers/Layout.js |
LandingPage.jsx.jsx | HTTP error 401 for prompt frontend/src/containers/LandingPage.jsx.jsx |
LandingPage.js | HTTP error 401 for prompt frontend/src/containers/LandingPage.js |
Pricing.js | HTTP error 401 for prompt frontend/src/containers/Pricing.js |
frontend.src.containers.Account
File | Summary |
---|---|
Profile.js | HTTP error 401 for prompt frontend/src/containers/Account/Profile.js |
APIUsage.js | HTTP error 401 for prompt frontend/src/containers/Account/APIUsage.js |
ChangePassword.js | HTTP error 401 for prompt frontend/src/containers/Account/ChangePassword.js |
Chart.js | HTTP error 401 for prompt frontend/src/containers/Account/Chart.js |
Shell.js | HTTP error 401 for prompt frontend/src/containers/Account/Shell.js |
Profile.jsx.jsx | HTTP error 401 for prompt frontend/src/containers/Account/Profile.jsx.jsx |
Completion.js | HTTP error 401 for prompt frontend/src/containers/Account/Completion.js |
ChangeEmail.js | HTTP error 401 for prompt frontend/src/containers/Account/ChangeEmail.js |
Payment.js | HTTP error 401 for prompt frontend/src/containers/Account/Payment.js |
SubscribeForm.js | HTTP error 401 for prompt frontend/src/containers/Account/SubscribeForm.js |
APIKey.js | HTTP error 401 for prompt frontend/src/containers/Account/APIKey.js |
CheckoutForm.js | HTTP error 401 for prompt frontend/src/containers/Account/CheckoutForm.js |
Billing.js | HTTP error 401 for prompt frontend/src/containers/Account/Billing.js |
Studio.js | HTTP error 401 for prompt frontend/src/containers/Account/Studio.js |
Checkout.js | HTTP error 401 for prompt frontend/src/containers/Account/Checkout.js |
frontend.src.containers.Layout
File | Summary |
---|---|
DesktopContainer.js | HTTP error 401 for prompt frontend/src/containers/Layout/DesktopContainer.js |
MobileContainer.js | HTTP error 401 for prompt frontend/src/containers/Layout/MobileContainer.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
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
andfront.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 indocker 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 calleduser
, both with password:password
, and run the application inlocalhost: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 'admin@example.com'
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 honeypothttp://localhost:8000/rest-auth/registration/
: To loginhttp://localhost:8000/api-auth/login/?next=/api/demo/
: To register an accounthttp://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.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your GitHub account.
- Clone Locally: Clone the forked repository to your local machine using a Git client.
git clone https://github.com/jatolentino/AI-Facial-recognition
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.'
- Push to GitHub: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Once your PR is reviewed and approved, it will be merged into the main branch.
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