Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor2
Runtime error

App Files Community
WebashalarForML commited on
Commit
961552c
·
verified ·
1 Parent(s): 2ed1d5c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +111 -143
templates/index.html CHANGED
@@ -2,187 +2,155 @@
2
  <html lang="en">
3
 
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Visiting Card Data Extractor</title>
8
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10
  <style>
11
  body {
12
- background-color: #1d2329;
13
- color: #e0e0e0;
14
- font-family: 'Arial', sans-serif;
15
  }
16
 
17
- .container {
18
- margin-top: 50px;
19
- }
20
-
21
- .card {
22
- background-color: #2a2f36;
23
- border: none;
24
- border-radius: 10px;
25
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
26
- }
27
-
28
- .card-header {
29
- background-color: #3a4149;
30
- color: white;
31
- border-top-left-radius: 10px;
32
- border-top-right-radius: 10px;
33
  }
34
 
35
- .btn-primary,
36
- .btn-success,
37
- .btn-info {
38
- border-radius: 50px;
39
- padding: 10px;
40
- width: 100%;
41
  }
42
 
43
- .btn-primary {
44
- background-color: #007bff;
45
- border: none;
 
 
 
46
  }
47
 
48
- .btn-success {
49
- background-color: #28a745;
50
- border: none;
51
  }
52
 
53
- .btn-info {
54
- background-color: #17a2b8;
 
55
  border: none;
 
 
 
56
  }
57
 
58
- .uploaded-file {
59
- margin-top: 15px;
60
- display: flex;
61
- align-items: center;
62
- }
63
-
64
- .uploaded-file span {
65
- font-size: 16px;
66
- margin-left: 10px;
67
- color: #e0e0e0;
68
- }
69
-
70
- .remove-file {
71
- cursor: pointer;
72
- color: #dc3545;
73
- margin-left: 10px;
74
- }
75
-
76
- .form-control-file {
77
- border-radius: 50px;
78
- border: 2px solid #4e5d6c;
79
- padding: 10px;
80
- background-color: #3a4149;
81
- color: #e0e0e0;
82
- font-size: 16px;
83
  }
84
 
85
- .form-control {
86
- border-radius: 50px;
87
- background-color: #3a4149;
88
- color: #e0e0e0;
89
- border: 2px solid #4e5d6c;
90
  }
91
 
92
- .mt-3 {
93
- margin-top: 20px !important;
94
  }
95
 
96
- .card-footer {
97
- text-align: center;
98
- border-top: 1px solid #4e5d6c;
99
  padding: 15px;
 
 
100
  }
101
 
102
- .custom-file-upload {
103
- border: 1px solid #4e5d6c;
104
- display: inline-block;
105
- padding: 6px 12px;
106
- cursor: pointer;
107
- border-radius: 50px;
108
- background-color: #3a4149;
109
- color: #e0e0e0;
110
- }
111
-
112
- .custom-file-upload input[type="file"] {
 
 
 
 
 
113
  display: none;
114
  }
115
 
116
- .form-group {
117
- margin-top: 20px;
118
- }
 
119
 
120
- #loadingSpinner {
121
- display: none;
122
- margin-top: 20px;
123
  }
124
  </style>
125
  </head>
126
 
127
  <body>
128
  <div class="container">
129
- <div class="row justify-content-center">
130
- <div class="col-md-8">
131
- <div class="card">
132
- <div class="card-header text-center">
133
- <h2>Upload and Process Files</h2>
134
- </div>
135
- <div class="card-body">
136
- <form id="uploadForm" action="{{ url_for('upload_file') }}" method="post"
137
- enctype="multipart/form-data">
138
- <h4 class="text-center">Upload Images</h4>
139
- <input type="file" name="files" multiple class="form-control-file" required>
140
- <button type="submit" class="btn btn-primary mt-3">Upload</button>
141
- </form>
142
-
143
- {% if uploaded_files %}
144
- <h4 class="mt-4">Uploaded Files:</h4>
145
- <ul class="list-group">
146
- {% for file in uploaded_files %}
147
- <li class="list-group-item d-flex justify-content-between align-items-center"
148
- style="background-color: #3a4149; color: #e0e0e0;">
149
- {{ file }}
150
- <a href="{{ url_for('remove_file', filename=file) }}" class="remove-file" title="Remove File">&times;</a>
151
- </li>
152
- {% endfor %}
153
- </ul>
154
- {% endif %}
155
-
156
- <form id="processForm" method="post" action="/process" class="mt-3">
157
- <button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
158
- </form>
159
-
160
- <div id="loadingSpinner" class="text-center">
161
- <div class="spinner-border text-primary" role="status">
162
- <span class="sr-only">Processing...</span>
163
- </div>
164
- </div>
165
- </div>
166
- <div class="card-footer">
167
- <small>&copy; 2024 | Webashalar Pvt. Ltd.</small>
168
- <br>
169
- <a href="https://webashalarforml-imagedataextractor2.hf.space/" target="_blank" style="color: #007bff; text-decoration: none;">The app</a>
170
- </div>
171
- </div>
172
- </div>
173
  </div>
