Spaces:

iremrit
/

FinRisk-AI

Sleeping

App Files Files Community

iremrit commited on Dec 9, 2025

Commit

10fa43e

verified ·

1 Parent(s): db9043f

Upload index.html

Browse files

Files changed (1) hide show

index.html +442 -0

index.html ADDED Viewed

	@@ -0,0 +1,442 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FinRisk-AI</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💳</text></svg>">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background: linear-gradient(135deg, #0f4c75 0%, #3282b8 25%, #bbe1fa 50%, #1b262c 75%, #0f4c75 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+            min-height: 100vh;
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 20% 80%, rgba(0, 128, 0, 0.1) 0%, transparent 50%),
+                        radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.1) 0%, transparent 50%),
+                        radial-gradient(circle at 40% 40%, rgba(0, 139, 139, 0.1) 0%, transparent 50%);
+            animation: float 20s ease-in-out infinite;
+            pointer-events: none;
+        }
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            33% { transform: translateY(-10px) rotate(1deg); }
+            66% { transform: translateY(10px) rotate(-1deg); }
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+        .header h1 {
+            font-size: 2.8rem;
+            margin-bottom: 10px;
+            font-weight: 700;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            font-weight: 300;
+        }
+        .card {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            margin-bottom: 20px;
+        }
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .form-group {
+            display: flex;
+            flex-direction: column;
+        }
+        .form-group label {
+            font-size: 0.85rem;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #34495e;
+        }
+        .form-group input {
+            padding: 10px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 0.95rem;
+            transition: border-color 0.3s;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .button-group {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+        .btn {
+            padding: 12px 30px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .btn-secondary {
+            background: #f0f0f0;
+            color: #34495e;
+        }
+        .btn-secondary:hover {
+            background: #e0e0e0;
+        }
+        .result {
+            display: none;
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
+        .result.show {
+            display: block;
+            animation: fadeIn 0.5s;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .result-low {
+            background: #d4edda;
+            border-left: 5px solid #28a745;
+        }
+        .result-medium {
+            background: #fff3cd;
+            border-left: 5px solid #ffc107;
+        }
+        .result-high {
+            background: #f8d7da;
+            border-left: 5px solid #dc3545;
+        }
+        .result h3 {
+            margin-bottom: 10px;
+            font-size: 1.3rem;
+        }
+        .result-details {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+        .result-item {
+            padding: 10px;
+            background: rgba(255,255,255,0.5);
+            border-radius: 5px;
+        }
+        .result-item strong {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 0.9rem;
+        }
+        .result-item span {
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 20px;
+        }
+        .loading.show {
+            display: block;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .footer {
+            text-align: center;
+            color: white;
+            margin-top: 30px;
+            opacity: 0.8;
+            font-weight: 300;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>💳 FinRisk-AI</h1>
+            <p>Intelligent Credit Risk Analysis Powered by AI</p>
+        </div>
+        <div class="card">
+            <form id="predictionForm">
+                <div class="form-grid" id="featureInputs"></div>
+                <div class="button-group">
+                    <button type="submit" class="btn btn-primary">Predict Risk</button>
+                    <button type="button" class="btn btn-secondary" onclick="fillSampleData()">Fill Sample Data</button>
+                    <button type="reset" class="btn btn-secondary">Clear Form</button>
+                </div>
+            </form>
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p style="margin-top: 10px;">Calculating risk...</p>
+            </div>
+            <div class="result" id="result"></div>
+        </div>
+        <div class="footer">
+            <p>FinRisk-AI v1.0 | 50+ Features | Stacking Classifier</p>
+        </div>
+    </div>
+    <script>
+        const features = {{ features | tojson }};
+        function createFeatureInputs() {
+            const container = document.getElementById('featureInputs');
+            if (features && features.top_10_features) {
+                features.top_10_features.forEach(feature => {
+                    const div = document.createElement('div');
+                    div.className = 'form-group';
+                    div.innerHTML = `
+                        <label for="${feature}">${feature}</label>
+                        <input type="number" step="any" id="${feature}" name="${feature}" required>
+                    `;
+                    container.appendChild(div);
+                });
+            }
+        }
+        function fillSampleData() {
+            const sampleData = {
+                'Credit_Mix_Ordinal': 2,
+                'Outstanding_Debt': 15000,
+                'Delay_from_due_date': 5,
+                'Payment_of_Min_Amount_Yes': 1,
+                'Num_Credit_Card': 3,
+                'Interest_Rate': 12,
+                'Num_of_Delayed_Payment': 2,
+                'Installment_to_Income': 0.25,
+                'Num_Bank_Accounts': 4,
+                'Num_Credit_Inquiries': 1
+            };
+            features.top_10_features.forEach(feature => {
+                const input = document.getElementById(feature);
+                input.value = sampleData[feature] || 0;
+            });
+        }
+        document.getElementById('predictionForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const featuresData = {};
+            // Include all features, using form values for top_10_features and defaults for others
+            features.all_features.forEach(feature => {
+                if (features.top_10_features.includes(feature)) {
+                    featuresData[feature] = parseFloat(formData.get(feature));
+                } else {
+                    featuresData[feature] = 0; // Default value for features not in form
+                }
+            });
+            document.getElementById('loading').classList.add('show');
+            document.getElementById('result').classList.remove('show');
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ features: featuresData })
+                });
+                const data = await response.json();
+                displayResult(data);
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                document.getElementById('loading').classList.remove('show');
+            }
+        });
+        function displayResult(data) {
+            const resultDiv = document.getElementById('result');
+            // Map prediction to risk level for styling
+            const riskLevel = data.prediction.toLowerCase() === 'poor' ? 'high' :
+                             data.prediction.toLowerCase() === 'standard' ? 'medium' : 'low';
+            // Create message based on prediction
+            const message = `Your credit score is predicted to be: ${data.prediction}`;
+            resultDiv.className = `result result-${riskLevel} show`;
+            resultDiv.innerHTML = `
+                <h3>${message}</h3>
+                <div class="result-details">
+                    <div class="result-item">
+                        <strong>Credit Score</strong>
+                        <span style="text-transform: uppercase;">${data.prediction}</span>
+                    </div>
+                    <div class="result-item">
+                        <strong>Features Analyzed</strong>
+                        <span>${data.features_used}</span>
+                    </div>
+                </div>
+            `;
+        }
+        createFeatureInputs();
+        // Enable Calculator API button when all inputs are filled
+        const inputs = document.querySelectorAll('#featureInputs input');
+        const calculatorBtn = document.getElementById('calculatorBtn');
+        function checkInputs() {
+            let allFilled = true;
+            inputs.forEach(input => {
+                if (!input.value.trim()) {
+                    allFilled = false;
+                }
+            });
+            calculatorBtn.disabled = !allFilled;
+        }
+        inputs.forEach(input => {
+            input.addEventListener('input', checkInputs);
+        });
+        calculatorBtn.addEventListener('click', async () => {
+            const featuresData = {};
+            // Include all features, using form values for top_10_features and defaults for others
+            if (features && features.all_features && features.top_10_features) {
+                features.all_features.forEach(feature => {
+                    if (features.top_10_features.includes(feature)) {
+                        const input = document.getElementById(feature);
+                        featuresData[feature] = parseFloat(input.value);
+                    } else {
+                        featuresData[feature] = 0; // Default value for features not in form
+                    }
+                });
+            }
+            document.getElementById('loading').classList.add('show');
+            document.getElementById('result').classList.remove('show');
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ features: featuresData })
+                });
+                const data = await response.json();
+                displayResult(data);
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                document.getElementById('loading').classList.remove('show');
+            }
+        });
+    </script>
+</body>
+</html>