Enhance app.py for the Clinical Trial Matching Chatbot by updating CSS styles for improved text visibility and consistency across workflow steps. Adjust content structure to clarify the chatbot's functionality and enhance user experience.

app.py

@@ -374,7 +374,7 @@ if __name__ == "__main__":
     
     # Create optimized chatbot with simple, reliable CSS
     with gr.Blocks(theme=gr.themes.Soft()) as demo:
-        # Add simple CSS for styling
+        # Add simple CSS for styling with black text
         gr.HTML("""
         <style>
         .workflow-card {
@@ -385,17 +385,22 @@ if __name__ == "__main__":
             margin: 8px;
             text-align: center;
             box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+            color: #000000 !important;
+        }
+        .workflow-card * {
+            color: #000000 !important;
         }
         .workflow-card-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
         .workflow-card-2 { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); border-color: #8b5cf6; }
         .workflow-card-3 { background: linear-gradient(135deg, #bfdbfe, #93c5fd); border-color: #3b82f6; }
-        .workflow-card-4 { background: linear-gradient(135deg, #bbf7d0, #86efac); border-color: #10b981; }
-        .workflow-card-5 { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #ef4444; }
+        .workflow-card-4 { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-color: #22c55e; }
+        .workflow-card-5 { background: linear-gradient(135deg, #bbf7d0, #86efac); border-color: #10b981; }
+        .workflow-card-6 { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #ef4444; }
         </style>
         """)
         
         gr.Markdown("# 🏥 Clinical Trial Matching Chatbot")
-        gr.Markdown("**AI-Powered Clinical Trial Matching with GPU acceleration and parallel processing.** Describe a patient's condition to find matching trials quickly.")
+        gr.Markdown("**AI-Powered Clinical Trial Matching.** Describe a patient's condition to find matching trials quickly.")
         
         gr.Markdown("## About the Tool")
         gr.Markdown("""
@@ -413,49 +418,55 @@ if __name__ == "__main__":
         with gr.Row():
             with gr.Column():
                 gr.Markdown("""
-                <div style="background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; border-radius: 12px; padding: 15px; text-align: center; margin: 5px;">
-                <div style="font-size: 2em;">📝</div>
-                <strong>1. Enter Patient Summary</strong><br>
-                <small>Describe the patient's history and findings.</small>
+                <div style="background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">📝</div>
+                <strong style="color: #000000 !important;">1. Enter Patient Summary</strong><br>
+                <small style="color: #000000 !important;">Describe the patient's history and findings.</small>
                 </div>
                 """)
             with gr.Column():
                 gr.Markdown("""
-                <div style="background: linear-gradient(135deg, #ddd6fe, #c4b5fd); border: 2px solid #8b5cf6; border-radius: 12px; padding: 15px; text-align: center; margin: 5px;">
-                <div style="font-size: 2em;">🔑</div>
-                <strong>2. Keyword Extraction</strong><br>
-                <small>AI extracts key medical conditions using GPT-4-turbo.</small>
+                <div style="background: linear-gradient(135deg, #ddd6fe, #c4b5fd); border: 2px solid #8b5cf6; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">🔑</div>
+                <strong style="color: #000000 !important;">2. Keyword Extraction</strong><br>
+                <small style="color: #000000 !important;">AI extracts key medical conditions using GPT-4.</small>
                 </div>
                 """)
             with gr.Column():
                 gr.Markdown("""
-                <div style="background: linear-gradient(135deg, #bfdbfe, #93c5fd); border: 2px solid #3b82f6; border-radius: 12px; padding: 15px; text-align: center; margin: 5px;">
-                <div style="font-size: 2em;">🔎</div>
-                <strong>3. Trial Retrieval</strong><br>
-                <small>Keywords are matched to all trials (including Pfizer).</small>
+                <div style="background: linear-gradient(135deg, #bfdbfe, #93c5fd); border: 2px solid #3b82f6; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">🔎</div>
+                <strong style="color: #000000 !important;">3. Trial Retrieval</strong><br>
+                <small style="color: #000000 !important;">Keywords are matched to all trials (including Pfizer).</small>
                 </div>
                 """)
         
-        # Row 2: Steps 4-5
+        # Row 2: Steps 4-6
         with gr.Row():
             with gr.Column():
                 gr.Markdown("""
-                <div style="background: linear-gradient(135deg, #bbf7d0, #86efac); border: 2px solid #10b981; border-radius: 12px; padding: 15px; text-align: center; margin: 5px;">
-                <div style="font-size: 2em;">✅</div>
-                <strong>4. Eligibility Check</strong><br>
-                <small>Inclusion/exclusion criteria are checked for each trial.</small>
+                <div style="background: linear-gradient(135deg, #dcfce7, #bbf7d0); border: 2px solid #22c55e; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">⚙️</div>
+                <strong style="color: #000000 !important;">4. Data Processing</strong><br>
+                <small style="color: #000000 !important;">Patient data is tokenized and preprocessed for analysis.</small>
                 </div>
                 """)
             with gr.Column():
                 gr.Markdown("""
-                <div style="background: linear-gradient(135deg, #fecaca, #fca5a5); border: 2px solid #ef4444; border-radius: 12px; padding: 15px; text-align: center; margin: 5px;">
-                <div style="font-size: 2em;">🏆</div>
-                <strong>5. Ranking & Results</strong><br>
-                <small>Top 5 matching trials are ranked and displayed. Pfizer trials are highlighted if present.</small>
+                <div style="background: linear-gradient(135deg, #bbf7d0, #86efac); border: 2px solid #10b981; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">✅</div>
+                <strong style="color: #000000 !important;">5. Eligibility Check</strong><br>
+                <small style="color: #000000 !important;">Inclusion/exclusion criteria are checked in parallel.</small>
                 </div>
                 """)
             with gr.Column():
-                gr.Markdown("")  # Empty column for better spacing
+                gr.Markdown("""
+                <div style="background: linear-gradient(135deg, #fecaca, #fca5a5); border: 2px solid #ef4444; border-radius: 12px; padding: 15px; text-align: center; margin: 5px; color: #000000 !important;">
+                <div style="font-size: 2em; color: #000000 !important;">🏆</div>
+                <strong style="color: #000000 !important;">6. Ranking & Results</strong><br>
+                <small style="color: #000000 !important;">Top 5 matching trials are scored and displayed.</small>
+                </div>
+                """)
         
         gr.Markdown("## Start Matching")
         chatbot = gr.ChatInterface(