Update app.py

app.py

@@ -1077,7 +1077,7 @@ 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 for enhanced styling with compact questionnaire
 custom_css = """
 /* Enhanced gradient background */
 .gradio-container {
@@ -1085,13 +1085,13 @@ custom_css = """
     min-height: 100vh;
 }
 
-/* Card styling */
+/* Card styling - more compact */
 .input-card, .questionnaire-card {
     background: white;
     border-radius: 15px;
-    padding: 25px;
+    padding: 20px;
     box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    margin: 10px;
+    margin: 5px;
     border: 1px solid #e0e6ed;
 }
 
@@ -1102,7 +1102,7 @@ custom_css = """
     text-align: center;
     padding: 30px;
     border-radius: 15px;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
@@ -1125,27 +1125,12 @@ custom_css = """
     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 */
+/* Compact dropdown styling */
 .gr-dropdown {
     border-radius: 8px;
     border: 2px solid #e0e6ed;
     transition: border-color 0.3s ease;
+    margin: 5px 0 !important;
 }
 
 .gr-dropdown:focus {
@@ -1153,19 +1138,40 @@ custom_css = """
     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; }
+/* Compact form styling */
+.gr-form {
+    gap: 8px !important;
+}
+
+/* Reduce spacing in groups */
+.gr-group {
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: transparent !important;
+}
+
+/* Compact label styling */
+.gr-block label {
+    margin-bottom: 4px !important;
+    font-size: 0.9em !important;
+    font-weight: 500 !important;
+}
+
+/* Reduce container padding */
+.gr-box {
+    border: none !important;
+    padding: 2px !important;
 }
 
-.loading-pulse {
-    animation: pulse 2s infinite;
+/* Ensure equal column widths */
+.gr-row > .gr-column {
+    min-width: 0 !important;
+    flex: 1 !important;
 }
 """
 
-# Gradio Interface with Enhanced UI
+# UPDATED GRADIO INTERFACE WITH COMPACT UI
 with gr.Blocks(
     title="🐶 Enhanced AI Dog Health Analyzer", 
     theme=gr.themes.Soft(),
@@ -1195,16 +1201,13 @@ 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,
-                elem_classes=["gr-dropdown"]
+                interactive=True
             )
             
-            # Media input components with enhanced labels
             image_input = gr.Image(
                 type="pil", 
                 label="📷 Upload Dog Photo or Use Webcam",
@@ -1220,14 +1223,12 @@ 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;">
@@ -1240,8 +1241,7 @@ with gr.Blocks(
                 STANFORD_BREEDS, 
                 label="🐕 Dog Breed (Auto-detected if not specified)",
                 value=None,
-                allow_custom_value=True,
-                elem_classes=["gr-dropdown"]
+                allow_custom_value=True
             )
             age_input = gr.Number(
                 label="📅 Chronological Age (years)", 
@@ -1251,49 +1251,60 @@ with gr.Blocks(
                 maximum=25
             )
         
-        # Right Column - SHORTENED HRQOL Questionnaire
+        # Right Column - COMPACT HRQOL Questionnaire
         with gr.Column(scale=1):
+            # Single unified card for all questionnaire sections
             gr.HTML("""
-            <div class="questionnaire-card">
-                <h2 style="color: #667eea; margin: 0 0 10px 0; text-align: center;">
-                    📋 Streamlined HRQOL Assessment
+            <div class="questionnaire-card" style="padding: 20px; margin: 0;">
+                <h2 style="color: #667eea; margin: 0 0 15px 0; text-align: center; font-size: 1.5em;">
+                    📋 HRQOL Health 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 style="text-align: center; color: #666; font-style: italic; margin-bottom: 20px; font-size: 0.9em;">
+                    Complete all 4 sections for accurate 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):
+            # Compact questionnaire layout - all in one card
+            with gr.Group():
+                for i, (domain_key, domain_data) in enumerate(HRQOL_QUESTIONNAIRE.items()):
+                    # Compact section header with minimal spacing
+                    gr.HTML(f"""
+                    <div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
+                                border: 1px solid #dee2e6; border-radius: 8px; 
+                                padding: 12px; margin: 8px 0;">
+                        <h4 style="margin: 0; color: #333; font-size: 1em; font-weight: 600;">
+                            {domain_data['title']}
+                        </h4>
+                        <p style="margin: 3px 0 0 0; color: #666; font-size: 0.8em;">
+                            {domain_data['description']}
+                        </p>
+                    </div>
+                    """)
+                    
+                    # Question dropdown with minimal spacing
                     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"]
+                            container=True,
+                            scale=1
                         )
                         hrqol_inputs.append(dropdown)
+                    
+                    # Add small separator except for last item
+                    if i < len(HRQOL_QUESTIONNAIRE) - 1:
+                        gr.HTML("""
+                        <div style="height: 1px; background: #e0e0e0; margin: 10px 0;"></div>
+                        """)
     
-    # Enhanced Analysis Button
+    # Enhanced Analysis Button with reduced spacing
     gr.HTML("""
-    <div style="text-align: center; margin: 30px 0;">
+    <div style="text-align: center; margin: 20px 0;">
     """)
     
     analyze_button = gr.Button(