https://github.com/serengil/deepface-react-ui
Deep Face Recognition UI With ReactJS
https://github.com/serengil/deepface-react-ui
computer-vision deep-learning deepface face-recognition facial-recognition machine-learning
Last synced: 6 months ago
JSON representation
Deep Face Recognition UI With ReactJS
- Host: GitHub
- URL: https://github.com/serengil/deepface-react-ui
- Owner: serengil
- License: mit
- Created: 2024-06-11T20:49:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-04T18:05:47.000Z (9 months ago)
- Last Synced: 2025-03-27T14:56:34.070Z (6 months ago)
- Topics: computer-vision, deep-learning, deepface, face-recognition, facial-recognition, machine-learning
- Language: JavaScript
- Homepage: https://www.youtube.com/watch?v=WnUVYQP4h44&list=PLsS_1RYmYQQFdWqxQggXHynP1rqaYXv_E&index=1
- Size: 696 KB
- Stars: 98
- Watchers: 1
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# DeepFace React UI
[](https://github.com/serengil/deepface-react-ui/stargazers)
[](https://github.com/serengil/deepface-react-ui/blob/main/LICENSE)
[](https://doi.org/10.17671/gazibtd.1399077)
[](https://sefiks.com)
[](https://www.youtube.com/@sefiks?sub_confirmation=1)
[](https://twitter.com/intent/user?screen_name=serengil)
[](https://www.patreon.com/serengil?repo=deepfacereact)
[](https://github.com/sponsors/serengil)
[](https://buymeacoffee.com/serengil)
deepface-react-ui is a comprehensive user interface for facial recognition and facial attribute analysis (age, gender, emotion and race prediction) built with ReactJS, designed specifically for streamlined face verification tasks using the [DeepFace](https://github.com/serengil/deepface) library. This UI not only simplifies the implementation of facial recognition features but also enhances security with built-in [anti-spoofing](https://youtu.be/UiK1aIjOBlQ) capabilities. Whether you're working on identity verification systems, security applications, or simply exploring facial recognition technology, this UI provides an intuitive platform to harness the power of DeepFace within your web applications.
Facial recognition technology plays a pivotal role in modern applications, from enhancing security measures to enabling personalized user experiences. The deepface-react-ui empowers developers and researchers to harness these capabilities effortlessly within their web applications.
## Cloning The Service
Firstly, you should clone both deepface and deepface-react-ui repos in same directory.
```shell
# clone deepface repo
git clone https://github.com/serengil/deepface-react-ui.git \
&& git clone https://github.com/serengil/deepface.git
```
## Facial Database Configuration
There is `.env.example` file in the root of the project. You should copy this as `.env`. Required modifications are mentioned as comments. You basically need to add your facial database items into this file, prefixing each with `REACT_APP_USER_`, where the identity name with that prefix serves as the key and the base64-encoded string of their images serves as the value.
```yaml
# define your facial database
REACT_APP_USER_ALICE=data:image/png;base64,...
REACT_APP_USER_BOB=data:image/png;base64,...
REACT_APP_USER_CAROL=data:image/png;base64,...
```
## Model Configuration (Optional)
DeepFace wraps many state-of-the-art facial recognition models: [`VGG-Face`](https://sefiks.com/2018/08/06/deep-face-recognition-with-keras/), [`FaceNet`](https://sefiks.com/2018/09/03/face-recognition-with-facenet-in-keras/), [`OpenFace`](https://sefiks.com/2019/07/21/face-recognition-with-openface-in-keras/), [`DeepFace`](https://sefiks.com/2020/02/17/face-recognition-with-facebook-deepface-in-keras/), [`DeepID`](https://sefiks.com/2020/06/16/face-recognition-with-deepid-in-keras/), [`ArcFace`](https://sefiks.com/2020/12/14/deep-face-recognition-with-arcface-in-keras-and-python/), [`Dlib`](https://sefiks.com/2020/07/11/face-recognition-with-dlib-in-python/), `SFace` and `GhostFaceNet`. According to [`experiments`](https://github.com/serengil/deepface/tree/master/benchmarks), those models reached or passed human-level accuracy.
Similarly, it wraps many cutting-edge face detectors: [`OpenCV`](https://sefiks.com/2020/02/23/face-alignment-for-face-recognition-in-python-within-opencv/), [`Ssd`](https://sefiks.com/2020/08/25/deep-face-detection-with-opencv-in-python/), [`Dlib`](https://sefiks.com/2020/07/11/face-recognition-with-dlib-in-python/), [`MtCnn`](https://sefiks.com/2020/09/09/deep-face-detection-with-mtcnn-in-python/), `Faster MtCnn`, [`RetinaFace`](https://sefiks.com/2021/04/27/deep-face-detection-with-retinaface-in-python/), [`MediaPipe`](https://sefiks.com/2022/01/14/deep-face-detection-with-mediapipe/), `Yolo`, `YuNet` and `CenterFace`.
Both facial recognition models and face detectors can be set in the `.env` file.
```yaml
# Set facial recognition model: VGG-Face, Facenet, Facenet512, OpenFace, DeepFace, DeepId, ArcFace, Dlib, SFace, GhostFaceNet
REACT_APP_FACE_RECOGNITION_MODEL=Facenet
# Set face detector: opencv, ssd, mtcnn, dlib, mediapipe, retinaface, yolov8, yunet, centerface
REACT_APP_DETECTOR_BACKEND=opencv
# Set distance metric: cosine, euclidean, euclidean_l2
REACT_APP_DISTANCE_METRIC=cosine
```
## Running Service Directly
Firstly, you should run the deepface service as
```shell
# go to project's directory
cd deepface/scripts
# run the dockerized service
./dockerize.sh
# or instead of running dockerized service, run it directly if you installed requirements.txt
# ./service.sh
```
In seperate terminal, you should run deepface react ui as
```shell
# go to project's directory
cd deepface-react-ui/scripts
# run the dockerized service
./dockerize.sh
# or instead of running dockerized service, run it directly
# ./service.sh
```
## Running via Docker Compose
Instead of running deepface and deepface react ui seperately in different terminals, you can run the standalone docker compose.
```shell
# clone source code
git clone https://github.com/serengil/deepface-react-ui.git \
&& git clone https://github.com/serengil/deepface.git
# go to project's directory
cd deepface-react-ui/scripts
# run services
./compose.sh
```
## Using The App - [`Demo`](https://youtu.be/IXoah6rhxac)
Once you start the service, the DeepFace service will be accessible at `http://localhost:5005/`, and the DeepFace React UI will be available at `http://localhost:3000/`.
To use the DeepFace React UI, open `http://localhost:3000/` in your browser. The UI will prompt access to your webcam and search for identities within the current frame using the facial database specified in the `.env` file when you click on the "Verify" button.
## Facial Attribute Analysis - [`Demo`](https://youtu.be/_waBA-cH2D4)
UI also supports demography analysis including age, gender, emotion and race & ethnicity prediction tasks.
## Support
There are many ways to support a project - starring⭐️ the GitHub repo is just one 🙏
If you do like this work, then you can support it on [Patreon](https://www.patreon.com/serengil?repo=deepface), [GitHub Sponsors](https://github.com/sponsors/serengil) or [Buy Me a Coffee](https://buymeacoffee.com/serengil).
# Citation
Please cite deepface-react-ui in your publications if it helps your research. Here is its BibTex entry:
```BibTeX
@article{serengil2024lightface,
title = {A Benchmark of Facial Recognition Pipelines and Co-Usability Performances of Modules},
author = {Serengil, Sefik and Ozpinar, Alper},
journal = {Journal of Information Technologies},
volume = {17},
number = {2},
pages = {95-107},
year = {2024},
doi = {10.17671/gazibtd.1399077},
url = {https://dergipark.org.tr/en/pub/gazibtd/issue/84331/1399077},
publisher = {Gazi University}
}
```
## Licence
DeepFace React UI is licensed under the MIT License - see [`LICENSE`](https://github.com/serengil/deepface-react-ui/blob/main/LICENSE) for more details.