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

- 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

@@ -209,10 +209,11 @@ def generate_results_html(results):
             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'
         else:
             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'
+        
     
     html_content = f"""
     
-    <link href="https://cdn.jsdelivr.net/npm/[email protected].17/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected].11/dist/tailwind.min.css" rel="stylesheet">
     <div class="container mx-auto mt-4">
         <div class="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
             <!-- Tile 1: SwinV2/detect -->
@@ -235,7 +236,7 @@ def generate_results_html(results):
                         <div class="w-full bg-neutral-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:
-                                    <span class="ml-1 font-medium font-mono">{results[0][2]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -244,7 +245,7 @@ def generate_results_html(results):
                         <div class="w-full bg-neutral-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:
-                                    <span class="ml-1 font-medium font-mono">{results[0][3]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -276,18 +277,18 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[1][1] * 100:.2f}%;">
+                            <div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[1][1]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-red-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
+                            <div class="bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[1][2]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -296,7 +297,7 @@ def generate_results_html(results):
                 <div class="flex flex-col items-start">
                     <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
                     <hr class="py-px my-2 w-full bg-neutral-700" />
-                    <div class="text-xs font-mono">Real: {results[1][1]:.4f}, AI: {results[1][2]:.4f}</div>
+                    <div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
                     <hr class="py-px mt-6 w-full bg-neutral-700" />
                     <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
                 </div>
@@ -319,18 +320,18 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[2][1] * 100:.2f}%;">
+                            <div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[2][1]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-red-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
+                            <div class="bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[2][2]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -339,7 +340,7 @@ def generate_results_html(results):
                 <div class="flex flex-col items-start">
                     <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
                     <hr class="py-px my-2 w-full bg-neutral-700" />
-                    <div class="text-xs font-mono">Real: {results[2][1]:.4f}, AI: {results[2][2]:.4f}</div>
+                    <div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
                     <hr class="py-px mt-6 w-full bg-neutral-700" />
                     <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
                 </div>
@@ -362,18 +363,18 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[3][1] * 100:.2f}%;">
+                            <div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[3][1]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-red-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
+                            <div class="bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">{results[3][2]:.2f}</span>
+                                    <span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -382,7 +383,7 @@ def generate_results_html(results):
                 <div class="flex flex-col items-start">
                     <h4 class="mt-4 text-sm font-semibold tracking-wide">Swin Based</h4>
                     <hr class="py-px my-2 w-full bg-neutral-700" />
-                    <div class="text-xs font-mono">Real: {results[3][1]:.4f}, AI: {results[3][2]:.4f}</div>
+                    <div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
                     <hr class="py-px mt-6 w-full bg-neutral-700" />
                     <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
                 </div>
@@ -405,18 +406,18 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: 50%;">
+                            <div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">50%</span>
+                                    <span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="mt-4 relative -mx-4 bg-neutral-800">
                         <div class="w-full bg-neutral-400 rounded-none h-8">
-                            <div class="bg-red-400 h-full rounded-none" style="width: 50%;">
+                            <div class="bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
-                                    <span class="ml-1 font-medium font-mono">50%</span>
+                                    <span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
                                 </p>
                             </div>
                         </div>
@@ -425,7 +426,7 @@ def generate_results_html(results):
                 <div class="flex flex-col items-start">
                     <h4 class="mt-4 text-sm font-semibold tracking-wide">GOAT Model</h4>
                     <hr class="py-px my-2 w-full bg-neutral-700" />
-                    <div class="text-xs font-mono">Real: 50%, AI: 50%</div>
+                    <div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
                     <hr class="py-px mt-6 w-full bg-neutral-700" />
                     <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
                 </div>