reformat generate_results_html function for maintainable HTML generation

- moved HTML template strings into separate functions for each HTML tile
- added header color generation as a function

```ruby
¸ base-ui]: update image prediction to return HTML content

- modified predict_image function to return HTML content
- added predict_image_with_html function which calls predict_image and then generate_results_html to produce final HTML
```

app.py

@@ -123,6 +123,7 @@ def predict_image(img, confidence_threshold):
     combined_outputs = [result_1output, result_2output, result_3output, result_4output, result_5output, result_5boutput]
     return img_pil, combined_outputs
 # Define a function to generate the HTML content
+
 def generate_results_html(results):
     def get_header_color(label):
         if label == 'AI':
@@ -135,236 +136,69 @@ def generate_results_html(results):
             return 'bg-blue-500 text-blue-700', '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-400', 'bg-gray-100', 'bg-gray-700 text-gray-700', 'bg-gray-200'
-        
-    
-    html_content = f"""
-    
 
-    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    
-    <div class="container mx-auto">
-        <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
-            <!-- Tile 1: SwinV2/detect -->
+    def generate_tile_html(index, result, model_name, contributor):
+        label = result[-1]
+        header_colors = get_header_color(label)
+        real_conf = result[2]
+        ai_conf = result[3]
+        return f"""
+        <div
+            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">
             <div
-                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">
-                <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">
-                    <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-1 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="w-4 h-4 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>
-                    <div class="mt-4 relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex flex-col items-start">
-                    <h4 class="mt-4 text-sm font-semibold tracking-wide">SwinV2 Based</h4>
-                    
-                    <div class="text-xs font-mono">Real: {results[0][2]:.4f}, AI: {results[0][3]:.4f}</div>
-                    
-                    <a class="mt-2 text-xs tracking-wide">@haywoodsloan / more info</a>
-                </div>
-            </div>
-            <!-- Tile 2: ViT/AI-vs-Real -->
-            <div
-                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">
-                <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:</span>
-                    <span
-                        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]}"
-                    >
-                        <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">
-                            {'<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-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][2]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][3]:.4f}</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>
-                    
-                    <div class="text-xs font-mono">Real: {results[1][2]:.4f}, AI: {results[1][3]:.4f}</div>
-                    
-                    <a class="mt-2 text-xs tracking-wide">@Heem2 / more info</a>
-                </div>
+                class="-m-4 h-24 {header_colors[0]} rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:{header_colors[4]}">
+                <span class="text-gray-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL {index + 1}:</span>
+                <span
+                    class="flex w-24 mx-auto tracking-wide items-center justify-center rounded-full {header_colors[2]} px-1 py-0.5 {header_colors[3]}"
+                >
+                    <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">
+                        {'<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 label == '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">{label}</p>
+                </span>
             </div>
-            <!-- Tile 3: Swin/SDXL -->
-            <div
-                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">
-                <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:</span>
-                    <span
-                        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]}"
-                    >
-                        <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">
-                            {'<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-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][2]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][3]:.4f}</span>
-                                </p>
-                            </div>
+            <div>
+                <div class="mt-4 relative -mx-4 bg-gray-800">
+                    <div class="w-full bg-gray-400 rounded-none h-8">
+                        <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {real_conf * 100:.2f}%;">
+                            <p class="p-2 px-4 text-xs self-center align-middle">Conf:
+                                <span class="ml-1 font-medium font-mono">{real_conf:.4f}</span>
+                            </p>
                         </div>
                     </div>
                 </div>
-                <div class="flex flex-col items-start">
-                    <h4 class="mt-4 text-sm font-semibold tracking-wide">SDXL Dataset</h4>
-                    
-                    <div class="text-xs font-mono">Real: {results[2][2]:.4f}, AI: {results[2][3]:.4f}</div>
-                    
-                    <a class="mt-2 text-xs tracking-wide">@Organika / more info</a>
-                </div>
-            </div>
-            <!-- Tile 4: Swin/SDXL-FLUX -->
-            <div
-                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">
-                <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:</span>
-                    <span
-                        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]}"
-                    >
-                        <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">
-                            {'<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-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][2]:.4f}</span>
-                                </p>
-                            </div>
+                <div class="relative -mx-4 bg-gray-800">
+                    <div class="w-full bg-gray-400 rounded-none h-8">
+                        <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {ai_conf * 100:.2f}%;">
+                            <p class="p-2 px-4 text-xs self-center align-middle">Conf:
+                                <span class="ml-1 font-medium font-mono">{ai_conf:.4f}</span>
+                            </p>
                         </div>
                     </div>
-                    <div class="relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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][3]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex flex-col items-start">
-                    <h4 class="mt-4 text-sm font-semibold tracking-wide">SDXL + FLUX</h4>
-                    
-                    <div class="text-xs font-mono">Real: {results[3][2]:.4f}, AI: {results[3][3]:.4f}</div>
-                    
-                    <a class="mt-2 text-xs tracking-wide">@cmckinle / more info</a>
                 </div>
             </div>
-            <!-- Tile 5: Newcomer -->
-            <div
-                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">
-                <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:</span>
-                    <span
-                        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]}"
-                    >
-                        <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">
-                            {'<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-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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">{results[4][2]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="relative -mx-4 bg-gray-800">
-                        <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex whitespace-nowrap 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">{results[4][3]:.4f}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex flex-col items-start">
-                    <h4 class="mt-4 text-sm font-semibold tracking-wide">Vits Model</h4>
-                    
-                    <div class="text-xs font-mono">Real: {results[4][2]:.4f}, AI: {results[4][3]:.4f}</div>
-                    <div class="text-xs font-mono">Real: {results[5][2]:.4f}, AI: {results[5][3]:.4f}</div>
-                    
-                    <a class="mt-2 text-xs tracking-wide">@prithivMLmods / more info</a>
-                </div>
+            <div class="flex flex-col items-start">
+                <h4 class="mt-4 text-sm font-semibold tracking-wide">{model_name}</h4>
+                <div class="text-xs font-mono">Real: {real_conf:.4f}, AI: {ai_conf:.4f}</div>
+                <a class="mt-2 text-xs tracking-wide">@{contributor} / more info</a>
             </div>
         </div>
+        """
+
+    html_content = f"""
+    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <div class="container mx-auto">
+        <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-1">
+            {generate_tile_html(0, results[0], "SwinV2 Based", "haywoodsloan")}
+            {generate_tile_html(1, results[1], "ViT Based", "Heem2")}
+            {generate_tile_html(2, results[2], "SDXL Dataset", "Organika")}
+            {generate_tile_html(3, results[3], "SDXL + FLUX", "cmckinle")}
+            {generate_tile_html(4, results[4], "Newcomer", "YourContributorName")}
+            {generate_tile_html(5, results[5], "Newcomer 2", "YourContributorName")}
+        </div>
     </div>
     """
     return html_content
-
 # Modify the predict_image function to return the HTML content
 def predict_image_with_html(img, confidence_threshold):
     img_pil, results = predict_image(img, confidence_threshold)