Design and Build Web and API on “Absenplus” with Face Recognition using Deep Learning Method

— This research has background cause have not maximum yet of attendance‟s system for now. “Absenplus” is an application attendance android based which has two features of system such as face recognition and geolocation. With technology who can help for developing “Absenplus” with design and build web and API as a web server who belong to integration into “Absenplus”‟s application. So therefore the author decides to named “Design and Build Web and API on “Absenplus” using Deep Learning‟s methods” to give a integration database to “Absenplus” apps. This research will take advantages of computing library of deep learning named TensorFlow and Keras. Besides, this research uses MTCNN for detection face image, Facenet Model to help model gets the extraction feature, and SVM for classification model image train and test. In geolocation‟s system use geofence library to help development function geolocation‟s system. This research also use Laravel framework in design and build web and API. Throughout this research give the results on “Absenplus” that user can use attendance online with face recognition and geolocation. In this result of face recognition, it can be conclude that average of predict probability is 67% with light room normally. request and response data.


INTRODUCTION
Attendance is way to find out amount of attendance recap someone can done in various way, especially are using paper"s attendance. Attendance is important system for company or institution. With the attendance system, the company or institution can asses their exemplar"s workers.
"Absenplus" is an application attendance android based which has two features of system such as face recognition and geolocation. In "Absenplus" need a website and API as a server to help integration system between request and response data. This research on face recognition"s system will use MTCNN to help detection face, Facenet Model pretrained to help extraction features face, and SVM to help classification feature models. Face recognition is a method to recognition object on face that can divide to be 2 that are recognize or does not recognize. MTCNN will help image to detect where is the face in images. It will calculated with CNN architecture to find face such as boundaries box, face alignment, and landmark"s faces. After the detection is done, it will compress become model with format .npz. Npz is file format for numpy data. After get the result in form of model, the model will get to find the embedding with Facenet model. In this research, facenet model is pre-trained model which means it can find embedding of extraction feature, after the extraction feature face is done, it will also compress become model embedding with same format. After get the model embedding, it will get classification model with SVM between train and test model embedded. This research will use confidence as predict of probability test model to train model.

A. Deep Learning
Deep learning is branch of machine learning. This model can learn the computing itself use its brain. Deep learning is also algorithm of neural networks that use data input to process with several of hidden layer.

B. Convolutional Neural Network (CNN)
Convolutional Neural Network (CNN) is an artificial neural network that use in computer vision to do a classification image and object recognition. It is the one of deep neural network (DNN) because the deep of network and most used in many application of image data.

Convolution Layer
Convolution layer is part of stages in CNN architecture. Convolution is mathematical term where it can application a function in output repeat. This operation apply function output as feature map from input image. TEPIAN Vol. 3 No. (June 2022) p-ISSN 2721-5350 e-ISSN 2721-5369 Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738 -66 -On this stage where the image has size lxwxr which where w is width and l is length and r is amount of image channel, in that case image has RGB as image channel (Nurhikmat, 2018). The illustration of convolutional layer can see as in picture 1 .
Picture 1. Illustration of convolution layer 2. Rectified Linear Unit (ReLU) ReLU is activation function to get values normalization which result from convolution layer. This function is used to normalization value to change zero (0) value use function max(0,x) as in (1). (1) Therefore matrix input x will getting ReLU value on this equation to make every pixels that has less than zero from image belong to zero.

Pooling
Pooling is to reducing size of matrix using pooling operation. This layer is after from convolution layer. Values who can take it is average pooling and max pooling. Form of pooling use size of 2x2 (Nurhikmat, 2018). The illustration of process average and max pooling can see as in picture 2 .
Picture 2. Illustration process average and max pooling

Fully Connected Layer
Fully connected layer is a layer that the layer activation neuron from all layer before already connected with next layer same as common neural networks. This stage also include to output or result in feature map stage from end of convolution or pooling layer. The illustration of fully connected layer can see as in picture 3 . Picture 3. Illustration process of fully connected layer

Softmax
Softmax is activation function where use to output layer. This output layer is part of fully connected layer. Softmax also use to classification more than two classes. In softmax has form of equation as in (2). (2) F i is a result of function to every element to-n on vector from output class. E is probability value or euler value. A is input value given by training model to get the classification softmax function.

