Update app.py

app.py

@@ -1077,336 +1077,83 @@ def update_media_input(input_type):
     else:  # Video Analysis
         return gr.update(visible=False), gr.update(visible=True)
 
+# Custom CSS for enhanced styling
 custom_css = """
-/* Import the design system variables and base styles */
-:root {
-    /* Color system */
-    --color-primary: #2563eb;
-    --color-primary-hover: #1d4ed8;
-    --color-primary-active: #1e40af;
-    --color-secondary: #f1f5f9;
-    --color-background: #fefefe;
-    --color-surface: #ffffff;
-    --color-text: #0f172a;
-    --color-text-secondary: #64748b;
-    --color-border: #e2e8f0;
-    --color-card-border: #e2e8f0;
-    
-    /* Spacing */
-    --space-8: 8px;
-    --space-12: 12px;
-    --space-16: 16px;
-    --space-20: 20px;
-    --space-24: 24px;
-    --space-32: 32px;
-    
-    /* Typography */
-    --font-size-base: 14px;
-    --font-size-lg: 16px;
-    --font-size-xl: 18px;
-    --font-size-2xl: 20px;
-    --font-size-3xl: 24px;
-    --font-size-4xl: 30px;
-    
-    /* Border radius */
-    --radius-base: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    
-    /* Shadows */
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
-}
-
-/* Base container styling */
+/* Enhanced gradient background */
 .gradio-container {
-    background: var(--color-background);
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-/* Header styling matching your design */
-.main-header {
-    background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
-    color: white;
-    text-align: center;
-    padding: var(--space-32);
-    border-radius: var(--radius-xl);
-    margin-bottom: var(--space-32);
-    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);
-}
-
-.main-header h1 {
-    margin: 0;
-    font-size: var(--font-size-4xl);
-    font-weight: 700;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-
-.main-header p {
-    margin: var(--space-16) 0 0 0;
-    font-size: var(--font-size-xl);
-    opacity: 0.9;
-    font-weight: 400;
 }
 
-/* Card styling matching your clean design */
+/* Card styling */
 .input-card, .questionnaire-card {
-    background: var(--color-surface);
-    border-radius: var(--radius-xl);
-    padding: var(--space-24);
-    box-shadow: var(--shadow-sm);
-    margin: var(--space-16) 0;
-    border: 1px solid var(--color-card-border);
-    transition: all 0.3s ease;
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    margin: 10px;
+    border: 1px solid #e0e6ed;
 }
 
-.input-card:hover, .questionnaire-card:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
-}
-
-.section-title {
-    color: var(--color-primary);
-    margin: 0 0 var(--space-20) 0;
+/* Header styling */
+.main-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
     text-align: center;
-    font-size: var(--font-size-2xl);
-    font-weight: 600;
+    padding: 30px;
+    border-radius: 15px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
-/* Upload area styling */
-.upload-area {
-    border: 2px dashed var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-32);
-    text-align: center;
+/* 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;
-    background-color: #f8fafc;
-}
-
-.upload-area:hover {
-    border-color: var(--color-primary);
-    background-color: #f1f5f9;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
-/* Enhanced form controls */
-.gr-dropdown, .gr-textbox, .gr-number {
-    border-radius: var(--radius-base) !important;
-    border: 2px solid var(--color-border) !important;
-    transition: border-color 0.3s ease !important;
-    font-size: var(--font-size-base) !important;
-}
-
-.gr-dropdown:focus, .gr-textbox:focus, .gr-number:focus {
-    border-color: var(--color-primary) !important;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
-    outline: none !important;
+.analyze-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
-/* Accordion styling for questionnaire */
+/* Accordion styling */
 .accordion-header {
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-base);
-    padding: var(--space-16);
-    margin: var(--space-12) 0;
+    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, #e2e8f0 0%, #cbd5e1 100%);
+    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
     transform: translateY(-1px);
 }
 
-.accordion-header h3 {
-    margin: 0;
-    color: var(--color-text);
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-}
-
-.accordion-header p {
-    margin: 5px 0 0 0;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-base);
-}
-
-/* Enhanced button styling */
-.analyze-button {
-    background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%) !important;
-    border: none !important;
-    color: white !important;
-    padding: var(--space-16) var(--space-32) !important;
-    font-size: var(--font-size-lg) !important;
-    font-weight: 600 !important;
-    border-radius: 25px !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
-    min-width: 300px !important;
-}
-
-.analyze-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
-}
-
-.analyze-button:disabled {
-    opacity: 0.6 !important;
-    cursor: not-allowed !important;
-    transform: none !important;
-}
-
-/* Progress bar styling */
-.progress-container {
-    margin: var(--space-24) 0;
-}
-
-.progress-bar {
-    width: 100%;
-    height: 8px;
-    background-color: var(--color-secondary);
-    border-radius: 25px;
-    overflow: hidden;
-    margin-bottom: var(--space-8);
-}
-
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--color-primary) 0%, #06b6d4 100%);
-    border-radius: 25px;
-    transition: width 0.5s ease;
-    width: 0%;
-}
-
-.progress-text {
-    font-size: var(--font-size-base);
-    color: var(--color-text-secondary);
-    text-align: center;
-}
-
-/* Results section styling */
-.results-section {
-    margin-top: var(--space-32);
-    background: var(--color-surface);
-    border-radius: var(--radius-xl);
-    padding: var(--space-32);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--color-card-border);
-}
-
-.results-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--space-20);
-    margin-bottom: var(--space-24);
-}
-
-.result-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-card-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-20);
-    text-align: center;
-    box-shadow: var(--shadow-sm);
-    transition: all 0.3s ease;
-}
-
-.result-card:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-}
-
-.metric-title {
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--color-text-secondary);
-    margin: 0 0 var(--space-8) 0;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.metric-value {
-    font-size: var(--font-size-3xl);
-    font-weight: 700;
-    color: var(--color-primary);
-    margin: 0;
-}
-
-.metric-subtitle {
-    font-size: var(--font-size-base);
-    color: var(--color-text-secondary);
-    margin: var(--space-8) 0 0 0;
-}
-
-/* Score bars */
-.score-bar {
-    width: 100%;
-    height: 8px;
-    background-color: var(--color-secondary);
-    border-radius: 25px;
-    overflow: hidden;
-    margin: var(--space-12) 0;
-}
-
-.score-fill {
-    height: 100%;
-    border-radius: 25px;
-    transition: width 0.8s ease;
-}
-
-.score-excellent { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
-.score-good { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); }
-.score-fair { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
-.score-poor { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }
-
-/* Recommendations styling */
-.recommendations-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.recommendations-list li {
-    background: #f8fafc;
-    padding: var(--space-12) var(--space-16);
-    margin: var(--space-8) 0;
-    border-radius: var(--radius-base);
-    border-left: 4px solid var(--color-primary);
-    font-size: var(--font-size-base);
-    line-height: 1.5;
-}
-
-/* Health aspects grid */
-.health-aspects {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--space-16);
-    margin-top: var(--space-24);
-}
-
-.aspect-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-12);
-    background: #f8fafc;
-    border-radius: var(--radius-base);
-    font-size: var(--font-size-base);
-}
-
-.aspect-name {
-    font-weight: 500;
-    color: var(--color-text);
+/* Dropdown styling */
+.gr-dropdown {
+    border-radius: 8px;
+    border: 2px solid #e0e6ed;
+    transition: border-color 0.3s ease;
 }
 
-.aspect-value {
-    color: var(--color-text-secondary);
+.gr-dropdown:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
-/* Loading animation */
+/* Progress animation */
 @keyframes pulse {
     0% { opacity: 1; }
     50% { opacity: 0.5; }
@@ -1416,196 +1163,152 @@ custom_css = """
 .loading-pulse {
     animation: pulse 2s infinite;
 }
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .main-header {
-        padding: var(--space-24);
-    }
-    
-    .main-header h1 {
-        font-size: var(--font-size-3xl);
-    }
-    
-    .main-header p {
-        font-size: var(--font-size-lg);
-    }
-    
-    .input-card, .questionnaire-card {
-        padding: var(--space-20);
-        margin: var(--space-12) 0;
-    }
-    
-    .analyze-button {
-        min-width: auto !important;
-        width: 100% !important;
-    }
-    
-    .results-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* Hide default gradio styling that conflicts */
-.gradio-container .prose {
-    max-width: none !important;
-}
-
-.gradio-container .container {
-    max-width: none !important;
-}
-
-/* Enhanced spacing for main content */
-.gradio-container > .contain {
-    padding: var(--space-24) !important;
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-}
 """
 
-# Your existing comprehensive_healthspan_analysis function and other logic
-# (Keep all your existing functions exactly as they are)
-
-def update_media_input(analysis_type):
-    if analysis_type == "Image Analysis":
-        return gr.update(visible=True), gr.update(visible=False)
-    else:
-        return gr.update(visible=False), gr.update(visible=True)
-
-# Gradio Interface with Clean Professional UI
+# Gradio Interface with Enhanced UI
 with gr.Blocks(
     title="🐶 Enhanced AI Dog Health Analyzer", 
     theme=gr.themes.Soft(),
     css=custom_css
 ) as demo:
     
-    # Main Header with clean styling
+    # Main Header
     gr.HTML("""
     <div class="main-header">
