ethix commited on
Commit
dd0760e
·
1 Parent(s): 28af384

Update results HTML generation with precise confidence display and Tailwind CSS version

Browse files

- Modify confidence score display to show 4 decimal places for increased precision
- Update Tailwind CSS CDN link to version 3.4.11
- Correct result index references in HTML generation for consistent model result display
- Dynamically render GOAT model confidence scores instead of hardcoded values

Files changed (1) hide show
  1. app.py +24 -23
app.py CHANGED
@@ -209,10 +209,11 @@ def generate_results_html(results):
209
  return 'bg-blue-500 text-blue-700 bg-blue-100', 'bg-blue-400', 'bg-blue-100', 'bg-blue-700 text-blue-700', 'bg-blue-200'
210
  else:
211
  return 'bg-gray-300 text-gray-700 bg-gray-100', 'bg-gray-400', 'bg-gray-100', 'bg-gray-700 text-gray-700', 'bg-gray-200'
 
212
 
213
  html_content = f"""
214
 
215
- <link href="https://cdn.jsdelivr.net/npm/[email protected].17/dist/tailwind.min.css" rel="stylesheet">
216
  <div class="container mx-auto mt-4">
217
  <div class="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
218
  <!-- Tile 1: SwinV2/detect -->
@@ -235,7 +236,7 @@ def generate_results_html(results):
235
  <div class="w-full bg-neutral-400 rounded-none h-8">
236
  <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
237
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
238
- <span class="ml-1 font-medium font-mono">{results[0][2]:.2f}</span>
239
  </p>
240
  </div>
241
  </div>
@@ -244,7 +245,7 @@ def generate_results_html(results):
244
  <div class="w-full bg-neutral-400 rounded-none h-8">
245
  <div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
246
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
247
- <span class="ml-1 font-medium font-mono">{results[0][3]:.2f}</span>
248
  </p>
249
  </div>
250
  </div>
@@ -276,18 +277,18 @@ def generate_results_html(results):
276
  <div>
277
  <div class="mt-4 relative -mx-4 bg-neutral-800">
278
  <div class="w-full bg-neutral-400 rounded-none h-8">
279
- <div class="bg-green-400 h-full rounded-none" style="width: {results[1][1] * 100:.2f}%;">
280
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
281
- <span class="ml-1 font-medium font-mono">{results[1][1]:.2f}</span>
282
  </p>
283
  </div>
284
  </div>
285
  </div>
286
  <div class="mt-4 relative -mx-4 bg-neutral-800">
287
  <div class="w-full bg-neutral-400 rounded-none h-8">
288
- <div class="bg-red-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
289
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
290
- <span class="ml-1 font-medium font-mono">{results[1][2]:.2f}</span>
291
  </p>
292
  </div>
293
  </div>
@@ -296,7 +297,7 @@ def generate_results_html(results):
296
  <div class="flex flex-col items-start">
297
  <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
298
  <hr class="py-px my-2 w-full bg-neutral-700" />
299
- <div class="text-xs font-mono">Real: {results[1][1]:.4f}, AI: {results[1][2]:.4f}</div>
300
  <hr class="py-px mt-6 w-full bg-neutral-700" />
301
  <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
302
  </div>
@@ -319,18 +320,18 @@ def generate_results_html(results):
319
  <div>
320
  <div class="mt-4 relative -mx-4 bg-neutral-800">
321
  <div class="w-full bg-neutral-400 rounded-none h-8">
322
- <div class="bg-green-400 h-full rounded-none" style="width: {results[2][1] * 100:.2f}%;">
323
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
324
- <span class="ml-1 font-medium font-mono">{results[2][1]:.2f}</span>
325
  </p>
326
  </div>
327
  </div>
328
  </div>
329
  <div class="mt-4 relative -mx-4 bg-neutral-800">
330
  <div class="w-full bg-neutral-400 rounded-none h-8">
331
- <div class="bg-red-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
332
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
333
- <span class="ml-1 font-medium font-mono">{results[2][2]:.2f}</span>
334
  </p>
335
  </div>
336
  </div>
@@ -339,7 +340,7 @@ def generate_results_html(results):
339
  <div class="flex flex-col items-start">
340
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
341
  <hr class="py-px my-2 w-full bg-neutral-700" />
342
- <div class="text-xs font-mono">Real: {results[2][1]:.4f}, AI: {results[2][2]:.4f}</div>
343
  <hr class="py-px mt-6 w-full bg-neutral-700" />
344
  <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
345
  </div>
@@ -362,18 +363,18 @@ def generate_results_html(results):
362
  <div>
363
  <div class="mt-4 relative -mx-4 bg-neutral-800">
364
  <div class="w-full bg-neutral-400 rounded-none h-8">
365
- <div class="bg-green-400 h-full rounded-none" style="width: {results[3][1] * 100:.2f}%;">
366
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
367
- <span class="ml-1 font-medium font-mono">{results[3][1]:.2f}</span>
368
  </p>
369
  </div>
370
  </div>
371
  </div>
372
  <div class="mt-4 relative -mx-4 bg-neutral-800">
373
  <div class="w-full bg-neutral-400 rounded-none h-8">
374
- <div class="bg-red-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
375
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
376
- <span class="ml-1 font-medium font-mono">{results[3][2]:.2f}</span>
377
  </p>
378
  </div>
379
  </div>
@@ -382,7 +383,7 @@ def generate_results_html(results):
382
  <div class="flex flex-col items-start">
383
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
384
  <hr class="py-px my-2 w-full bg-neutral-700" />
385
- <div class="text-xs font-mono">Real: {results[3][1]:.4f}, AI: {results[3][2]:.4f}</div>
386
  <hr class="py-px mt-6 w-full bg-neutral-700" />
387
  <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
388
  </div>
@@ -405,18 +406,18 @@ def generate_results_html(results):
405
  <div>
406
  <div class="mt-4 relative -mx-4 bg-neutral-800">
407
  <div class="w-full bg-neutral-400 rounded-none h-8">
408
- <div class="bg-green-400 h-full rounded-none" style="width: 50%;">
409
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
410
- <span class="ml-1 font-medium font-mono">50%</span>
411
  </p>
412
  </div>
413
  </div>
414
  </div>
415
  <div class="mt-4 relative -mx-4 bg-neutral-800">
416
  <div class="w-full bg-neutral-400 rounded-none h-8">
417
- <div class="bg-red-400 h-full rounded-none" style="width: 50%;">
418
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
419
- <span class="ml-1 font-medium font-mono">50%</span>
420
  </p>
421
  </div>
422
  </div>
@@ -425,7 +426,7 @@ def generate_results_html(results):
425
  <div class="flex flex-col items-start">
426
  <h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
427
  <hr class="py-px my-2 w-full bg-neutral-700" />
428
- <div class="text-xs font-mono">Real: 50%, AI: 50%</div>
429
  <hr class="py-px mt-6 w-full bg-neutral-700" />
430
  <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
431
  </div>
 
209
  return 'bg-blue-500 text-blue-700 bg-blue-100', 'bg-blue-400', 'bg-blue-100', 'bg-blue-700 text-blue-700', 'bg-blue-200'
210
  else:
211
  return 'bg-gray-300 text-gray-700 bg-gray-100', 'bg-gray-400', 'bg-gray-100', 'bg-gray-700 text-gray-700', 'bg-gray-200'
212
+
213
 
214
  html_content = f"""
