Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fingerprint Recognition</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| padding-top: 50px; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin-bottom: 30px; | |
| font-weight: bold; | |
| } | |
| #resultDiv { | |
| margin-top: 30px; | |
| display: none; /* Hide by default */ | |
| } | |
| .loader { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid rgba(0, 0, 0, 0.3); | |
| border-radius: 50%; | |
| border-top-color: #000; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="display-4">Fingerprint Recognition</h1> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-6"> | |
| <form id="uploadForm" enctype="multipart/form-data"> | |
| <div class="input-group mb-3"> | |
| <input type="file" id="fileInput" name="file" class="form-control" accept="image/*"> | |
| <button type="button" id="submitButton" class="btn btn-primary">Upload</button> | |
| </div> | |
| <p id="defaultText">Upload an image to get the result</p> | |
| <div class="loader" id="loader" style="display: none;"></div> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="resultDiv" class="row justify-content-center"></div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.getElementById('submitButton').addEventListener('click', uploadImage); | |
| function uploadImage() { | |
| var fileInput = document.getElementById('fileInput'); | |
| var file = fileInput.files[0]; | |
| if (!file) { | |
| alert('Please select a file.'); | |
| return; | |
| } | |
| var formData = new FormData(); | |
| formData.append('file', file); | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open('POST', '/', true); | |
| // Show loader while processing | |
| document.getElementById('loader').style.display = 'inline-block'; | |
| document.getElementById('defaultText').style.display = 'none'; | |
| xhr.onload = function() { | |
| if (xhr.status === 200) { | |
| var response = JSON.parse(xhr.responseText); | |
| var resultDiv = document.getElementById('resultDiv'); | |
| resultDiv.innerHTML = '<div class="col-md-6"><div class="card"><div class="card-body"><h5 class="card-title">Prediction Result</h5><p class="card-text">Predicted Class: ' + response.predicted_class + '</p><p class="card-text">Class Label: ' + response.class_label + '</p></div></div></div>'; | |
| resultDiv.style.display = 'flex'; // Display the result | |
| document.getElementById('loader').style.display = 'none'; // Hide the loader | |
| fileInput.value = ''; // Clear the input after displaying the result | |
| } else { | |
| alert('Error uploading file. Please try again.'); | |
| document.getElementById('loader').style.display = 'none'; // Hide the loader on error | |
| document.getElementById('defaultText').style.display = 'block'; // Show default text | |
| } | |
| }; | |
| xhr.onerror = function() { | |
| alert('Error uploading file. Please try again.'); | |
| document.getElementById('loader').style.display = 'none'; // Hide the loader on error | |
| document.getElementById('defaultText').style.display = 'block'; // Show default text | |
| }; | |
| xhr.send(formData); | |
| } | |
| </script> | |
| </body> | |
| </html> | |