Update app.py

app.py

@@ -1078,70 +1078,76 @@ def update_media_input(input_type):
         return gr.update(visible=False), gr.update(visible=True)
 
 custom_css = """
-/* Enhanced gradient background - Orange & Black theme */
+/* Enhanced gradient background - Orangish theme */
 .gradio-container {
-    background: linear-gradient(135deg, #ff6f00 0%, #000000 100%);
+    background: linear-gradient(135deg, #ffa726 0%, #ffcc80 100%);
     min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* Card styling - Dark background with orange accents */
+/* Card styling - Light orange background with black text */
 .input-card {
-    background: #1a1a1a;
+    background: #fff3e0;
     border-radius: 15px;
     padding: 25px;
-    box-shadow: 0 8px 25px rgba(255,111,0,0.3);
+    box-shadow: 0 8px 25px rgba(255,167,38,0.3);
     margin: 10px;
-    border: 1px solid #333333;
+    border: 1px solid #ffb74d;
+    color: #000000;
 }
 
-/* Questionnaire grid container - Orange to black gradient */
+/* Questionnaire grid container - Light orangish background */
 .questionnaire-grid {
-    background: linear-gradient(135deg, #ff6f00 0%, #000000 100%);
+    background: linear-gradient(135deg, #ffcc80 0%, #ffe0b2 100%);
     border-radius: 15px;
     padding: 30px;
-    box-shadow: 0 8px 25px rgba(255,111,0,0.4);
+    box-shadow: 0 8px 25px rgba(255,167,38,0.4);
     margin: 10px;
-    border: 1px solid #111111;
+    border: 1px solid #ffb74d;
+    color: #000000;
 }
 
-/* Header styling - Orange to black gradient */
+/* Header styling - Orange gradient with black text */
 .main-header {
-    background: linear-gradient(135deg, #ff6f00 0%, #000000 100%);
-    color: white;
+    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
+    color: #000000;
     text-align: center;
     padding: 30px;
     border-radius: 15px;
     margin-bottom: 30px;
-    box-shadow: 0 8px 25px rgba(255,111,0,0.3);
+    box-shadow: 0 8px 25px rgba(255,152,0,0.3);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* Button styling - Orange gradient with enhanced contrast */
+/* Button styling - Orange gradient with black text */
 .analyze-button {
-    background: linear-gradient(135deg, #ff6f00 0%, #cc5500 100%);
+    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
     border: none;
-    color: white;
+    color: #000000;
     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(255,111,0,0.3);
+    box-shadow: 0 4px 15px rgba(255,152,0,0.3);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .analyze-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(255,111,0,0.4);
+    box-shadow: 0 8px 25px rgba(255,152,0,0.4);
+    background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
 }
 
-/* Grid styling for questionnaire - Enhanced readability */
+/* Grid styling for questionnaire */
 .question-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 20px;
     align-items: center;
     padding: 15px 0;
-    border-bottom: 1px solid #333333;
+    border-bottom: 1px solid #ffb74d;
     margin-bottom: 10px;
 }
 
@@ -1150,39 +1156,40 @@ custom_css = """
     margin-bottom: 0;
 }
 
-/* Enhanced text readability with light orange */
+/* Professional black text for questions */
 .question-text {
     font-size: 16px !important;
-    color: #ffcc80 !important;
+    color: #000000 !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;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .question-text strong {
-    color: #ff9900 !important;
+    color: #d84315 !important;
     font-weight: 600 !important;
     font-size: 16px !important;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
-/* Dropdown styling with dark theme and orange accents */
+/* Dropdown styling with orangish theme and black text */
 .gr-dropdown {
     border-radius: 6px;
-    border: 2px solid #333333;
-    background-color: #1a1a1a !important;
+    border: 2px solid #ffb74d;
+    background-color: #fff3e0 !important;
     transition: border-color 0.3s ease;
     font-size: 14px !important;
     font-weight: 500 !important;
-    color: #ffcc80 !important;
+    color: #000000 !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .gr-dropdown:focus {
-    border-color: #ff6f00;
-    box-shadow: 0 0 0 3px rgba(255,111,0,0.2);
+    border-color: #ff9800;
+    box-shadow: 0 0 0 3px rgba(255,152,0,0.2);
 }
 
 /* Compact spacing */
@@ -1194,23 +1201,43 @@ custom_css = """
     margin-bottom: 0;
 }
 
-/* Enhanced header text with better contrast */
+/* Professional black text for headers */
 .questionnaire-grid h2 {
     font-size: 24px !important;
     font-weight: 600 !important;
-    color: #ffcc80 !important;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
+    color: #000000 !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }
 
 .questionnaire-grid p {
     font-size: 16px !important;
-    color: #ffcc80 !important;
+    color: #000000 !important;
     font-weight: 400 !important;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
+/* Additional professional styling */
+.gr-textbox, .gr-number {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    color: #000000 !important;
+    background-color: #fff3e0 !important;
+    border: 2px solid #ffb74d !important;
+}
+
+.gr-textbox:focus, .gr-number:focus {
+    border-color: #ff9800 !important;
+    box-shadow: 0 0 0 3px rgba(255,152,0,0.2) !important;
+}
+
+/* Labels styling */
+label {
+    color: #000000 !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    font-weight: 500 !important;
 }
 """
 
-# Updated Gradio Interface with Orange & Black Theme
+# Updated Gradio Interface with Orangish Theme and Black Text
 with gr.Blocks(
     title="🐶 Enhanced AI Dog Health Analyzer", 
     theme=gr.themes.Soft(),
@@ -1220,10 +1247,10 @@ with gr.Blocks(
     # 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);">
+        <h1 style="margin: 0; font-size: 2.5em; color: #000000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
             🐾PAWSYears Every Dog has 20 years Potential  
         </h1>
-        <p style="margin: 15px 0 0 0; font-size: 1.2em; opacity: 0.9;">
+        <p style="margin: 15px 0 0 0; font-size: 1.2em; color: #000000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
             PAWSYears is your Companion's Next Health Intelligence
         </p>
     </div>
@@ -1234,7 +1261,7 @@ with gr.Blocks(
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="input-card">
-                <h2 style="color: #ff6f00; margin: 0 0 20px 0; text-align: center;">
+                <h2 style="color: #d84315; margin: 0 0 20px 0; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                     📸 Media Input Selection
                 </h2>
             </div>
@@ -1287,21 +1314,21 @@ with gr.Blocks(
                 maximum=25
             )
         
-        # Right Column - Orange & Black Theme HRQOL Questionnaire with Enhanced Readability
+        # Right Column - Orangish Theme HRQOL Questionnaire with Black Text
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="questionnaire-grid">
-                <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);">
+                <h2 style="color: #000000; margin: 0 0 15px 0; text-align: center; font-size: 24px; font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                     📋 HRQOL Assessment
                 </h2>
-                <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);">
+                <p style="text-align: center; color: #000000; font-style: italic; margin-bottom: 25px; font-size: 16px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                     Complete all questions for accurate healthspan analysis
                 </p>
             """)
             
             hrqol_inputs = []
             
-            # Create compact grid layout with orange text
+            # Create compact grid layout with black 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"]):
@@ -1349,7 +1376,5 @@ with gr.Blocks(
         outputs=output_report
     )
 
-
-
 if __name__ == "__main__":
     demo.launch()