Hugging Face's logo

Spaces:
buildborderless
/
OpenSight-Deepfake-Detection-Models-Playground
Running

App Files Community
2
LPX55 commited on
Commit
9bdd986
·
1 Parent(s): 1835e62

Replace neutral color classes with gray color classes in results HTML generation

Browse files

- Update Tailwind CSS color classes from 'neutral-*' to 'gray-*' for consistent styling
- Maintain existing layout and functionality of results display
- Ensure color scheme remains visually consistent across model result tiles

Files changed (1) hide show
  1. app.py +40 -40
app.py CHANGED
@@ -220,10 +220,10 @@ def generate_results_html(results):
220
  <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
221
  <!-- Tile 1: SwinV2/detect -->
222
  <div
223
- class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
224
  <div
225
  class="-m-4 h-24 {get_header_color(results[0][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[0][-1])[4]}">
226
- <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1: {results[0][1]}</span>
227
  <span
228
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-2.5 py-0.5 {get_header_color(results[0][-1])[3]}"
229
  >
@@ -234,8 +234,8 @@ def generate_results_html(results):
234
  </span>
235
  </div>
236
  <div>
237
- <div class="mt-4 relative -mx-4 bg-neutral-800">
238
- <div class="w-full bg-neutral-400 rounded-none h-8">
239
  <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
240
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
241
  <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
@@ -243,8 +243,8 @@ def generate_results_html(results):
243
  </div>
244
  </div>
245
  </div>
246
- <div class="mt-4 relative -mx-4 bg-neutral-800">
247
- <div class="w-full bg-neutral-400 rounded-none h-8">
248
  <div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
249
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
250
  <span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
@@ -255,18 +255,18 @@ def generate_results_html(results):
255
  </div>
256
  <div class="flex flex-col items-start">
257
  <h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
258
- <hr class="py-px my-2 w-full bg-neutral-700" />
259
  <div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
260
- <hr class="py-px mt-6 w-full bg-neutral-700" />
261
  <a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
262
  </div>
263
  </div>
264
  <!-- Tile 2: ViT/AI-vs-Real -->
265
  <div
266
- class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
267
  <div
268
  class="-m-4 h-24 {get_header_color(results[1][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[1][-1])[4]}">
269
- <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2: {results[1][1]}</span>
270
  <span
271
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-2.5 py-0.5 {get_header_color(results[1][-1])[3]}"
272
  >
@@ -277,8 +277,8 @@ def generate_results_html(results):
277
  </span>
278
  </div>
279
  <div>
280
- <div class="mt-4 relative -mx-4 bg-neutral-800">
281
- <div class="w-full bg-neutral-400 rounded-none h-8">
282
  <div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
283
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
284
  <span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
@@ -286,8 +286,8 @@ def generate_results_html(results):
286
  </div>
287
  </div>
288
  </div>
289
- <div class="mt-4 relative -mx-4 bg-neutral-800">
290
- <div class="w-full bg-neutral-400 rounded-none h-8">
291
  <div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
292
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
293
  <span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
@@ -298,18 +298,18 @@ def generate_results_html(results):
298
  </div>
299
  <div class="flex flex-col items-start">
300
  <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
301
- <hr class="py-px my-2 w-full bg-neutral-700" />
302
  <div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
303
- <hr class="py-px mt-6 w-full bg-neutral-700" />
304
  <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
305
  </div>
306
  </div>
307
  <!-- Tile 3: Swin/SDXL -->
308
  <div
309
- class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
310
  <div
311
  class="-m-4 h-24 {get_header_color(results[2][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[2][-1])[4]}">
312
- <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3: {results[2][1]}</span>
313
  <span
314
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-2.5 py-0.5 {get_header_color(results[2][-1])[3]}"
315
  >
@@ -320,8 +320,8 @@ def generate_results_html(results):
320
  </span>
321
  </div>
322
  <div>
323
- <div class="mt-4 relative -mx-4 bg-neutral-800">
324
- <div class="w-full bg-neutral-400 rounded-none h-8">
325
  <div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
326
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
327
  <span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
@@ -329,8 +329,8 @@ def generate_results_html(results):
329
  </div>
330
  </div>
331
  </div>
332
- <div class="mt-4 relative -mx-4 bg-neutral-800">
333
- <div class="w-full bg-neutral-400 rounded-none h-8">
334
  <div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
335
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
336
  <span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
@@ -341,18 +341,18 @@ def generate_results_html(results):
341
  </div>
