app.py

import pickle
import pandas as pd
import shap
from shap.plots._force_matplotlib import draw_additive_plot
import gradio as gr
import numpy as np
import matplotlib.pyplot as plt

# load the model from disk
loaded_model = pickle.load(open("filtered_xgb_model.pkl", 'rb'))

# Setup SHAP
explainer = shap.Explainer(loaded_model) # PLEASE DO NOT CHANGE THIS.

# Create the main function for server
def main_func(GM3, WorkEnv3, WellBeing2, GM2, JobSecurity, WellBeing1):
    new_row = pd.DataFrame.from_dict({
        'GM3': GM3,
        'WorkEnv3': WorkEnv3,
        'WellBeing2': WellBeing2,
        'GM2': GM2,
        'JobSecurity': JobSecurity,
        'WellBeing1': WellBeing1
    }, orient='index').transpose()
    
    prob = loaded_model.predict_proba(new_row)
    
    shap_values = explainer(new_row)
    # plot = shap.force_plot(shap_values[0], matplotlib=True, figsize=(30,30), show=False)
    # plot = shap.plots.waterfall(shap_values[0], max_display=6, show=False)
    plot = shap.plots.bar(shap_values[0], max_display=6, order=shap.Explanation.abs, show_data='auto', show=False)

    plt.tight_layout()
    local_plot = plt.gcf()
    plt.rcParams['figure.figsize'] = 6,4
    plt.close()
    
    return {"Leave": float(prob[0][0]), "Stay": 1-float(prob[0][0])}, local_plot

# Create the UI
title = "**Employee Turnover Predictor & Interpreter** 🪐"
description1 = """
This app predicts whether an employee is likely to stay or leave based on selected workplace factors. 
It also provides a SHAP visualization to show how each factor influences the prediction.
"""

description2 = """
To use the app, click on one of the examples, or adjust the values of the six employee satisfaction factors, and click on Analyze. ✨ 
""" 

with gr.Blocks(title=title) as demo:
    gr.Markdown(f"## {title}")
    # gr.Markdown("""![marketing](types-of-employee-turnover.jpg)""")
    gr.Markdown(description1)
    gr.Markdown("""---""")
    gr.Markdown(description2)
    gr.Markdown("""---""")
    with gr.Row():        
        with gr.Column():
            GM3 = gr.Slider(label="My General Manager is an effective leader", minimum=1, maximum=5, value=4, step=0.1)
            WorkEnv3 = gr.Slider(label="My Work Environment is comfortable and welcoming", minimum=1, maximum=5, value=4, step=0.1)
            WellBeing2 = gr.Slider(label="I feel balanced and healthy", minimum=1, maximum=5, value=4, step=0.1)
            GM2 = gr.Slider(label="My General Manager uses feedback from Team Members to make improvements", minimum=1, maximum=5, value=4, step=0.1)
            JobSecurity = gr.Slider(label="Job Security", minimum=1, maximum=5, value=4, step=0.1)
            WellBeing1 = gr.Slider(label="My mental health is good", minimum=1, maximum=5, value=4, step=0.1)
            submit_btn = gr.Button("Analyze")
        
        with gr.Column(visible=True, scale=1, min_width=600) as output_col:
            label = gr.Label(label="Predicted Intent")
            local_plot = gr.Plot(label='SHAP Analysis')

            submit_btn.click(
                main_func,
                [GM3, WorkEnv3, WellBeing2, GM2, JobSecurity, WellBeing1],
                [label, local_plot], api_name="IntentToStay_Predictor"
            )
    
    gr.Markdown("### Example Predictions:")

    # Add labeled example categories
     gr.Markdown("""
    | Example Label   | GM3 | WorkEnv3 | WellBeing2 | GM2 | JobSecurity | WellBeing1 |
    |----------------|-----|---------|------------|----|-------------|------------|
    | 🟢 **Well Engaged** | 4.5 | 4.5 | 4.6 | 4.7 | 5.0 | 4.9 |
    | 🟡 **Marginal** | 5.0 | 4.0 | 5.0 | 4.0 | 4.0 | 4.0 |
    | 🔴 **At Risk** | 4.0 | 4.0 | 4.0 | 4.0 | 5.0 | 5.0 |
    """)

    # Display interactive examples
    gr.Examples(
        examples=[
            [4.5, 4.5, 4.6, 4.7, 5, 4.9],  # Well Engaged
            [5, 4, 5, 4, 4, 4],  # Marginal
            [4, 4, 4, 4, 5, 5]  # At Risk
        ],
        inputs=[GM3, WorkEnv3, WellBeing2, GM2, JobSecurity, WellBeing1],
        outputs=[label, local_plot],
        fn=main_func,
        cache_examples=True
    )

    # Add background image using CSS
    gr.Markdown("""
    <style>
        body {
            background-image: url('https://www.hilton.com/im/en/NoHotel/22512376/hhr-brand-tile-0125.jpg?impolicy=crop&cw=4500&ch=3000&gravity=NorthWest&xposition=0&yposition=0&rw=1280&rh=854');
            background-size: cover;
            background-position: center;
        }
    </style>
    """)

demo.launch()