Refactor HTML generation with Tailwind CSS and enhanced model result visualization

- Replace Bootstrap with Tailwind CSS for more flexible styling
- Implement dynamic color-coding for model result cards
- Add detailed model information and confidence score displays
- Improve layout and responsiveness of results presentation
- Update Gradio interface column scaling for better visual balance

app.py

@@ -67,7 +67,7 @@ def predict_image(img, confidence_threshold):
     try:
         prediction_1 = clf_1(img_pil)
         result_1 = {pred['label']: pred['score'] for pred in prediction_1}
-        result_1output = [1, result_1['real'], result_1['artificial']]
+        result_1output = [1, 'SwinV2-base', result_1['real'], result_1['artificial']]
         print(result_1output)
         # Ensure the result dictionary contains all class names
         for class_name in class_names_1:
@@ -91,7 +91,7 @@ def predict_image(img, confidence_threshold):
     try:
         prediction_2 = clf_2(img_pil)
         result_2 = {pred['label']: pred['score'] for pred in prediction_2}
-        result_2output = [2, result_2['Real Image'], result_2['AI Image']]
+        result_2output = [2, 'ViT-base Classifer', result_2['Real Image'], result_2['AI Image']]
         print(result_2output)
         # Ensure the result dictionary contains all class names
         for class_name in class_names_2:
@@ -121,7 +121,7 @@ def predict_image(img, confidence_threshold):
             labels_3[1]: float(probabilities_3[1]),   # Real
             labels_3[0]: float(probabilities_3[0])  # AI
         }
-        result_3output = [3, float(probabilities_3[1]), float(probabilities_3[0])]
+        result_3output = [3, 'SDXL-Trained', float(probabilities_3[1]), float(probabilities_3[0])]
         print(result_3output)
         # Ensure the result dictionary contains all class names
         for class_name in labels_3:
@@ -151,7 +151,7 @@ def predict_image(img, confidence_threshold):
             labels_4[1]: float(probabilities_4[1]),   # Real
             labels_4[0]: float(probabilities_4[0])  # AI
         }
-        result_4output = [4, float(probabilities_4[1]), float(probabilities_4[0])]
+        result_4output = [4, 'SDXL + FLUX', float(probabilities_4[1]), float(probabilities_4[0])]
         print(result_4)
         # Ensure the result dictionary contains all class names
         for class_name in labels_4:
@@ -171,7 +171,7 @@ def predict_image(img, confidence_threshold):
         label_4 = f"Error: {str(e)}"
     
     try:
-        result_5output = [5, 0.0, 0.0, 'MAINTENANCE']
+        result_5output = [5, 'TBA', 0.0, 0.0, 'MAINTENANCE']
         img_bytes = convert_pil_to_bytes(img_pil)
         # print(img)
         # print(img_bytes)
@@ -195,137 +195,239 @@ def predict_image(img, confidence_threshold):
     combined_outputs = [ result_1output, result_2output, result_3output, result_4output, result_5output ]
     return img_pil, combined_outputs
 
+# Define a function to generate the HTML content
 # Define a function to generate the HTML content
 def generate_results_html(results):
     def get_header_color(label):
         if label == 'AI':
-            return 'bg-danger'
+            return 'bg-red-500 text-red-700 bg-red-100', 'bg-red-400', 'bg-red-100', 'bg-red-700 text-red-700', 'bg-red-200'
         elif label == 'REAL':
-            return 'bg-success'
+            return 'bg-green-500 text-green-700 bg-green-100', 'bg-green-400', 'bg-green-100', 'bg-green-700 text-green-700', 'bg-green-200'
         elif label == 'UNCERTAIN':
-            return 'bg-warning'
+            return 'bg-yellow-500 text-yellow-700 bg-yellow-100', 'bg-yellow-400', 'bg-yellow-100', 'bg-yellow-700 text-yellow-700', 'bg-yellow-200'
         elif label == 'MAINTENANCE':
-            return 'bg-info'
+            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-secondary'
-    print(results)
+            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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
-    <div class="container">
-        <div class="row mt-4 px-2">
-            <div class="col">
-                <h5>SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                <p>{results[0][3]}</p>
-            </div>
-            <div class="col">
-                <h5>ViT/AI-vs-Real <span class="badge badge-secondary ml-1">M2</span></h5>
-                <p>{results[1][3]}</p>
-            </div>
-            <div class="col">
-                <h5>Swin/SDXL <span class="badge badge-secondary ml-1">M3</span></h5>
-                <p>{results[2][3]}</p>
-            </div>
-            <div class="col">
-                <h5>Swin/SDXL-FLUX <span class="badge badge-secondary ml-1">M4</span></h5>
-                <p>{results[3][3]}</p>
-            </div>
-            <div class="col">
-                <h5>GOAT <span class="badge badge-secondary ml-1">M5</span></h5>
-                <p>{results[4][3]}</p>
-            </div>
-        </div>
-        <div class="col">
-            <div class="card-group">
-                <div class="card">
-                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
-                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
-                    </div>
-                    <div class="card-body">
-                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                    
-                    <div class="progress">
-                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
-                    </div>
-                    </div>
-                    <div class="card-footer">
-                    <small class="text-muted">model by @haywoodsloan / more info</small>
-                    </div>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/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 -->
+            <div
+                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">
+                <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-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1: {results[0][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]}"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
+                            {'<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" />'}
+                        </svg>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[0][-1]}</p>
+                    </span>
                 </div>