C. TensorFlow
Tensorflow is interface to express algorithm of machine learning and execution function with data information about that object which already known also can recognize one object to others. Tensorflow is also library open source and provide many models that can use for classification image such as Inception-v3, MobileNet, and Facenet, also support models such as CNN, RNN, and RBM. Tensorflow also provide library Keras to help learning deeper in computing development.

D. Multi-task Cascaded Convolutional Neural Network
(MTCNN) Multi-task Cascaded Convolutional Neural Network (MTCNN) is detection face method deep learning based. It is stronger against a lights, edges facial expression, and detection face better. Model MTCNN is adapted flowchart architecture from Cascade CNN that has three networks in detection face to reduce workload of system. In this method uses a deep convolutional network which trained directly to optimize embedding. It has three stages of stages that are Proposal Net (P-Net) to binary classification on input, and forward to Refine Net (R-Net) to emphasize the classification and to give bounding box, and Output Net (O-Net) as a result from this system with better bounding box result and five vectors of landmark facial which where on eyes, nose, and edges of lip. The steps on MTCNN can see as in picture 4. TEPIAN Vol. 3 No. (June 2022) p-ISSN 2721-5350 e-ISSN 2721-5369 Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738 -67 -Picture 4.
Step by step networks from MTCNN

E. Facenet
Facenet is face recognition who developed by Google. It directly learn landmark of face image which is distances is direct contact with size similarity face. It works for identification image who already processed to work for face recognition ,verification face, and classification feature can be done easily using extraction feature as vector feature. Extraction feature is process to capture some features of face or object. The architecture face recognition can see as in picture 5.
Picture 5. Architecture face recognition uses facenet

F. Support Vector Machine (SVM)
Support Vector Machine (SVM) is a technic to predict in classification case. It has linear as basic classifier that is classification linear separately. The illustration to find support vector in SVM can see as in picture 6 . Picture 6. Illustration to find support vector in SVM In this method has some feature for classification such as patterns as representation for datasets of classes, support vector as pattern that has closest value to hyper plane, margin as lane vector for support vector that works for to know distance closest between support vector and hyper plane, and hyper plane as dividing line between classes. In that case, to find predict probability, it uses function as in (3).
Result of classification class model that already fitted by x and y on class -1 which where will calculated the probability with class 1 with function above that means x is array n values form sample and features sample.

G. Flask
Flask is a web framework written by python language. It also one of micro framework that works for application structure and interface for web. Flask us much lighter and faster because it was built with idea of simplifying the core of framework to a minimum. By using flask with python language, developers can create a structured web and can manage the behavior of web more easily and simple library.

H. Geolocation
Geolocation is a technology that use the data obtained from computer or devices individual to identification or described the location actual. Geolocation also use coordinate data such latitude and longitude from device. Geolocation based on identification coordinate geography from user or computing device through any collection data mechanism. Often geolocation uses GPS to collect coordinate latitude and longitude in device with connect to data network or Wi-Fi.

I. System Usability Scale (SUS)
SUS method is one of tools research usability which has popular. SUS developed by john brooke in 1986. SUS is scale usability that so efficient. System usability scale has 10 types of statements as shown table 1.

Questions
Scores I think I will use this website again 1-5 I find the system of this website complicated to use 1-5 I feel the features of this web system work properly 1-5 I find the system on this website easy to use used 1-5 I need help from other people or technicians in using this web 1-5 I think other people will understand how to use this web system quickly 1-5 I find this web system quite confusing 1-5 I feel there are no obstacles in using this web system 1-5 I need to get used to it before using this web system 1-5 I feel that every information on this web is very clear and easy to understand 1-5 From the types of statements in table 1. Where respondents are given a choice with a scale of 1-5 to answer based on how much respondents agree with each statement on the research results or features being tested. A value of 1 means strongly disagree and a value of 5 means strongly agree with the statement. This can be seen in table 2. TEPIAN Vol. 3 No. (June 2022) p-ISSN 2721-5350 e-ISSN 2721-5369 Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738 -68 - As explained in table 2, the SUS method has 5 answer options which are strongly disagree, disagree, undecided, agree, and strongly agree with different scores on each choice. When the score of each respondent is known, the next step is to find the average score by adding up all the scores and dividing by the number of respondents. This calculation can be seen with the equation as in (4).
(4) The formula of calculation in calculating the average score SUS method where x is the average score, Σ is the sum score of SUS, and n is the number of respondents. After calculating the average score, the SUS will determine the grade of the assessment results with 6 scales, namely A, B, C, D, E, and F. And of adjectives rating consists of the worst imaginable, poor, ok, good, excellent and the best imaginable.

