├── LICENSE
├── README.md
├── backend
    ├── main.py
    └── requirements.txt
└── frontend
    └── face-attendance-web-app-front
        ├── assets
            └── imgs
            │   ├── accept_button.png
            │   ├── admin_button.png
            │   ├── bkg.jpg
            │   ├── cancel_button.png
            │   ├── download_logs_icon.png
            │   ├── go_back_button.png
            │   ├── login_button.png
            │   ├── logout_button.png
            │   └── register_new_user_button.png
        ├── package-lock.json
        ├── package.json
        ├── public
            ├── favicon.ico
            ├── index.html
            ├── logo192.png
            ├── logo512.png
            ├── manifest.json
            └── robots.txt
        └── src
            ├── API.js
            ├── App.css
            ├── App.js
            ├── MasterComponent.js
            ├── index.css
            └── index.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Computer vision developer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # face-attendance-web-app-react-python
  2 | 
  3 | <p align="center">
  4 | <a href="https://www.youtube.com/watch?v=yWmW5uEtNws">
  5 |     <img width="600" src="https://utils-computervisiondeveloper.s3.amazonaws.com/thumbnails/with_play_button/face_attendance_web_app_react_python.jpg" alt="Watch the video">
  6 |     </br>Watch on YouTube: Face attendance + face recognition web app with React and Python !
  7 | </a>
  8 | </p>
  9 | 
 10 | ## deployment
 11 | 
 12 | ### backend
 13 | 
 14 | #### setup server
 15 | 
 16 | Log into your AWS account and launch a t2.2xlarge EC2 instance, using the latest stable Ubuntu image.
 17 | 
 18 | SSH into the instance and run these commands to update the software repository and install the dependencies.
 19 | 
 20 |     sudo apt-get update
 21 |     sudo apt install -y python3-pip nginx
 22 | 
 23 |     sudo nano /etc/nginx/sites-enabled/fastapi_nginx
 24 | 
 25 | And put this config into the file (replace the IP address with your EC2 instance's public IP):
 26 | 
 27 |     server {
 28 |         listen 80;   
 29 |         server_name <YOUR_EC2_IP>;    
 30 |         location / {        
 31 |             proxy_pass http://127.0.0.1:8000;    
 32 |         }
 33 |     }
 34 | 
 35 |     sudo service nginx restart
 36 |     
 37 |  Update EC2 security-group settings for your instance to allow HTTP traffic to port 80.
 38 |     
 39 |  #### Launch API endpoints
 40 |  
 41 |  Clone repository.
 42 |  
 43 |     git clone https://github.com/computervisiondeveloper/face-attendance-web-app-react-python.git
 44 |    
 45 |     cd face-attendance-web-app-react-python
 46 |     
 47 | Install Python 3.8, create a virtual environment and install requirements.
 48 | 
 49 |     sudo apt update
 50 | 
 51 |     sudo apt install software-properties-common
 52 | 
 53 |     sudo add-apt-repository ppa:deadsnakes/ppa
 54 | 
 55 |     sudo apt install python3.8
 56 | 
 57 |     sudo apt install python3.8-dev
 58 | 
 59 |     sudo apt install python3.8-distutils
 60 | 
 61 |     sudo apt install python3-virtualenv
 62 |     
 63 |     cd backend
 64 | 
 65 |     virtualenv venv --python=python3.8
 66 | 
 67 |     source venv/bin/activate
 68 |     
 69 |     pip install cmake==3.25.0
 70 | 
 71 |     pip install -r requirements.txt
 72 |     
 73 | Launch app.
 74 | 
 75 |     python3 -m uvicorn main:app
 76 |     
 77 |     
 78 | ### frontend
 79 | 
 80 | You can host the frontend locally (localhost) or on a server. These are instructions in case you decide to do it on a server.
 81 | 
 82 | #### setup server
 83 | 
 84 | The process is similar as in the previous case.
 85 |   
 86 | Launch a t2.large instance from AWS.
 87 | 
 88 | SSH into the instance and run the same commands as in the backend section to install nginx.
 89 | 
 90 | The app will be launched in the port 3000, so you need to make a small adjustment in the config file.
 91 | 
 92 |     server {
 93 |         listen 80;   
 94 |         server_name <YOUR_EC2_IP>;    
 95 |         location / {        
 96 |             proxy_pass http://127.0.0.1:3000;    
 97 |         }
 98 |     }
 99 | 
100 | 
101 |     sudo service nginx restart
102 |     
103 | Update EC2 security-group settings for your instance to allow HTTP traffic to port 80.
104 |  
105 | #### Launch App
106 |  
107 |     git clone https://github.com/computervisiondeveloper/face-attendance-web-app-react-python.git
108 |    
109 |     cd face-attendance-web-app-react-python
110 |     
111 |     cd frontend/face-attendance-web-app-front/
112 |     
113 |     sudo apt-get install npm
114 |     
115 |     npm install
116 |     
117 |     npm start
118 | 
119 | Edit the value of __API_BASE_URL__ in src/API.js with the ip of the backend server.
120 | 
121 | You may need to adjust your browser to allow access to your webcam through an unsecure conection from the EC2 ip address. In chrome this setting is adjusted here __chrome://flags/#unsafely-treat-insecure-origin-as-secure__.
122 | 


--------------------------------------------------------------------------------
/backend/main.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | import string
  3 | import urllib
  4 | import uuid
  5 | import pickle
  6 | import datetime
  7 | import time
  8 | import shutil
  9 | 
 10 | import cv2
 11 | from fastapi import FastAPI, File, UploadFile, Form, UploadFile, Response
 12 | from fastapi.responses import FileResponse
 13 | from fastapi.middleware.cors import CORSMiddleware
 14 | import face_recognition
 15 | import starlette
 16 | 
 17 | 
 18 | ATTENDANCE_LOG_DIR = './logs'
 19 | DB_PATH = './db'
 20 | for dir_ in [ATTENDANCE_LOG_DIR, DB_PATH]:
 21 |     if not os.path.exists(dir_):
 22 |         os.mkdir(dir_)
 23 | 
 24 | app = FastAPI()
 25 | 
 26 | origins = ["*"]
 27 | 
 28 | app.add_middleware(
 29 |     CORSMiddleware,
 30 |     allow_origins=origins,
 31 |     allow_credentials=True,
 32 |     allow_methods=["*"],
 33 |     allow_headers=["*"],
 34 | )
 35 | 
 36 | 
 37 | @app.post("/login")
 38 | async def login(file: UploadFile = File(...)):
 39 | 
 40 |     file.filename = f"{uuid.uuid4()}.png"
 41 |     contents = await file.read()
 42 | 
 43 |     # example of how you can save the file
 44 |     with open(file.filename, "wb") as f:
 45 |         f.write(contents)
 46 | 
 47 |     user_name, match_status = recognize(cv2.imread(file.filename))
 48 | 
 49 |     if match_status:
 50 |         epoch_time = time.time()
 51 |         date = time.strftime('%Y%m%d', time.localtime(epoch_time))
 52 |         with open(os.path.join(ATTENDANCE_LOG_DIR, '{}.csv'.format(date)), 'a') as f:
 53 |             f.write('{},{},{}\n'.format(user_name, datetime.datetime.now(), 'IN'))
 54 |             f.close()
 55 | 
 56 |     return {'user': user_name, 'match_status': match_status}
 57 | 
 58 | 
 59 | @app.post("/logout")
 60 | async def logout(file: UploadFile = File(...)):
 61 | 
 62 |     file.filename = f"{uuid.uuid4()}.png"
 63 |     contents = await file.read()
 64 | 
 65 |     # example of how you can save the file
 66 |     with open(file.filename, "wb") as f:
 67 |         f.write(contents)
 68 | 
 69 |     user_name, match_status = recognize(cv2.imread(file.filename))
 70 | 
 71 |     if match_status:
 72 |         epoch_time = time.time()
 73 |         date = time.strftime('%Y%m%d', time.localtime(epoch_time))
 74 |         with open(os.path.join(ATTENDANCE_LOG_DIR, '{}.csv'.format(date)), 'a') as f:
 75 |             f.write('{},{},{}\n'.format(user_name, datetime.datetime.now(), 'OUT'))
 76 |             f.close()
 77 | 
 78 |     return {'user': user_name, 'match_status': match_status}
 79 | 
 80 | 
 81 | @app.post("/register_new_user")
 82 | async def register_new_user(file: UploadFile = File(...), text=None):
 83 |     file.filename = f"{uuid.uuid4()}.png"
 84 |     contents = await file.read()
 85 | 
 86 |     # example of how you can save the file
 87 |     with open(file.filename, "wb") as f:
 88 |         f.write(contents)
 89 | 
 90 |     shutil.copy(file.filename, os.path.join(DB_PATH, '{}.png'.format(text)))
 91 | 
 92 |     embeddings = face_recognition.face_encodings(cv2.imread(file.filename))
 93 | 
 94 |     file_ = open(os.path.join(DB_PATH, '{}.pickle'.format(text)), 'wb')
 95 |     pickle.dump(embeddings, file_)
 96 |     print(file.filename, text)
 97 | 
 98 |     os.remove(file.filename)
 99 | 
100 |     return {'registration_status': 200}
101 | 
102 | 
103 | @app.get("/get_attendance_logs")
104 | async def get_attendance_logs():
105 | 
106 |     filename = 'out.zip'
107 | 
108 |     shutil.make_archive(filename[:-4], 'zip', ATTENDANCE_LOG_DIR)
109 | 
110 |     ##return File(filename, filename=filename, content_type="application/zip", as_attachment=True)
111 |     return starlette.responses.FileResponse(filename, media_type='application/zip',filename=filename)
112 | 
113 | 
114 | def recognize(img):
115 |     # it is assumed there will be at most 1 match in the db
116 | 
117 |     embeddings_unknown = face_recognition.face_encodings(img)
118 |     if len(embeddings_unknown) == 0:
119 |         return 'no_persons_found', False
120 |     else:
121 |         embeddings_unknown = embeddings_unknown[0]
122 | 
123 |     match = False
124 |     j = 0
125 | 
126 |     db_dir = sorted([j for j in os.listdir(DB_PATH) if j.endswith('.pickle')])
127 |     # db_dir = sorted(os.listdir(DB_PATH))    
128 |     print(db_dir)
129 |     while ((not match) and (j < len(db_dir))):
130 | 
131 |         path_ = os.path.join(DB_PATH, db_dir[j])
132 | 
133 |         file = open(path_, 'rb')
134 |         embeddings = pickle.load(file)[0]
135 | 
136 |         match = face_recognition.compare_faces([embeddings], embeddings_unknown)[0]
137 | 
138 |         j += 1
139 | 
140 |     if match:
141 |         return db_dir[j - 1][:-7], True
142 |     else:
143 |         return 'unknown_person', False
144 | 
145 | 
146 | 


--------------------------------------------------------------------------------
/backend/requirements.txt:
--------------------------------------------------------------------------------
1 | opencv-python-headless==4.8.1.78
2 | fastapi==0.109.1
3 | face-recognition==1.3.0
4 | cmake==3.25.0
5 | python-multipart==0.0.7
6 | uvicorn==0.20.0
7 | 
8 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/accept_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/accept_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/admin_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/admin_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/bkg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/bkg.jpg


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/cancel_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/cancel_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/download_logs_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/download_logs_icon.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/go_back_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/go_back_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/login_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/login_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/logout_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/logout_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/assets/imgs/register_new_user_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/assets/imgs/register_new_user_button.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "face-attendance-web-app-front",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^1.2.2",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/public/logo192.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/computervisioneng/face-attendance-web-app-react-python/51b4ede4aac467559232a63a849b75f557fae57e/frontend/face-attendance-web-app-front/public/logo512.png


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/API.js:
--------------------------------------------------------------------------------
1 | const API_BASE_URL = "YOUR_API_HERE";
2 | export default API_BASE_URL;
3 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/App.css:
--------------------------------------------------------------------------------
  1 | /* Style for the entire application */
  2 | body {
  3 |   margin: 0;
  4 |   font-family: Arial, Helvetica, sans-serif;
  5 |   background-image: url(../assets/imgs/bkg.jpg);
  6 |   background-size: cover;
  7 | }
  8 | 
  9 | /* Style for the App component container */
 10 | .app {
 11 |   width: 100%; /* Set width to 100% */
 12 |   height: 100vh; /* Fix the height */
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: center;
 16 |   margin:0; /* Remove margins */
 17 | }
 18 | 
 19 | /* Style for the MasterComponent container */
 20 | .master-component {
 21 |   display: flex;
 22 |   margin: 50px;
 23 |   height: 600px;
 24 | }
 25 | 
 26 | /* Style for the Webcam component container */
 27 | .webcam {
 28 |   display: flex;
 29 |   align-items: center;
 30 |   justify-content: center;
 31 | }
 32 | 
 33 | .img {
 34 |   width: 800px;
 35 |   height: 600px;
 36 | }
 37 | 
 38 | video {
 39 |   margin: auto; /* aligns element to center */
 40 |   width: 800px; /*set the width*/
 41 |   height: 600px; /*set the height*/
 42 | }
 43 | 
 44 | 
 45 | canvas {
 46 |   display: none; /* make the canvas not visible */
 47 | }
 48 | 
 49 | .buttons-container {
 50 |   position: relative; /* This is the parent container */
 51 |   flex-direction: column; /* stack them vertically */
 52 |   margin-left: 20px; /* add a margin to separate them from the webcam container */
 53 |   width: 200px;
 54 |   height: 100%;
 55 |   margin-top: auto;
 56 | }
 57 | 
 58 | 
 59 | .register-ok-button {
 60 |   transition-duration: 0.4s;
 61 |   width:100%;
 62 |   height: 200px;
 63 |   font-size: 30px;
 64 |   background-image: url(../assets/imgs/accept_button.png)
 65 | }
 66 | 
 67 | .register-cancel-button {
 68 |   transition-duration: 0.4s;
 69 |   width:100%;
 70 |   height: 200px;
 71 |   font-size: 30px;
 72 |   background-image: url(../assets/imgs/cancel_button.png)
 73 | }
 74 | 
 75 | .login-button {
 76 |   transition-duration: 0.4s;
 77 |   width:100%;
 78 |   height: 200px;
 79 |   font-size: 30px;
 80 |   background-image: url(../assets/imgs/login_button.png)
 81 | 
 82 | }
 83 | 
 84 | .register-button {
 85 |   transition-duration: 0.4s;
 86 |   width:100%;
 87 |   height: 200px;
 88 |   font-size: 30px;
 89 |   background-image: url(../assets/imgs/register_new_user_button.png)
 90 | 
 91 | }
 92 | 
 93 | .goback-button {
 94 |   transition-duration: 0.4s;
 95 |   width:100%;
 96 |   height: 200px;
 97 |   font-size: 30px;
 98 |   background-image: url(../assets/imgs/go_back_button.png)
 99 | 
100 | }
101 | 
102 | .download-button {
103 |   transition-duration: 0.4s;
104 |   width:100%;
105 |   height: 200px;
106 |   font-size: 30px;
107 |   background-image: url(../assets/imgs/download_logs_icon.png)
108 | 
109 | }
110 | 
111 | .login-container {
112 |   z-index: 2;
113 |   position: absolute;
114 |   top: 0;
115 |   left: 0;
116 |   width: 200px;
117 |   height: 100px;
118 | }
119 | 
120 | .goback-container {
121 |   position: absolute;
122 |   top: 400px;
123 |   left: 0;
124 |   width: 200px;
125 |   height: 100px;
126 | }
127 | 
128 | .download-container {
129 |   position: absolute;
130 |   top: 200px;
131 |   left: 0;
132 |   width: 200px;
133 |   height: 100px;
134 | }
135 | 
136 | .register-text-container {
137 |   width: 195px;
138 |   height: 50px;
139 |   position: absolute;
140 |   top: 80px;
141 | 
142 | }
143 | 
144 | .register-text {
145 |   width: 100%;
146 |   height: 100%;
147 |   font-size: 20px;
148 | }
149 | 
150 | 
151 | .register-ok-container {
152 |   position: absolute;
153 |   top: 200px;
154 |   left: 0;
155 |   width: 200px;
156 |   height: 100px;
157 | }
158 | 
159 | .register-container {
160 |   position: absolute;
161 |   top: 0;
162 |   left: 0;
163 |   width: 200px;
164 |   height: 200px;
165 | }
166 | 
167 | .register-cancel-container {
168 |   position: absolute;
169 |   top: 400px;
170 |   left: 0;
171 |   width: 200px;
172 |   height: 100px;
173 | }
174 | 
175 | .login-button:hover {
176 |   background-color: white; /* Green */
177 |   color: black;
178 | }
179 | 
180 | .register-ok:hover {
181 |   background-color: white; /* Green */
182 |   color: black;
183 | }
184 | 
185 | .logout-button {
186 |   transition-duration: 0.4s;
187 |   width:100%;
188 |   height: 200px;
189 |   font-size: 30px;
190 |   background-image: url(../assets/imgs/logout_button.png)
191 | }
192 | 
193 | .logout-button:hover {
194 |   background-color: white; /* Green */
195 |   color: black;
196 | }
197 | 
198 | .logout-container {
199 |   z-index: 2;
200 |   position: absolute;
201 |   top: 200px;
202 |   left: 0;
203 |   width: 200px;
204 |   height: 100px;
205 | } 
206 | 
207 | .admin-button {
208 |   transition-duration: 0.4s;
209 |   width:100%;
210 |   height: 200px;
211 |   font-size: 30px;
212 |   background-image: url(../assets/imgs/admin_button.png)
213 | }
214 | 
215 | .admin-button:hover {
216 |   background-color: white; /* Green */
217 |   color: black;
218 | }
219 | 
220 | .admin-container {
221 |   z-index: 2;
222 |   position: absolute;
223 |   top: 400px;
224 |   left: 0;
225 |   width: 200px;
226 |   height: 100px;
227 | } 
228 | 
229 | 
230 | 
231 | .hidden {
232 |   visibility: hidden;
233 |   transition: visibility 0.05s;
234 | }
235 | 
236 | .visible {
237 |   visibility: visible;
238 |   transition: visibility 0.5s;
239 | }
240 | 
241 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import MasterComponent from "./MasterComponent";
 3 | import "./App.css";
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="app">
 8 |       <MasterComponent />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/MasterComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useEffect, useState } from "react";
  2 | import axios from "axios";
  3 | import API_BASE_URL from "./API";
  4 | 
  5 | let videoRef;
  6 | let canvasRef;
  7 | let context;
  8 | 
  9 | function MasterComponent() {
 10 |   let [lastFrame, setLastFrame] = useState(null);
 11 |   const [showWebcam, setShowWebcam] = useState(true);
 12 |   const [showImg, setShowImg] = useState(false);
 13 | 
 14 |   function register_new_user_ok(text) {
 15 |     if (lastFrame) {
 16 |       const apiUrl = API_BASE_URL + "/register_new_user?text=" + text;
 17 |       console.log(typeof lastFrame);
 18 |       fetch(lastFrame)
 19 |         .then((response) => response.blob())
 20 |         .then((blob) => {
 21 |           const file = new File([blob], "webcam-frame.png", {
 22 |             type: "image/png",
 23 |           });
 24 |           const formData = new FormData();
 25 |           formData.append("file", file);
 26 | 
 27 |           axios
 28 |             .post(apiUrl, formData, {
 29 |               headers: {
 30 |                 "Content-Type": "multipart/form-data",
 31 |               },
 32 |             })
 33 |             .then((response) => {
 34 |               console.log(response.data);
 35 |               if (response.data.registration_status == 200) {
 36 |                 alert("User was registered successfully!");
 37 |               }
 38 |             })
 39 |             .catch((error) => {
 40 |               console.error("Error sending image to API:", error);
 41 |             });
 42 |         });
 43 |     }
 44 |   }
 45 | 
 46 |   async function downloadLogs() {
 47 |     const response = await axios.get(API_BASE_URL + "/get_attendance_logs", {
 48 |       responseType: "blob",
 49 |     });
 50 | 
 51 |     const url = window.URL.createObjectURL(new Blob([response.data]));
 52 |     const link = document.createElement("a");
 53 |     link.href = url;
 54 |     link.setAttribute("download", "logs.zip");
 55 |     document.body.appendChild(link);
 56 |     link.click();
 57 |   }
 58 | 
 59 |   function send_img_login() {
 60 |     if (videoRef.current && canvasRef.current) {
 61 |       context = canvasRef.current.getContext("2d");
 62 |       context.drawImage(videoRef.current, 0, 0, 400, 300);
 63 | 
 64 |       canvasRef.current.toBlob((blob) => {
 65 |         // setLastFrame(URL.createObjectURL(blob));
 66 | 
 67 |         // Your edition here
 68 | 
 69 |         const apiUrl = API_BASE_URL + "/login";
 70 |         const file = new File([blob], "webcam-frame.png", {
 71 |           type: "image/png",
 72 |         });
 73 |         const formData = new FormData();
 74 |         formData.append("file", file);
 75 | 
 76 |         axios
 77 |           .post(apiUrl, formData, {
 78 |             headers: {
 79 |               "Content-Type": "multipart/form-data",
 80 |             },
 81 |           })
 82 |           .then((response) => {
 83 |             console.log(response.data);
 84 |             if (response.data.match_status == true) {
 85 |               alert("Welcome back " + response.data.user + " !");
 86 |             } else {
 87 |               alert("Unknown user! Please try again or register new user!");
 88 |             }
 89 |           })
 90 |           .catch((error) => {
 91 |             console.error("Error sending image to API:", error);
 92 |           });
 93 |       });
 94 |     }
 95 |   }
 96 | 
 97 |   function send_img_logout() {
 98 |     if (videoRef.current && canvasRef.current) {
 99 |       context = canvasRef.current.getContext("2d");
100 |       context.drawImage(videoRef.current, 0, 0, 400, 300);
101 | 
102 |       canvasRef.current.toBlob((blob) => {
103 |         // setLastFrame(URL.createObjectURL(blob));
104 | 
105 |         // Your edition here
106 | 
107 |         const apiUrl = API_BASE_URL + "/logout";
108 |         const file = new File([blob], "webcam-frame.png", {
109 |           type: "image/png",
110 |         });
111 |         const formData = new FormData();
112 |         formData.append("file", file);
113 | 
114 |         axios
115 |           .post(apiUrl, formData, {
116 |             headers: {
117 |               "Content-Type": "multipart/form-data",
118 |             },
119 |           })
120 |           .then((response) => {
121 |             console.log(response.data);
122 |             if (response.data.match_status == true) {
123 |               alert("Goodbye " + response.data.user + " !");
124 |             } else {
125 |               alert("Unknown user! Please try again or register new user!");
126 |             }
127 |           })
128 |           .catch((error) => {
129 |             console.error("Error sending image to API:", error);
130 |           });
131 |       });
132 |     }
133 |   }
134 |   return (
135 |     <div className="master-component">
136 |       {showWebcam ? (
137 |         <Webcam lastFrame={lastFrame} setLastFrame={setLastFrame} />
138 |       ) : (
139 |         <img className="img" src={lastFrame} />
140 |       )}
141 |       <Buttons
142 |         lastFrame={lastFrame}
143 |         setLastFrame={setLastFrame}
144 |         setShowWebcam={setShowWebcam}
145 |         showWebcam={showWebcam}
146 |         setShowImg={setShowImg}
147 |         send_img_login={send_img_login}
148 |         send_img_logout={send_img_logout}
149 |         register_new_user_ok={register_new_user_ok}
150 |         downloadLogs={downloadLogs}
151 |       />
152 |     </div>
153 |   );
154 | }
155 | 
156 | function saveLastFrame(
157 |   canvasRef,
158 |   lastFrame,
159 |   setLastFrame,
160 |   setShowWebcam,
161 |   showWebcam,
162 |   setShowImg
163 | ) {
164 |   requestAnimationFrame(() => {
165 |     console.log(context);
166 | 
167 |     if (!showWebcam && lastFrame) {
168 |       setShowImg(true);
169 |     } else {
170 |       setShowImg(false);
171 |     }
172 | 
173 |     if (videoRef.current && canvasRef.current) {
174 |       context = canvasRef.current.getContext("2d");
175 |       context.drawImage(videoRef.current, 0, 0, 400, 300);
176 | 
177 |       canvasRef.current.toBlob((blob) => {
178 |         setLastFrame(URL.createObjectURL(blob));
179 |         // lastFrame = blob.slice(); // Your edition here
180 |       });
181 |       setShowWebcam(false);
182 |       setShowImg(true);
183 |     }
184 |   }, [showWebcam]);
185 | }
186 | 
187 | function Webcam({ lastFrame, setLastFrame }) {
188 |   videoRef = useRef(null);
189 |   canvasRef = useRef(null);
190 |   const [isStreaming, setIsStreaming] = useState(false);
191 | 
192 |   useEffect(() => {
193 |     const setupCamera = async () => {
194 |       const stream = await navigator.mediaDevices.getUserMedia({ video: true });
195 |       videoRef.current.srcObject = stream;
196 |       setIsStreaming(true);
197 |     };
198 |     if (!isStreaming) {
199 |       setupCamera();
200 |     }
201 |   }, [isStreaming]);
202 | 
203 |   useEffect(() => {
204 |     if (isStreaming) {
205 |       context = canvasRef.current.getContext("2d");
206 |       context.drawImage(videoRef.current, 0, 0, 400, 300);
207 | 
208 |       requestAnimationFrame(() => {
209 |         setTimeout(() => {
210 |           context.drawImage(videoRef.current, 0, 0, 400, 300);
211 | 
212 |           canvasRef.current.toBlob((blob) => {
213 |             setLastFrame(URL.createObjectURL(blob));
214 |             lastFrame = blob.slice(); // Your edition here
215 |           });
216 |         }, 33);
217 |       });
218 |     }
219 |   }, [isStreaming]);
220 | 
221 |   return (
222 |     <div className="webcam">
223 |       <canvas ref={canvasRef} width={400} height={300} />
224 |       <video ref={videoRef} autoPlay playsInline />
225 |     </div>
226 |   );
227 | }
228 | 
229 | function Buttons({
230 |   lastFrame,
231 |   setLastFrame,
232 |   setShowWebcam,
233 |   showWebcam,
234 |   setShowImg,
235 |   send_img_login,
236 |   send_img_logout,
237 |   register_new_user_ok,
238 |   downloadLogs,
239 | }) {
240 |   const [isRegistering, setIsRegistering] = useState(false);
241 |   const [isAdmin, setIsAdmin] = useState(false);
242 | 
243 |   const [zIndexAdmin, setZIndexAdmin] = useState(1);
244 |   const [zIndexRegistering, setZIndexRegistering] = useState(1);
245 | 
246 |   const changeZIndexAdmin = (newZIndex) => {
247 |     setZIndexAdmin(newZIndex);
248 |   };
249 | 
250 |   const changeZIndexRegistering = (newZIndex) => {
251 |     setZIndexRegistering(newZIndex);
252 |   };
253 | 
254 |   const [value, setValue] = useState("");
255 | 
256 |   const handleChange = (event) => {
257 |     setValue(event.target.value);
258 |   };
259 | 
260 |   const resetTextBox = () => {
261 |     setValue("");
262 |   };
263 | 
264 |   return (
265 |     <div className="buttons-container">
266 |       <div
267 |         className={`${
268 |           isRegistering ? "visible" : "hidden"
269 |         } register-text-container`}
270 |         style={{
271 |           zIndex: zIndexRegistering,
272 |         }}
273 |       >
274 |         <input
275 |           className="register-text"
276 |           type="text"
277 |           placeholder="Enter user name"
278 |           value={value}
279 |           onChange={handleChange}
280 |         />
281 |       </div>
282 |       <div
283 |         className="register-ok-container"
284 |         style={{
285 |           zIndex: zIndexRegistering,
286 |         }}
287 |       >
288 |         <button
289 |           className={`${
290 |             isRegistering ? "visible" : "hidden"
291 |           } register-ok-button`}
292 |           onClick={async () => {
293 |             setIsAdmin(false);
294 |             setIsRegistering(false);
295 | 
296 |             changeZIndexAdmin(1);
297 |             changeZIndexRegistering(1);
298 | 
299 |             setShowWebcam(true);
300 |             setShowImg(false);
301 |             register_new_user_ok(value);
302 |           }}
303 |         ></button>
304 |       </div>
305 |       <div
306 |         className="register-cancel-container"
307 |         style={{
308 |           zIndex: zIndexRegistering,
309 |         }}
310 |       >
311 |         <button
312 |           className={`${
313 |             isRegistering ? "visible" : "hidden"
314 |           } register-cancel-button`}
315 |           onClick={async () => {
316 |             setIsAdmin(false);
317 |             setIsRegistering(false);
318 | 
319 |             changeZIndexAdmin(1);
320 |             changeZIndexRegistering(1);
321 | 
322 |             setShowWebcam(true);
323 |             setShowImg(false);
324 |           }}
325 |         ></button>
326 |       </div>
327 |       <div className="login-container">
328 |         <button
329 |           className={`${
330 |             isAdmin || isRegistering ? "hidden" : "visible"
331 |           } login-button`}
332 |           onClick={async () => {
333 |             // saveFrameToDisk(canvasRef, lastFrame, setLastFrame);
334 |             // setIsRegistering(true);
335 |             send_img_login();
336 |           }}
337 |         ></button>
338 |       </div>
339 |       <div className="logout-container">
340 |         <button
341 |           className={`${
342 |             isAdmin || isRegistering ? "hidden" : "visible"
343 |           } logout-button`}
344 |           onClick={() => {
345 |             send_img_logout();
346 |           }}
347 |         ></button>
348 |       </div>
349 |       <div className="admin-container">
350 |         <button
351 |           className={`${
352 |             isAdmin || isRegistering ? "hidden" : "visible"
353 |           } admin-button`}
354 |           onClick={() => {
355 |             setIsAdmin(true);
356 |             setIsRegistering(false);
357 | 
358 |             changeZIndexAdmin(3);
359 |             changeZIndexRegistering(1);
360 |           }}
361 |         ></button>
362 |       </div>
363 |       <div
364 |         className="register-container"
365 |         style={{
366 |           zIndex: zIndexAdmin,
367 |         }}
368 |       >
369 |         <button
370 |           className={`${isAdmin ? "visible" : "hidden"} register-button`}
371 |           onClick={() => {
372 |             setIsAdmin(false);
373 |             setIsRegistering(true);
374 | 
375 |             changeZIndexAdmin(1);
376 |             changeZIndexRegistering(3);
377 | 
378 |             saveLastFrame(
379 |               canvasRef,
380 |               lastFrame,
381 |               setLastFrame,
382 |               setShowWebcam,
383 |               showWebcam,
384 |               setShowImg
385 |             );
386 |             resetTextBox();
387 | 
388 |           }}
389 |         ></button>
390 |       </div>
391 |       <div
392 |         className="goback-container"
393 |         style={{
394 |           zIndex: zIndexAdmin,
395 |         }}
396 |       >
397 |         <button
398 |           className={`${isAdmin ? "visible" : "hidden"} goback-button`}
399 |           onClick={() => {
400 |             setIsAdmin(false);
401 |             setIsRegistering(false);
402 | 
403 |             changeZIndexAdmin(1);
404 |             changeZIndexRegistering(1);
405 |           }}
406 |         ></button>
407 |       </div>
408 | 
409 |       <div
410 |         className="download-container"
411 |         style={{
412 |           zIndex: zIndexAdmin,
413 |         }}
414 |       >
415 |         <button
416 |           className={`${isAdmin ? "visible" : "hidden"} download-button`}
417 |           onClick={() => {
418 |             setIsAdmin(false);
419 |             setIsRegistering(false);
420 | 
421 |             changeZIndexAdmin(1);
422 |             changeZIndexRegistering(1);
423 | 
424 |             downloadLogs();
425 |           }}
426 |         ></button>
427 |       </div>
428 |     </div>
429 |   );
430 | }
431 | export default MasterComponent;
432 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/frontend/face-attendance-web-app-front/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------