Update app.py

app.py

@@ -454,15 +454,15 @@ def calculate_hrqol_scores(hrqol_responses):
     return domain_scores
 
 def get_score_color(score):
-    """Return color based on score"""
+    """Return background and text color based on score for better visibility"""
     if score >= 80:
-        return "#4CAF50"  # Green
+        return {"bg": "#4CAF50", "text": "#FFFFFF"}  # Green background, white text
     elif score >= 60:
-        return "#FFC107"  # Yellow
+        return {"bg": "#FFC107", "text": "#000000"}  # Yellow background, black text
     elif score >= 40:
-        return "#FF9800"  # Orange
+        return {"bg": "#FF9800", "text": "#FFFFFF"}  # Orange background, white text
     else:
-        return "#F44336"  # Red
+        return {"bg": "#F44336", "text": "#FFFFFF"}  # Red background, white text
 
 def get_healthspan_grade(score):
     if score >= 85:
@@ -482,15 +482,12 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
     """Combine image/video analysis with HRQOL assessment based on input type"""
     
     # Determine which input to use based on dropdown selection
-    if input_type == "Image Upload":
+    if input_type == "Image Analysis":
         selected_media = image_input
         media_type = "image"
-    elif input_type == "Video Upload":
+    elif input_type == "Video Analysis":
         selected_media = video_input
         media_type = "video"
-    elif input_type == "Live Recording":
-        selected_media = video_input  # Live recording uses the same video component
-        media_type = "video"
     else:
         return "❌ **Error**: Please select an input type."
     
@@ -576,67 +573,55 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
     final_healthspan_score = (video_score * video_weight) + (hrqol_composite * hrqol_weight)
     final_healthspan_score = min(100, max(0, final_healthspan_score))
     
