React_DjangoRF

Photo gallery web application deployed with docker that auto detects the faces on the images and label them when uploaded with the name of the person.

Preview

This is how the application looks, it shows the process of upload an image.

This is what the backend is actually getting.

Features

Service	Description
Layout	The container of the application
Gallery	Where all images are displayed with tags
Login	Regular login with JWT
Register	Regular register with JWT
Face Recognition	When a image is uploaded, it automatically detects the face and labels it(if there are any match)

Technologies

Frontend

• React - The frontend library
• Redux - A predictable state container
• MaterialUI - User Interface
• react-grid-gallery - GooglePhotos gallery
• notistack - Notifications
• toastr - Notifications

Backend

• Django Rest Framework - The backend(API REST)
• pyJWT - Auth tokens
• psycopg2 - Connection with database

Face recognition (codebase)

• opencv-python - Open Source Computer Vision Library
• dlib - C++ toolkit containing machine learning algorithms
• face-recognition - Face recognition API
• numpy - Scientific computing library
• Pillow - Python Imaging Library

Deploy

• Docker - Containers

Database

• PostgreSQL - Relational database

Deploying the backend to support GPU processing

Docker compose

Version of docker-compose:

version: "2.3"

Ubuntu with CUDA and CUDNN

image: nvidia/cuda:10.1-cudnn7-devel

Runtime (this is the reason to use v2.3):

runtime: "nvidia"

Environment variables:

environment:
      - NVIDIA_VISIBLE_DEVICES=all

Sharing host's GPU with the container:

    devices:
      - /dev/nvidia0:/dev/nvidia0
      - /dev/nvidiactl:/dev/nvidiactl
      - /dev/nvidia-modeset:/dev/nvidia-modeset

Files

(In backend/utils/face_recognition)

encode_faces.py: Script to encode the faces of the datasets into files(pickle)

lib_detect_faces.py: Library that recognize the faces on the image

image_resizer.py: Script that reduce the size of the image(My 2GB GPU cannot process a big image)

increase_dataset.py: It generates extra images from a image base, modifying each image and adding zooms, flips, deformations...

The other files aren't in use rigth now.

File structure

.
├── backend
│   ├── apps
│   │   ├── authentication
│   │   ├── core
│   │   ├── profiles
│   │   └── userimages
│   │       
│   ├── images
│   └── utils
│       └── face_recognition
│           ├── dataset
│           │   ├── jordi
│           │   └── raul
│           ├── output
│           └── pickles
│
├── frontend
│   ├── public
│   └── src
│       ├── components
│       │   ├── Auth
│       │   ├── Common
│       │   ├── Layout
│       │   └── Photos
│       ├── constants
│       └── reducers
└── readme_media