app.py

import streamlit as st
import joblib
import numpy as np
from huggingface_hub import hf_hub_download

# Page configuration
st.set_page_config(
    page_title="Loan Approval System",
    page_icon="🏦",
    layout="centered",
    initial_sidebar_state="collapsed"
)

# Custom CSS for styling with the specified color theme
st.markdown("""
<style>
    /* Color Theme */
    :root {
        --primary-purple: #7950F2;
        --primary-purple-light: #9775F3;
        --primary-purple-dark: #5F3DC4;
        --complementary-orange: #FF5E3A;
        --complementary-orange-light: #FF8A6C;
        --light-gray: #F8F9FA;
        --dark-gray: #343A40;
    }
    
    /* Main containers */
    .main .block-container {
        padding: 2rem;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    /* Font family - applied globally */
    * {
        font-family: 'Helvetica', 'Arial', sans-serif !important;
    }
    
    /* Specific selectors to ensure Helvetica is applied everywhere */
    body, .stMarkdown, p, h1, h2, h3, h4, h5, h6, .stButton, .stSelectbox, .stNumberInput,
    .stTextInput, div, span, .streamlit-container, .stAlert, .stText, button, input, select,
    textarea, .streamlit-expanderHeader, .streamlit-expanderContent {
        font-family: 'Helvetica', 'Arial', sans-serif !important;
    }
    
    /* Headers */
    h1, h2, h3 {
        color: var(--primary-purple-dark);
    }
    
    /* Custom cards for sections */
    .section-card {
        background-color: var(--light-gray);
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid var(--primary-purple);
    }
    
    /* Remove purple left border from the first section card */
    .remove-border {
        border-left: none !important;
    }
    
    /* Button styling */
    .stButton > button {
        background-color: var(--primary-purple);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        font-weight: bold;
        width: 100%;
        transition: all 0.3s;
    }
    .stButton > button:hover {
        background-color: var(--primary-purple-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Result styling */
    .result-approved {
        background-color: #E8F5E9;
        border-left: 4px solid #4CAF50;
        padding: 1rem;
        border-radius: 5px;
        margin-top: 1rem;
    }
    .result-rejected {
        background-color: #FFEBEE;
        border-left: 4px solid #F44336;
        padding: 1rem;
        border-radius: 5px;
        margin-top: 1rem;
    }
    
    /* Input widgets */
    .stNumberInput, .stSelectbox {
        margin-bottom: 1rem;
    }
    
    /* Footer */
    .footer {
        text-align: center;
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid #EEEEEE;
        font-size: 0.8rem;
        color: #666666;
    }
    
    /* Divider */
    .divider {
        border-top: 1px solid #EEEEEE;
        margin: 1.5rem 0;
    }
    
    /* Badge */
    .badge {
        display: inline-block;
        background-color: var(--complementary-orange);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }
    
    /* Banner image styling */
    .banner-image {
        width: 100%;
        margin-bottom: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Footer disclaimer */
    .footer-disclaimer {
        text-align: center;
        margin-top: 2rem;
        padding: 1rem;
        border-top: 1px solid #EEEEEE;
        font-size: 0.9rem;
        color: #666666;
        line-height: 1.5;
        background-color: var(--light-gray);
        border-radius: 5px;
    }
</style>
""", unsafe_allow_html=True)

# App header with banner image instead of title
st.markdown('<img src="https://i.postimg.cc/R0gGW9kb/ACTION-PLAN.png" class="banner-image" alt="SmartLoanAI Banner">', unsafe_allow_html=True)

# Load the trained model from Hugging Face
@st.cache_resource
def load_model():
    model_path = hf_hub_download(repo_id="ifiecas/LoanApproval-DT-v1.0", filename="best_pruned_dt.pkl")
    return joblib.load(model_path)

model = load_model()

# Initialize session state for restart functionality
if 'restart_clicked' not in st.session_state:
    st.session_state.restart_clicked = False

# Create tabs for better organization
tab1, tab2 = st.tabs(["Loan Application", "About the System"])