-    # Generate comprehensive report
+    # Generate comprehensive report with improved colors
     input_type_icon = "📸" if media_type == "image" else "🎥"
     
     report_html = f"""
     <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1000px; margin: 0 auto;">
-        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center;">
-            <h2 style="margin: 0; font-size: 2em;">{input_type_icon} Comprehensive Healthspan Assessment</h2>
-            <div style="font-size: 1.1em; margin: 10px 0;">Analysis Type: {input_type}</div>
-            <div style="font-size: 3em; font-weight: bold; margin: 15px 0;">{final_healthspan_score:.1f}/100</div>
-            <div style="font-size: 1.2em;">{get_healthspan_grade(final_healthspan_score)}</div>
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+            <h2 style="margin: 0; font-size: 2em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">{input_type_icon} Comprehensive Healthspan Assessment</h2>
+            <div style="font-size: 1.1em; margin: 10px 0; opacity: 0.9;">Analysis Type: {input_type}</div>
+            <div style="font-size: 3em; font-weight: bold; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">{final_healthspan_score:.1f}/100</div>
+            <div style="font-size: 1.2em; background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; display: inline-block;">{get_healthspan_grade(final_healthspan_score)}</div>
         </div>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 30px 0;">
-            <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; background: #f8f9fa;">
-                <h4 style="margin: 0 0 15px 0; color: #667eea;">🔋 Vitality</h4>
-                <div style="background: #e9ecef; height: 8px; border-radius: 4px; margin: 10px 0;">
-                    <div style="background: {get_score_color(hrqol_scores['vitality'])}; height: 100%; width: {hrqol_scores['vitality']}%; border-radius: 4px; transition: width 0.3s ease;"></div>
-                </div>
-                <div style="font-size: 1.1em; font-weight: bold;">{hrqol_scores['vitality']:.1f}/100</div>
-            </div>
-            
-            <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; background: #f8f9fa;">
-                <h4 style="margin: 0 0 15px 0; color: #667eea;">😌 Comfort</h4>
-                <div style="background: #e9ecef; height: 8px; border-radius: 4px; margin: 10px 0;">
-                    <div style="background: {get_score_color(hrqol_scores['comfort'])}; height: 100%; width: {hrqol_scores['comfort']}%; border-radius: 4px; transition: width 0.3s ease;"></div>
-                </div>
-                <div style="font-size: 1.1em; font-weight: bold;">{hrqol_scores['comfort']:.1f}/100</div>
-            </div>
-            
-            <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; background: #f8f9fa;">
-                <h4 style="margin: 0 0 15px 0; color: #667eea;">😊 Emotional</h4>
-                <div style="background: #e9ecef; height: 8px; border-radius: 4px; margin: 10px 0;">
-                    <div style="background: {get_score_color(hrqol_scores['emotional_wellbeing'])}; height: 100%; width: {hrqol_scores['emotional_wellbeing']}%; border-radius: 4px; transition: width 0.3s ease;"></div>
-                </div>
-                <div style="font-size: 1.1em; font-weight: bold;">{hrqol_scores['emotional_wellbeing']:.1f}/100</div>
-            </div>
-            
-            <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; background: #f8f9fa;">
-                <h4 style="margin: 0 0 15px 0; color: #667eea;">🧠 Alertness</h4>
-                <div style="background: #e9ecef; height: 8px; border-radius: 4px; margin: 10px 0;">
-                    <div style="background: {get_score_color(hrqol_scores['alertness'])}; height: 100%; width: {hrqol_scores['alertness']}%; border-radius: 4px; transition: width 0.3s ease;"></div>
+    """
+    
+    # Add domain score cards with improved contrast
+    for domain, score in [("vitality", "🔋 Vitality"), ("comfort", "😌 Comfort"), ("emotional_wellbeing", "😊 Emotional"), ("alertness", "🧠 Alertness")]:
+        colors = get_score_color(hrqol_scores[domain])
+        report_html += f"""
+            <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                <h4 style="margin: 0 0 15px 0; color: #333333; font-weight: 600;">{score.split()[1]}</h4>
+                <div style="background: #e9ecef; height: 12px; border-radius: 6px; margin: 10px 0; border: 1px solid #dee2e6;">
+                    <div style="background: {colors['bg']}; height: 100%; width: {hrqol_scores[domain]}%; border-radius: 6px; transition: width 0.3s ease; position: relative; display: flex; align-items: center; justify-content: center;">
+                        <span style="color: {colors['text']}; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);">{hrqol_scores[domain]:.0f}</span>
+                    </div>
                 </div>
-                <div style="font-size: 1.1em; font-weight: bold;">{hrqol_scores['alertness']:.1f}/100</div>
+                <div style="font-size: 1.1em; font-weight: bold; color: #333333;">{hrqol_scores[domain]:.1f}/100</div>
             </div>
-        </div>
-    """
+        """
+    
+    report_html += "</div>"
     
-    # Add breed and age info if available
+    # Visual Analysis section with better contrast
     if breed_info:
         pace_info = ""
         if age and age > 0:
             pace = breed_info["bio_age"] / age
             pace_status = "Accelerated" if pace > 1.2 else "Normal" if pace > 0.8 else "Slow"
-            pace_info = f"<p><strong>Aging Pace:</strong> {pace:.2f}× ({pace_status})</p>"
+            pace_color = "#FF5722" if pace > 1.2 else "#4CAF50" if pace < 0.8 else "#FF9800"
+            pace_info = f"""<p style="margin: 8px 0;"><strong style="color: #333;">Aging Pace:</strong> 
+                           <span style="background: {pace_color}; color: white; padding: 4px 8px; border-radius: 12px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);">
+                           {pace:.2f}× ({pace_status})</span></p>"""
         
         report_html += f"""
-        <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; margin: 20px 0; background: #fff;">
-            <h3 style="color: #667eea; margin: 0 0 15px 0;">{input_type_icon} Visual Analysis</h3>
-            <p><strong>Detected Breed:</strong> {breed_info['breed']} ({breed_info['confidence']:.1%} confidence)</p>
-            <p><strong>Estimated Biological Age:</strong> {breed_info['bio_age']} years</p>
-            <p><strong>Chronological Age:</strong> {age or 'Not provided'} years</p>
+        <div style="border: 2px solid #2196F3; padding: 20px; border-radius: 12px; margin: 20px 0; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #1976D2; margin: 0 0 15px 0; font-weight: 600; border-bottom: 2px solid #E3F2FD; padding-bottom: 8px;">{input_type_icon} Visual Analysis</h3>
+            <p style="margin: 8px 0; color: #333;"><strong>Detected Breed:</strong> <span style="color: #1976D2; font-weight: 600;">{breed_info['breed']}</span> <span style="background: #E3F2FD; color: #1976D2; padding: 2px 6px; border-radius: 8px; font-size: 0.9em;">({breed_info['confidence']:.1%} confidence)</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Estimated Biological Age:</strong> <span style="color: #1976D2; font-weight: 600;">{breed_info['bio_age']} years</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Chronological Age:</strong> <span style="color: #1976D2; font-weight: 600;">{age or 'Not provided'} years</span></p>
             {pace_info}
         </div>
         """
@@ -644,25 +629,39 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
     # Add video-specific analysis if available
     if video_features:
         report_html += f"""
