ethix commited on
Commit
77f3a53
·
1 Parent(s): 3cb2f30

Enhance results HTML generation with dynamic styling and detailed model information

Browse files

- Add get_header_color function to dynamically color card headers based on classification
- Update card layout to display model name, confidence scores, and classification
- Replace placeholder content with dynamic model result information
- Improve visual representation of AI and real confidence percentages using progress bars

Files changed (1) hide show
  1. app.py +83 -12
app.py CHANGED
@@ -197,6 +197,17 @@ def predict_image(img, confidence_threshold):
197
 
198
  # Define a function to generate the HTML content
199
  def generate_results_html(results):
 
 
 
 
 
 
 
 
 
 
 
200
  print(results)
201
  html_content = f"""
202
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
@@ -226,33 +237,93 @@ def generate_results_html(results):
226
  <div class="col">
227
  <div class="card-group">
228
  <div class="card">
229
- <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  <div class="card-body">
231
- <h5 class="card-title">Card title</h5>
232
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 
 
 
 
 
 
233
  </div>
234
  <div class="card-footer">
235
- <small class="text-muted">Last updated 3 mins ago</small>
236
  </div>
237
  </div>
238
  <div class="card">
239
- <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
 
 
240
  <div class="card-body">
241
- <h5 class="card-title">Card title</h5>
242
- <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 
 
 
 
 
 
243
  </div>
244
  <div class="card-footer">
245
- <small class="text-muted">Last updated 3 mins ago</small>
246
  </div>
247
  </div>
248
  <div class="card">
249
- <img src="https://placehold.jp/150x50.png" class="card-img-top" alt="...">
 
 
250
  <div class="card-body">
251
- <h5 class="card-title">Card title</h5>
252
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
 
 
 
 
 
 
253
  </div>
254
  <div class="card-footer">
255
- <small class="text-muted">Last updated 3 mins ago</small>
256
  </div>
257
  </div>
258
  </div>
 
197
 
198
  # Define a function to generate the HTML content
199
  def generate_results_html(results):
200
+ def get_header_color(label):
201
+ if label == 'AI':
202
+ return 'bg-danger'
203
+ elif label == 'REAL':
204
+ return 'bg-success'
205
+ elif label == 'UNCERTAIN':
206
+ return 'bg-warning'
207
+ elif label == 'MAINTENANCE':
208
+ return 'bg-info'
209
+ else:
210
+ return 'bg-secondary'
211
  print(results)
212
  html_content = f"""
213
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 
237
  <div class="col">
238
  <div class="card-group">
239
  <div class="card">
240
+ <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
241
+ <span class="text-center font-weight-bolder">{results[0][-1]}</span>
242
+ </div>
243
+ <div class="card-body">
244
+ <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
245
+
246
+ <div class="progress">
247
+ <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
248
+ </div>
249
+ <div class="progress">
250
+ <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
251
+ </div>
252
+ </div>
253
+ <div class="card-footer">
254
+ <small class="text-muted">model by @haywoodsloan / more info</small>
255
+ </div>
256
+ </div>
257
+ <div class="card">
258
+ <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
259
+ <span class="text-center font-weight-bolder">{results[0][-1]}</span>
260
+ </div>
261
+ <div class="card-body">
262
+ <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
263
+
264
+ <div class="progress">
265
+ <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
266
+ </div>
267
+ <div class="progress">
268
+ <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
269
+ </div>
270
+ </div>
271
+ <div class="card-footer">
272
+ <small class="text-muted">model by @haywoodsloan / more info</small>
273
+ </div>
274
+ </div>
275
+ <div class="card">
276
+ <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
277
+ <span class="text-center font-weight-bolder">{results[0][-1]}</span>
278
+ </div>
279
  <div class="card-body">
280
+ <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
281
+
282
+ <div class="progress">
283
+ <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
284
+ </div>
285
+ <div class="progress">
286
+ <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
287
+ </div>
288
  </div>
289
  <div class="card-footer">
290
+ <small class="text-muted">model by @haywoodsloan / more info</small>
291
  </div>
292
  </div>
293
  <div class="card">
294
+ <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
295
+ <span class="text-center font-weight-bolder">{results[0][-1]}</span>
296
+ </div>
297
  <div class="card-body">
298
+ <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
299
+
300
+ <div class="progress">
301
+ <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
302
+ </div>
303
+ <div class="progress">
304
+ <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
305
+ </div>
306
  </div>
307
  <div class="card-footer">
308
+ <small class="text-muted">model by @haywoodsloan / more info</small>
309
  </div>
310
  </div>
311
  <div class="card">
312
+ <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
313
+ <span class="text-center font-weight-bolder">{results[0][-1]}</span>
314
+ </div>
315
  <div class="card-body">
316
+ <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
317
+
318
+ <div class="progress">
319
+ <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
320
+ </div>
321
+ <div class="progress">
322
+ <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
323
+ </div>
324
  </div>
325
  <div class="card-footer">
326
+ <small class="text-muted">model by @haywoodsloan / more info</small>
327
  </div>
328
  </div>
329
  </div>