Update app.py

app.py

@@ -32,35 +32,31 @@ def predict_salary(age, education_num, sex, capital_gain, capital_loss, hours_pe
 
     return label, confidence, fig
 
+toggle_theme = gr.State(value="dark")
+
 with gr.Blocks(css="""
-    @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; }
-    }
+    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; }
     .gr-radio .gr-form { display: flex; justify-content: center !important; }
 """
 ) as demo:
 
+    def switch_theme(theme_choice):
+        if theme_choice == "dark":
+            return gr.themes.Base().set(body_background="#0a0a23", body_text_color="white"), "dark"
+        else:
+            return gr.themes.Default(), "light"
+
+    with gr.Row():
+        theme_toggle = gr.Radio(["dark", "light"], value="dark", label="Theme", interactive=True)
+
+    theme_toggle.change(switch_theme, inputs=theme_toggle, outputs=[demo.theme, toggle_theme])
+
     gr.Markdown("""
         <div style='max-width: 700px; margin: 0 auto;'>
-            <h1 style="animation: pulse 2s infinite;">💼 Income Prediction App</h1>
+            <h1 style='font-size: 2.5em;'>💼 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>
     """)
@@ -69,26 +65,21 @@ 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>")
+            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>")
+            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")
 
@@ -105,6 +96,6 @@ with gr.Blocks(css="""
         outputs=[result, confidence, shap_plot]
     )
 
-    demo.launch()
+demo.launch()