-        <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; margin: 20px 0; background: #fff;">
-            <h3 style="color: #000000; margin: 0 0 15px 0;">🎥 Video Gait Analysis</h3>
-            <p><strong>Duration:</strong> {video_features['duration_sec']} seconds</p>
-            <p><strong>Mobility Assessment:</strong> {video_features['mobility_assessment']}</p>
-            <p><strong>Comfort Assessment:</strong> {video_features['comfort_assessment']}</p>
-            <p><strong>Vitality Assessment:</strong> {video_features['vitality_assessment']}</p>
-            <p><strong>Frames Analyzed:</strong> {video_features['frames_analyzed']}</p>
+        <div style="border: 2px solid #FF5722; padding: 20px; border-radius: 12px; margin: 20px 0; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #D84315; margin: 0 0 15px 0; font-weight: 600; border-bottom: 2px solid #FFEBE7; padding-bottom: 8px;">🎥 Video Gait Analysis</h3>
+            <p style="margin: 8px 0; color: #333;"><strong>Duration:</strong> <span style="color: #D84315; font-weight: 600;">{video_features['duration_sec']} seconds</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Mobility Assessment:</strong> <span style="color: #D84315; font-weight: 600;">{video_features['mobility_assessment']}</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Comfort Assessment:</strong> <span style="color: #D84315; font-weight: 600;">{video_features['comfort_assessment']}</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Vitality Assessment:</strong> <span style="color: #D84315; font-weight: 600;">{video_features['vitality_assessment']}</span></p>
+            <p style="margin: 8px 0; color: #333;"><strong>Frames Analyzed:</strong> <span style="color: #D84315; font-weight: 600;">{video_features['frames_analyzed']}</span></p>
         </div>
         """
     
-    # Add image-specific health aspects if available
+    # Physical Health Assessment with improved visibility
     if health_aspects and media_type == "image":
         report_html += f"""
-        <div style="border: 2px solid #e0e0e0; padding: 20px; border-radius: 12px; margin: 20px 0; background: #fff;">
-            <h3 style="color: #667eea; margin: 0 0 15px 0;">📸 Physical Health Assessment</h3>
+        <div style="border: 2px solid #4CAF50; padding: 20px; border-radius: 12px; margin: 20px 0; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #2E7D32; margin: 0 0 15px 0; font-weight: 600; border-bottom: 2px solid #E8F5E8; padding-bottom: 8px;">📸 Physical Health Assessment</h3>
         """
         for aspect, data in health_aspects.items():
-            status_icon = "✅" if "healthy" in data["assessment"].lower() or "bright" in data["assessment"].lower() or "clean" in data["assessment"].lower() or "ideal" in data["assessment"].lower() else "⚠️"
-            report_html += f"<p>{status_icon} <strong>{aspect}:</strong> {data['assessment']} ({data['confidence']:.1%} confidence)</p>"
+            is_healthy = any(word in data["assessment"].lower() for word in ["healthy", "bright", "clean", "ideal"])
+            status_icon = "✅" if is_healthy else "⚠️"
+            status_color = "#2E7D32" if is_healthy else "#F57C00"
+            bg_color = "#E8F5E8" if is_healthy else "#FFF3E0"
+            
+            report_html += f"""
+            <div style="margin: 10px 0; padding: 12px; background: {bg_color}; border-radius: 8px; border-left: 4px solid {status_color};">
+                <p style="margin: 0; color: #333;">
+                    <span style="font-size: 1.2em;">{status_icon}</span> 
+                    <strong style="color: {status_color};">{aspect}:</strong> 
+                    <span style="color: #333; font-weight: 500;">{data['assessment']}</span>
+                    <span style="background: #E0E0E0; color: #424242; padding: 2px 6px; border-radius: 8px; font-size: 0.85em; margin-left: 8px;">
+                    ({data['confidence']:.1%} confidence)</span>
+                </p>
+            </div>
+            """
         report_html += "</div>"
     
     # Add recommendations
@@ -678,15 +677,20 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
     
     if recommendations:
         report_html += f"""
