Update app.py

app.py

@@ -1,5 +1,6 @@
 #!/usr/bin/env python
 # coding: utf-8
+
 import joblib
 import pandas as pd
 import gradio as gr
@@ -103,7 +104,8 @@ def make_driver_plot(Engagement, SupportiveGM, WellBeing, WorkEnvironment):
     values = [Engagement, SupportiveGM, WellBeing, WorkEnvironment]
     colors = ["seagreen" if v >= th else "firebrick" for v in values]
 
-    fig, ax = plt.subplots(figsize=(10.5, 4.8))
+    # slightly smaller so both charts fit on one screen
+    fig, ax = plt.subplots(figsize=(8.8, 3.4))
     ax.bar(VISIBLE_LABELS, values, color=colors)
 
     ax.axhline(th, linestyle="--", linewidth=2)
@@ -111,95 +113,65 @@ def make_driver_plot(Engagement, SupportiveGM, WellBeing, WorkEnvironment):
 
     ax.set_ylim(1, 5.4)
     ax.set_yticks([1, 2, 3, 4, 5])
-    ax.set_ylabel("Survey Score (1–5)")
+    ax.set_ylabel("Score (1–5)")
     ax.set_title("Key Drivers vs Stable Threshold")
 
-    ax.margins(x=0.15)
+    ax.margins(x=0.12)
     plt.tight_layout()
-    plt.subplots_adjust(bottom=0.20)
+    plt.subplots_adjust(bottom=0.22)
     return fig
 
 
 # =========================
-# Always-visible "importance" chart
+# Importance chart (SHAP if available; otherwise global importance)
 # =========================
 def get_global_importance_series():
-    """
-    Returns a pandas Series indexed by FEATURES (or None if not available).
-    Works for many CatBoost / sklearn-style models.
-    """
-    # sklearn-like
     if hasattr(model, "feature_importances_"):
         try:
-            vals = model.feature_importances_
-            return pd.Series(vals, index=FEATURES)
+            return pd.Series(model.feature_importances_, index=FEATURES)
         except Exception:
             pass
-
-    # CatBoost-like
     if hasattr(model, "get_feature_importance"):
         try:
-            vals = model.get_feature_importance()
-            return pd.Series(vals, index=FEATURES)
+            return pd.Series(model.get_feature_importance(), index=FEATURES)
         except Exception:
             pass
-
     return None
 
 
 def make_importance_plot(X: pd.DataFrame):
-    """
-    Try SHAP for this one-row scenario.
-    If SHAP fails, show global feature importance.
-    ALWAYS returns a non-empty chart.
-    """
-    fig, ax = plt.subplots(figsize=(10.5, 4.8))
-
-    # Try SHAP (scenario-level)
+    fig, ax = plt.subplots(figsize=(8.8, 3.4))
+
+    # Try SHAP for this one-row scenario
     if SHAP_OK and explainer is not None:
         try:
             shap_vals = explainer.shap_values(X)
 
-            # Handle list-of-classes vs single array
             if isinstance(shap_vals, list):
                 classes = list(model.classes_)
-                idx = classes.index(1)  # at-risk class
+                idx = classes.index(1)
                 sv = shap_vals[idx][0]
             else:
                 sv = shap_vals[0]
 
-            s = pd.Series(sv, index=X.columns)
-
-            # you don't want to talk about ManagementLevel
-            s = s.drop(labels=["ManagementLevel"], errors="ignore")
-
-            # top by absolute contribution
+            s = pd.Series(sv, index=X.columns).drop(labels=["ManagementLevel"], errors="ignore")
             s = s.reindex(s.abs().sort_values(ascending=False).index).head(8)
 
             ax.barh(s.index[::-1], s.values[::-1])
-            ax.set_title("Top drivers of THIS prediction (SHAP impact)")
-            ax.set_xlabel("Impact on model output (signed)")
+            ax.set_title("Top Drivers of This Prediction (SHAP)")
+            ax.set_xlabel("Impact (signed)")
             plt.tight_layout()
             return fig
-        except Exception as e:
-            # fall back to global importance
-            local_err = str(e)
-    else:
-        local_err = shap_err or "shap not installed"
+        except Exception:
+            pass
 
     # Fallback: global importance
     imp = get_global_importance_series()
     if imp is None:
-        # Last resort: show message on chart (still visible)
-        ax.text(
-            0.5, 0.55,
-            "SHAP chart not available in this Space,\nand feature importance not found on the model.",
-            ha="center", va="center", fontsize=11
-        )
         ax.text(
-            0.5, 0.40,
-            f"Reason: {local_err[:140]}",
-            ha="center", va="center", fontsize=9
+            0.5, 0.5,
+            "SHAP/importance not available\n(add 'shap' to requirements.txt for SHAP)",
+            ha="center", va="center", fontsize=10
         )
         ax.set_axis_off()
         plt.tight_layout()
@@ -208,7 +180,7 @@ def make_importance_plot(X: pd.DataFrame):
     imp = imp.drop(labels=["ManagementLevel"], errors="ignore")
     imp = imp.sort_values(ascending=True).tail(8)
     ax.barh(imp.index, imp.values)
