Refine result tile styling and image output visibility

- Remove redundant background color classes for result tile headers
- Hide image output by default in Gradio interface
- Maintain existing color scheme and layout structure

app.py

@@ -227,15 +227,15 @@ def predict_image(img, confidence_threshold):
 def generate_results_html(results):
     def get_header_color(label):
         if label == 'AI':
-            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'
+            return 'bg-red-500 text-red-700', 'bg-red-400', 'bg-red-100', 'bg-red-700 text-red-700', 'bg-red-200'
         elif label == 'REAL':
-            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'
+            return 'bg-green-500 text-green-700', 'bg-green-400', 'bg-green-100', 'bg-green-700 text-green-700', 'bg-green-200'
         elif label == 'UNCERTAIN':
             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-blue-500 text-blue-700 bg-blue-100', 'bg-blue-400', 'bg-blue-100', 'bg-blue-700 text-blue-700', 'bg-blue-200'
+            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-100', 'bg-gray-400', 'bg-gray-100', 'bg-gray-700 text-gray-700', 'bg-gray-200'
+            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"""
@@ -313,7 +313,7 @@ def generate_results_html(results):
                             </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="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:
@@ -481,7 +481,7 @@ with gr.Blocks() as iface:
             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=2):
-            image_output = gr.Image(label="Processed Image")
+            image_output = gr.Image(label="Processed Image", visible=False)
             # Custom HTML component to display results in 5 columns
             results_html = gr.HTML(label="Model Predictions")
             outputs = [image_output, results_html]