Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor2
Sleeping

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

Update templates/result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +267 -264
templates/result.html CHANGED
@@ -1,264 +1,267 @@
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>Processed Data</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
- display: flex;
19
- flex-direction: row;
20
- height: 100vh;
21
- margin-top: 20px;
22
- }
23
-
24
- .left-side {
25
- flex: 1;
26
- padding: 20px;
27
- overflow-y: auto;
28
- border: none;
29
- border-radius: 10px;
30
- }
31
-
32
- .right-side {
33
- flex: 1;
34
- padding: 20px;
35
- background-color: #1d2c38;
36
- border-left: 1px solid #4e5d6c;
37
- border-radius: 10px;
38
- display: flex;
39
- justify-content: center;
40
- align-items: center;
41
- }
42
-
43
- .card {
44
- background-color: #2a2f36;
45
- border: none;
46
- border-radius: 10px;
47
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
48
- margin-bottom: 20px;
49
- }
50
-
51
- .card-header {
52
- background-color: #28a745;
53
- color: white;
54
- border-top-left-radius: 10px;
55
- border-top-right-radius: 10px;
56
- }
57
-
58
- .list-group-item {
59
- border: none;
60
- background-color: #3a4149;
61
- color: #e0e0e0;
62
- padding: 10px;
63
- }
64
-
65
- iframe {
66
- width: 100%;
67
- height: 100%;
68
- border: none;
69
- border-radius: 12px;
70
- }
71
-
72
- .list-group-item strong {
73
- color: #e0e0e0;
74
- }
75
-
76
- h2 {
77
- margin-bottom: 20px;
78
- color: #e0e0e0;
79
- }
80
-
81
- h3 {
82
- margin-top: 10px;
83
- margin-bottom: 10px;
84
- font-size: 1.25rem;
85
- color: #28a745;
86
- }
87
-
88
- pre {
89
- background-color: #3a4149;
90
- padding: 10px;
91
- border-radius: 5px;
92
- font-size: 1rem;
93
- color: #e0e0e0;
94
- overflow-x: auto;
95
- }
96
-
97
- .card-footer {
98
- text-align: center;
99
- border-top: 1px solid #4e5d6c;
100
- padding: 15px;
101
- }
102
-
103
- .no-pdf-message {
104
- text-align: center;
105
- font-size: 1.25rem;
106
- color: #6c757d;
107
- }
108
-
109
- @keyframes pulse {
110
- 0% {
111
- transform: scale(1);
112
- }
113
-
114
- 50% {
115
- transform: scale(1.2);
116
- }
117
-
118
- 100% {
119
- transform: scale(1);
120
- }
121
- }
122
-
123
- .emoji {
124
- font-size: 2rem;
125
- animation: pulse 1s infinite;
126
- display: inline-block;
127
- margin-right: 10px;
128
- }
129
-
130
- .emoji-high {
131
- color: #28a745;
132
- }
133
-
134
- .emoji-medium {
135
- color: #ffc107;
136
- }
137
-
138
- .emoji-low {
139
- color: #dc3545;
140
- }
141
-
142
- a {
143
- color: #007bff;
144
- }
145
- </style>
146
-
147
- </head>
148
-
149
- <body>
150
- <div class="container">
151
- <div class="left-side">
152
- <div class="card">
153
- <div class="card-header text-center">
154
- <h3>Model</h3>
155
- <h2>Extracted Details</h2>
156
- </div>
157
- <div class="card-body">
158
- <ul class="list-group mb-3">
159
- <li class="list-group-item">
160
- <strong>Extracted Data:</strong>
161
- {% for filename, text in data.extracted_text.items() %}
162
- <h3>{{ filename }}:</h3>
163
- <img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid mb-3"
164
- style="max-width: 100%; height: auto;" />
165
- <strong>Text:</strong>
166
- <p>{{ text }}</p>
167
- {% endfor %}
168
- </li>
169
- <li class="list-group-item">
170
- <strong>Name:</strong>
171
- {% if data.name is iterable and data.name is not string %}
172
- <ul>
173
- {% for value in data.name %}
174
- <li>{{ value }}<br></li>
175
- {% endfor %}
176
- </ul>
177
- {% else %}
178
- <p>{{ data.name }}</p>
179
- {% endif %}
180
- </li>
181
- <li class="list-group-item">
182
- <strong>Designation:</strong>
183
- {% if data.Designation is iterable and data.Designation is not string %}
184
- <ul>
185
- {% for value in data.Designation %}
186
- <li>{{ value }}<br></li>
187
- {% endfor %}
188
- </ul>
189
- {% else %}
190
- <p>{{ data.Designation }}</p>
191
- {% endif %}
192
- </li>
193
- <li class="list-group-item">
194
- <strong>Contact Number:</strong>
195
- {% if data.contact_number is iterable and data.contact_number is not string %}
196
- <ul>
197
- {% for value in data.contact_number %}
198
- <li>{{ value }}<br></li>
199
- {% endfor %}
200
- </ul>
201
- {% else %}
202
- <p>{{ data.contact_number }}</p>
203
- {% endif %}
204
- </li>
205
- <li class="list-group-item">
206
- <strong>Email:</strong>
207
- {% if data.email is iterable and data.email is not string %}
208
- <ul>
209
- {% for value in data.email %}
210
- <li>{{ value }}<br></li>
211
- {% endfor %}
212
- </ul>
213
- {% else %}
214
- <p>{{ data.email }}</p>
215
- {% endif %}
216
- </li>
217
- <li class="list-group-item">
218
- <strong>Address:</strong>
219
- {% if data.Location is iterable and data.Location is not string %}
220
- <ul>
221
- {% for value in data.Location %}
222
- <li>{{ value }}<br></li>
223
- {% endfor %}
224
- </ul>
225
- {% else %}
226
- <p>{{ data.Location }}</p>
227
- {% endif %}
228
- </li>
229
- <li class="list-group-item">
230
- <strong>Links:</strong>
231
- {% if data.Link is iterable and data.Link is not string %}
232
- <ul>
233
- {% for value in data.Link %}
234
- <li>{{ value }}<br></li>
235
- {% endfor %}
236
- </ul>
237
- {% else %}
238
- <p>{{ data.Link }}</p>
239
- {% endif %}
240
- </li>
241
- <li class="list-group-item">
242
- <strong>Organisation:</strong>
243
- {% if data.Company is iterable and data.Company is not string %}
244
- <ul>
245
- {% for value in data.Company %}
246
- <li>{{ value }}<br></li>
247
- {% endfor %}
248
- </ul>
249
- {% else %}
250
- <p>{{ data.Company }}</p>
251
- {% endif %}
252
- </li>
253
- </ul>
254
- <a href="{{ url_for('index') }}">
255
- <button type="button" class="btn btn-primary">Back to Upload</button>
256
- </a>
257
- </div>
258
- </div>
259
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
260
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
261
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
262
- </body>
263
-
264
- </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>Processed Results</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
+ .cont {
23
+ background-color: #2c2c2e;
24
+ padding: 30px;
25
+ border-radius: 15px;
26
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
27
+ transition: 1s ease;
28
+ }
29
+
30
+ .section-title {
31
+ color: #ee4410;
32
+ font-size: 1.5rem;
33
+ font-weight: bold;
34
+ margin-top: 20px;
35
+ border-bottom: 2px solid #ee4410;
36
+ padding-bottom: 10px;
37
+ }
38
+
39
+ .card {
40
+ background-color: #3a3a3c;
41
+ color: #f5f5f7;
42
+ border-radius: 10px;
43
+ margin-bottom: 15px;
44
+ padding: 15px;
45
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
46
+ transition: background-color 0.3s ease;
47
+ }
48
+
49
+ .card:hover {
50
+ background-color: #3a3a3c98;
51
+ }
52
+
53
+ .card-title {
54
+ color: #ee4410;
55
+ font-size: 1.2rem;
56
+ font-weight: bold;
57
+ }
58
+
59
+ .card-text {
60
+ color: #d1d1d6;
61
+ font-size: 1rem;
62
+ }
63
+
64
+ ul {
65
+ list-style-type: none;
66
+ padding-left: 0;
67
+ }
68
+
69
+ li::before {
70
+ content: "• ";
71
+ color: #ee4410;
72
+ }
73
+
74
+ .btn-reset {
75
+ background-color: #ff9f0a;
76
+ color: white;
77
+ border: none;
78
+ padding: 10px 20px;
79
+ border-radius: 5px;
80
+ transition: background-color 0.3s ease;
81
+ margin-bottom: 20px;
82
+ }
83
+
84
+ .btn-reset:hover {
85
+ background-color: #e03a2f;
86
+ }
87
+
88
+ .alert {
89
+ text-align: center;
90
+ position: absolute;
91
+ top: 0;
92
+ right: 15%;
93
+ /* right: 50%;
94
+ transform: translateX(-50%); */
95
+ }
96
+ </style>
97
+ </head>
98
+
99
+ <body>
100
+ <div class="container">
101
+ {% with messages = get_flashed_messages() %} {% if messages %}
102
+ <div class="alert alert-success mt-4 " id="flash-message">
103
+ {{ messages[0] }}
104
+ </div>
105
+ {% endif %} {% endwith %}
106
+
107
+ <!-- <div class="alert alert-success mt-4 " id="flash-message">
108
+ sfdsdaa asfcsd sdgsfr sdfgfd jhijunb hun hjujbuy hgbuuuu jjf
109
+ </div> -->
110
+ </div>
111
+ <div class="container cont mt-5">
112
+ <div class="d-flex align-items-center justify-content-between">
113
+ <h1>Extracted Details From Image</h1>
114
+ <!-- Reset Button -->
115
+ <div class="text-center mt-4">
116
+ <a href="{{ url_for('reset_upload') }}" class="btn btn-reset">Reset & Upload New File</a>
117
+ </div>
118
+ </div>
119
+ {% if data %}
120
+ <!-- Personal Information Section -->
121
+ <section>
122
+ <h3 class="section-title">Extracted Information</h3>
123
+ <div class="row">
124
+ <div class="col-md-12">
125
+ <div class="card">
126
+ <div class="card-body">
127
+ <div class="card">
128
+ <div class="card-body">
129
+ <h5 class="card-title">Extracted Data:</h5>
130
+ {% if data.extracted_text.items() %}
131
+ <ul>
132
+ {% for filename, text in data.extracted_text.items() %}
133
+ <li>{{ filename }}:</li>
134
+ <img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid" />
135
+ <strong>Text:</strong>
136
+ <p>{{ text }}</p>
137
+ {% endfor %}
138
+ </ul>
139
+ {% else %}
140
+ <p>No tools found</p>
141
+ {% endif %}
142
+ </div>
143
+ </div>
144
+ <div class="card-body">
145
+ <h5 class="card-title">Name:</h5>
146
+ {% if data.name is iterable and data.name is not string %}
147
+ <ul>
148
+ {% for value in data.name %}
149
+ <li>{{ value }}</li>
150
+ {% endfor %}
151
+ </ul>
152
+ {% else %}
153
+ <p>No tools found</p>
154
+ {% endif %}
155
+ </div>
156
+ <div class="card-body">
157
+ <h5 class="card-title">Name:</h5>
158
+ {% if data.name is iterable and data.name is not string %}
159
+ <ul>
160
+ {% for value in data.name %}
161
+ <li>{{ value }}</li>
162
+ {% endfor %}
163
+ </ul>
164
+ {% else %}
165
+ <p>No tools found</p>
166
+ {% endif %}
167
+ </div>
168
+ <div class="card-body">
169
+ <h5 class="card-title">Designation:</h5>
170
+ {% if data.Designation is iterable and data.Designation is not string %}
171
+ <ul>
172
+ {% for value in data.Designation %}
173
+ <li>{{ value }}</li>
174
+ {% endfor %}
175
+ </ul>
176
+ {% else %}
177
+ <p>No tools found</p>
178
+ {% endif %}
179
+ </div>
180
+ <div class="card-body">
181
+ <h5 class="card-title">Contact number:</h5>
182
+ {% if data.contact_number is iterable and data.contact_number is not string %}
183
+ <ul>
184
+ {% for value in data.contact_number %}
185
+ <li>{{ value }}</li>
186
+ {% endfor %}
187
+ </ul>
188
+ {% else %}
189
+ <p>No tools found</p>
190
+ {% endif %}
191
+ </div>
192
+ <div class="card-body">
193
+ <h5 class="card-title">Email:</h5>
194
+ {% if data.email is iterable and data.email is not string %}
195
+ <ul>
196
+ {% for value in data.email %}
197
+ <li>{{ value }}</li>
198
+ {% endfor %}
199
+ </ul>
200
+ {% else %}
201
+ <p>No tools found</p>
202
+ {% endif %}
203
+ </div>
204
+ <div class="card-body">
205
+ <h5 class="card-title">Location:</h5>
206
+ {% if data.Location is iterable and data.Location is not string %}
207
+ <ul>
208
+ {% for value in data.Location %}
209
+ <li>{{ value }}</li>
210
+ {% endfor %}
211
+ </ul>
212
+ {% else %}
213
+ <p>No tools found</p>
214
+ {% endif %}
215
+ </div>
216
+ <div class="card-body">
217
+ <h5 class="card-title">Link:</h5>
218
+ {% if data.Link is iterable and data.Link is not string %}
219
+ <ul>
220
+ {% for value in data.Link %}
221
+ <li>{{ value }}</li>
222
+ {% endfor %}
223
+ </ul>
224
+ {% else %}
225
+ <p>No tools found</p>
226
+ {% endif %}
227
+ </div>
228
+ <div class="card-body">
229
+ <h5 class="card-title">Organisation:</h5>
230
+ {% if data.Company is iterable and data.Company is not string %}
231
+ <ul>
232
+ {% for value in data.Company %}
233
+ <li>{{ value }}</li>
234
+ {% endfor %}
235
+ </ul>
236
+ {% else %}
237
+ <p>No tools found</p>
238
+ {% endif %}
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ {% else %}
247
+ <p>No data available. Please process a file.</p>
248
+ {% endif %}
249
+ </div>
250
+
251
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
252
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
253
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
254
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
255
+ <script>
256
+ setTimeout(function () {
257
+ let flashMessage = document.getElementById("flash-message");
258
+ if (flashMessage) {
259
+ flashMessage.style.transition = "opacity 1s ease";
260
+ flashMessage.style.opacity = 0;
261
+ setTimeout(() => flashMessage.remove(), 1000);
262
+ }
263
+ }, 3000);
264
+ </script>
265
+ </body>
266
+
267
+ </html>