fix(ui bugs)

app.py

@@ -42,6 +42,28 @@ def softmax(vector):
     e = np.exp(vector - np.max(vector))  # for numerical stability
     return e / e.sum()
 
+def augment_image(img_pil):
+    # Example augmentation: horizontal flip
+    transform_flip = transforms.Compose([
+        transforms.RandomHorizontalFlip(p=1.0)  # Flip the image horizontally with probability 1.0
+    ])
+    
+    # Example augmentation: rotation
+    transform_rotate = transforms.Compose([
+        transforms.RandomRotation(degrees=(90, 90))  # Rotate the image by 90 degrees
+    ])
+    
+    augmented_img_flip = transform_flip(img_pil)
+    augmented_img_rotate = transform_rotate(img_pil)
+    
+    return augmented_img_flip, augmented_img_rotate
+
+# def convert_pil_to_bytes(img_pil):
+#     img_byte_arr = io.BytesIO()
+#     img_pil.save(img_byte_arr, format='PNG')
+#     img_byte_arr = img_byte_arr.getvalue()
+#     return img_byte_arr
+
 def convert_pil_to_bytes(image, format='JPEG'):
     img_byte_arr = io.BytesIO()
     image.save(img_byte_arr, format=format)
@@ -184,6 +206,13 @@ def predict_image(img, confidence_threshold):
     except Exception as e:
         label_5 = f"Error: {str(e)}"
     
+        # Generate augmented images
+    augmented_img_flip, augmented_img_rotate = augment_image(img_pil)
+    
+    # Convert augmented images to bytes for display
+    augmented_img_flip_bytes = convert_pil_to_bytes(augmented_img_flip)
+    augmented_img_rotate_bytes = convert_pil_to_bytes(augmented_img_rotate)
+    
     # Combine results
     combined_results = {
         "SwinV2/detect": label_1,
@@ -192,8 +221,12 @@ def predict_image(img, confidence_threshold):
         "Swin/SDXL-FLUX": label_4,
         "GOAT": label_5
     }
+        # Generate HTML content
+    
     combined_outputs = [ result_1output, result_2output, result_3output, result_4output, result_5output ]
-    return img_pil, combined_outputs
+    html_content = generate_results_html(combined_outputs)
+
+    return img_pil, combined_outputs, html_content, augmented_img_flip_bytes, augmented_img_rotate_bytes
 
 # Define a function to generate the HTML content
 # Define a function to generate the HTML content
@@ -220,12 +253,12 @@ 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="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">
+                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-2.5 py-0.5 {get_header_color(results[0][-1])[3]}"
+                        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="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" />'}
@@ -245,7 +278,7 @@ def generate_results_html(results):
                     </div>
                     <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}%;">
+                            <div class="inline-flex 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>
@@ -255,20 +288,20 @@ def generate_results_html(results):
                 </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-gray-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-gray-700" />
+                    
                     <a class="mt-2 text-[0.66rem] tracking-wide">@haywoodsloan / more info</a>
                 </div>
             </div>
             <!-- Tile 2: ViT/AI-vs-Real -->
             <div
-                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">
+                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-2.5 py-0.5 {get_header_color(results[1][-1])[3]}"
+                        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="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" />'}
@@ -288,7 +321,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 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[1][3] * 100:.2f}%;">
+                            <div class="inline-flex 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>
@@ -298,20 +331,20 @@ def generate_results_html(results):
                 </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-gray-700" />
+                    
                     <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-gray-700" />
+                    
                     <a class="mt-2 text-[0.66rem] tracking-wide">@Heem2 / more info</a>
                 </div>
             </div>
             <!-- Tile 3: Swin/SDXL -->
             <div
-                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">
+                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-2.5 py-0.5 {get_header_color(results[2][-1])[3]}"
+                        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="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" />'}
@@ -331,7 +364,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 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[2][3] * 100:.2f}%;">
+                            <div class="inline-flex 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>
@@ -341,20 +374,20 @@ def generate_results_html(results):
                 </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-gray-700" />
+                    
                     <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-gray-700" />
+                    
                     <a class="mt-2 text-[0.66rem] tracking-wide">@Organika / more info</a>
                 </div>
             </div>
             <!-- Tile 4: Swin/SDXL-FLUX -->
             <div
-                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">
+                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-2.5 py-0.5 {get_header_color(results[3][-1])[3]}"
+                        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="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" />'}
@@ -374,7 +407,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 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[3][3] * 100:.2f}%;">
+                            <div class="inline-flex 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>
@@ -384,20 +417,20 @@ def generate_results_html(results):
                 </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-gray-700" />
+                    
                     <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-gray-700" />
+                    
                     <a class="mt-2 text-[0.66rem] tracking-wide">@cmckinle / more info</a>
                 </div>
             </div>
             <!-- Tile 5: GOAT -->
             <div
-                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">
+                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: {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]}"
+                        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="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" />'}
@@ -417,7 +450,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 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[4][3] * 100:.2f}%;">
+                            <div class="inline-flex 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>
@@ -427,9 +460,9 @@ def generate_results_html(results):
                 </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-gray-700" />
+                    
                     <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-gray-700" />
+                    
                     <a class="mt-2 text-[0.66rem] tracking-wide">@GOAT / more info</a>
                 </div>
             </div>