Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor
Running

App Files Community
WebashalarForML commited on
Commit
0666221
•
1 Parent(s): d8b7b87

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +181 -0
templates/index.html ADDED
@@ -0,0 +1,181 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ font-family: 'Arial', sans-serif;
14
+ }
15
+
16
+ .container {
17
+ margin-top: 50px;
18
+ }
19
+
20
+ .card {
21
+ border: none;
22
+ border-radius: 10px;
23
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ .card-header {
27
+ background-color: #007bff;
28
+ color: white;
29
+ border-top-left-radius: 10px;
30
+ border-top-right-radius: 10px;
31
+ }
32
+
33
+ .btn-primary,
34
+ .btn-success,
35
+ .btn-info {
36
+ border-radius: 50px;
37
+ padding: 10px;
38
+ width: 100%;
39
+ }
40
+
41
+ .btn-primary {
42
+ background-color: #007bff;
43
+ border: none;
44
+ }
45
+
46
+ .btn-success {
47
+ background-color: #28a745;
48
+ border: none;
49
+ }
50
+
51
+ .btn-info {
52
+ background-color: #17a2b8;
53
+ border: none;
54
+ }
55
+
56
+ .uploaded-file {
57
+ margin-top: 15px;
58
+ display: flex;
59
+ align-items: center;
60
+ }
61
+
62
+ .uploaded-file span {
63
+ font-size: 16px;
64
+ margin-left: 10px;
65
+ color: #333;
66
+ }
67
+
68
+ .remove-file {
69
+ cursor: pointer;
70
+ color: red;
71
+ margin-left: 10px;
72
+ }
73
+
74
+ .form-control-file {
75
+ border-radius: 50px;
76
+ border: 2px solid #ced4da;
77
+ padding: 10px;
78
+ font-size: 16px;
79
+ }
80
+
81
+ .form-control {
82
+ border-radius: 50px;
83
+ }
84
+
85
+ .mt-3 {
86
+ margin-top: 20px !important;
87
+ }
88
+
89
+ .card-footer {
90
+ text-align: center;
91
+ border-top: 1px solid #ddd;
92
+ padding: 15px;
93
+ }
94
+
95
+ /* Custom file input styling */
96
+ .custom-file-upload {
97
+ border: 1px solid #ced4da;
98
+ display: inline-block;
99
+ padding: 6px 12px;
100
+ cursor: pointer;
101
+ border-radius: 50px;
102
+ background-color: #ffffff;
103
+ }
104
+
105
+ .custom-file-upload input[type="file"] {
106
+ display: none;
107
+ }
108
+
109
+ .form-group {
110
+ margin-top: 20px;
111
+ }
112
+
113
+ /* Spinner styling */
114
+ #loadingSpinner {
115
+ display: none;
116
+ margin-top: 20px;
117
+ }
118
+ </style>
119
+ </head>
120
+
121
+ <body>
122
+ <div class="container">
123
+ <div class="row justify-content-center">
124
+ <div class="col-md-8">
125
+ <div class="card">
126
+ <div class="card-header text-center">
127
+ <h2>Upload and Process Files</h2>
128
+ </div>
129
+ <div class="card-body">
130
+ <form id="uploadForm" action="{{ url_for('upload_file') }}" method="post"
131
+ enctype="multipart/form-data">
132
+ <h4 class="text-center">Upload Images</h4>
133
+ <input type="file" name="files" multiple class="form-control-file" required>
134
+ <button type="submit" class="btn btn-primary mt-3">Upload</button>
135
+ </form>
136
+
137
+ {% if uploaded_files %}
138
+ <h4 class="mt-4">Uploaded Files:</h4>
139
+ <ul class="list-group">
140
+ {% for file in uploaded_files %}
141
+ <li class="list-group-item d-flex justify-content-between align-items-center">
142
+ {{ file }}
143
+ <a href="/remove_file" class="remove-file" title="Remove File">&times;</a>
144
+ </li>
145
+ {% endfor %}
146
+ </ul>
147
+ {% endif %}
148
+
149
+ <form id="processForm" method="post" action="/process" class="mt-3">
150
+ <button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
151
+ </form>
152
+
153
+ <!-- Circular Loading Spinner -->
154
+ <div id="loadingSpinner" class="text-center">
155
+ <div class="spinner-border text-primary" role="status">
156
+ <span class="sr-only">Processing...</span>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <div class="card-footer">
161
+ <small>&copy; 2024 | Webashalar Pvt. Ltd. </small>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
169
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
170
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
171
+
172
+ <script>
173
+ // Show spinner and hide button when form is submitted
174
+ document.getElementById("processForm").addEventListener("submit", function (event) {
175
+ document.getElementById("loadingSpinner").style.display = "block";
176
+ document.getElementById("processBtn").style.display = "none";
177
+ });
178
+ </script>
179
+ </body>
180
+
181
+ </html>