Refine SVG icon and model label styling in results HTML
Browse files- Replace `size-5` with `w-4 h-4` for more precise SVG icon sizing
- Add colon `:` to model labels (MODEL 1:, MODEL 2:, etc.)
- Remove `mt-4` from confidence score sections for tighter layout
- Maintain existing color and hover state styling
app.py
CHANGED
@@ -254,7 +254,7 @@ def generate_results_html(results):
|
|
254 |
<span
|
255 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-1 py-0.5 {get_header_color(results[0][-1])[3]}"
|
256 |
>
|
257 |
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="
|
258 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[0][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
259 |
</svg>
|
260 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[0][-1]}</p>
|
@@ -293,11 +293,11 @@ def generate_results_html(results):
|
|
293 |
class="flex flex-col bg-gray-800 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
294 |
<div
|
295 |
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]}">
|
296 |
-
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2
|
297 |
<span
|
298 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-1 py-0.5 {get_header_color(results[1][-1])[3]}"
|
299 |
>
|
300 |
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="
|
301 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[1][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
302 |
</svg>
|
303 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[1][-1]}</p>
|
@@ -336,11 +336,11 @@ def generate_results_html(results):
|
|
336 |
class="flex flex-col bg-gray-800 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
337 |
<div
|
338 |
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]}">
|
339 |
-
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3
|
340 |
<span
|
341 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-1 py-0.5 {get_header_color(results[2][-1])[3]}"
|
342 |
>
|
343 |
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="
|
344 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[2][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
345 |
</svg>
|
346 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[2][-1]}</p>
|
@@ -356,7 +356,7 @@ def generate_results_html(results):
|
|
356 |
</div>
|
357 |
</div>
|
358 |
</div>
|
359 |
-
<div class="
|
360 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
361 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
|
362 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
@@ -383,7 +383,7 @@ def generate_results_html(results):
|
|
383 |
<span
|
384 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-1 py-0.5 {get_header_color(results[3][-1])[3]}"
|
385 |
>
|
386 |
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="
|
387 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[3][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
388 |
</svg>
|
389 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[3][-1]}</p>
|
@@ -399,7 +399,7 @@ def generate_results_html(results):
|
|
399 |
</div>
|
400 |
</div>
|
401 |
</div>
|
402 |
-
<div class="
|
403 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
404 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
|
405 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
@@ -426,7 +426,7 @@ def generate_results_html(results):
|
|
426 |
<span
|
427 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-1 py-0.5 {get_header_color(results[4][-1])[3]}"
|
428 |
>
|
429 |
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="
|
430 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[4][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
431 |
</svg>
|
432 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[4][-1]}</p>
|
@@ -442,7 +442,7 @@ def generate_results_html(results):
|
|
442 |
</div>
|
443 |
</div>
|
444 |
</div>
|
445 |
-
<div class="
|
446 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
447 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
|
448 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
|
|
254 |
<span
|
255 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[0][-1])[2]} px-1 py-0.5 {get_header_color(results[0][-1])[3]}"
|
256 |
>
|
257 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
258 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[0][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
259 |
</svg>
|
260 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[0][-1]}</p>
|
|
|
293 |
class="flex flex-col bg-gray-800 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
294 |
<div
|
295 |
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]}">
|
296 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2:</span>
|
297 |
<span
|
298 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[1][-1])[2]} px-1 py-0.5 {get_header_color(results[1][-1])[3]}"
|
299 |
>
|
300 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
301 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[1][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
302 |
</svg>
|
303 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[1][-1]}</p>
|
|
|
336 |
class="flex flex-col bg-gray-800 rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
|
337 |
<div
|
338 |
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]}">
|
339 |
+
<span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3:</span>
|
340 |
<span
|
341 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[2][-1])[2]} px-1 py-0.5 {get_header_color(results[2][-1])[3]}"
|
342 |
>
|
343 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
344 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[2][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
345 |
</svg>
|
346 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[2][-1]}</p>
|
|
|
356 |
</div>
|
357 |
</div>
|
358 |
</div>
|
359 |
+
<div class="relative -mx-4 bg-gray-800">
|
360 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
361 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
|
362 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
|
|
383 |
<span
|
384 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[3][-1])[2]} px-1 py-0.5 {get_header_color(results[3][-1])[3]}"
|
385 |
>
|
386 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
387 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[3][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
388 |
</svg>
|
389 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[3][-1]}</p>
|
|
|
399 |
</div>
|
400 |
</div>
|
401 |
</div>
|
402 |
+
<div class="relative -mx-4 bg-gray-800">
|
403 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
404 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
|
405 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|
|
|
426 |
<span
|
427 |
class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {get_header_color(results[4][-1])[2]} px-1 py-0.5 {get_header_color(results[4][-1])[3]}"
|
428 |
>
|
429 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
|
430 |
{'<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />' if results[4][-1] == 'REAL' else '<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />'}
|
431 |
</svg>
|
432 |
<p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[4][-1]}</p>
|
|
|
442 |
</div>
|
443 |
</div>
|
444 |
</div>
|
445 |
+
<div class="relative -mx-4 bg-gray-800">
|
446 |
<div class="w-full bg-gray-400 rounded-none h-8">
|
447 |
<div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
|
448 |
<p class="p-2 px-4 text-xs self-center align-middle">Conf:
|