342
  <div class="flex flex-col items-start">
343
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
344
- <hr class="py-px my-2 w-full bg-neutral-700" />
345
  <div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
346
- <hr class="py-px mt-6 w-full bg-neutral-700" />
347
  <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
348
  </div>
349
  </div>
350
  <!-- Tile 4: Swin/SDXL-FLUX -->
351
  <div
352
- class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
353
  <div
354
  class="-m-4 h-24 {get_header_color(results[3][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[3][-1])[4]}">
355
- <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4: {results[3][1]}</span>
356
  <span
357
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-2.5 py-0.5 {get_header_color(results[3][-1])[3]}"
358
  >
@@ -363,8 +363,8 @@ def generate_results_html(results):
363
  </span>
364
  </div>
365
  <div>
366
- <div class="mt-4 relative -mx-4 bg-neutral-800">
367
- <div class="w-full bg-neutral-400 rounded-none h-8">
368
  <div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
369
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
370
  <span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
@@ -372,8 +372,8 @@ def generate_results_html(results):
372
  </div>
373
  </div>
374
  </div>
375
- <div class="mt-4 relative -mx-4 bg-neutral-800">
376
- <div class="w-full bg-neutral-400 rounded-none h-8">
377
  <div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
378
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
379
  <span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
@@ -384,18 +384,18 @@ def generate_results_html(results):
384
  </div>
385
  <div class="flex flex-col items-start">
386
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
387
- <hr class="py-px my-2 w-full bg-neutral-700" />
388
  <div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
389
- <hr class="py-px mt-6 w-full bg-neutral-700" />
390
  <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
391
  </div>
392
  </div>
393
  <!-- Tile 5: GOAT -->
394
  <div
395
- class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
396
  <div
397
  class="-m-4 h-24 {get_header_color(results[4][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[4][-1])[4]}">
398
- <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>
399
  <span
400
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-2.5 py-0.5 {get_header_color(results[4][-1])[3]}"
401
  >
@@ -406,8 +406,8 @@ def generate_results_html(results):
406
  </span>
407
  </div>
408
  <div>
409
- <div class="mt-4 relative -mx-4 bg-neutral-800">
410
- <div class="w-full bg-neutral-400 rounded-none h-8">
411
  <div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
412
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
413
  <span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
@@ -415,8 +415,8 @@ def generate_results_html(results):
415
  </div>
416
  </div>
417
  </div>
418
- <div class="mt-4 relative -mx-4 bg-neutral-800">
419
- <div class="w-full bg-neutral-400 rounded-none h-8">
420
  <div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
421
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
422
  <span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
@@ -427,9 +427,9 @@ def generate_results_html(results):
427
  </div>
428
  <div class="flex flex-col items-start">
429
  <h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
430
- <hr class="py-px my-2 w-full bg-neutral-700" />
431
  <div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
432
- <hr class="py-px mt-6 w-full bg-neutral-700" />
433
  <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
434
  </div>
435
  </div>
 
220
  <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
221
  <!-- Tile 1: SwinV2/detect -->
222
  <div
223
+ class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
224
  <div
225
  class="-m-4 h-24 {get_header_color(results[0][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[0][-1])[4]}">
226
+ <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1: {results[0][1]}</span>
227
  <span
228
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-2.5 py-0.5 {get_header_color(results[0][-1])[3]}"
229
  >
 
234
  </span>
235
  </div>
236
  <div>
237
+ <div class="mt-4 relative -mx-4 bg-gray-800">
238
+ <div class="w-full bg-gray-400 rounded-none h-8">
239
  <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
240
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
241
  <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
 
243
  </div>
244
  </div>
245
  </div>
246
+ <div class="mt-4 relative -mx-4 bg-gray-800">
247
+ <div class="w-full bg-gray-400 rounded-none h-8">
248
  <div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
249
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
250
  <span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
 
255
  </div>
256
  <div class="flex flex-col items-start">
257
  <h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
258
+ <hr class="py-px my-2 w-full bg-gray-700" />
259
  <div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
260
+ <hr class="py-px mt-6 w-full bg-gray-700" />
261
  <a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
262
  </div>
263
  </div>
264
  <!-- Tile 2: ViT/AI-vs-Real -->
265
  <div
266
+ class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
267
  <div
268
  class="-m-4 h-24 {get_header_color(results[1][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[1][-1])[4]}">
269
+ <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2: {results[1][1]}</span>
270
  <span
271
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-2.5 py-0.5 {get_header_color(results[1][-1])[3]}"
272
  >
 
