Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor2
Sleeping

App Files Community
WebashalarForML commited on
Commit
6404a9c
·
verified ·
1 Parent(s): 0666221

Create result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +272 -0
templates/result.html ADDED
@@ -0,0 +1,272 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ font-family: 'Arial', sans-serif;
14
+ }
15
+
16
+ .container {
17
+ display: flex;
18
+ flex-direction: row;
19
+ height: 100vh;
20
+ margin-top: 20px;
21
+ }
22
+
23
+ .left-side {
24
+ flex: 1;
25
+ padding: 20px;
26
+ overflow-y: auto;
27
+ border: none;
28
+ border-radius: 10px;
29
+ }
30
+
31
+ .right-side {
32
+ flex: 1;
33
+ padding: 20px;
34
+ background-color: #1d2c38;
35
+ border-left: 1px solid #ddd;
36
+ border-radius: 10px;
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ }
41
+
42
+ .card {
43
+ border: none;
44
+ border-radius: 10px;
45
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
46
+ margin-bottom: 20px;
47
+ }
48
+
49
+ .card-header {
50
+ background-color: #28a745;
51
+ color: white;
52
+ border-top-left-radius: 10px;
53
+ border-top-right-radius: 10px;
54
+ }
55
+
56
+ .list-group-item {
57
+ border: none;
58
+ background-color: #f8f9fa;
59
+ padding: 10px;
60
+ }
61
+
62
+ iframe {
63
+ width: 100%;
64
+ height: 100%;
65
+ border: none;
66
+ border-radius: 12px;
67
+ }
68
+
69
+ .list-group-item strong {
70
+ color: #343a40;
71
+ }
72
+
73
+ h2 {
74
+ margin-bottom: 20px;
75
+ }
76
+
77
+ h3 {
78
+ margin-top: 10px;
79
+ margin-bottom: 10px;
80
+ font-size: 1.25rem;
81
+ color: #343a40;
82
+ }
83
+
84
+ pre {
85
+ background-color: #f8f9fa;
86
+ padding: 10px;
87
+ border-radius: 5px;
88
+ font-size: 1rem;
89
+ color: #343a40;
90
+ overflow-x: auto;
91
+ }
92
+
93
+ .card-footer {
94
+ text-align: center;
95
+ border-top: 1px solid #ddd;
96
+ padding: 15px;
97
+ }
98
+
99
+ .no-pdf-message {
100
+ text-align: center;
101
+ font-size: 1.25rem;
102
+ color: #6c757d;
103
+ }
104
+
105
+ @keyframes pulse {
106
+ 0% {
107
+ transform: scale(1);
108
+ }
109
+
110
+ 50% {
111
+ transform: scale(1.2);
112
+ }
113
+
114
+ 100% {
115
+ transform: scale(1);
116
+ }
117
+ }
118
+
119
+ .emoji {
120
+ font-size: 2rem;
121
+ animation: pulse 1s infinite;
122
+ display: inline-block;
123
+ margin-right: 10px;
124
+ }
125
+
126
+ .emoji-high {
127
+ color: #28a745;
128
+ /* Green for high scores */
129
+ }
130
+
131
+ .emoji-medium {
132
+ color: #ffc107;
133
+ /* Yellow for medium scores */
134
+ }
135
+
136
+ .emoji-low {
137
+ color: #dc3545;
138
+ /* Red for low scores */
139
+ }
140
+ </style>
141
+
142
+ </head>
143
+
144
+ <body>
145
+ <div class="container">
146
+ <div class="left-side">
147
+ <div class="card">
148
+ <div class="card-header text-center">
149
+ <h3>Model</h3>
150
+ <h2>Extracted Details</h2>
151
+ </div>
152
+ <div class="card-body">
153
+ <ul class="list-group mb-3">
154
+ <li class="list-group-item">
155
+ <strong>Extracted Data:</strong>
156
+ {% for filename, text in data.extracted_text.items() %}
157
+ <h3>{{ filename }}:</h3>
158
+ <!-- Display Image using Img[filename] -->
159
+ <img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid mb-3"
160
+ style="max-width: 100%; height: auto;" />
161
+ <strong>Text:</strong>
162
+ <p>{{ text }}</p>
163
+ {% endfor %}
164
+ </li>
165
+ <li class="list-group-item">
166
+ <strong>Name:</strong>
167
+ {% if data.name is iterable and data.name is not string %}
168
+ <ul>
169
+ {% for value in data.name %}
170
+ <li>
171
+ {{ value }}<br>
172
+ </li>
173
+ {% endfor %}
174
+ </ul>
175
+ {% else %}
176
+ <p>{{ data.name }}</p>
177
+ {% endif %}
178
+ </li>
179
+ <li class="list-group-item">
180
+ <strong>Designation:</strong>
181
+ {% if data.Designation is iterable and data.Designation is not string %}
182
+ <ul>
183
+ {% for value in data.Designation %}
184
+ <li>
185
+ {{ value }}<br>
186
+ </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>
199
+ {{ value }}<br>
200
+ </li>
201
+ {% endfor %}
202
+ </ul>
203
+ {% else %}
204
+ <p>{{ data.contact_number }}</p>
205
+ {% endif %}
206
+ </li>
207
+ <li class="list-group-item">
208
+ <strong>Email:</strong>
209
+ {% if data.email is iterable and data.email is not string %}
210
+ <ul>
211
+ {% for value in data.email %}
212
+ <li>
213
+ {{ value }}<br>
214
+ </li>
215
+ {% endfor %}
216
+ </ul>
217
+ {% else %}
218
+ <p>{{ data.email }}</p>
219
+ {% endif %}
220
+ </li>
221
+ <li class="list-group-item">
222
+ <strong>Address:</strong>
223
+ {% if data.Location is iterable and data.Location is not string %}
224
+ <ul>
225
+ {% for value in data.Location %}
226
+ <li>
227
+ {{ value }}<br>
228
+ </li>
229
+ {% endfor %}
230
+ </ul>
231
+ {% else %}
232
+ <p>{{ data.Location }}</p>
233
+ {% endif %}
234
+ </li>
235
+ <li class="list-group-item">
236
+ <strong>Links:</strong>
237
+ {% if data.Link is iterable and data.Link is not string %}
238
+ <ul>
239
+ {% for value in data.Link %}
240
+ <li>
241
+ {{ value }}<br>
242
+ </li>
243
+ {% endfor %}
244
+ </ul>
245
+ {% else %}
246
+ <p>{{ data.Link }}</p>
247
+ {% endif %}
248
+ </li>
249
+ <li class="list-group-item">
250
+ <strong>Organisation:</strong>
251
+ {% if data.Company is iterable and data.Company is not string %}
252
+ <ul>
253
+ {% for value in data.Company %}
254
+ <li>
255
+ {{ value }}<br>
256
+ </li>
257
+ {% endfor %}
258
+ </ul>
259
+ {% else %}
260
+ <p>{{ data.Company }}</p>
261
+ {% endif %}
262
+ </li>
263
+ </ul>
264
+ <a href="{{ url_for('index') }}">Back to Upload</a>
265
+ </div>
266
+ </div>
267
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
268
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
269
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
270
+ </body>
271
+
272
+ </html>