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="wide",  # Changed from "centered" to "wide" for better use of space
    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);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* 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);
        transition: all 0.3s ease;
    }
    
    .section-card:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    
    /* 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: 1.5rem;
        border-radius: 5px;
        margin-top: 1.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    .result-rejected {
        background-color: #FFEBEE;
        border-left: 4px solid #F44336;
        padding: 1.5rem;
        border-radius: 5px;
        margin-top: 1.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    /* 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);
        transition: all 0.3s ease;
    }
    
    .banner-image:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    
    /* Footer disclaimer */
    .footer-disclaimer {
        text-align: center;
        margin-top: 2rem;
        padding: 1.5rem;
        border-top: 1px solid #EEEEEE;
        font-size: 0.9rem;
        color: #666666;
        line-height: 1.5;
        background-color: var(--light-gray);
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }
    
    /* Tabs styling */
    .stTabs [data-baseweb="tab-list"] {
        gap: 8px;
    }
    
    .stTabs [data-baseweb="tab"] {
        background-color: white;
        border-radius: 4px 4px 0 0;
        padding: 10px 16px;
        height: auto;
    }
    
    .stTabs [aria-selected="true"] {
        background-color: var(--primary-purple-light) !important;
        color: white !important;
        font-weight: bold;
    }
    
    /* Improved form inputs */
    div[data-testid="stFormSubmit"] > button {
        background-color: var(--primary-purple);
        color: white;
    }
    
    /* Tooltip improvements */
    div[data-baseweb="tooltip"] {
        background-color: var(--dark-gray);
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
    }
    
    /* Metrics styling */
    [data-testid="stMetric"] {
        background-color: white;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }
    
    [data-testid="stMetric"]:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    [data-testid="stMetricLabel"] {
        color: var(--primary-purple-dark);
    }
    
    [data-testid="stMetricValue"] {
        font-weight: bold;
        font-size: 1.5rem !important;
        color: var(--primary-purple);
    }
    
    /* Animation for loading */
    @keyframes pulse {
        0% { opacity: 0.6; }
        50% { opacity: 1; }
        100% { opacity: 0.6; }
    }
    
    .loading-pulse {
        animation: pulse 1.5s infinite ease-in-out;
    }
</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

# Global disclaimer at the top
st.markdown("""<div class="footer-disclaimer" style="margin-bottom: 20px; background-color: #fff3cd; border-left: 4px solid #ffc107;">
    <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>
</div>""", unsafe_allow_html=True)

