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
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].
|
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]:.
|
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]:.
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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][
|
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:
|
409 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
410 |
-
<span class="ml-1 font-medium font-mono">
|
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:
|
418 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
419 |
-
<span class="ml-1 font-medium font-mono">
|
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:
|
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>
|