Update app.py

app.py

@@ -286,7 +286,7 @@ def generate_pdf(*inputs):
 # INTERFACE
 # ===============================
 # ===============================
-# PREMIUM MEDICAL INTERFACE
+# PREMIUM MEDICAL INTERFACE (UPDATED)
 # ===============================
 with gr.Blocks(
     theme=gr.themes.Soft(),
@@ -295,6 +295,17 @@ with gr.Blocks(
         background: linear-gradient(135deg, #e3f2fd, #f4f9ff);
     }
 
+    .center-header {
+        text-align: center;
+    }
+
+    .instruction-text {
+        text-align: center;
+        font-size: 16px;
+        color: #37474f;
+        margin-bottom: 20px;
+    }
+
     .gr-button {
         border-radius: 10px !important;
         font-weight: 600 !important;
@@ -302,38 +313,15 @@ with gr.Blocks(
         font-size: 15px !important;
     }
 
-    button:contains("Basic Risk Assessment") {
-        background-color: #1565c0 !important;
-        color: #15a1c0 !important;
-    }
-
-    button:contains("Detailed Report & Recommendations") {
-        background-color: #00838f !important;
-        color: blue !important;
-    }
-
-    button:contains("Generate PDF Report") {
-        background-color: #2e7d32 !important;
-        color: blue !important;
-    }
-
     .gr-textbox, .gr-number, .gr-dropdown {
         border-radius: 8px !important;
     }
 
-    .header-card {
-        background: white;
-        padding: 25px;
-        border-radius: 15px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-        text-align: center;
-    }
-
     .footer-team {
         background: #ffffff;
         padding: 15px;
         border-radius: 10px;
-        margin-top: 15px;
+        margin-top: 20px;
         text-align: center;
         font-size: 14px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
@@ -341,15 +329,27 @@ with gr.Blocks(
     """
 ) as demo:
 
-    gr.Markdown(f"""
-    <div class="header-card">
-        <img src="logo.png" width="140"><br><br>
+    # ---- LOGO (Guaranteed to Display in HF) ----
+    gr.Image(LOGO_PATH, width=140, show_label=False, container=False)
+
+    # ---- CENTERED HEADER ----
+    gr.Markdown("""
+    <div class="center-header">
         <h1 style="color:#0d47a1;">🏥 TyphoidGuard AI</h1>
         <h4 style="color:#37474f;">HEC Generative AI Hackathon – Pakistan</h4>
         <h4 style="color:#00695c;">Team Chinar AI (AJK)</h4>
     </div>
     """)
 
+    # ---- INSTRUCTION TEXT ----
+    gr.Markdown("""
+    <div class="instruction-text">
+        Please enter the patient clinical values below to assess 
+        the risk of typhoid treatment failure and receive AI-based recommendations.
+    </div>
+    """)
+
+    # ---- INPUT FIELDS ----
     with gr.Row():
         name = gr.Textbox(label="Patient Name")
         age = gr.Number(label="Age")
@@ -374,6 +374,7 @@ with gr.Blocks(
             label="Current Medication"
         )
 
+    # ---- BUTTONS ----
     with gr.Row():
         predict_btn = gr.Button("Basic Risk Assessment")
         detailed_btn = gr.Button("Detailed Report & Recommendations")
@@ -396,6 +397,7 @@ with gr.Blocks(
                 blood_bacteria,severity,medication],
         outputs=gr.File())
 
+    # ---- TEAM FOOTER ----
     gr.Markdown("""
     <div class="footer-team">
         <b>Team Chinar AI (AJK)</b><br>