with tab1:
    # Reset all form values if restart was clicked
    if st.session_state.restart_clicked:
        st.session_state.restart_clicked = False  # Reset flag
    
    # Personal Information Section
    st.markdown('<div class="section-card"><h3>Personal Information</h3>', unsafe_allow_html=True)
    
    col1, col2 = st.columns(2)
    with col1:
        gender = st.selectbox("Gender", ["Male", "Female"])
        education = st.selectbox("Education Level", ["Graduate", "Under Graduate"])
    
    with col2:
        marital_status = st.selectbox("Marital Status", ["Married", "Not Married"])
        number_of_dependents = st.number_input("Number of Dependents", min_value=0, max_value=10, value=0)
    
    self_employed = st.selectbox("Self-Employed", ["No", "Yes"])
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Financial Details Section
    st.markdown('<div class="section-card"><h3>Financial Details</h3>', unsafe_allow_html=True)
    
    col1, col2 = st.columns(2)
    with col1:
        applicant_income = st.number_input("Monthly Income ($)", min_value=0, value=5000)
        loan_amount = st.number_input("Loan Amount ($)", min_value=0, value=100000)
        credit_history = st.selectbox("Credit History Status", [1, 0], 
                                     format_func=lambda x: "No existing unsettled loans (1)" if x == 1 else "Have unsettled loans (0)")
    
    with col2:
        coapplicant_income = st.number_input("Co-Applicant's Income ($)", min_value=0)
        loan_term = st.slider("Loan Term (months)", min_value=12, max_value=360, value=180, step=12)
        location = st.selectbox("Property Location", ["Urban", "Semiurban", "Rural"])
    
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Summary section - without DTI Assessment or Eligibility Check
    st.markdown('<div class="section-card"><h3>Application Summary</h3>', unsafe_allow_html=True)
    
    total_income = applicant_income + coapplicant_income
    
    # Calculate monthly payment (simplified calculation)
    interest_rate = 0.05  # Assuming 5% annual interest rate
    monthly_interest = interest_rate / 12
    num_payments = loan_term
    
    # Monthly payment using the loan amortization formula
    if monthly_interest == 0 or num_payments == 0:
        monthly_payment = 0
    else:
        monthly_payment = loan_amount * (monthly_interest * (1 + monthly_interest) ** num_payments) / \
                        ((1 + monthly_interest) ** num_payments - 1)
    
    # Calculate DTI for backend use only (not displayed)
    dti = (monthly_payment / total_income) if total_income > 0 else 0
    dti_percent = dti * 100
    
    # Display summary metrics
    col1, col2, col3 = st.columns(3)
    col1.metric("Total Monthly Income", f"${total_income:,}")
    col2.metric("Estimated Monthly Payment", f"${monthly_payment:.2f}")
    col3.metric("Loan Term", f"{loan_term//12} years")
    
    # Add interest rate disclaimer
    st.markdown(f"""
    <div style="font-size: 0.8rem; color: #666; margin-top: -10px; margin-bottom: 20px;">
        * Estimated payment based on {interest_rate*100:.1f}% annual interest rate. Actual rates may vary.
    </div>
    """, unsafe_allow_html=True)
    
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Prediction and restart buttons
    col1, col2 = st.columns([3, 1])
    
    with col1:
        predict_button = st.button("Check Loan Approval Status", use_container_width=True)
    
    with col2:
        restart_button = st.button("🔄 Restart", use_container_width=True, 
                                 help="Reset all form fields and start over")
    
    # Handle restart button click
    if restart_button:
        st.session_state.restart_clicked = True
        st.rerun()  # Using st.rerun() instead of st.experimental_rerun()
    
    def preprocess_input():
        # Convert categorical inputs to numerical format based on encoding reference
        gender_num = 0 if gender == "Male" else 1
        marital_status_num = 0 if marital_status == "Not Married" else 1
        education_num = 0 if education == "Under Graduate" else 1
        self_employed_num = 0 if self_employed == "No" else 1
        credit_history_num = credit_history  # Already numerical (0,1)
        
        # One-Hot Encoding for Location
        location_semiurban = 1 if location == "Semiurban" else 0
        location_urban = 1 if location == "Urban" else 0
        
        # Convert Term from months to years
        term_years = loan_term / 12
        
        # Compute Derived Features - use the same monthly payment calculated above
        debt_to_income = monthly_payment / total_income if total_income > 0 else 0  
        credit_amount_interaction = loan_amount * credit_history_num  # Interaction effect
        income_term_ratio = total_income / term_years if term_years > 0 else 0  # Avoid divide by zero
        
        # Return array with all 16 features
        return np.array([[
            gender_num, marital_status_num, number_of_dependents, education_num, self_employed_num,
            applicant_income, coapplicant_income, loan_amount, credit_history_num,
            total_income, debt_to_income, location_semiurban, location_urban, term_years,
            credit_amount_interaction, income_term_ratio
        ]])
    
    # Display prediction
    if predict_button:
        with st.spinner("Processing your application..."):
            input_data = preprocess_input()
            prediction = model.predict(input_data)
            
            # Apply additional rules to override the model in certain cases (backend only)
            manual_rejection = False
            
            # Rule-based rejections that override the model (but don't show to user)
            if total_income < 1500:
                manual_rejection = True
            elif dti_percent > 50:
                manual_rejection = True
            elif credit_history == 0 and dti_percent > 35:
                manual_rejection = True
            
            # Final decision combines model prediction and manual eligibility checks
            final_approval = (prediction[0] == 1) and not manual_rejection
            
            # Show result with enhanced styling
            if final_approval:
                st.markdown("""
                <div class="result-approved">
                    <h3 style="color: #2E7D32;">✅ Loan Approved</h3>
                    <p>Congratulations! Based on your information, you're eligible for this loan.</p>
                </div>
                """, unsafe_allow_html=True)
            else:
                st.markdown("""
                <div class="result-rejected">
                    <h3 style="color: #C62828;">❌ Loan Not Approved</h3>
                    <p>Unfortunately, based on your current information, we cannot approve your loan application.</p>
                    <p>Consider improving your credit score, reducing existing debt, or applying with a co-applicant with higher income.</p>
                </div>
                """, unsafe_allow_html=True)

