Update app.py

app.py

@@ -33,17 +33,34 @@ def predict_salary(age, education_num, sex, capital_gain, capital_loss, hours_pe
     return label, confidence, fig
 
 with gr.Blocks(css="""
-    body { background-color: #0a0a23; color: white; }
-    .gr-box { background-color: #1a1a3d !important; border-radius: 12px; padding: 20px; }
-    h1, h3, p { color: white; text-align: center; font-family: 'Segoe UI', sans-serif; }
-    .gr-button { background-color: #1db954 !important; color: white !important; border-radius: 10px; font-size: 1.1em; }
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+    
+    body { background-color: #0a0a23; color: white; font-family: 'Poppins', sans-serif; }
+    .gr-box { background-color: #1a1a3d !important; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.3s ease; }
+    .gr-box:hover { transform: scale(1.02); }
+    h1, h3, p { color: white; text-align: center; }
+    .gr-button { background: linear-gradient(135deg, #1db954, #1ed760) !important; color: white !important; border-radius: 10px; font-size: 1.1em; transition: background 0.3s ease; }
+    #predict-button:hover { animation: pulseBtn 1s infinite; }
+    @keyframes pulseBtn {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+        100% { transform: scale(1); }
+    }
+    input:hover, select:hover, textarea:hover {
+        box-shadow: 0 0 5px #1db954;
+    }
+    .gr-plot { animation: fadein 1s ease; }
+    @keyframes fadein {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
     .gr-radio .gr-form { display: flex; justify-content: center !important; }
 """
 ) as demo:
 
     gr.Markdown("""
         <div style='max-width: 700px; margin: 0 auto;'>
-            <h1 style='font-size: 2.5em;'>💼 Income Prediction App</h1>
+            <h1 style="animation: pulse 2s infinite;">💼 Income Prediction App</h1>
             <p style='font-size: 1.2em;'>Predict whether someone earns more than $50K/year using financial and demographic data, with AI explainability via SHAP.</p>
         </div>
     """)
@@ -52,21 +69,26 @@ with gr.Blocks(css="""
         with gr.Column():
             gr.Markdown("<h3>🎂 Age</h3>")
             age = gr.Slider(minimum=0, maximum=100, step=1, value=35, label="", interactive=True)
+            gr.Markdown("<p style='text-align:center;'>Enter age in years</p>")
 
             gr.Markdown("<h3>🎓 Education Level</h3>")
             education = gr.Dropdown(choices=[str(i) for i in range(1, 17)], value="10", label="", interactive=True)
+            gr.Markdown("<p style='text-align:center;'>1 = Preschool, 16 = Doctorate</p>")
 
             gr.Markdown("<h3>⚧️ Sex</h3>")
             sex = gr.Radio(choices=["Male", "Female"], value="Male", label="", interactive=True)
 
-            gr.Markdown("<h3>📈 Capital Gain</h3>")
+            gr.Markdown("<h3>💰 Capital Gain</h3>")
             capital_gain = gr.Number(value=0, label="", interactive=True)
+            gr.Markdown("<p style='text-align:center;'>Income from asset sales</p>")
 
             gr.Markdown("<h3>📉 Capital Loss</h3>")
             capital_loss = gr.Number(value=0, label="", interactive=True)
+            gr.Markdown("<p style='text-align:center;'>Loss from asset disposal</p>")
 
             gr.Markdown("<h3>⏱️ Hours per Week</h3>")
             hours_per_week = gr.Number(value=40, label="", interactive=True)
+            gr.Markdown("<p style='text-align:center;'>Typical work hours weekly</p>")
 
             predict_btn = gr.Button("🔮 Predict", elem_id="predict-button")
 
@@ -83,6 +105,6 @@ with gr.Blocks(css="""
         outputs=[result, confidence, shap_plot]
     )
 
-demo.launch()
+    demo.launch()