A. Tools and Materials
There is also tools and materials to do in this research of build and design web and API that are:

B. Research Procedure
This research is also have research procedure to give this this system a structured and run as expected.
Step by step in research procedure Picture 7 is step by step that will be held on this research are: 1. Collect data, this step will be research about which need in system and will identification the problems. 2. Analyze system, this step will be analyst the system deeper such to do comparison the study literature journal to discuss same problem as reference to build and design application. 3. Design system, research will design a user interface and user experience (UI/UX), design system, and design database. 4. Build web and API "Absenplus" application is step to implementation in program form and design system that already design from previous step. 5. Testing is step that use to evaluate system web application to find error system. 6. Documentation creation is activation researcher to write a document from result of research.

C. System Design
This system design, research is using Unified Modeling Language (UML). UML is a language use to draw, build, and document to an information. From using UML, the author can make a model to every kind of software which is in application could run to any devices, operation system, other networks. The following are the UML designs with diagram activity class.
Diagram activity class has 3 actors that are admin, system, and user that have tasks related to each other. After that, in this system will validation data whether valid or not to user data. If it is valid or true, the system will through to dashboard page. 3. After enter to dashboard page, so there are 2 access rights that are admin"s access and employee or user"s access. It will appear different menus and access to add or edit and delete some data. 4. After that, if it already input data on admin, so system will collect data to database. 5. Other than that, user actor if it wants to attendance manually because problem device. So user will follow up request attendance manually to admin access with person to person.

D. Database Design
Database model use Entity Relationship Diagram (ERD) of this research. Database is technic model for approach to illustrated relationship a model. ERD is to showing object data (entity) and relationship that on next entity. This system has a few of main entity that are from user table, employee, attendance, sector, and face recognition.
Picture 11. Database design uses ERD

E. API Candidate
There is API candidate that works for give design to system web and API on application "Absenplus" and can be conclude that API candidate will be main focus on this research of developing system application "Absenplus" that as shown table 3 .

IV. RESULTS AND DISCUSSION
The following are the results of the implementation of the Web Design and API ""Absenplus"" Application using deep learning method. This website is made in such a way to support all the systems needed by the "Absenplus" application to run properly and smoothly.
A. Interface login page Interface login page works for validation data user authentication with filled form email and password. The result of interface login page can display as in picture 12.    Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN,3(2) Picture 19 shows data sector or zone that purpose to be a place that has access to attendance for user.

I. Interface study program page
Study program page works for manage study program department data as an information users.

Picture 20. Study program page
Picture 20 shows data study program that has related to data user.

J. Interface religion page
Religion page works for manage religion"s data as a information users.

Picture 21. Religion page
Picture 21 shows data relagion and action field for show, edit, and delete data by name. It has related to data user.
K. API Login "Absenplus" API login "Absenplus" is API that for authentication every user to access an application "Absenplus" safely. There is result of this research for API login "Absenplus" that can be seen .

L. API POST Face Recognition
API face recognition is using POST method that works for process and show result from process comparison between face image upload and face image datasets from model on flask API. This API has minimum condition on result prediction probability is 30% between 2 face image with user name validativon.
Algorithm of face recognition on flask API with main point that has researched by the author. This algorithm there are 12 steps process face recognition on flask API that in mainly point it includes are 3 method as follow. TEPIAN Vol. 3 No. (June 2022) p-ISSN 2721-5350 e-ISSN 2721-5369 Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738 -72 -Picture 21. Algorithm of face recognition on flask API 1. Detection train face First it will detect face train. This step will using MTCNN method that works for detect train face and get result as model that already reshape sized 160x160 with .npz format model.

Extraction feature train face
After that, it will extraction feature of face train. This step will use facenet model to extraction process feature face from detected train face before that will be result a feature128 vectors on biological components of the train face by generating a train face embedding model. Facenet model is using keras library to assist compute model faster and easily.

Detection test face
After that on this step will be detection test face. This step has same function and method from first step.

