Image processing and ML based, forensic offline signature verification Web Application

Biometrics (or biometric authentication) refers to the method of identification of humans by their characteristics or traits. Biometrics is employed in computing as a sort of identification and access control which is one among the foremost secure methods to ensure human’s privacy. The application uses a Convolution Neural Network (CNN) for distinguishing between forged and genuine signatures through a Siamese Neural Network. With an input of three signature images to create a new signature profile , store in database for later verification requests and a single input signature image used for verification of person’s identity.

In the project directory, you can run:

Install dependencies (Important Node Modules to start the project)

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

• implement UI and Layout
• Divide application into pages
• Enable routing (connect react router).
• integrate with Backend server

• Verify Page:

• divide verify page into components
• implement verify page form component
• implement dynamic-content dropdown list(using React Select)
• implement signature pad to allow user to sign on the go (using mouse cursor or touch pen)
• implement uploading a file button (allow user to upload an already existing signature image on hard disk)
• implement option selection (using React Select) to allow user to chose between signing either on signature pad or uploading a signature image
• implement dynamic reactive component , changes upon getting response from server from form component to gauge component
• implement gauge to show the percentage of the similarity between the provided signature and the stored on database one , and showing wether the signature is forged or geniune based on a pre-defined threshold (React-gauge)
• handle side effects , fetch the profiles array from the server
• handle sending POST request to server from verify component , and taking response put inside the gauge (percentage of similarity)
• Verify Page Block Diagram :

• Upload Page:

• divide upload page into compoennt
• implement upload page's form component , allowing user to interact with a form to add a new client signature profile, same as the previous form.
• implement dynamic reactive component , changes upon getting response from the the server that account is successfully created (react-success-indicator) , changing on the UI from form componet to the success indicator message
• handle sending a mulitpart POST request to the server ,contains name of the client profile and attached a FileList object , taking response to indicate successful creation of a new profile
• Upload Page Block Diagram :

• Others:

• implement Home page ,divide it into components , write a short brief about the application
• implement other pages in the application , about and legal
• Enhance Styling of the Application