Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor
Running

App Files Community
WebashalarForML commited on
Commit
fb63504
•
1 Parent(s): e9368dc

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +186 -186
templates/index.html CHANGED
@@ -1,186 +1,186 @@
1
- <!DOCTYPE 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 Upload and Process</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="/remove_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
- </div>
169
- </div>
170
- </div>
171
- </div>
172
- </div>
173
-
174
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
175
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
176
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
177
-
178
- <script>
179
- document.getElementById("processForm").addEventListener("submit", function(event) {
180
- document.getElementById("loadingSpinner").style.display = "block";
181
- document.getElementById("processBtn").style.display = "none";
182
- });
183
- </script>
184
- </body>
185
-
186
- </html>
 
1
+ <!DOCTYPE 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 Upload and Process</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
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
175
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
176
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
177
+
178
+ <script>
179
+ document.getElementById("processForm").addEventListener("submit", function(event) {
180
+ document.getElementById("loadingSpinner").style.display = "block";
181
+ document.getElementById("processBtn").style.display = "none";
182
+ });
183
+ </script>
184
+ </body>
185
+
186
+ </html>