Fix text, connect bounding boxes

app.py

@@ -11,8 +11,7 @@ from fer import FER  # Facial emotion recognition
 # -----------------------------
 # Configuration
 # -----------------------------
-# For image processing, always run the analysis (no frame skipping)
-SKIP_RATE = 1
+SKIP_RATE = 1  # For image processing, always run the analysis
 
 # Use GPU if available
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
@@ -41,7 +40,7 @@ face_detection = mp_face_detection.FaceDetection(min_detection_confidence=0.5)
 object_detection_model = models.detection.fasterrcnn_resnet50_fpn(
     weights=FasterRCNN_ResNet50_FPN_Weights.DEFAULT
 )
-object_detection_model.eval().to(device)  # Move model to GPU (if available)
+object_detection_model.eval().to(device)  # Move model to GPU if available
 
 obj_transform = transforms.Compose([transforms.ToTensor()])
 
@@ -52,7 +51,14 @@ emotion_detector = FER(mtcnn=True)
 # Overlay Drawing Functions
 # -----------------------------
 def draw_posture_overlay(raw_frame, landmarks):
-    # Draw circles for each landmark using lime green (BGR: (50,205,50))
+    # Draw connector lines using MediaPipe's POSE_CONNECTIONS
+    for connection in mp_pose.POSE_CONNECTIONS:
+        start_idx, end_idx = connection
+        if start_idx < len(landmarks) and end_idx < len(landmarks):
+            start_point = landmarks[start_idx]
+            end_point = landmarks[end_idx]
+            cv2.line(raw_frame, start_point, end_point, (50, 205, 50), 2)
+    # Draw landmark points in lime green (BGR: (50,205,50))
     for (x, y) in landmarks:
         cv2.circle(raw_frame, (x, y), 4, (50, 205, 50), -1)
     return raw_frame
@@ -159,7 +165,7 @@ def analyze_posture_current(image):
     if posture_cache["landmarks"]:
         output = draw_posture_overlay(output, posture_cache["landmarks"])
 
-    return output, f"<div style='color: lime;'>Posture Analysis: {posture_cache['text']}</div>"
+    return output, f"<div style='color: lime !important;'>Posture Analysis: {posture_cache['text']}</div>"
 
 def analyze_emotion_current(image):
     global emotion_cache
@@ -169,7 +175,7 @@ def analyze_emotion_current(image):
         text = compute_emotion_overlay(image)
         emotion_cache["text"] = text
 
-    return current_frame, f"<div style='color: lime;'>Emotion Analysis: {emotion_cache['text']}</div>"
+    return current_frame, f"<div style='color: lime !important;'>Emotion Analysis: {emotion_cache['text']}</div>"
 
 def analyze_objects_current(image):
     global objects_cache
@@ -183,7 +189,7 @@ def analyze_objects_current(image):
     output = current_frame.copy()
     if objects_cache["boxes"]:
         output = draw_boxes_overlay(output, objects_cache["boxes"], (255, 255, 0))
-    return output, f"<div style='color: lime;'>Object Detection: {objects_cache['text']}</div>"
+    return output, f"<div style='color: lime !important;'>Object Detection: {objects_cache['text']}</div>"
 
 def analyze_faces_current(image):
     global faces_cache
@@ -197,7 +203,7 @@ def analyze_faces_current(image):
     output = current_frame.copy()
     if faces_cache["boxes"]:
         output = draw_boxes_overlay(output, faces_cache["boxes"], (0, 0, 255))
-    return output, f"<div style='color: lime;'>Face Detection: {faces_cache['text']}</div>"
+    return output, f"<div style='color: lime !important;'>Face Detection: {faces_cache['text']}</div>"
 
 def analyze_all(image):
     # Run all analyses on the same image
@@ -227,11 +233,11 @@ def analyze_all(image):
         f"Object Detection: {objects_text}<br>"
         f"Face Detection: {faces_text}"
     )
-    combined_text_html = f"<div style='color: lime;'>{combined_text}</div>"
+    combined_text_html = f"<div style='color: lime !important;'>{combined_text}</div>"
     return current_frame, combined_text_html
 
 # -----------------------------
-# Custom CSS
+# Custom CSS (High-Tech Theme)
 # -----------------------------
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@@ -243,7 +249,9 @@ body {
     padding: 0;
 }
 .gradio-container {
-    background: linear-gradient(135deg, #1e1e2f, #3e3e55);
+    background: linear-gradient(135deg, #1a1a1a, #333333);
+    border: 2px solid #32CD32;
+    box-shadow: 0 0 15px #32CD32;
     border-radius: 10px;
     padding: 20px;
     max-width: 1200px;
@@ -251,15 +259,21 @@ body {
 }
 .gradio-title {
     font-size: 2.5em;
-    color: #ffffff;
+    color: #32CD32;
     text-align: center;
     margin-bottom: 0.2em;
+    text-shadow: 0 0 10px #32CD32;
 }
 .gradio-description {
     font-size: 1.2em;
     text-align: center;
     margin-bottom: 1em;
-    color: #ffffff;
+    color: #32CD32;
+    text-shadow: 0 0 8px #32CD32;
+}
+input, button, .output, .tab-item {
+    border: 1px solid #32CD32;
+    box-shadow: 0 0 8px #32CD32;
 }
 """
 
@@ -271,7 +285,7 @@ posture_interface = gr.Interface(
     inputs=gr.Image(label="Upload an Image for Posture Analysis"),
     outputs=[gr.Image(type="numpy", label="Annotated Output"), gr.HTML(label="Posture Analysis")],
     title="Posture Analysis",
-    description="Detects your posture using MediaPipe.",
+    description="Detects your posture using MediaPipe with connector lines.",
     live=False
 )
 
@@ -326,7 +340,7 @@ demo = gr.Blocks(css=custom_css)
 with demo:
     gr.Markdown("<h1 class='gradio-title'>Multi-Analysis Image App</h1>")
     gr.Markdown(
-        "<p class='gradio-description'>Upload an image to run analysis for posture, emotions, objects, and faces.</p>"
+        "<p class='gradio-description'>Upload an image to run high-tech analysis for posture, emotions, objects, and faces.</p>"
     )
     tabbed_interface.render()