# 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
    
    # Introduction text
    st.markdown("""
    <h2 style="text-align: center; color: var(--primary-purple-dark); margin-bottom: 20px;">
        Smart Loan Application System
    </h2>
    <p style="text-align: center; margin-bottom: 30px; font-size: 1.1rem;">
        Fill out the form below to check your loan eligibility. Our AI system will analyze your information and provide an instant decision.
    </p>
    """, unsafe_allow_html=True)
    
    # Personal Information Section
    st.markdown('<div class="section-card"><h3>👤 Personal Information</h3>', unsafe_allow_html=True)
    
    col1, col2, col3 = st.columns(3)
    with col1:
        gender = st.selectbox("Gender", ["Male", "Female"])
        number_of_dependents = st.number_input("Number of Dependents", min_value=0, max_value=10, value=0, 
                                              help="Number of people dependent on the applicant's income")
    
    with col2:
        marital_status = st.selectbox("Marital Status", ["Married", "Not Married"])
        self_employed = st.selectbox("Self-Employed", ["No", "Yes"],
                                   help="Whether the applicant is self-employed or works for an organization")
    
    with col3:
        education = st.selectbox("Education Level", ["Graduate", "Under Graduate"],
                               help="Higher education status of the applicant")
    
    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, col3 = st.columns(3)
    with col1:
        applicant_income = st.number_input("Monthly Income ($)", min_value=0, value=5000,
                                         help="Applicant's monthly income in dollars")
        credit_history = st.selectbox("Credit History Status", [1, 0], 
                                     format_func=lambda x: "Good Credit History (1)" if x == 1 else "Poor Credit History (0)",
                                     help="1 indicates no existing unsettled loans, 0 indicates having unsettled loans")
    
    with col2:
        coapplicant_income = st.number_input("Co-Applicant's Income ($)", min_value=0,
                                           help="Co-applicant's monthly income in dollars (if applicable)")
        location = st.selectbox("Property Location", ["Urban", "Semiurban", "Rural"],
                              help="The location where the property is situated")
    
    with col3:
        loan_amount = st.number_input("Loan Amount ($)", min_value=0, value=100000,
                                    help="The amount of loan requested in dollars")
        loan_term = st.slider("Loan Term (months)", min_value=12, max_value=360, value=180, step=12,
                            help="Duration of the loan in months")
    
    st.markdown('</div>', unsafe_allow_html=True)
    
    # Summary section with improved visualization
    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 initially)
    dti = (monthly_payment / total_income) if total_income > 0 else 0
    dti_percent = dti * 100
    
    # Display summary metrics
    col1, col2, col3, col4 = st.columns(4)
    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")
    col4.metric("Debt-to-Income Ratio", f"{dti_percent:.1f}%", 
               delta="-" if dti_percent < 36 else f"{dti_percent - 36:.1f}%",
               delta_color="normal" if dti_percent < 36 else "inverse")
    
    # Add interest rate disclaimer
    st.markdown(f"""
    <div style="font-size: 0.9rem; color: #666; margin-top: 10px; margin-bottom: 20px; background-color: #f8f9fa; padding: 10px; border-radius: 5px;">
        <strong>Note:</strong> Estimated payment based on {interest_rate*100:.1f}% annual interest rate. Actual rates may vary based on credit score and market conditions.
        <br>A healthy debt-to-income ratio is typically below 36%.
    </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("🔄 Reset Form", use_container_width=True, 
                                 help="Clear all inputs and start over")
    
    # Handle restart button click
    if restart_button:
        st.session_state.restart_clicked = True
        st.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 with enhanced visualization
    if predict_button:
        with st.spinner("Processing your application..."):
            st.markdown("""
            <div class="loading-pulse" style="text-align: center; margin: 20px 0;">
                <p style="font-size: 1.1rem;">Analyzing your application data...</p>
            </div>
            """, unsafe_allow_html=True)
            
            input_data = preprocess_input()
            prediction = model.predict(input_data)
            
            # Apply additional rules to override the model in certain cases (backend only)
            manual_rejection = False
            rejection_reason = ""
            
            # Rule-based rejections that override the model
            if total_income < 1500:
                manual_rejection = True
                rejection_reason = "Insufficient total income (minimum $1,500 required)"
            elif dti_percent > 50:
                manual_rejection = True
                rejection_reason = "Debt-to-income ratio too high (exceeds 50%)"
            elif credit_history == 0 and dti_percent > 35:
                manual_rejection = True
                rejection_reason = "Poor credit history combined with high debt-to-income ratio"
            
            # 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; margin-top: 0;">✅ Loan Approved</h3>
                    <p style="font-size: 1.1rem;">Congratulations! Based on your information, you're eligible for this loan.</p>
                    <p>Our AI model has determined that your application meets our criteria for approval. Here's what happens next:</p>
                    <ol>
                        <li>Verification of the submitted information</li>
                        <li>Final loan terms proposal</li>
                        <li>Document signing and disbursement</li>
                    </ol>
                    <p><em>In a real application, you would receive further instructions on next steps.</em></p>
                </div>
                """, unsafe_allow_html=True)
            else:
                st.markdown(f"""
                <div class="result-rejected">
                    <h3 style="color: #C62828; margin-top: 0;">❌ Loan Not Approved</h3>
                    <p style="font-size: 1.1rem;">Unfortunately, based on your current information, we cannot approve your loan application.</p>
                    <p><strong>Potential factors affecting the decision:</strong></p>
                    <ul>
                        <li>{rejection_reason if rejection_reason else "The combination of factors in your application does not meet our current criteria"}</li>
                        <li>Income to loan amount ratio may be insufficient</li>
                        <li>Credit history concerns</li>
                    </ul>
                    <p><strong>Suggestions for improvement:</strong></p>
                    <ul>
                        <li>Consider improving your credit score</li>
                        <li>Reduce existing debt before reapplying</li>
                        <li>Apply with a co-applicant with higher income</li>
                        <li>Request a lower loan amount or longer term</li>
                    </ul>
                </div>
                """, unsafe_allow_html=True)
    
    # Add disclaimer at the bottom of tab1 as well
    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)

with tab2:
    # Add custom CSS to make font sizes consistent
    st.markdown("""
    <style>
        /* Make all text in the About tab the same size */
        [data-testid="stAppViewContainer"] .stTabs [aria-label="About the System"] p,
        [data-testid="stAppViewContainer"] .stTabs [aria-label="About the System"] li {
            font-size: 16px !important;
            line-height: 1.5 !important;
        }
        
        /* 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">Our AI-powered system evaluates loan applications using machine learning and '
        'industry-standard criteria. It analyzes your 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;">https://github.com/ifiecas/bankloan2</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/y88GidhkAE8?si=iesfB084u4qrtPB_" 
            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)