Update app.py

app.py

@@ -20,7 +20,7 @@ def classify_symptoms(text):
     except Exception as e:
         return f"Error processing classification: {str(e)}"
 
-# Enhanced CSS for a more professional medical look
+# Enhanced CSS with better color contrast and readability
 custom_css = """
 .gradio-container {
     max-width: 1200px !important;
@@ -28,7 +28,6 @@ custom_css = """
     padding: 2rem !important;
     background-color: #f0f4f7 !important;
 }
-
 .main-container {
     text-align: center;
     padding: 1rem;
@@ -37,19 +36,16 @@ custom_css = """
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-
 h1 {
     color: #2c3e50 !important;
     font-size: 2.5rem !important;
     margin-bottom: 0.5rem !important;
 }
-
 h3 {
     color: #34495e !important;
     font-size: 1.2rem !important;
     font-weight: normal !important;
 }
-
 .input-container {
     background: white !important;
     padding: 2rem !important;
@@ -57,22 +53,39 @@ h3 {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
     margin-bottom: 1.5rem !important;
 }
-
 textarea {
+    background: white !important;
+    color: #2c3e50 !important;
     border: 2px solid #3498db !important;
     border-radius: 8px !important;
     padding: 1rem !important;
     font-size: 1.1rem !important;
     min-height: 120px !important;
 }
-
+.submit-btn {
+    background-color: #2ecc71 !important;
+    color: white !important;
+    padding: 0.8rem 2rem !important;
+    border-radius: 8px !important;
+    font-size: 1.1rem !important;
+    margin-top: 1rem !important;
+    transition: background-color 0.3s ease !important;
+}
+.submit-btn:hover {
+    background-color: #27ae60 !important;
+}
 .output-container {
     background: white !important;
     padding: 2rem !important;
     border-radius: 10px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
 }
-
+.output-container pre {
+    background: #f8f9fa !important;
+    color: #2c3e50 !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+}
 .examples-container {
     background: white !important;
     padding: 1.5rem !important;
@@ -80,7 +93,6 @@ textarea {
     margin-top: 1rem !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
 }
-
 .footer {
     text-align: center;
     margin-top: 2rem;
@@ -88,6 +100,7 @@ textarea {
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    color: #2c3e50;
 }
 """
 
@@ -107,6 +120,7 @@ with gr.Blocks(css=custom_css) as demo:
                 placeholder="Enter detailed patient symptoms and clinical observations...",
                 lines=5
             )
+            submit_btn = gr.Button("Analyze Symptoms", elem_classes=["submit-btn"])
             
     with gr.Row(elem_classes=["output-container"]):
         output = gr.JSON(
@@ -125,6 +139,7 @@ with gr.Blocks(css=custom_css) as demo:
             label="Example Clinical Cases"
         )
     
+    submit_btn.click(fn=classify_symptoms, inputs=input_text, outputs=output)
     input_text.submit(fn=classify_symptoms, inputs=input_text, outputs=output)
     
     with gr.Row():