-        <h1>🐕 Enhanced AI Dog Health & Aging Analyzer</h1>
-        <p>Advanced Biological Age Prediction • Multi-Factor Analysis • Breed-Specific Calibration</p>
+        <h1 style="margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
+            🐕 Enhanced AI Dog Health & Aging Analyzer
+        </h1>
+        <p style="margin: 15px 0 0 0; font-size: 1.2em; opacity: 0.9;">
+            Advanced Biological Age Prediction • Multi-Factor Analysis • Breed-Specific Calibration
+        </p>
     </div>
     """)
     
     with gr.Row():
-        # Left Column - Media Input Section
+        # Left Column - Enhanced Media Input
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.HTML("""
-                <div class="input-card">
-                    <h2 class="section-title">📸 Media Input Selection</h2>
-                </div>
-                """)
-                
-                # Analysis type dropdown
-                input_type_dropdown = gr.Dropdown(
-                    choices=["Image Analysis", "Video Analysis"],
-                    label="🔍 Select Analysis Type",
-                    value="Image Analysis",
-                    interactive=True,
-                    elem_classes=["gr-dropdown"]
-                )
-                
-                # Media input components
-                image_input = gr.Image(
-                    type="pil", 
-                    label="📷 Upload Dog Photo or Use Webcam",
-                    visible=True,
-                    sources=["upload", "webcam"],
-                    height=300
-                )
-                
-                video_input = gr.Video(
-                    label="🎥 Upload Video (10-30 seconds) or Record with Webcam",
-                    visible=False,
-                    sources=["upload", "webcam"],
-                    height=300
-                )
-                
-                # Update visibility based on dropdown selection
-                input_type_dropdown.change(
-                    fn=update_media_input,
-                    inputs=[input_type_dropdown],
-                    outputs=[image_input, video_input]
-                )
+            gr.HTML("""
+            <div class="input-card">
+                <h2 style="color: #667eea; margin: 0 0 20px 0; text-align: center;">
+                    📸 Media Input Selection
+                </h2>
+            </div>
+            """)
             
-            # Optional Information Section
-            with gr.Group():
-                gr.HTML("""
-                <div style="margin: 20px 0;">
-                    <h3 class="section-title">⚙ Optional Information</h3>
-                </div>
-                """)
-                
-                breed_input = gr.Dropdown(
-                    STANFORD_BREEDS, 
-                    label="🐕 Dog Breed (Auto-detected if not specified)",
-                    value=None,
-                    allow_custom_value=True,
-                    elem_classes=["gr-dropdown"]
-                )
-                
-                age_input = gr.Number(
-                    label="📅 Chronological Age (years)", 
-                    precision=1, 
-                    value=None,
-                    minimum=0,
-                    maximum=25
-                )
+            # Enhanced dropdown with better styling
+            input_type_dropdown = gr.Dropdown(
+                choices=["Image Analysis", "Video Analysis"],
+                label="🔍 Select Analysis Type",
+                value="Image Analysis",
+                interactive=True,
+                elem_classes=["gr-dropdown"]
+            )
+            
+            # Media input components with enhanced labels
+            image_input = gr.Image(
+                type="pil", 
+                label="📷 Upload Dog Photo or Use Webcam",
+                visible=True,
+                sources=["upload", "webcam"],
+                height=300
+            )
+            
+            video_input = gr.Video(
+                label="🎥 Upload Video (10-30 seconds) or Record with Webcam",
+                visible=False,
+                sources=["upload", "webcam"],
+                height=300
+            )
+            
+            # Update visibility based on dropdown selection
+            input_type_dropdown.change(
+                fn=update_media_input,
+                inputs=[input_type_dropdown],
+                outputs=[image_input, video_input]
+            )
+            
+            # 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)",
+                value=None,
+                allow_custom_value=True,
+                elem_classes=["gr-dropdown"]
+            )
+            age_input = gr.Number(
+                label="📅 Chronological Age (years)", 
+                precision=1, 
+                value=None,
+                minimum=0,
+                maximum=25
+            )
         
-        # Right Column - HRQOL Questionnaire
+        # Right Column - SHORTENED HRQOL Questionnaire
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.HTML("""
-                <div class="questionnaire-card">
-                    <h2 class="section-title">📋 Streamlined HRQOL Assessment</h2>
-                    <p style="text-align: center; color: var(--color-text-secondary); font-style: italic; margin-bottom: 20px;">
-                        Complete all 4 comprehensive questions for accurate healthspan analysis
+            gr.HTML("""
+            <div class="questionnaire-card">
+                <h2 style="color: #667eea; margin: 0 0 10px 0; text-align: center;">
+                    📋 Streamlined HRQOL Assessment
+                </h2>
+                <p style="text-align: center; color: #666; font-style: italic; margin-bottom: 20px;">
+                    Complete all 4 comprehensive questions 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>
                 """)
                 