-        <div style="border: 2px solid #ff9800; padding: 20px; border-radius: 12px; margin: 20px 0; background: #fff8e1;">
-            <h3 style="color: #ff9800; margin: 0 0 15px 0;">🎯 Personalized Recommendations</h3>
-            {''.join([f'<p>{rec}</p>' for rec in recommendations])}
+        <div style="border: 2px solid #FF9800; padding: 20px; border-radius: 12px; margin: 20px 0; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <h3 style="color: #F57C00; margin: 0 0 15px 0; font-weight: 600; border-bottom: 2px solid #FFF3E0; padding-bottom: 8px;">🎯 Personalized Recommendations</h3>
+            {''.join([f'<div style="margin: 10px 0; padding: 12px; background: #FFF8E1; border-radius: 8px; border-left: 4px solid #FF9800;"><p style="margin: 0; color: #333; font-weight: 500;">{rec}</p></div>' for rec in recommendations])}
         </div>
         """
     
+    # Disclaimer with improved visibility
     report_html += """
-        <div style="background: #f5f5f5; padding: 15px; border-radius: 8px; margin: 20px 0; font-size: 0.9em; color: #666;">
-            <p><strong>⚠️ Important Disclaimer:</strong> This analysis uses validated HRQOL assessment tools but is for educational purposes only. Always consult with a qualified veterinarian for professional medical advice and diagnosis.</p>
+        <div style="background: #F5F5F5; border: 1px solid #E0E0E0; padding: 20px; border-radius: 8px; margin: 20px 0;">
+            <p style="margin: 0; font-size: 0.9em; color: #424242; line-height: 1.5;">
+                <strong style="color: #D32F2F;">⚠️ Important Disclaimer:</strong> 
+                This analysis uses validated HRQOL assessment tools but is for educational purposes only. 
+                Always consult with a qualified veterinarian for professional medical advice and diagnosis.
+            </p>
         </div>
     </div>
     """
@@ -695,9 +699,9 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
 
 def update_media_input(input_type):
     """Update the visibility of media inputs based on dropdown selection"""
-    if input_type == "Image Upload":
+    if input_type == "Image Analysis":
         return gr.update(visible=True), gr.update(visible=False)
-    else:  # Video Upload or Live Recording
+    else:  # Video Analysis
         return gr.update(visible=False), gr.update(visible=True)
 
 # Gradio Interface
@@ -712,24 +716,26 @@ with gr.Blocks(title="🐶 VetMetrica HRQOL Dog Health Analyzer", theme=gr.theme
         with gr.Column(scale=1):
             gr.Markdown("### 📸 **Media Input Selection**")
             
-            # Dropdown to select input type
+            # Streamlined dropdown with only 2 options
             input_type_dropdown = gr.Dropdown(
-                choices=["Image Upload", "Video Upload", "Live Recording"],
-                label="Select Input Type",
-                value="Image Upload",
+                choices=["Image Analysis", "Video Analysis"],
+                label="Select Analysis Type",
+                value="Image Analysis",
                 interactive=True
             )
             
-            # Media input components (visibility controlled by dropdown)
+            # Media input components with webcam access for both
             image_input = gr.Image(
                 type="pil", 
-                label="Upload Dog Photo",
-                visible=True
+                label="Upload Dog Photo or Use Webcam",
+                visible=True,
+                sources=["upload", "webcam"]  # Enable webcam for images
             )
             
             video_input = gr.Video(
-                label="Upload Video (10-30 seconds) or Record Live",
-                visible=False
+                label="Upload Video (10-30 seconds) or Record with Webcam",
+                visible=False,
+                sources=["upload", "webcam"]  # Enable webcam for videos
             )
             
             # Update visibility based on dropdown selection
@@ -800,7 +806,7 @@ with gr.Blocks(title="🐶 VetMetrica HRQOL Dog Health Analyzer", theme=gr.theme
     - **🎯 Evidence-Based Assessment**: Uses clinically validated HRQOL domains (Vitality, Comfort, Emotional Wellbeing, Alertness)
     - **🤖 AI-Powered Analysis**: Combines CLIP vision models with BiomedCLIP for medical insights
     - **📊 Comprehensive Scoring**: Generates composite healthspan scores normalized by breed and age
-    - **🎥 Multi-Modal Input**: Supports image upload, video upload, and live webcam recording via dropdown selection
+    - **📸🎥 Multi-Modal Input**: Both image and video analysis support upload and real-time webcam capture
     - **📈 Personalized Insights**: Provides domain-specific recommendations based on assessment results
     
     **🔬 Scientific Validation**: Based on peer-reviewed research in veterinary medicine and validated against clinical outcomes.