215
 
216
+ <link href="https://cdn.jsdelivr.net/npm/[email protected].11/dist/tailwind.min.css" rel="stylesheet">
217
  <div class="container mx-auto mt-4">
218
  <div class="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
219
  <!-- Tile 1: SwinV2/detect -->
 
236
  <div class="w-full bg-neutral-400 rounded-none h-8">
237
  <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
238
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
239
+ <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
240
  </p>
241
  </div>
242
  </div>
 
245
  <div class="w-full bg-neutral-400 rounded-none h-8">
246
  <div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
247
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
248
+ <span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
249
  </p>
250
  </div>
251
  </div>
 
277
  <div>
278
  <div class="mt-4 relative -mx-4 bg-neutral-800">
279
  <div class="w-full bg-neutral-400 rounded-none h-8">
280
+ <div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
281
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
282
+ <span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
283
  </p>
284
  </div>
285
  </div>
286
  </div>
287
  <div class="mt-4 relative -mx-4 bg-neutral-800">
288
  <div class="w-full bg-neutral-400 rounded-none h-8">
289
+ <div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
290
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
291
+ <span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
292
  </p>
293
  </div>
294
  </div>
 
297
  <div class="flex flex-col items-start">
298
  <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
299
  <hr class="py-px my-2 w-full bg-neutral-700" />
300
+ <div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
301
  <hr class="py-px mt-6 w-full bg-neutral-700" />
302
  <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
303
  </div>
 
320
  <div>
321
  <div class="mt-4 relative -mx-4 bg-neutral-800">
322
  <div class="w-full bg-neutral-400 rounded-none h-8">
323
+ <div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
324
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
325
+ <span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
326
  </p>
327
  </div>
328
  </div>
329
  </div>
330
  <div class="mt-4 relative -mx-4 bg-neutral-800">
331
  <div class="w-full bg-neutral-400 rounded-none h-8">
332
+ <div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
333
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
334
+ <span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
335
  </p>
336
  </div>
337
  </div>
 
340
  <div class="flex flex-col items-start">
341
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
342
  <hr class="py-px my-2 w-full bg-neutral-700" />
343
+ <div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
344
  <hr class="py-px mt-6 w-full bg-neutral-700" />
345
  <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
346
  </div>
 
363
  <div>
364
  <div class="mt-4 relative -mx-4 bg-neutral-800">
365
  <div class="w-full bg-neutral-400 rounded-none h-8">
366
+ <div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
367
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
368
+ <span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
369
  </p>
370
  </div>
371
  </div>
372
  </div>
373
  <div class="mt-4 relative -mx-4 bg-neutral-800">
374
  <div class="w-full bg-neutral-400 rounded-none h-8">
375
+ <div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
376
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
377
+ <span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
378
  </p>
379
  </div>
380
  </div>
 
383
  <div class="flex flex-col items-start">
384
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
385
  <hr class="py-px my-2 w-full bg-neutral-700" />
386
+ <div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
387
  <hr class="py-px mt-6 w-full bg-neutral-700" />
388
  <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
389
  </div>
 
406
  <div>
407
  <div class="mt-4 relative -mx-4 bg-neutral-800">
408
  <div class="w-full bg-neutral-400 rounded-none h-8">
409
+ <div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
410
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
411
+ <span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
412
  </p>
413
  </div>
414
  </div>
415
  </div>
416
  <div class="mt-4 relative -mx-4 bg-neutral-800">
417
  <div class="w-full bg-neutral-400 rounded-none h-8">
418
+ <div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
419
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
420
+ <span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
421
  </p>
422
  </div>
423
  </div>
 
426
  <div class="flex flex-col items-start">
427
  <h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
428
  <hr class="py-px my-2 w-full bg-neutral-700" />
429
+ <div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
430
  <hr class="py-px mt-6 w-full bg-neutral-700" />
431
  <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
432
  </div>