with tab2:
    # Add custom CSS for better styling
    st.markdown("""
    <style>
        /* Main container styling */
        .about-container {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        /* Section styling */
        .about-section {
            margin-bottom: 25px;
        }
        
        /* Section headers */
        .section-header {
            color: #1e3a8a;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 5px;
        }
        
        /* Regular text */
        .about-text {
            font-size: 16px;
            line-height: 1.6;
            color: #374151;
        }
        
        /* Metrics card container */
        .metrics-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 15px 0;
        }
        
        /* Individual metric card */
        .metric-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            min-width: 120px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            flex: 1;
            text-align: center;
        }
        
        /* Metric value */
        .metric-value {
            font-size: 22px;
            font-weight: 600;
            color: #2563eb;
        }
        
        /* Metric label */
        .metric-label {
            font-size: 14px;
            color: #6b7280;
            margin-top: 5px;
        }
        
        /* Footer styling */
        .footer-disclaimer {
            background-color: #f3f4f6;
            border-radius: 8px;
            padding: 15px;
            margin-top: 30px;
            border-left: 4px solid #9ca3af;
            font-size: 14px;
            color: #4b5563;
        }
        
        /* Author bio section */
        .author-bio {
            display: flex;
            align-items: center;
            gap: 15px;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* Author image placeholder */
        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    """, unsafe_allow_html=True)
    
    # Main content container
    st.markdown('<div class="about-container">', unsafe_allow_html=True)
    
    # System overview section
    st.markdown('<div class="about-section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-header">About the Loan Approval System</h2>', unsafe_allow_html=True)
    st.markdown(
        '<p class="about-text">This prototype evaluates loan applications using machine learning and '
        'industry-standard criteria. It analyzes financial information, credit history, and loan requirements'
        'to provide fast, objective loan decisions.</p>', unsafe_allow_html=True
    )
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Model information section
    st.markdown('<div class="about-section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-header">About the ML Model</h2>', unsafe_allow_html=True)
    st.markdown(
        '<p class="about-text">The machine learning model powering this system is a Decision Tree classifier, '
        'which outperformed several alternatives including KNN, Random Forest, Logistic Regression, and Support '
        'Vector Machine in our testing phase. The model was refined using Cost Complexity Pruning (CCP) to identify '
        'the optimal alpha value, preventing overfitting while maintaining high predictive accuracy.</p>', 
        unsafe_allow_html=True
    )
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Performance metrics section with cards
    st.markdown('<div class="about-section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-header">Model Performance Metrics</h2>', unsafe_allow_html=True)
    
    # Metrics cards using HTML for better styling
    st.markdown(
        '<div class="metrics-container">'
        '  <div class="metric-card">'
        '    <div class="metric-value">83.61%</div>'
        '    <div class="metric-label">Accuracy</div>'
        '  </div>'
        '  <div class="metric-card">'
        '    <div class="metric-value">80.77%</div>'
        '    <div class="metric-label">Precision</div>'
        '  </div>'
        '  <div class="metric-card">'
        '    <div class="metric-value">100.00%</div>'
        '    <div class="metric-label">Recall</div>'
        '  </div>'
        '  <div class="metric-card">'
        '    <div class="metric-value">89.36%</div>'
        '    <div class="metric-label">F1 Score</div>'
        '  </div>'
        '</div>',
        unsafe_allow_html=True
    )
    
    # Link to documentation/more info
    st.markdown(
        '<p class="about-text">For more information about the modeling process (from loading the dataset to fine-tuning '
        'the model), check here: <a href="https://github.com/ifiecas/bankloan2" target="_blank" style="color: #2563eb;">Github</a></p>',
        unsafe_allow_html=True
    )
    
    # YouTube video section
    st.markdown('<h2 class="section-header">Brief Explanation</h2>', unsafe_allow_html=True)
    st.markdown('<p class="about-text">Watch this video for a brief explanation of the assessment:</p>', unsafe_allow_html=True)
    
    # YouTube embed with responsive container
    st.markdown("""
    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 20px;">
        <iframe 
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
            src="https://www.youtube.com/embed/f4a85SYTUQs?autoplay=1&vq=hd1080&rel=0&modestbranding=1" 
            title="Assessment Explanation" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>
    """, unsafe_allow_html=True)
    
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Author section with profile
    st.markdown('<div class="about-section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-header">Behind the Build</h2>', unsafe_allow_html=True)
    
    st.markdown(
        '<div class="author-bio">'
        '  <div class="author-image">IF</div>'
        '  <div>'
        '    <p style="margin: 0; font-weight: 600; color: #1f2937;">Ivy Fiecas-Borjal</p>'
        '    <p style="margin: 0; font-size: 14px; color: #6b7280;">Building with AI & ML | Biz Dev in Tech</p>'
        '    <p style="margin-top: 5px; font-size: 14px;">'
        '      <a href="https://ifiecas.com/" target="_blank" style="color: #2563eb; text-decoration: none;">Visit Portfolio</a>'
        '    </p>'
        '  </div>'
        '</div>',
        unsafe_allow_html=True
    )
    
    st.markdown(
        '<p class="about-text">Inspired by an assessment in BCO6008 Predictive Analytics class in Victoria University '
        '(Melbourne) with Dr. Omid Ameri Sianaki. Enjoyed doing this and learned a lot! 😊</p>',
        unsafe_allow_html=True
    )
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Disclaimer footer
    st.markdown("""<div class="footer-disclaimer">
        <p><strong>Educational Project Disclaimer:</strong> This application is a prototype created to demonstrate machine learning model deployment and is not an actual financial service. The loan approval decisions are based on a trained model for educational purposes only and should not be used for real financial decisions.</p>
        <p>© 2025 SmartLoanAI - Machine Learning Showcase Project</p>
    </div>""", unsafe_allow_html=True)