Update app.py

app.py

@@ -10,6 +10,7 @@ from transformers import (
     CLIPProcessor, CLIPModel,
     AutoProcessor
 )
+import time
 
 # —————————————————————————————
 # CONFIG: set your HF token here or via env var HF_TOKEN
@@ -114,10 +115,11 @@ BREED_LIFESPAN = {
     "wire-haired fox terrier": 13.5, "yorkshire terrier": 13.3
 }
 
-# 4. VetMetrica HRQOL Framework
+# 4. VetMetrica HRQOL Framework with dropdown options
 HRQOL_QUESTIONNAIRE = {
     "vitality": {
-        "title": "🔋 Vitality & Energy",
+        "title": "🔋 Vitality & Energy Assessment",
+        "description": "Evaluate your dog's energy levels and enthusiasm for activities",
         "questions": [
             {
                 "id": "vitality_energy",
@@ -131,7 +133,7 @@ HRQOL_QUESTIONNAIRE = {
                 ]
             },
             {
-                "id": "vitality_play",
+                "id": "vitality_play", 
                 "text": "How often does your dog seek out play or interaction?",
                 "options": [
                     "Always seeks play/interaction",
@@ -157,6 +159,7 @@ HRQOL_QUESTIONNAIRE = {
     },
     "comfort": {
         "title": "😌 Comfort & Pain Management",
+        "description": "Assess signs of discomfort, pain, or mobility issues",
         "questions": [
             {
                 "id": "comfort_activities",
@@ -196,6 +199,7 @@ HRQOL_QUESTIONNAIRE = {
     },
     "emotional_wellbeing": {
         "title": "😊 Emotional Wellbeing",
+        "description": "Evaluate mood, anxiety levels, and social engagement",
         "questions": [
             {
                 "id": "emotion_mood",
@@ -235,6 +239,7 @@ HRQOL_QUESTIONNAIRE = {
     },
     "alertness": {
         "title": "🧠 Alertness & Cognition",
+        "description": "Assess cognitive function, awareness, and responsiveness",
         "questions": [
             {
                 "id": "alert_awareness",
@@ -478,9 +483,41 @@ def get_healthspan_grade(score):
     else:
         return "Critical (F)"
 
+def show_loading():
+    """Display loading animation"""
+    return """
+    <div style="text-align: center; padding: 40px;">
+        <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+        <style>
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        </style>
+        <h3 style="color: #667eea; margin-top: 20px;">🔬 Analyzing Your Dog's Health...</h3>
+        <p style="color: #666;">Please wait while we process the image/video and questionnaire data.</p>
+        <div style="background: #f0f0f0; border-radius: 20px; padding: 10px; margin: 20px auto; width: 300px;">
+            <div style="background: linear-gradient(90deg, #667eea, #764ba2); height: 6px; border-radius: 10px; width: 0%; animation: progress 3s ease-in-out infinite;"></div>
+        </div>
+        <style>
+        @keyframes progress {
+          0% { width: 0%; }
+          50% { width: 80%; }
+          100% { width: 100%; }
+        }
+        </style>
+    </div>
+    """
+
 def comprehensive_healthspan_analysis(input_type, image_input, video_input, breed, age, *hrqol_responses):
     """Combine image/video analysis with HRQOL assessment based on input type"""
     
+    # Show loading first
+    yield show_loading()
+    
+    # Simulate processing time
+    time.sleep(2)
+    
     # Determine which input to use based on dropdown selection
     if input_type == "Image Analysis":
         selected_media = image_input
@@ -489,14 +526,17 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
         selected_media = video_input
         media_type = "video"
     else:
-        return "❌ **Error**: Please select an input type."
+        yield "❌ **Error**: Please select an input type."
+        return
     
     if selected_media is None:
-        return f"❌ **Error**: Please provide a {media_type} for analysis."
+        yield f"❌ **Error**: Please provide a {media_type} for analysis."
+        return
     
     # Check if questionnaire is completed
     if not hrqol_responses or all(not r for r in hrqol_responses):
-        return "❌ **Error**: Please complete the HRQOL questionnaire before analysis."
+        yield "❌ **Error**: Please complete the HRQOL questionnaire before analysis."
+        return
     
     # Build HRQOL responses dictionary
     response_keys = []
@@ -695,7 +735,7 @@ def comprehensive_healthspan_analysis(input_type, image_input, video_input, bree
     </div>
     """
     
-    return report_html
+    yield report_html
 
 def update_media_input(input_type):
     """Update the visibility of media inputs based on dropdown selection"""
@@ -704,38 +744,147 @@ def update_media_input(input_type):
     else:  # Video Analysis
         return gr.update(visible=False), gr.update(visible=True)
 
-# Gradio Interface
-with gr.Blocks(title="🐶 VetMetrica HRQOL Dog Health Analyzer", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🐕 **VetMetrica© HRQOL Dog Health & Age Analyzer**
-    ### AI-powered comprehensive analysis using validated Health-Related Quality of Life metrics
+# Custom CSS for enhanced styling
+custom_css = """
+/* Enhanced gradient background */
+.gradio-container {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+}
+
+/* Card styling */
+.input-card, .questionnaire-card {
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    margin: 10px;
+    border: 1px solid #e0e6ed;
+}
+
+/* Header styling */
+.main-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    text-align: center;
+    padding: 30px;
+    border-radius: 15px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+/* Button styling */
+.analyze-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    padding: 15px 30px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.analyze-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+/* Accordion styling */
+.accordion-header {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.accordion-header:hover {
+    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+    transform: translateY(-1px);
+}
+
+/* Dropdown styling */
+.gr-dropdown {
+    border-radius: 8px;
+    border: 2px solid #e0e6ed;
+    transition: border-color 0.3s ease;
+}
+
+.gr-dropdown:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Progress animation */
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+.loading-pulse {
+    animation: pulse 2s infinite;
+}
+"""
+
+# Gradio Interface with Enhanced UI
+with gr.Blocks(
+    title="🐶 VetMetrica HRQOL Dog Health Analyzer", 
+    theme=gr.themes.Soft(),
+    css=custom_css
+) as demo:
+    
+    # Main Header
+    gr.HTML("""
+    <div class="main-header">
+        <h1 style="margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
+            🐕 VetMetrica© HRQOL Dog Health & Age Analyzer
+        </h1>
+        <p style="margin: 15px 0 0 0; font-size: 1.2em; opacity: 0.9;">
+            AI-powered comprehensive analysis using validated Health-Related Quality of Life metrics
+        </p>
+    </div>
     """)
     
     with gr.Row():
-        # Left Column - Media Input with Dropdown
+        # Left Column - Enhanced Media Input
         with gr.Column(scale=1):
-            gr.Markdown("### 📸 **Media Input Selection**")
+            gr.HTML("""
+            <div class="input-card">
+                <h2 style="color: #667eea; margin: 0 0 20px 0; text-align: center;">
+                    📸 Media Input Selection
+                </h2>
+            </div>
+            """)
             
-            # Streamlined dropdown with only 2 options
+            # Enhanced dropdown with better styling
             input_type_dropdown = gr.Dropdown(
                 choices=["Image Analysis", "Video Analysis"],
-                label="Select Analysis Type",
+                label="🔍 Select Analysis Type",
                 value="Image Analysis",
-                interactive=True
+                interactive=True,
+                elem_classes=["gr-dropdown"]
             )
             
-            # Media input components with webcam access for both
+            # Media input components with enhanced labels
             image_input = gr.Image(
                 type="pil", 
-                label="Upload Dog Photo or Use Webcam",
+                label="📷 Upload Dog Photo or Use Webcam",
                 visible=True,
-                sources=["upload", "webcam"]  # Enable webcam for images
+                sources=["upload", "webcam"],
+                height=300
             )
             
             video_input = gr.Video(
-                label="Upload Video (10-30 seconds) or Record with Webcam",
+                label="🎥 Upload Video (10-30 seconds) or Record with Webcam",
                 visible=False,
-                sources=["upload", "webcam"]  # Enable webcam for videos
+                sources=["upload", "webcam"],
+                height=300
             )
             
             # Update visibility based on dropdown selection
@@ -745,73 +894,145 @@ with gr.Blocks(title="🐶 VetMetrica HRQOL Dog Health Analyzer", theme=gr.theme
                 outputs=[image_input, video_input]
             )
             
-            gr.Markdown("### ⚙️ **Optional Information**")
+            # Enhanced optional information section
+            gr.HTML("""
+            <div style="margin: 20px 0;">
+                <h3 style="color: #667eea; text-align: center; margin-bottom: 15px;">
+                    ⚙️ Optional Information
+                </h3>
+            </div>
+            """)
+            
             breed_input = gr.Dropdown(
                 STANFORD_BREEDS, 
-                label="Dog Breed (Auto-detected if not specified)",
+                label="🐕 Dog Breed (Auto-detected if not specified)",
                 value=None,
-                allow_custom_value=True
+                allow_custom_value=True,
+                elem_classes=["gr-dropdown"]
             )
             age_input = gr.Number(
-                label="Chronological Age (years)", 
+                label="📅 Chronological Age (years)", 
                 precision=1, 
                 value=None,
                 minimum=0,
                 maximum=25
             )
         
-        # Right Column - HRQOL Questionnaire
+        # Right Column - Enhanced HRQOL Questionnaire
         with gr.Column(scale=1):
-            gr.Markdown("### 📋 **VetMetrica© HRQOL Assessment** (Required)")
-            gr.Markdown("*Complete all sections for accurate healthspan analysis*")
+            gr.HTML("""
+            <div class="questionnaire-card">
+                <h2 style="color: #667eea; margin: 0 0 10px 0; text-align: center;">
+                    📋 VetMetrica© HRQOL Assessment
+                </h2>
+                <p style="text-align: center; color: #666; font-style: italic; margin-bottom: 20px;">
+                    Complete all sections for accurate healthspan analysis
+                </p>
+            </div>
+            """)
             
             hrqol_inputs = []
             
             for domain_key, domain_data in HRQOL_QUESTIONNAIRE.items():
+                # Enhanced accordion header
+                gr.HTML(f"""
+                <div class="accordion-header">
+                    <h3 style="margin: 0; color: #333;">
+                        {domain_data['title']}
+                    </h3>
+                    <p style="margin: 5px 0 0 0; color: #666; font-size: 0.9em;">
+                        {domain_data['description']}
+                    </p>
+                </div>
+                """)
+                
                 with gr.Accordion(domain_data["title"], open=True):
                     for question in domain_data["questions"]:
-                        radio = gr.Radio(
+                        # Enhanced dropdown for each question
+                        dropdown = gr.Dropdown(
                             choices=question["options"],
                             label=question["text"],
                             value=None,
-                            interactive=True
+                            interactive=True,
+                            elem_classes=["gr-dropdown"]
                         )
-                        hrqol_inputs.append(radio)
+                        hrqol_inputs.append(dropdown)
+    
+    # Enhanced Analysis Button
+    gr.HTML("""
+    <div style="text-align: center; margin: 30px 0;">
+    """)
     
-    # Analysis Button
     analyze_button = gr.Button(
-        "🔬 **Analyze Comprehensive Healthspan**", 
+        "🔬 Analyze Comprehensive Healthspan", 
         variant="primary", 
         size="lg",
-        scale=1
+        elem_classes=["analyze-button"]
     )
     
-    # Results
-    gr.Markdown("### 📊 **Comprehensive HRQOL Analysis Report**")
+    gr.HTML("</div>")
+    
+    # Enhanced Results Section
+    gr.HTML("""
+    <div style="text-align: center; margin: 30px 0 10px 0;">
+        <h2 style="color: #667eea; margin: 0;">
+            📊 Comprehensive HRQOL Analysis Report
+        </h2>
+    </div>
+    """)
+    
     output_report = gr.HTML()
     
-    # Connect analysis function
+    # Connect analysis function with loading
     analyze_button.click(
         fn=comprehensive_healthspan_analysis,
         inputs=[input_type_dropdown, image_input, video_input, breed_input, age_input] + hrqol_inputs,
         outputs=output_report
     )
     
-    gr.Markdown("""
-    ---
-    ### 🔬 **About VetMetrica© HRQOL Framework**
-    
-    This tool integrates the validated **VetMetrica© Health-Related Quality of Life** framework with advanced AI analysis:
-    
-    - **🎯 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**: 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.
-    
-    **⚠️ Medical Disclaimer**: This tool provides educational insights only. Always consult a qualified veterinarian for professional medical advice.
+    # Enhanced About Section
+    gr.HTML("""
+    <div style="background: white; border-radius: 15px; padding: 25px; margin: 30px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
+        <h2 style="color: #667eea; text-align: center; margin-bottom: 20px;">
+            🔬 About VetMetrica© HRQOL Framework
+        </h2>
+        
+        <p style="text-align: center; margin-bottom: 25px; color: #666; font-size: 1.1em;">
+            This tool integrates the validated <strong>VetMetrica© Health-Related Quality of Life</strong> framework with advanced AI analysis:
+        </p>
+        
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 25px 0;">
+            <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+                <div style="font-size: 2em; margin-bottom: 10px;">🎯</div>
+                <h4 style="color: #667eea; margin-bottom: 10px;">Evidence-Based Assessment</h4>
+                <p style="color: #666; font-size: 0.9em;">Uses clinically validated HRQOL domains (Vitality, Comfort, Emotional Wellbeing, Alertness)</p>
+            </div>
+            
+            <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+                <div style="font-size: 2em; margin-bottom: 10px;">🤖</div>
+                <h4 style="color: #667eea; margin-bottom: 10px;">AI-Powered Analysis</h4>
+                <p style="color: #666; font-size: 0.9em;">Combines CLIP vision models with BiomedCLIP for medical insights</p>
+            </div>
+            
+            <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+                <div style="font-size: 2em; margin-bottom: 10px;">📊</div>
+                <h4 style="color: #667eea; margin-bottom: 10px;">Comprehensive Scoring</h4>
+                <p style="color: #666; font-size: 0.9em;">Generates composite healthspan scores normalized by breed and age</p>
+            </div>
+            
+            <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+                <div style="font-size: 2em; margin-bottom: 10px;">📸🎥</div>
+                <h4 style="color: #667eea; margin-bottom: 10px;">Multi-Modal Input</h4>
+                <p style="color: #666; font-size: 0.9em;">Both image and video analysis support upload and real-time webcam capture</p>
+            </div>
+        </div>
+        
+        <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 20px 0;">
+            <p style="margin: 0; color: #856404; text-align: center;">
+                <strong>⚠️ Medical Disclaimer:</strong> This tool provides educational insights only. Always consult a qualified veterinarian for professional medical advice.
+            </p>
+        </div>
+    </div>
     """)
 
 if __name__ == "__main__":