Interface & Deployment - Smart Credit Risk System

Overview

The user interface is what people see and interact with when they visit our Smart Credit Risk System. It's built using HTML forms and styled with CSS to create a clean, modern, and professional look that matches our fintech theme.

index.html - The User Interface

The index.html file contains the frontend of our application. Let's explore its key components:

1. HTML Form Structure

The form collects all the information needed to make a prediction:

<form action="/predict" method="POST">
    <label>Age:</label>
    <input type="number" name="age" required>
    
    <label>Annual Income:</label>
    <input type="number" name="person_income" required>
    
    <label>Loan Amount:</label>
    <input type="number" name="loan_amnt" required>
    
    <button type="submit">Predict Risk</button>
</form>
            

How it works:

action="/predict" tells the form to send data to the /predict route in our Flask app
method="POST" means the data is sent securely in the request body (not visible in the URL)
Each input field has a name attribute that matches what the backend expects
The required attribute ensures users fill in all fields before submitting

2. CSS Styling - Modern Card Layout

The CSS creates a beautiful, modern interface with a card-based design:

/* Card container styling */
.form-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 2rem auto;
}

/* Input field styling */
input[type="number"], select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
}

input:focus {
    border-color: #50C878; /* Emerald green */
    outline: none;
}
            

The CSS creates:

Card Layout: A white card with rounded corners and shadow for a modern look
Clean Inputs: Styled form fields with focus states that highlight in emerald green
Responsive Design: The layout adapts to different screen sizes (mobile, tablet, desktop)
Professional Colors: Uses our fintech theme colors (navy blue, emerald green, white)

3. Displaying Results - Template Variables

Flask uses a templating system called Jinja2. We can display dynamic content using double curly braces:

<div class="result">
    {% if prediction_text %}
        <h2>{{ prediction_text }}</h2>
        <p>Confidence: {{ confidence }}%</p>
    {% endif %}
</div>
            

💡 How Template Variables Work

When the backend sends data to the template, Flask replaces {{ prediction_text }} with the actual prediction result (like "SAFE - Low Risk" or "RISKY - High Risk").

The {% if %} block ensures the result only shows after a prediction has been made, not when the page first loads.

requirements.txt - The Shopping List

The requirements.txt file is like a shopping list for the deployment server. It tells the server (like Render) exactly which Python libraries to install so our application can run.

What's Inside requirements.txt

Flask==2.3.0
gunicorn==21.2.0
scikit-learn==1.3.0
pandas==2.0.3
joblib==1.3.2
numpy==1.24.3
            

Each Library Explained:

Flask: Our web framework - the foundation that runs our web server
gunicorn: A production-ready web server. While Flask's built-in server is fine for development, gunicorn is needed for production deployment on platforms like Render. It handles multiple requests efficiently and is more stable.
scikit-learn: Contains our Random Forest Classifier and all the machine learning tools we need
pandas: For data manipulation and organizing user input
joblib: For loading our saved model file
numpy: A dependency for scikit-learn and pandas (handles numerical operations)

🔧 How Deployment Works

When you deploy to Render (or similar platforms):

The server reads requirements.txt
It installs all listed libraries using: pip install -r requirements.txt
It starts the Flask app using gunicorn: gunicorn app:app
Your application is now live and accessible via a URL!

Why specify versions? Using exact versions (like Flask==2.3.0) ensures everyone gets the same library versions, preventing compatibility issues.

Deployment Checklist

Before deploying, make sure you have:

✅ app.py - Your Flask application
✅ index.html - Your user interface (in a templates/ folder)
✅ credit_risk_model.pkl - Your trained and compressed model
✅ requirements.txt - List of all dependencies
✅ Procfile (for Render) - Tells Render how to start your app: web: gunicorn app:app

Summary

The interface and deployment work together to create a complete, production-ready application:

Frontend (index.html): Beautiful, user-friendly form for inputting loan data
Backend (app.py): Processes the form data and makes predictions
Deployment (requirements.txt): Ensures all necessary libraries are installed on the server
Result: A live, accessible web application that anyone can use!