Extraction feature test face
After that, will extract feature test face with facenet model which same function and will be result 128 vectors on biological components of the test face 5. Classification model After detect and extract feature from face, on this step will classification model with SVM method. This method works for do a classification feature with model embedding train face and will prediction probability for model embedding test face. Other than that will prediction of accuracy training on the classification model. For the result of determine comparison with prediction probability, this research is using 300 face image user as datasets on model train face.

Validation face recognition
After that, this step will be validation face recognition by result on prediction probability as probability. If probability more than 30% and username is same with name on model train face then it will be true or recognized. Else if probability less than 30% not or username doesn"t same with name on model train face then it will be false or not recognize or unknown.

Schedule auto train
Final step after validation face recognition on flask API, this step works for do automatic training model train face use cronjob every day at 11:05 PM.

M. API GET Check Location
API check location is using GET method that works for check whether user already attendance or not and get location that has to validation radius distance.
API check location is using GET method that works for time for every user do attendance on application "Absenplus". This research is using geofence library on API attendance"s function. It will validation of current user"s location with user"s sector. If user is inside 150 meters from sector then it will be true or validation on attendance system, else if user is outside 150 meters from sector then it will be false or cannot validation on attendance system. Besides that it also uses time validation with geofence library on API attendance that will be validation time to access the attendance on application "Absenplus".

N. API GET Data Attendance
API attendance is using GET method that works for show data attendance"s recapitulation from user logged.

O. Testing Face Image in Face Recognition
On the research especially for face recognition uses deep learning method. The author do the test to check feature on face recognition system that has been build and design with 300 face image as datasets. This research uses prediction probabilitas as a result of probability or probability distance from model test face and train face, and accuracy training as result accuracy given by model train face.  Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738  Table 4 is result of testing image face recognition from several face already tested with two condition in which wear hat and without wear hat or any accessories on faces. On that average result of prediction probability that given in condition wear hat is 50.088% and without wear hat or any accessories is 68.395% and there is average result of accuracy training is 100%. this is also proves that in every evolutions of deep learning is getting better especially for face recognition.

P. Testing "Absenplus" Web
In running the "Absenplus" web with laravel framework. The authors conducts test to check the features in application that has been made and can be run properly with the function as contained. There are calculated data from testing "Absenplus" web is shown table 5.   R. Testing API "Absenplus" Testing API "Absenplus" uses authentication Json Web Token (JWT), the authors is testing to API "Absenplus" in table 6. Table 6. Testing API "Absenplus"

Description
Yes No Is the "Absenplus" login API running well?  Is the attendance clock data API "Absenplus" running well  Is the attendance data plus attendance check API running well  Is the flask "Absenplus" API running well  Does thePOST face recognition "Absenplus"API work well  Is the attendance data API of "Absenplus" running well  Is the "Absenplus" attendance API running well 

V. CONCLUSION
From the results of testing and analysis of the Web and API Application "Absenplus" using the method, Deep Learning it can be concluded that the Absenceplus web has been successfully created with the Laravel framework. Each user has their own sector which is determined using the system geolocationusing the geofence library on the API with a radius of 150 meters TEPIAN Vol. 3 No. (June 2022) p-ISSN 2721-5350 e-ISSN 2721-5369 Arugia, A. W., Junirianto, E., & Maria, E. (2022). Design and Build Web and API on "Absenplus" with Face Recognition using Deep Learning Method. TEPIAN, 3(2). https://doi.org/10.51967/tepian.v3i2.738 -74 -from the sector point that has been determined to perform attendance on the application "Absenplus". In the system face recognition with deep learning method uses MTCNN to detect faces, Facenet models to help extract facial features, and SVM to classify facial features. From the results of the research on the system, face recognition it can be concluded that in predicting the probability of face recognition using datasets of 300 photos on the user's face. On the average result, the probability of the comparison of the test face embedding with the model train face embedding is 50% with the condition of using hat accessories and 68% with the condition of not using hat accessories and there is an average training accuracy result of 100%. On API login "Absenplus" has been successfully created with JSON Web Token security (JWT). In addition, each attendance data API has succeeded in displaying detailed records, and attendance information from each user's attendance based on daily, monthly and total attendance data for all months. In the API flask, POST face recognition and functions geolocation on the attendance API have been successfully executed which function to provide a function face recognition when performing attendance on the "Absenplus" application properly.