Hugging Face's logo

Spaces:
okeowo1014
/
fingerprintpredspace
Running

App Files Community
okeowo1014 commited on
Commit
51b15d1
•
1 Parent(s): 3b7916d

Upload 3 files

Browse files
Files changed (3) hide show
  1. templates/index.html +108 -0
  2. templates/indexs.html +14 -0
  3. templates/result.html +12 -0
templates/index.html ADDED
@@ -0,0 +1,108 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Fingerprint Recognition</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #f8f9fa;
11
+ padding-top: 50px;
12
+ text-align: center;
13
+ }
14
+
15
+ h1 {
16
+ margin-bottom: 30px;
17
+ font-weight: bold;
18
+ }
19
+
20
+ #resultDiv {
21
+ margin-top: 30px;
22
+ display: none; /* Hide by default */
23
+ }
24
+
25
+ .loader {
26
+ display: inline-block;
27
+ width: 50px;
28
+ height: 50px;
29
+ border: 3px solid rgba(0, 0, 0, 0.3);
30
+ border-radius: 50%;
31
+ border-top-color: #000;
32
+ animation: spin 1s ease-in-out infinite;
33
+ }
34
+
35
+ @keyframes spin {
36
+ 0% {
37
+ transform: rotate(0deg);
38
+ }
39
+ 100% {
40
+ transform: rotate(360deg);
41
+ }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body>
46
+ <div class="container">
47
+ <h1 class="display-4">Fingerprint Recognition</h1>
48
+ <div class="row justify-content-center">
49
+ <div class="col-md-6">
50
+ <form id="uploadForm" enctype="multipart/form-data">
51
+ <div class="input-group mb-3">
52
+ <input type="file" id="fileInput" name="file" class="form-control" accept="image/*">
53
+ <button type="button" id="submitButton" class="btn btn-primary">Upload</button>
54
+ </div>
55
+ <p id="defaultText">Upload an image to get the result</p>
56
+ <div class="loader" id="loader" style="display: none;"></div>
57
+ </form>
58
+ </div>
59
+ </div>
60
+ <div id="resultDiv" class="row justify-content-center"></div>
61
+ </div>
62
+
63
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
64
+ <script>
65
+ document.getElementById('submitButton').addEventListener('click', uploadImage);
66
+
67
+ function uploadImage() {
68
+ var fileInput = document.getElementById('fileInput');
69
+ var file = fileInput.files[0];
70
+ if (!file) {
71
+ alert('Please select a file.');
72
+ return;
73
+ }
74
+
75
+ var formData = new FormData();
76
+ formData.append('file', file);
77
+
78
+ var xhr = new XMLHttpRequest();
79
+ xhr.open('POST', '/', true);
80
+
81
+ // Show loader while processing
82
+ document.getElementById('loader').style.display = 'inline-block';
83
+ document.getElementById('defaultText').style.display = 'none';
84
+
85
+ xhr.onload = function() {
86
+ if (xhr.status === 200) {
87
+ var response = JSON.parse(xhr.responseText);
88
+ var resultDiv = document.getElementById('resultDiv');
89
+ 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>';
90
+ resultDiv.style.display = 'flex'; // Display the result
91
+ document.getElementById('loader').style.display = 'none'; // Hide the loader
92
+ fileInput.value = ''; // Clear the input after displaying the result
93
+ } else {
94
+ alert('Error uploading file. Please try again.');
95
+ document.getElementById('loader').style.display = 'none'; // Hide the loader on error
96
+ document.getElementById('defaultText').style.display = 'block'; // Show default text
97
+ }
98
+ };
99
+ xhr.onerror = function() {
100
+ alert('Error uploading file. Please try again.');
101
+ document.getElementById('loader').style.display = 'none'; // Hide the loader on error
102
+ document.getElementById('defaultText').style.display = 'block'; // Show default text
103
+ };
104
+ xhr.send(formData);
105
+ }
106
+ </script>
107
+ </body>
108
+ </html>
templates/indexs.html ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Upload Image</title>
6
+ </head>
7
+ <body>
8
+ <h1>Upload an Image</h1>
9
+ <form method="POST" enctype="multipart/form-data">
10
+ <input type="file" name="file">
11
+ <input type="submit" value="Upload">
12
+ </form>
13
+ </body>
14
+ </html>
templates/result.html ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Result</title>
6
+ </head>
7
+ <body>
8
+ <h1>Prediction Result</h1>
9
+ <p>Predicted Class: {{ predicted_class }}</p>
10
+ <p>Class Label: {{ class_label }}</p>
11
+ </body>
12
+ </html>