-                <div class="card">
-                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
-                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
-                    </div>
-                    <div class="card-body">
-                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                    
-                    <div class="progress">
-                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</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-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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    </div>
-                    <div class="card-footer">
-                    <small class="text-muted">model by @haywoodsloan / more info</small>
+                    <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[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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
-                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
-                    </div>
-                    <div class="card-body">
-                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                    
-                    <div class="progress">
-                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
-                    </div>
-                    <div class="progress">
-                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</div>
-                    </div>
-                    </div>
-                    <div class="card-footer">
-                    <small class="text-muted">model by @haywoodsloan / more info</small>
-                    </div>
+                <div class="flex flex-col items-start">
+                    <h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
+                    <hr class="py-px my-2 w-full bg-neutral-700" />
+                    <div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
+                    <hr class="py-px mt-6 w-full bg-neutral-700" />
+                    <a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
                 </div>
-                <div class="card">
-                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
-                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
-                    </div>
-                    <div class="card-body">
-                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                    
-                    <div class="progress">
-                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+            </div>
+            <!-- Tile 2: ViT/AI-vs-Real -->
+            <div
+                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">
+                <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-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2: {results[1][1]}</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]}"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
+                            {'<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" />'}
+                        </svg>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[1][-1]}</p>
+                    </span>
+                </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-green-400 h-full rounded-none" style="width: {results[1][1] * 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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="progress">
-                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</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}%;">
+                                <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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
+                </div>
+                <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>
+                    <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>
+            </div>
+            <!-- Tile 3: Swin/SDXL -->
+            <div
+                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">
+                <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-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 3: {results[2][1]}</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]}"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
+                            {'<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" />'}
+                        </svg>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[2][-1]}</p>
+                    </span>
+                </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-green-400 h-full rounded-none" style="width: {results[2][1] * 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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="card-footer">
-                    <small class="text-muted">model by @haywoodsloan / more info</small>
+                    <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}%;">
+                                <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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header {get_header_color(results[0][-1])}" style="height:120px;">
-                    <span class="text-center font-weight-bolder">{results[0][-1]}</span>
-                    </div>
-                    <div class="card-body">
-                    <h5 class="card-title">SwinV2/detect <span class="badge badge-secondary ml-1">M1</span></h5>
-                    
-                    <div class="progress">
-                        <div class="progress-bar" role="progressbar" style="width: {results[0][-3] * 100:.2f}%;" aria-valuenow="{results[0][-3] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-3] * 100:.2f}% (Real)</div>
+                <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>
+                    <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>
+            </div>
+            <!-- Tile 4: Swin/SDXL-FLUX -->
+            <div
+                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">
+                <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-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 4: {results[3][1]}</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]}"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
+                            {'<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" />'}
+                        </svg>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[3][-1]}</p>
+                    </span>
+                </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-green-400 h-full rounded-none" style="width: {results[3][1] * 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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="progress">
-                        <div class="progress-bar bg-danger" role="progressbar" style="width: {results[0][-4] * 100:.2f}%;" aria-valuenow="{results[0][-4] * 100:.2f}" aria-valuemin="0" aria-valuemax="100">{results[0][-4] * 100:.2f}% (AI)</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}%;">
+                                <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>
+                                </p>
+                            </div>
+                        </div>
                     </div>
+                </div>
+                <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>
+                    <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>
+            </div>
+            <!-- Tile 5: GOAT -->
+            <div
+                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">
+                <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-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 5: {results[4][1]}</span>
+                    <span
+                        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]}"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
+                            {'<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" />'}
+                        </svg>
+                        <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">{results[4][-1]}</p>
+                    </span>
+                </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-green-400 h-full rounded-none" style="width: 50%;">
+                                <p class="p-2 px-4 text-xs self-center align-middle">Conf:
+                                    <span class="ml-1 font-medium font-mono">50%</span>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="card-footer">
-                    <small class="text-muted">model by @haywoodsloan / more info</small>
+                    <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%;">
+                                <p class="p-2 px-4 text-xs self-center align-middle">Conf:
+                                    <span class="ml-1 font-medium font-mono">50%</span>
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <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>
+                    <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>
             </div>
         </div>
     </div>
@@ -343,11 +445,11 @@ with gr.Blocks() as iface:
     gr.Markdown("# AI Generated Image Classification")
     
     with gr.Row():
-        with gr.Column(scale=2):
+        with gr.Column(scale=1):
             image_input = gr.Image(label="Upload Image to Analyze", sources=['upload'], type='pil')
             confidence_slider = gr.Slider(0.0, 1.0, value=0.5, step=0.01, label="Confidence Threshold")
             inputs = [image_input, confidence_slider]
-        with gr.Column(scale=3):
+        with gr.Column(scale=2):
             image_output = gr.Image(label="Processed Image")
             # Custom HTML component to display results in 5 columns
             results_html = gr.HTML(label="Model Predictions")