Update app.py

app.py

@@ -1078,46 +1078,46 @@ def update_media_input(input_type):
         return gr.update(visible=False), gr.update(visible=True)
 
 custom_css = """
-/* Enhanced gradient background */
+/* Enhanced gradient background - Orange & Black theme */
 .gradio-container {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: linear-gradient(135deg, #ff6f00 0%, #000000 100%);
     min-height: 100vh;
 }
 
-/* Card styling */
+/* Card styling - Dark background with orange accents */
 .input-card {
-    background: white;
+    background: #1a1a1a;
     border-radius: 15px;
     padding: 25px;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    box-shadow: 0 8px 25px rgba(255,111,0,0.3);
     margin: 10px;
-    border: 1px solid #e0e6ed;
+    border: 1px solid #333333;
 }
 
-/* Questionnaire grid container - Dark background for white text */
+/* Questionnaire grid container - Orange to black gradient */
 .questionnaire-grid {
-    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    background: linear-gradient(135deg, #ff6f00 0%, #000000 100%);
     border-radius: 15px;
     padding: 30px;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 25px rgba(255,111,0,0.4);
     margin: 10px;
-    border: 1px solid #34495e;
+    border: 1px solid #111111;
 }
 
-/* Header styling */
+/* Header styling - Orange to black gradient */
 .main-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #ff6f00 0%, #000000 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);
+    box-shadow: 0 8px 25px rgba(255,111,0,0.3);
 }
 
-/* Button styling */
+/* Button styling - Orange gradient with enhanced contrast */
 .analyze-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #ff6f00 0%, #cc5500 100%);
     border: none;
     color: white;
     padding: 15px 30px;
@@ -1126,22 +1126,22 @@ custom_css = """
     border-radius: 25px;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 15px rgba(255,111,0,0.3);
 }
 
 .analyze-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 8px 25px rgba(255,111,0,0.4);
 }
 
-/* Grid styling for questionnaire */
+/* Grid styling for questionnaire - Enhanced readability */
 .question-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 20px;
     align-items: center;
     padding: 15px 0;
-    border-bottom: 1px solid #4a5568;
+    border-bottom: 1px solid #333333;
     margin-bottom: 10px;
 }
 
@@ -1150,37 +1150,39 @@ custom_css = """
     margin-bottom: 0;
 }
 
-/* WHITE TEXT FOR QUESTIONNAIRE */
+/* Enhanced text readability with light orange */
 .question-text {
     font-size: 16px !important;
-    color: #ffffff !important;
+    color: #ffcc80 !important;
     line-height: 1.6 !important;
     margin: 0 !important;
     padding-right: 20px !important;
     font-weight: 500 !important;
     letter-spacing: 0.3px !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
 }
 
 .question-text strong {
-    color: #a8d5ff !important;
+    color: #ff9900 !important;
     font-weight: 600 !important;
     font-size: 16px !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
 }
 
-/* Dropdown styling with dark theme */
+/* Dropdown styling with dark theme and orange accents */
 .gr-dropdown {
     border-radius: 6px;
-    border: 2px solid #4a5568;
-    background-color: #2d3748 !important;
+    border: 2px solid #333333;
+    background-color: #1a1a1a !important;
     transition: border-color 0.3s ease;
     font-size: 14px !important;
     font-weight: 500 !important;
-    color: #ffffff !important;
+    color: #ffcc80 !important;
 }
 
 .gr-dropdown:focus {
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+    border-color: #ff6f00;
+    box-shadow: 0 0 0 3px rgba(255,111,0,0.2);
 }
 
 /* Compact spacing */
@@ -1192,23 +1194,23 @@ custom_css = """
     margin-bottom: 0;
 }
 
-/* White text for questionnaire headers */
+/* Enhanced header text with better contrast */
 .questionnaire-grid h2 {
     font-size: 24px !important;
     font-weight: 600 !important;
-    color: #ffffff !important;
+    color: #ffcc80 !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
 }
 
 .questionnaire-grid p {
     font-size: 16px !important;
-    color: #e2e8f0 !important;
+    color: #ffcc80 !important;
     font-weight: 400 !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
 }
-
-
 """
 
-# Updated Gradio Interface with White Text
+# Updated Gradio Interface with Orange & Black Theme
 with gr.Blocks(
     title="🐶 Enhanced AI Dog Health Analyzer", 
     theme=gr.themes.Soft(),
@@ -1232,7 +1234,7 @@ with gr.Blocks(
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="input-card">
-                <h2 style="color: #667eea; margin: 0 0 20px 0; text-align: center;">
+                <h2 style="color: #ff6f00; margin: 0 0 20px 0; text-align: center;">
                     📸 Media Input Selection
                 </h2>
             </div>
@@ -1270,7 +1272,6 @@ with gr.Blocks(
                 outputs=[image_input, video_input]
             )
             
-            
             breed_input = gr.Dropdown(
                 STANFORD_BREEDS, 
                 label="🐕 Dog Breed (Auto-detected if not specified)",
@@ -1286,21 +1287,21 @@ with gr.Blocks(
                 maximum=25
             )
         
-        # Right Column - Dark Theme HRQOL Questionnaire with White Text
+        # Right Column - Orange & Black Theme HRQOL Questionnaire with Enhanced Readability
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="questionnaire-grid">
-                <h2 style="color: #ffffff; margin: 0 0 15px 0; text-align: center; font-size: 24px; font-weight: 600;">
+                <h2 style="color: #ffcc80; margin: 0 0 15px 0; text-align: center; font-size: 24px; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);">
                     📋 HRQOL Assessment
                 </h2>
-                <p style="text-align: center; color: #e2e8f0; font-style: italic; margin-bottom: 25px; font-size: 16px;">
+                <p style="text-align: center; color: #ffcc80; font-style: italic; margin-bottom: 25px; font-size: 16px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">
                     Complete all questions for accurate healthspan analysis
                 </p>
             """)
             
             hrqol_inputs = []
             
-            # Create compact grid layout with white text
+            # Create compact grid layout with orange text
             with gr.Group(elem_classes=["question-section"]):
                 for domain_key, domain_data in HRQOL_QUESTIONNAIRE.items():
                     for i, question in enumerate(domain_data["questions"]):