174
- </div>
175
 
176
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
177
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
178
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
 
 
 
 
 
 
 
179
 
 
180
  <script>
181
- document.getElementById("processForm").addEventListener("submit", function(event) {
182
- document.getElementById("loadingSpinner").style.display = "block";
183
- document.getElementById("processBtn").style.display = "none";
184
- });
 
 
 
 
 
 
 
 
 
 
185
  </script>
186
  </body>
187
 
188
- </html>
 
2
  <html lang="en">
3
 
4
  <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>File Uploader</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
 
9
  <style>
10
  body {
11
+ background-color: #1c1c1e;
12
+ font-family: "Poppins", sans-serif;
13
+ color: #f5f5f7;
14
  }
15
 
16
+ h1 {
17
+ color: #e5e5e7;
18
+ text-align: center;
19
+ margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
 
22
+ .container {
23
+ margin-top: 50px;
 
 
 
 
24
  }
25
 
26
+ .file-upload-section {
27
+ background-color: #2c2c2e;
28
+ padding: 30px;
29
+ border-radius: 15px;
30
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
31
+ text-align: center;
32
  }
33
 
34
+ .file-upload-section input[type="file"] {
35
+ margin: 20px 0;
 
36
  }
37
 
38
+ .file-upload-section input[type="submit"] {
39
+ background-color: #ee4410;
40
+ color: white;
41
  border: none;
42
+ padding: 10px 20px;
43
+ border-radius: 5px;
44
+ transition: background-color 0.3s ease;
45
  }
46
 
47
+ .file-upload-section input[type="submit"]:hover {
48
+ background-color: #ee4410;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
 
51
+ .file-actions a {
52
+ margin: 0 10px;
53
+ text-decoration: none;
54
+ color: #ee4410;
 
55
  }
56
 
57
+ .file-actions a:hover {
58
+ color: #ee4410;
59
  }
60
 
61
+ .flash-message {
62
+ margin-bottom: 20px;
 
63
  padding: 15px;
64
+ border-radius: 5px;
65
+ color: #333;
66
  }
67
 
68
+ .alert {
69
+ text-align: center;
70
+ position: absolute;
71
+ top: 0;
72
+ right: 15%;
73
+ }
74
+
75
+ /* Loader styles */
76
+ .loader {
77
+ border: 8px solid #f3f3f3;
78
+ border-top: 8px solid #ee4410;
79
+ border-radius: 50%;
80
+ width: 60px;
81
+ height: 60px;
82
+ animation: spin 2s linear infinite;
83
+ margin: 20px auto;
84
  display: none;
85
  }
86
 
87
+ @keyframes spin {
88
+ 0% {
89
+ transform: rotate(0deg);
90
+ }
91
 
92
+ 100% {
93
+ transform: rotate(360deg);
94
+ }
95
  }
96
  </style>
97
  </head>
98
 
99
  <body>
100
  <div class="container">
101
+ <h1>Visiting Card Data Extractor</h1>
102
+
103
+ <div class="file-upload-section">
104
+
105
+
106
+ <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
107
+ <!-- <input type="file" name="file" class="form-control" required /> -->
108
+ <input type="file" name="files" multiple class="form-control" required />
109
+ <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
110
+ </form>
111
+
112
+ {% if session.get('uploaded_file') %}
113
+ <p class="mt-4">
114
+ Uploaded:
115
+ <span class="text-danger">{{ session.get('uploaded_file') }}</span>
116
+ </p>
117
+ <form action="{{ url_for('remove_file') }}" method="post">
118
+ <button type="submit" class="btn btn-outline-danger">
119
+ <i class="bi bi-trash"></i> Remove Uploaded File
120
+ </button>
121
+ </form>
122
+ {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </div>
 
124
 
125
+ <div class="container">
126
+ <!-- Loader -->
127
+ <div class="loader" id="loader"></div>
128
+ </div>
129
+
130
+ {% with messages = get_flashed_messages() %} {% if messages %}
131
+ <div class="alert alert-success mt-4" id="flash-message">
132
+ {{ messages[0] }}
133
+ </div>
134
+ {% endif %} {% endwith %}
135
+ </div>
136
 
137
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
138
  <script>
139
+ // Loader functionality
140
+ document.getElementById('fileUploadForm').onsubmit = function () {
141
+ document.getElementById('loader').style.display = 'block';
142
+ };
143
+
144
+ // Flash message auto-hide
145
+ setTimeout(function () {
146
+ let flashMessage = document.getElementById("flash-message");
147
+ if (flashMessage) {
148
+ flashMessage.style.transition = "opacity 1s ease";
149
+ flashMessage.style.opacity = 0;
150
+ setTimeout(() => flashMessage.remove(), 1000);
151
+ }
152
+ }, 3000);
153
  </script>
154
  </body>
155
 
156
+ </html>