277
  </span>
278
  </div>
279
  <div>
280
+ <div class="mt-4 relative -mx-4 bg-gray-800">
281
+ <div class="w-full bg-gray-400 rounded-none h-8">
282
  <div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
283
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
284
  <span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
 
286
  </div>
287
  </div>
288
  </div>
289
+ <div class="mt-4 relative -mx-4 bg-gray-800">
290
+ <div class="w-full bg-gray-400 rounded-none h-8">
291
  <div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
292
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
293
  <span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
 
298
  </div>
299
  <div class="flex flex-col items-start">
300
  <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
301
+ <hr class="py-px my-2 w-full bg-gray-700" />
302
  <div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
303
+ <hr class="py-px mt-6 w-full bg-gray-700" />
304
  <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
305
  </div>
306
  </div>
307
  <!-- Tile 3: Swin/SDXL -->
308
  <div
309
+ class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
310
  <div
311
  class="-m-4 h-24 {get_header_color(results[2][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[2][-1])[4]}">
312
+ <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3: {results[2][1]}</span>
313
  <span
314
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-2.5 py-0.5 {get_header_color(results[2][-1])[3]}"
315
  >
 
320
  </span>
321
  </div>
322
  <div>
323
+ <div class="mt-4 relative -mx-4 bg-gray-800">
324
+ <div class="w-full bg-gray-400 rounded-none h-8">
325
  <div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
326
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
327
  <span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
 
329
  </div>
330
  </div>
331
  </div>
332
+ <div class="mt-4 relative -mx-4 bg-gray-800">
333
+ <div class="w-full bg-gray-400 rounded-none h-8">
334
  <div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
335
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
336
  <span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
 
341
  </div>
342
  <div class="flex flex-col items-start">
343
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
344
+ <hr class="py-px my-2 w-full bg-gray-700" />
345
  <div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
346
+ <hr class="py-px mt-6 w-full bg-gray-700" />
347
  <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
348
  </div>
349
  </div>
350
  <!-- Tile 4: Swin/SDXL-FLUX -->
351
  <div
352
+ class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
353
  <div
354
  class="-m-4 h-24 {get_header_color(results[3][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[3][-1])[4]}">
355
+ <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4: {results[3][1]}</span>
356
  <span
357
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-2.5 py-0.5 {get_header_color(results[3][-1])[3]}"
358
  >
 
363
  </span>
364
  </div>
365
  <div>
366
+ <div class="mt-4 relative -mx-4 bg-gray-800">
367
+ <div class="w-full bg-gray-400 rounded-none h-8">
368
  <div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
369
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
370
  <span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
 
372
  </div>
373
  </div>
374
  </div>
375
+ <div class="mt-4 relative -mx-4 bg-gray-800">
376
+ <div class="w-full bg-gray-400 rounded-none h-8">
377
  <div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
378
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
379
  <span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
 
384
  </div>
385
  <div class="flex flex-col items-start">
386
  <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
387
+ <hr class="py-px my-2 w-full bg-gray-700" />
388
  <div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
389
+ <hr class="py-px mt-6 w-full bg-gray-700" />
390
  <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
391
  </div>
392
  </div>
393
  <!-- Tile 5: GOAT -->
394
  <div
395
+ class="group flex flex-col bg-gray-300 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
396
  <div
397
  class="-m-4 h-24 {get_header_color(results[4][-1])[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{get_header_color(results[4][-1])[4]}">
398
+ <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>
399
  <span
400
  class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-2.5 py-0.5 {get_header_color(results[4][-1])[3]}"
401
  >
 
406
  </span>
407
  </div>
408
  <div>
409
+ <div class="mt-4 relative -mx-4 bg-gray-800">
410
+ <div class="w-full bg-gray-400 rounded-none h-8">
411
  <div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
412
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
413
  <span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
 
415
  </div>
416
  </div>
417
  </div>
418
+ <div class="mt-4 relative -mx-4 bg-gray-800">
419
+ <div class="w-full bg-gray-400 rounded-none h-8">
420
  <div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
421
  <p class="p-2 px-4 text-xs self-center align-middle">Conf:
422
  <span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
 
427
  </div>
428
  <div class="flex flex-col items-start">
429
  <h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
430
+ <hr class="py-px my-2 w-full bg-gray-700" />
431
  <div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
432
+ <hr class="py-px mt-6 w-full bg-gray-700" />
433
  <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
434
  </div>
435
  </div>