Update app.py

app.py

@@ -767,6 +767,16 @@ def show_loading():
         </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 using enhanced AI models.</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>
     """
 
@@ -1067,7 +1077,7 @@ def update_media_input(input_type):
     else:  # Video Analysis
         return gr.update(visible=False), gr.update(visible=True)
 
-# Custom CSS for clean, minimal questionnaire design
+# Custom CSS for enhanced styling
 custom_css = """
 /* Enhanced gradient background */
 .gradio-container {
@@ -1075,26 +1085,16 @@ custom_css = """
     min-height: 100vh;
 }
 
-/* Card styling - more compact */
+/* Card styling */
 .input-card, .questionnaire-card {
     background: white;
     border-radius: 15px;
-    padding: 20px;
+    padding: 25px;
     box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    margin: 5px;
+    margin: 10px;
     border: 1px solid #e0e6ed;
 }
 
-/* Clean questionnaire card */
-.clean-questionnaire-card {
-    background: white;
-    border-radius: 12px;
-    padding: 25px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-    margin: 10px 0;
-    border: 1px solid #e8e9ea;
-}
-
 /* Header styling */
 .main-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1102,7 +1102,7 @@ custom_css = """
     text-align: center;
     padding: 30px;
     border-radius: 15px;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
@@ -1125,67 +1125,47 @@ custom_css = """
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
-/* Clean dropdown styling */
-.clean-dropdown {
-    border-radius: 8px !important;
-    border: 1px solid #d1d5db !important;
-    transition: all 0.2s ease !important;
-    margin: 8px 0 !important;
-    background: white !important;
-    font-size: 0.95em !important;
-}
-
-.clean-dropdown:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
-}
-
-/* Clean form styling */
-.clean-form {
-    gap: 16px !important;
+/* 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;
 }
 
-/* Clean section headers */
-.clean-section-header {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 16px;
-    margin: 16px 0 8px 0;
-    border-left: 4px solid #667eea;
+.accordion-header:hover {
+    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+    transform: translateY(-1px);
 }
 
-/* Clean labels */
-.clean-label {
-    font-size: 0.95em !important;
-    font-weight: 500 !important;
-    color: #374151 !important;
-    margin-bottom: 6px !important;
-    line-height: 1.4 !important;
+/* Dropdown styling */
+.gr-dropdown {
+    border-radius: 8px;
+    border: 2px solid #e0e6ed;
+    transition: border-color 0.3s ease;
 }
 
-/* Reduce container padding */
-.gr-box {
-    border: none !important;
-    padding: 4px !important;
+.gr-dropdown:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
-/* Ensure equal column widths */
-.gr-row > .gr-column {
-    min-width: 0 !important;
-    flex: 1 !important;
+/* Progress animation */
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
 }
 
-/* Clean separator */
-.clean-separator {
-    height: 1px;
-    background: #e5e7eb;
-    margin: 20px 0;
-    border: none;
+.loading-pulse {
+    animation: pulse 2s infinite;
 }
 """
 
-# UPDATED GRADIO INTERFACE WITH CLEAN QUESTIONNAIRE UI
+# Gradio Interface with Enhanced UI
 with gr.Blocks(
     title="🐶 Enhanced AI Dog Health Analyzer", 
     theme=gr.themes.Soft(),
@@ -1215,13 +1195,16 @@ with gr.Blocks(
             </div>
             """)
             
+            # Enhanced dropdown with better styling
             input_type_dropdown = gr.Dropdown(
                 choices=["Image Analysis", "Video Analysis"],
                 label="🔍 Select Analysis Type",
                 value="Image Analysis",
-                interactive=True
+                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",
@@ -1237,12 +1220,14 @@ with gr.Blocks(
                 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;">
@@ -1255,7 +1240,8 @@ with gr.Blocks(
                 STANFORD_BREEDS, 
                 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)", 
@@ -1265,68 +1251,49 @@ with gr.Blocks(
                 maximum=25
             )
         
-        # Right Column - CLEAN HRQOL Questionnaire Form
+        # Right Column - SHORTENED HRQOL Questionnaire
         with gr.Column(scale=1):
-            # Clean questionnaire header
             gr.HTML("""
-            <div class="clean-questionnaire-card">
-                <div style="text-align: center; margin-bottom: 24px;">
-                    <h2 style="color: #1f2937; margin: 0 0 8px 0; font-size: 1.6em; font-weight: 600;">
-                        📋 Health Assessment Form
-                    </h2>
-                    <p style="color: #6b7280; font-size: 0.95em; margin: 0; line-height: 1.4;">
-                        Please complete all 4 sections to provide accurate health analysis for your dog
-                    </p>
-                </div>
+            <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 = []
             
-            # Clean questionnaire form layout
-            with gr.Group(elem_classes=["clean-form"]):
-                for i, (domain_key, domain_data) in enumerate(HRQOL_QUESTIONNAIRE.items()):
-                    # Clean section header
-                    gr.HTML(f"""<div class="clean-section-header">
-                        <h3 style="margin: 0; color: #1f2937; font-size: 1.1em; font-weight: 600; display: flex; align-items: center;">
-                            <span style="margin-right: 8px;">{domain_data['title'].split()[0]}</span>
-                            {domain_data['title'].split()[1:][0] if len(domain_data['title'].split()) > 1 else ''}
-                        </h3>
-                        <p style="margin: 6px 0 0 0; color: #6b7280; font-size: 0.9em; line-height: 1.3;">
-                            {domain_data['description']}
-                        </p>
-                    </div>""")
-                    
-                    # Clean question form field
+            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"]:
-                        # Clean question container
-                        gr.HTML(f"""
-                        <div style="margin: 16px 0;">
-                            <label style="display: block; font-size: 0.95em; font-weight: 500; color: #374151; margin-bottom: 8px; line-height: 1.4;">
-                                {question["text"]}
-                            </label>
-                        </div>
-                        """)
-                        
+                        # Enhanced dropdown for each question
                         dropdown = gr.Dropdown(
                             choices=question["options"],
-                            label="",  # Remove label since we're showing it above
-                            placeholder="Select your answer...",
+                            label=question["text"],
                             value=None,
                             interactive=True,
-                            container=False,
-                            elem_classes=["clean-dropdown"]
+                            elem_classes=["gr-dropdown"]
                         )
                         hrqol_inputs.append(dropdown)
-                    
-                    # Clean separator between sections (except last)
-                    if i < len(HRQOL_QUESTIONNAIRE) - 1:
-                        gr.HTML('<hr class="clean-separator">')
     
-    # Clean Analysis Button
+    # Enhanced Analysis Button
     gr.HTML("""
     <div style="text-align: center; margin: 30px 0;">
-        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin: 0 10px;">
     """)
     
     analyze_button = gr.Button(
@@ -1336,10 +1303,7 @@ with gr.Blocks(
         elem_classes=["analyze-button"]
     )
     
-    gr.HTML("""
-        </div>
-    </div>
-    """)
+    gr.HTML("</div>")
     
     # Enhanced Results Section
     output_report = gr.HTML()