{"id":27026865,"url":"https://github.com/serengil/deepface-react-ui","last_synced_at":"2025-04-04T23:16:13.712Z","repository":{"id":244127754,"uuid":"813835351","full_name":"serengil/deepface-react-ui","owner":"serengil","description":"Deep Face Recognition UI With ReactJS","archived":false,"fork":false,"pushed_at":"2025-01-04T18:05:47.000Z","size":713,"stargazers_count":98,"open_issues_count":2,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T14:56:34.070Z","etag":null,"topics":["computer-vision","deep-learning","deepface","face-recognition","facial-recognition","machine-learning"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=WnUVYQP4h44\u0026list=PLsS_1RYmYQQFdWqxQggXHynP1rqaYXv_E\u0026index=1","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serengil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"serengil","patreon":"serengil","buy_me_a_coffee":"serengil"}},"created_at":"2024-06-11T20:49:57.000Z","updated_at":"2025-03-20T08:31:12.000Z","dependencies_parsed_at":"2024-06-20T09:34:25.579Z","dependency_job_id":null,"html_url":"https://github.com/serengil/deepface-react-ui","commit_stats":null,"previous_names":["serengil/deepface-react-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serengil%2Fdeepface-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serengil%2Fdeepface-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serengil%2Fdeepface-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serengil%2Fdeepface-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serengil","download_url":"https://codeload.github.com/serengil/deepface-react-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261594,"owners_count":20910108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computer-vision","deep-learning","deepface","face-recognition","facial-recognition","machine-learning"],"created_at":"2025-04-04T23:16:13.261Z","updated_at":"2025-04-04T23:16:13.707Z","avatar_url":"https://github.com/serengil.png","language":"JavaScript","funding_links":["https://github.com/sponsors/serengil","https://patreon.com/serengil","https://buymeacoffee.com/serengil","https://www.patreon.com/serengil?repo=deepfacereact","https://www.patreon.com/serengil?repo=deepface"],"categories":[],"sub_categories":[],"readme":"# DeepFace React UI\n\n\u003cdiv align=\"center\"\u003e\n\n[![Stars](https://img.shields.io/github/stars/serengil/deepface-react-ui?color=yellow\u0026style=flat\u0026label=%E2%AD%90%20stars)](https://github.com/serengil/deepface-react-ui/stargazers)\n[![License](http://img.shields.io/:license-MIT-green.svg?style=flat)](https://github.com/serengil/deepface-react-ui/blob/main/LICENSE)\n[![DOI](http://img.shields.io/:DOI-10.17671/gazibtd.1399077-blue.svg?style=flat)](https://doi.org/10.17671/gazibtd.1399077)\n\n[![Blog](https://img.shields.io/:blog-sefiks.com-blue.svg?style=flat\u0026logo=wordpress)](https://sefiks.com)\n[![YouTube](https://img.shields.io/:youtube-@sefiks-red.svg?style=flat\u0026logo=youtube)](https://www.youtube.com/@sefiks?sub_confirmation=1)\n[![Twitter](https://img.shields.io/:follow-@serengil-blue.svg?style=flat\u0026logo=x)](https://twitter.com/intent/user?screen_name=serengil)\n\n[![Patreon](https://img.shields.io/:become-patron-f96854.svg?style=flat\u0026logo=patreon)](https://www.patreon.com/serengil?repo=deepfacereact)\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/serengil?logo=GitHub\u0026color=lightgray)](https://github.com/sponsors/serengil)\n[![Buy Me a Coffee](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?logo=buy-me-a-coffee)](https://buymeacoffee.com/serengil)\n\n\u003c/div\u003e\n\ndeepface-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.\n\nFacial 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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/serengil/deepface-react-ui/main/resources/tp.jpg\" width=\"50%\"\u003e\u003c/p\u003e\n\n## Cloning The Service\n\nFirstly, you should clone both deepface and deepface-react-ui repos in same directory.\n\n```shell\n# clone deepface repo\ngit clone https://github.com/serengil/deepface-react-ui.git \\\n    \u0026\u0026 git clone https://github.com/serengil/deepface.git\n```\n\n## Facial Database Configuration\n\nThere 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.\n\n```yaml\n# define your facial database\nREACT_APP_USER_ALICE=data:image/png;base64,...\nREACT_APP_USER_BOB=data:image/png;base64,...\nREACT_APP_USER_CAROL=data:image/png;base64,...\n```\n\n## Model Configuration (Optional)\n\nDeepFace 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.\n\nSimilarly, 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`.\n\nBoth facial recognition models and face detectors can be set in the `.env` file.\n\n```yaml\n# Set facial recognition model: VGG-Face, Facenet, Facenet512, OpenFace, DeepFace, DeepId, ArcFace, Dlib, SFace, GhostFaceNet\nREACT_APP_FACE_RECOGNITION_MODEL=Facenet\n\n# Set face detector: opencv, ssd, mtcnn, dlib, mediapipe, retinaface, yolov8, yunet, centerface\nREACT_APP_DETECTOR_BACKEND=opencv\n\n# Set distance metric: cosine, euclidean, euclidean_l2\nREACT_APP_DISTANCE_METRIC=cosine\n```\n\n## Running Service Directly\n\nFirstly, you should run the deepface service as\n\n```shell\n# go to project's directory\ncd deepface/scripts\n\n# run the dockerized service\n./dockerize.sh\n\n# or instead of running dockerized service, run it directly if you installed requirements.txt\n# ./service.sh\n```\n\nIn seperate terminal, you should run deepface react ui as\n\n```shell\n# go to project's directory\ncd deepface-react-ui/scripts\n\n# run the dockerized service\n./dockerize.sh\n\n# or instead of running dockerized service, run it directly\n# ./service.sh\n```\n\n## Running via Docker Compose\n\nInstead of running deepface and deepface react ui seperately in different terminals, you can run the standalone docker compose.\n\n```shell\n# clone source code\ngit clone https://github.com/serengil/deepface-react-ui.git \\\n    \u0026\u0026 git clone https://github.com/serengil/deepface.git\n\n# go to project's directory\ncd deepface-react-ui/scripts\n\n# run services\n./compose.sh\n```\n\n## Using The App - [`Demo`](https://youtu.be/IXoah6rhxac)\n\nOnce 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/`.\n\nTo 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.\n\n## Facial Attribute Analysis - [`Demo`](https://youtu.be/_waBA-cH2D4)\n\nUI also supports demography analysis including age, gender, emotion and race \u0026 ethnicity prediction tasks.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/serengil/deepface-react-ui/main/resources/demography.jpg\" width=\"50%\"\u003e\u003c/p\u003e\n\n## Support\n\nThere are many ways to support a project - starring⭐️ the GitHub repo is just one 🙏\n\nIf 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).\n\n\u003ca href=\"https://www.patreon.com/serengil?repo=deepface\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/serengil/deepface/master/icon/patreon.png\" width=\"30%\" height=\"30%\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://buymeacoffee.com/serengil\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/serengil/deepface/master/icon/bmc-button.png\" width=\"25%\" height=\"25%\"\u003e\n\u003c/a\u003e\n\n# Citation\n\nPlease cite deepface-react-ui in your publications if it helps your research. Here is its BibTex entry:\n\n```BibTeX\n@article{serengil2024lightface,\n  title     = {A Benchmark of Facial Recognition Pipelines and Co-Usability Performances of Modules},\n  author    = {Serengil, Sefik and Ozpinar, Alper},\n  journal   = {Journal of Information Technologies},\n  volume    = {17},\n  number    = {2},\n  pages     = {95-107},\n  year      = {2024},\n  doi       = {10.17671/gazibtd.1399077},\n  url       = {https://dergipark.org.tr/en/pub/gazibtd/issue/84331/1399077},\n  publisher = {Gazi University}\n}\n```\n\n## Licence\n\nDeepFace React UI is licensed under the MIT License - see [`LICENSE`](https://github.com/serengil/deepface-react-ui/blob/main/LICENSE) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserengil%2Fdeepface-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserengil%2Fdeepface-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserengil%2Fdeepface-react-ui/lists"}