Spaces:
Sleeping
Sleeping
File size: 4,320 Bytes
51b15d1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!DOCTYPE html>
<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>
|