Update app.py

app.py

@@ -63,7 +63,10 @@ def monitor_feed():
                 obj_id = item['id']
                 if obj_id not in state.detected_ids:
                     captured_frame_path = os.path.join(state.CAPTURED_FRAMES_DIR, f"{item['type']}_ID{obj_id}.jpg")
-                    cv2.imwrite(captured_frame_path, frame)
+                    # Ensure the frame saved to disk has the same markings as the live feed
+                    marked_frame = frame.copy()
+                    marked_frame = overlay_boxes(marked_frame, [item])
+                    cv2.imwrite(captured_frame_path, marked_frame)
                     state.detected_ids.add(obj_id)
                     if captured_frame_path not in state.last_detected_images:
                         state.last_detected_images.append(captured_frame_path)
@@ -142,44 +145,73 @@ def monitor_feed():
 
     return frame[:, :, ::-1], metrics, "\n".join(state.log_entries[-10:]), line_chart_html, pie_chart_html, state.last_detected_images, map_html
 
-# Gradio UI with improved UI/UX
+# Gradio UI with beautiful design
 with gr.Blocks(theme=gr.themes.Soft(), css="""
-    body { background-color: #1a1a1a; color: #ffffff; font-family: 'Arial', sans-serif; }
+    body { 
+        background: linear-gradient(135deg, #1a1a1a, #2b2b2b); 
+        color: #ffffff; 
+        font-family: 'Poppins', sans-serif; 
+    }
+    .header { 
+        font-size: 2em; 
+        text-align: center; 
+        background: linear-gradient(90deg, #ff4d4d, #ff6666); 
+        -webkit-background-clip: text; 
+        -webkit-text-fill-color: transparent; 
+        margin-bottom: 20px; 
+    }
     .gr-button { 
         margin: 5px; 
-        background-color: #ff4d4d; 
+        background: linear-gradient(90deg, #ff4d4d, #ff6666); 
         color: white; 
         border: none; 
-        border-radius: 8px; 
-        padding: 10px 20px; 
-        transition: background-color 0.3s; 
+        border-radius: 12px; 
+        padding: 12px 24px; 
+        transition: transform 0.2s, box-shadow 0.2s; 
+        box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3); 
+    }
+    .gr-button:hover { 
+        transform: translateY(-2px); 
+        box-shadow: 0 6px 16px rgba(255, 77, 77, 0.5); 
+    }
+    .gr-image { 
+        border-radius: 12px; 
+        box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
+        transition: transform 0.3s; 
     }
-    .gr-button:hover { background-color: #ff6666; }
-    .gr-image { border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
+    .gr-image:hover { transform: scale(1.02); }
     .gr-textbox, .gr-html { 
         background-color: #2b2b2b; 
         border: 1px solid #444; 
-        border-radius: 8px; 
-        padding: 10px; 
+        border-radius: 12px; 
+        padding: 15px; 
         color: #ffffff; 
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
+    }
+    #map-output { 
+        height: 400px; 
+        width: 100%; 
+        border: 1px solid #444; 
+        border-radius: 12px; 
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
     }
-    #map-output { height: 400px; width: 100%; border: 1px solid #444; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
     #chart-output, #pie-output { 
         height: 200px; 
         width: 100%; 
         border: 1px solid #444; 
-        border-radius: 8px; 
+        border-radius: 12px; 
         background-color: #2b2b2b; 
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
     }
     .legend { 
-        background-color: #2b2b2b; 
-        padding: 10px; 
-        border-radius: 8px; 
-        margin-bottom: 10px; 
+        background: linear-gradient(135deg, #2b2b2b, #3b3b3b); 
+        padding: 15px; 
+        border-radius: 12px; 
+        margin-bottom: 15px; 
         border: 1px solid #444; 
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
     }
-    .legend span { margin-right: 15px; font-size: 14px; }
+    .legend span { margin-right: 20px; font-size: 16px; font-weight: 500; }
 """) as app:
     gr.Markdown("# 🛡️ Drone Road Inspection Dashboard", elem_classes="header")