-    ax.set_title("Global feature importance (fallback)")
+    ax.set_title("Global Feature Importance (Fallback)")
     ax.set_xlabel("Importance")
     plt.tight_layout()
     return fig
@@ -223,7 +195,7 @@ def predict(Engagement, SupportiveGM, WellBeing, WorkEnvironment):
     WellBeing = clamp(WellBeing)
     WorkEnvironment = clamp(WorkEnvironment)
 
-    # Model still needs hidden vars. Hold at stable cluster values for a clean story.
+    # Model still needs hidden vars. Hold at stable cluster values for clean story.
     vals = {
         "Engagement": Engagement,
         "SupportiveGM": SupportiveGM,
@@ -238,13 +210,14 @@ def predict(Engagement, SupportiveGM, WellBeing, WorkEnvironment):
     X = build_X(vals)
     p = prob_at_risk(X)
 
-    headline = f"Predicted Status: **{risk_label(p)}**"
-    tech_note = f"Explainer: **{'SHAP' if SHAP_OK else 'Global importance'}**"
+    # Keep headline single-line to prevent layout jump
+    explainer_name = "SHAP" if SHAP_OK else "Importance"
+    headline = f"Predicted Status: {risk_label(p)}  |  Explanation: {explainer_name}"
 
     driver_fig = make_driver_plot(Engagement, SupportiveGM, WellBeing, WorkEnvironment)
     imp_fig = make_importance_plot(X)
 
-    return headline + "\n\n" + tech_note, driver_fig, imp_fig
+    return headline, driver_fig, imp_fig
 
 
 def apply_recommendation():
@@ -258,47 +231,53 @@ def apply_recommendation():
 
 
 # =========================
-# UI
+# UI Layout (no scrolling)
 # =========================
 CSS = """
-.fixed-plot { height: 520px; overflow: hidden; }
+/* Make the app fit on one screen as much as possible */
+#app-wrap { max-width: 1200px; margin: 0 auto; }
+.compact .gr-markdown { margin-bottom: 0.4rem !important; }
 """
 
 with gr.Blocks(css=CSS) as demo:
-    gr.Markdown("# Retention Recommendation Simulator")
-    gr.Markdown("Use the sliders, then click **Predict**. Click **Apply Recommendation Plan** to move to the stable target.")
+    gr.Markdown(
+        "<div id='app-wrap' class='compact'>"
+        "<h2>Retention Recommendation Simulator</h2>"
+        "<p style='margin-top:0;'>Adjust the 4 drivers and click <b>Predict</b>. "
+        "Click <b>Apply Recommendation Plan</b> to jump to the stable target.</p>"
+        "</div>"
+    )
 
     with gr.Row():
-        with gr.Column(scale=1):
+        # LEFT: sliders + buttons
+        with gr.Column(scale=5, min_width=420):
             Engagement = gr.Slider(1, 5, value=CLUSTER_3["Engagement"], step=0.01, label="Engagement")
             SupportiveGM = gr.Slider(1, 5, value=CLUSTER_3["SupportiveGM"], step=0.01, label="Supportive GM")
             WellBeing = gr.Slider(1, 5, value=CLUSTER_3["WellBeing"], step=0.01, label="Well-Being")
             WorkEnvironment = gr.Slider(1, 5, value=CLUSTER_3["WorkEnvironment"], step=0.01, label="Work Environment")
 
-            btn_predict = gr.Button("Predict")
-            btn_recommend = gr.Button("Apply Recommendation Plan")
-
-        with gr.Column(scale=1):
-            headline = gr.Markdown()
+            with gr.Row():
+                btn_predict = gr.Button("Predict")
+                btn_recommend = gr.Button("Apply Recommendation Plan")
 
-            gr.HTML('<div class="fixed-plot">')
-            driver_plot = gr.Plot(label="Drivers vs Threshold")
-            gr.HTML('</div>')
+        # RIGHT: headline + two plots stacked
+        with gr.Column(scale=7, min_width=520):
+            # Use Textbox (single line) to avoid markdown height jumps
+            headline = gr.Textbox(label="Result", value="", interactive=False)
 
-            gr.HTML('<div class="fixed-plot">')
-            shap_plot = gr.Plot(label="SHAP / Importance")
-            gr.HTML('</div>')
+            driver_plot = gr.Plot(label="Key Drivers vs Stable Threshold")
+            importance_plot = gr.Plot(label="SHAP / Feature Importance")
 
     btn_predict.click(
         fn=predict,
         inputs=[Engagement, SupportiveGM, WellBeing, WorkEnvironment],
-        outputs=[headline, driver_plot, shap_plot],
+        outputs=[headline, driver_plot, importance_plot],
     )
 
     btn_recommend.click(
         fn=apply_recommendation,
         inputs=[],
-        outputs=[Engagement, SupportiveGM, WellBeing, WorkEnvironment, headline, driver_plot, shap_plot],
+        outputs=[Engagement, SupportiveGM, WellBeing, WorkEnvironment, headline, driver_plot, importance_plot],
     )
 
 demo.launch()