Add css for better visulization

app.py

@@ -21,35 +21,113 @@ MODEL_PATH = initialize_model_path()
 
 def predict(pilimg, conf_threshold, iou_threshold):
     try:
-        # Initialize model for each prediction using the cached path
+        if pilimg is None:
+            return None
         model = YOLO(MODEL_PATH, task='detect')
-        
-        # Run inference
         result = model.predict(pilimg, conf=conf_threshold, iou=iou_threshold)
         img_bgr = result[0].plot()
-        return Image.fromarray(img_bgr[..., ::-1])  # RGB-order PIL image
+        return Image.fromarray(img_bgr[..., ::-1])
     except Exception as e:
         print(f"Error during prediction: {str(e)}")
         return None
 
-# Create Gradio interface
-demo = gr.Interface(
-    fn=predict,
-    inputs=[
-        gr.Image(type="pil", label="Input Image"),
-        gr.Slider(minimum=0.1, maximum=1.0, step=0.05, value=0.5, label="Confidence Threshold"),
-        gr.Slider(minimum=0.1, maximum=1.0, step=0.05, value=0.6, label="IOU Threshold")
-    ],
-    outputs=gr.Image(type="pil", label="Detection Result"),
-    title="Guitar and Wristwatch Detection",
-    description="Upload an image or use examples to detect guitars and wristwatches.",
-    examples=[
-        ["testImages/acoustic_guitar_005.jpg"],
-        ["testImages/acoustic_guitar_006.jpg"],
-        ["testImages/analog_watch_024.jpg"],
-        ["testImages/analog_watch_025.jpg"]
-    ] if os.path.exists("testImages/acoustic_guitar_005.jpg") else None
-)
+with gr.Blocks() as demo:
+    # Header
+    gr.HTML("""
+        <div style="text-align: center; margin-bottom: 20px; padding: 20px; background-color: #f7f7f7;">
+            <h1 style="font-size: 2.5em; color: #2196F3; margin-bottom: 10px;">Guitar & Watch Detection</h1>
+            <p style="font-size: 1.2em; color: #666;">Powered by YOLOv8 </p>
+        </div>
+    """)
+    
+    # Hero section with image and description side by side
+    with gr.Row():
+        if os.path.exists("testImages/heroimage.png"):
+            with gr.Column(scale=1):
+                gr.Image("testImages/heroimage.png", 
+                         label="Watch Detection",
+                         show_label=False,
+                         elem_id="hero-image")
+        
+        with gr.Column(scale=1):
+            gr.Markdown("""
+                ### 🎯 About This App
+                This application uses Yolo object detection to identify guitars and wristwatches in images. 
+                The model is optimized using small model '8s' for faster inference.
+                
+                ### 📝 How to Use
+                1. Upload an image or use one of the examples below
+                2. Adjust the confidence and IOU thresholds if needed
+                3. View the detection results in real-time
+            """)
+    
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(
+                type="pil",
+                label="📸 Upload Image"
+            )
+            
+            gr.Markdown("### ⚙️ Detection Parameters")
+            with gr.Column(visible=True):
+                conf_threshold = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.0,
+                    step=0.05,
+                    value=0.5,
+                    label="🎯 Confidence Threshold",
+                    info="Higher values mean more confident detections"
+                )
+                iou_threshold = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.0,
+                    step=0.05,
+                    value=0.6,
+                    label="🔄 IOU Threshold",
+                    info="Higher values mean less box overlap"
+                )
+            
+        with gr.Column():
+            output_image = gr.Image(
+                type="pil",
+                label="🎉 Detection Result"
+            )
+    
+    # Examples section
+    gr.Markdown("### 📚 Example Images")
+    if os.path.exists("testImages/acoustic_guitar_005.jpg"):
+        examples = gr.Examples(
+            examples=[
+                ["testImages/acoustic_guitar_005.jpg"],
+                ["testImages/acoustic_guitar_006.jpg"],
+                ["testImages/analog_watch_024.jpg"],
+                ["testImages/analog_watch_025.jpg"]
+            ],
+            inputs=input_image,
+            label="Try these examples"
+        )
+    
+    # Footer
+    gr.HTML("""
+        <div style="text-align: center; margin-top: 30px; padding: 20px; background-color: #f7f7f7;">
+            <p style="color: #666; font-size: 0.9em;">© 2025 Guitar & Watch Detection - 9027941P - Manikandan Sadhasivam</p>
+        </div>
+    """)
+    
+    # Set up the prediction functionality
+    input_image.change(
+        fn=predict,
+        inputs=[input_image, conf_threshold, iou_threshold],
+        outputs=output_image
+    )
+
+    # Add custom CSS to resize the hero image
+    demo.css = """
+    #hero-image img {
+        width: 560px; /* Adjust the width to make the image smaller */
+        height: auto;
+    }
+    """
 
 if __name__ == "__main__":
     demo.launch(share=True)