Update app.py

app.py

@@ -7,7 +7,7 @@ from huggingface_hub import hf_hub_download
 st.set_page_config(
     page_title="Loan Approval System",
     page_icon="🏦",
-    layout="centered",
+    layout="wide",  # Changed from "centered" to "wide" for better use of space
     initial_sidebar_state="collapsed"
 )
 
@@ -31,6 +31,8 @@ st.markdown("""
         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 */
@@ -57,6 +59,12 @@ st.markdown("""
         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 */
@@ -85,16 +93,20 @@ st.markdown("""
     .result-approved {
         background-color: #E8F5E9;
         border-left: 4px solid #4CAF50;
-        padding: 1rem;
+        padding: 1.5rem;
         border-radius: 5px;
-        margin-top: 1rem;
+        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: 1rem;
+        padding: 1.5rem;
         border-radius: 5px;
-        margin-top: 1rem;
+        margin-top: 1.5rem;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
     }
     
     /* Input widgets */
@@ -135,19 +147,92 @@ st.markdown("""
         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: 1rem;
+        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)
@@ -167,48 +252,76 @@ model = load_model()
 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"])
+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)
+    st.markdown('<div class="section-card"><h3>👤 Personal Information</h3>', unsafe_allow_html=True)
     
-    col1, col2 = st.columns(2)
+    col1, col2, col3 = st.columns(3)
     with col1:
         gender = st.selectbox("Gender", ["Male", "Female"])
-        education = st.selectbox("Education Level", ["Graduate", "Under Graduate"])
+        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"])
-        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"],
+                                   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")
     
-    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)
+    st.markdown('<div class="section-card"><h3>💰 Financial Details</h3>', unsafe_allow_html=True)
     
-    col1, col2 = st.columns(2)
+    col1, col2, col3 = st.columns(3)
     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)
+        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: "No existing unsettled loans (1)" if x == 1 else "Have unsettled loans (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)
-        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"])
+        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 - without DTI Assessment or Eligibility Check
-    st.markdown('<div class="section-card"><h3>Application Summary</h3>', 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
     
@@ -224,20 +337,24 @@ with tab1:
         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)
+    # 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 = st.columns(3)
+    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.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 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)
     
@@ -247,16 +364,16 @@ with tab1:
     col1, col2 = st.columns([3, 1])
     
     with col1:
-        predict_button = st.button("Check Loan Approval Status", use_container_width=True)
+        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")
+        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()  # Using st.rerun() instead of st.experimental_rerun()
+        st.rerun()
     
     def preprocess_input():
         # Convert categorical inputs to numerical format based on encoding reference
@@ -286,22 +403,32 @@ with tab1:
             credit_amount_interaction, income_term_ratio
         ]])
     
-    # Display prediction
+    # 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 (but don't show to user)
+            # 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
@@ -310,23 +437,55 @@ with tab1:
             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>
+                    <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("""
+                st.markdown(f"""
                 <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>
+                    <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 for better styling
+    # 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;
@@ -484,7 +643,7 @@ with tab2:
     # 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>',
+        '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
     )
     
@@ -528,13 +687,4 @@ with tab2:
     
     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)
+        '(Melbourne) with Dr. Omid Ameri