Update app.py

app.py

@@ -9,13 +9,13 @@ import matplotlib.pyplot as plt
 with open("salar_xgb_team.pkl", "rb") as f:
     model = pickle.load(f)
 
-# SHAP setup
+# Set up SHAP
 explainer = shap.Explainer(model)
 
-# Prediction function
-def predict_income_fn(age, education, sex, capital_gain, capital_loss, hours_per_week):
+# Define prediction function
+def predict_salary(age, education_num, sex, capital_gain, capital_loss, hours_per_week):
     sex_num = 0 if sex == "Male" else 1
-    input_data = pd.DataFrame([[age, int(education), sex_num, capital_gain, capital_loss, hours_per_week]],
+    input_data = pd.DataFrame([[age, int(education_num), sex_num, capital_gain, capital_loss, hours_per_week]],
                               columns=['age', 'education-num', 'sex', 'capital-gain', 'capital-loss', 'hours-per-week'])
 
     pred = model.predict(input_data)[0]
@@ -23,63 +23,64 @@ def predict_income_fn(age, education, sex, capital_gain, capital_loss, hours_per
     label = ">50K" if pred == 1 else "<=50K"
     confidence = f"{prob * 100:.2f}%" if pred == 1 else f"{(1 - prob) * 100:.2f}%"
 
-    # SHAP
+    # SHAP plot with dark background
     shap_values = explainer(input_data)
+    plt.style.use('dark_background')
     fig, ax = plt.subplots(figsize=(6, 3))
     shap.plots.bar(shap_values[0], max_display=6, show=False)
     plt.tight_layout()
 
     return label, confidence, fig
 
-# Gradio UI
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown(
-        """
-        <div style='text-align: center; max-width: 750px; margin: 0 auto;'>
-            <h1 style='font-size: 2.5em; color: #1DB954;'>💼 Income Prediction App</h1>
-            <p style='font-size: 1.2em;'>Predict whether someone earns more than $50K/year based on financial and demographic data.</p>
+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; }
+""") as demo:
+
+    gr.Markdown("""
+        <div style='max-width: 700px; margin: 0 auto;'>
+            <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>
-        """
-    )
+    """)
 
     with gr.Row():
         with gr.Column():
-            gr.Markdown("<h3 style='text-align:center;'>Age</h3>")
-            age = gr.Number(value=30, label="", interactive=True)
+            gr.Markdown("<h3>Age</h3>")
+            age = gr.Slider(minimum=0, maximum=100, step=1, value=35, label="", interactive=True)
 
-            gr.Markdown("<h3 style='text-align:center;'>Education Level</h3>")
+            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("<h3 style='text-align:center;'>Sex</h3>")
+            gr.Markdown("<h3>Sex</h3>")
             sex = gr.Radio(choices=["Male", "Female"], value="Male", label="", interactive=True)
 
-            gr.Markdown("<h3 style='text-align:center;'>Capital Gain</h3>")
+            gr.Markdown("<h3>Capital Gain</h3>")
             capital_gain = gr.Number(value=0, label="", interactive=True)
 
-            gr.Markdown("<h3 style='text-align:center;'>Capital Loss</h3>")
+            gr.Markdown("<h3>Capital Loss</h3>")
             capital_loss = gr.Number(value=0, label="", interactive=True)
 
-            gr.Markdown("<h3 style='text-align:center;'>Hours per Week</h3>")
+            gr.Markdown("<h3>Hours per Week</h3>")
             hours_per_week = gr.Number(value=40, label="", interactive=True)
 
-            gr.Markdown("<div style='text-align:center;'><br></div>")
             predict_btn = gr.Button("🔮 Predict", elem_id="predict-button")
 
     with gr.Row():
         with gr.Column():
-            gr.Markdown("<h3 style='text-align:center;'>Prediction</h3>")
-            output_label = gr.Textbox(label="Income", interactive=False)
-            output_confidence = gr.Textbox(label="Confidence", interactive=False)
-
-        with gr.Column():
-            gr.Markdown("<h3 style='text-align:center;'>Feature Importance (SHAP)</h3>")
-            shap_plot = gr.Plot(label="")
+            gr.Markdown("<h3>Prediction Result</h3>")
+            result = gr.Textbox(label="", interactive=False)
+            confidence = gr.Textbox(label="Confidence", interactive=False)
+            shap_plot = gr.Plot(label="SHAP Feature Importance")
 
     predict_btn.click(
-        fn=predict_income_fn,
+        fn=predict_salary,
         inputs=[age, education, sex, capital_gain, capital_loss, hours_per_week],
-        outputs=[output_label, output_confidence, shap_plot]
+        outputs=[result, confidence, shap_plot]
     )
 
 demo.launch()
 
+