-                hrqol_inputs = []
-                
-                for domain_key, domain_data in HRQOL_QUESTIONNAIRE.items():
-                    # Enhanced accordion header
-                    gr.HTML(f"""
-                    <div class="accordion-header">
-                        <h3>{domain_data['title']}</h3>
-                        <p>{domain_data['description']}</p>
-                    </div>
-                    """)
-                    
-                    with gr.Accordion(domain_data["title"], open=True):
-                        for question in domain_data["questions"]:
-                            # Enhanced dropdown for each question
-                            dropdown = gr.Dropdown(
-                                choices=question["options"],
-                                label=question["text"],
-                                value=None,
-                                interactive=True,
-                                elem_classes=["gr-dropdown"]
-                            )
-                            hrqol_inputs.append(dropdown)
+                with gr.Accordion(domain_data["title"], open=True):
+                    for question in domain_data["questions"]:
+                        # Enhanced dropdown for each question
+                        dropdown = gr.Dropdown(
+                            choices=question["options"],
+                            label=question["text"],
+                            value=None,
+                            interactive=True,
+                            elem_classes=["gr-dropdown"]
+                        )
+                        hrqol_inputs.append(dropdown)
     
-    # Enhanced Analysis Button with center alignment
-    with gr.Row():
-        with gr.Column():
-            gr.HTML("""<div style="text-align: center; margin: 30px 0;">""")
-            
-            analyze_button = gr.Button(
-                "🔬 Run Advanced AI Analysis", 
-                variant="primary", 
-                size="lg",
-                elem_classes=["analyze-button"]
-            )
-            
-            gr.HTML("</div>")
+    # Enhanced Analysis Button
+    gr.HTML("""
+    <div style="text-align: center; margin: 30px 0;">
+    """)
+    
+    analyze_button = gr.Button(
+        "🔬 Run Advanced AI Analysis", 
+        variant="primary", 
+        size="lg",
+        elem_classes=["analyze-button"]
+    )
+    
+    gr.HTML("</div>")
     
     # Enhanced Results Section
     output_report = gr.HTML()
     
-    # Connect analysis function (keep your existing logic)
+    # 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,
@@ -1613,4 +1316,4 @@ with gr.Blocks(
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()