Update results HTML tile styling and model label display

- Remove 'group' class from result tiles for simplified styling
- Change background color to dark gray (#1f2937) for consistent theme
- Simplify model label display by removing specific model names
- Adjust confidence score display with inline-flex for better alignment
- Remove unnecessary margin in confidence score sections

app.py

@@ -220,10 +220,10 @@ def generate_results_html(results):
         <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
             <!-- Tile 1: SwinV2/detect -->
             <div
-                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">
+                class="flex flex-col bg-[#1f2937] rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
-                    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]}">
-                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1: {results[0][1]}</span>
+                    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">
+                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1:</span>
                     <span
                         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]}"
                     >
@@ -237,13 +237,13 @@ def generate_results_html(results):
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
                             <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
-                                <p class="p-2 px-4 text-xs self-center align-middle">Conf:
+                                <p class="inline-flex p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
                     </div>
-                    <div class="mt-4 relative -mx-4 bg-gray-800">
+                    <div class="relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
                             <div class="bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
@@ -263,10 +263,10 @@ def generate_results_html(results):
             </div>
             <!-- Tile 2: ViT/AI-vs-Real -->
             <div
-                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">
+                class="flex flex-col bg-[#1f2937] rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
                     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]}">
-                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2: {results[1][1]}</span>
+                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2</span>
                     <span
                         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]}"
                     >
@@ -306,10 +306,10 @@ def generate_results_html(results):
             </div>
             <!-- Tile 3: Swin/SDXL -->
             <div
-                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">
+                class="flex flex-col bg-[#1f2937] rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
                     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]}">
-                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3: {results[2][1]}</span>
+                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3</span>
                     <span
                         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]}"
                     >
@@ -349,10 +349,10 @@ def generate_results_html(results):
             </div>
             <!-- Tile 4: Swin/SDXL-FLUX -->
             <div
-                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">
+                class="flex flex-col bg-[#1f2937] rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
                     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]}">
-                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4: {results[3][1]}</span>
+                    <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4:</span>
                     <span
                         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]}"
                     >
@@ -392,7 +392,7 @@ def generate_results_html(results):
             </div>
             <!-- Tile 5: GOAT -->
             <div
-                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">
+                class="flex flex-col bg-[#1f2937] rounded-sm p-4 m-1 border border-gray-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
                 <div
                     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]}">
                     <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>