Update app.py

app.py

@@ -6,11 +6,11 @@ from PIL import Image
 from collections import deque
 import numpy as np
 
-# Load main BLIP model for image captioning
+# Load main BLIP model for English captioning
 processor = BlipProcessor.from_pretrained("Salesforce/blip-image-captioning-base")
 model = BlipForConditionalGeneration.from_pretrained("Salesforce/blip-image-captioning-base")
 
-# Load YOLOv5 model for object detection using ultralytics
+# Load YOLOv5 small model for object detection using ultralytics package
 detect_model = YOLO('yolov5s.pt')
 
 # Session memory for last 15 images and captions
@@ -51,30 +51,55 @@ def generate_caption(image):
     result_text = f"Detected objects: {tags}\nCaption: {caption}"
     return result_text, gallery
 
-with gr.Blocks() as iface:
-    gr.Markdown(
-        "# 🖼️ Image Captioning with Object Detection"
+# Custom CSS for styling header and button
+custom_css = """
+#app-title {
+    text-align: center;
+    font-size: 36px;
+    color: #4DB8FF; /* light blue */
+    font-weight: bold;
+}
+
+#instructions {
+    text-align: center;
+    font-size: 18px;
+    color: #333;
+}
+
+#generate-btn {
+    background: linear-gradient(90deg, #1E90FF, #32CD32); /* lake blue to light green */
+    color: white;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    transition: 0.3s ease;
+}
+#generate-btn:hover {
+    box-shadow: 0 0 10px rgba(50,205,50,0.4);
+    transform: scale(1.05);
+}
+"""
+
+with gr.Blocks(css=custom_css) as iface:
+    # Centered header and readable instructions
+    gr.HTML('<h1 id="app-title">🖼️ Image Captioning with Object Detection</h1>')
+    gr.HTML(
+        '<p id="instructions">👋 Welcome! This app detects objects in your image and generates a descriptive caption.<br>'
+        '🪄 <b>How to use:</b><br>'
+        '1️⃣ Upload an image below<br>'
+        '2️⃣ Click <b>⭐ Generate Caption</b> to start analysis<br>'
+        '3️⃣ View caption and detected items instantly below.<br>'
+        '💡 The last <b>15 results</b> will be saved for your review!</p>'
     )
 
-    gr.Markdown(
-        """
-        ### 👋 Welcome!  
-        Upload an image and click **Generate Caption** to discover:  
-        - 🎯 The **objects** detected in your image  
-        - 🗒️ A **caption** created automatically by the AI  
-
-        🔁 Your last 15 results are displayed below for quick reference.  
-        💡 Tip: Upload clear, well-lit images for best results!
-        """,
-        elem_id="instructions"
-    )
-
-    with gr.Column():
-        image_input = gr.Image(type="pil", label="Upload Image")
-        generate_btn = gr.Button("Generate Caption")
+    # Image upload and repositioned button directly below
+    image_input = gr.Image(type="pil", label="Upload Image")
+    generate_btn = gr.Button("⭐ Generate Caption", elem_id="generate-btn")
 
-    caption_output = gr.Textbox(label="Caption and Detected Objects", lines=3, interactive=False)
+    # Output: caption + objects
+    caption_output = gr.Textbox(label="📝 Caption and Detected Objects", lines=3, interactive=False)
 
+    # History gallery
     gallery = gr.Gallery(label="Last 15 Images and Captions", scale=3)
 
     def on_generate(image):