| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Nova: Loan Eligibility Checker</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <style>
|
| body {
|
| font-family: 'Inter', sans-serif;
|
| background-color: #f3f4f6;
|
| }
|
| .table-auto {
|
| table-layout: auto;
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
|
| <div class="bg-white rounded-xl shadow-xl p-8 max-w-4xl w-full">
|
| <header class="text-center mb-8">
|
| <h1 class="text-4xl font-bold text-gray-800">Nova: Loan Eligibility Checker</h1>
|
| <p class="text-gray-600 mt-2">Enter your data to check your loan eligibility.</p>
|
| </header>
|
|
|
| <section id="metrics-section" class="bg-gray-50 rounded-lg p-6 mb-8 border border-gray-200 hidden">
|
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Model Performance Metrics</h2>
|
| <div id="metrics-data" class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-gray-700">
|
| </div>
|
| <p class="text-xs text-gray-500 mt-4">
|
| These metrics represent the model's performance on a historical dataset.
|
| </p>
|
| </section>
|
|
|
| <div class="mb-8">
|
| <div class="flex border-b border-gray-200">
|
| <button id="tab-single" class="tab-button py-2 px-4 text-sm font-medium border-b-2 border-blue-600 text-blue-600 transition-colors duration-200">Single Entry</button>
|
| <button id="tab-csv" class="tab-button py-2 px-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors duration-200">Upload CSV</button>
|
| </div>
|
| </div>
|
|
|
| <div id="csv-results-container" class="hidden">
|
| <section id="fairness-section" class="bg-gray-50 rounded-lg p-6 mb-8 border border-gray-200 hidden">
|
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Fairness Metrics by Group</h2>
|
| <div id="fairness-table" class="mb-6"></div>
|
| <canvas id="fairness-chart" height="200"></canvas>
|
| <div id="fairness-observation" class="mt-4 text-gray-700 font-medium"></div>
|
| </section>
|
|
|
| <section id="csv-results-table" class="mt-6 hidden">
|
| </section>
|
| </div>
|
|
|
| <section id="single-entry-form" class="space-y-6">
|
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Your Information</h2>
|
| <form id="loan-form" class="space-y-6">
|
| <div>
|
| <label for="partnerType" class="block text-sm font-medium text-gray-700 mb-1">Partner Type</label>
|
| <select id="partnerType" name="Partner Type" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| <option value="">Select a type...</option>
|
| <option value="Merchant">Merchant</option>
|
| <option value="Driver">Driver</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="earningsValue" class="block text-sm font-medium text-gray-700 mb-1">Earnings (Value)</label>
|
| <input type="number" id="earningsValue" name="Earnings (Value)" required min="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="earningsStability" class="block text-sm font-medium text-gray-700 mb-1">Earnings (Stability Type)</label>
|
| <select id="earningsStability" name="Earnings (Stability Type)" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| <option value="">Select stability...</option>
|
| <option value="Stable">Stable</option>
|
| <option value="Variable">Variable</option>
|
| <option value="Seasonal">Seasonal</option>
|
| </select>
|
| </div>
|
| <div>
|
| <label for="perfRating" class="block text-sm font-medium text-gray-700 mb-1">Performance Rating (Avg)</label>
|
| <input type="number" id="perfRating" name="Perf. Rating (Avg)" required min="1" max="5" step="0.1" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="timeOnPlatform" class="block text-sm font-medium text-gray-700 mb-1">Time on Platform (Months)</label>
|
| <input type="number" id="timeOnPlatform" name="Time on Platform (Months)" required min="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="volume" class="block text-sm font-medium text-gray-700 mb-1">Order/Trip Volume</label>
|
| <input type="number" id="volume" name="Order/Trip Volume" required min="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="financialActivity" class="block text-sm font-medium text-gray-700 mb-1">Financial Activity (Score)</label>
|
| <input type="number" id="financialActivity" name="Financial Activity (Score)" required min="0" max="1" step="0.1" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="earningsVolatility" class="block text-sm font-medium text-gray-700 mb-1">Earnings Volatility</label>
|
| <input type="number" id="earningsVolatility" name="Earnings Volatility" required min="0" step="0.01" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="repayments" class="block text-sm font-medium text-gray-700 mb-1">On-Time Loan Repayments</label>
|
| <input type="number" id="repayments" name="On-Time Loan Repayments" required min="0" step="1" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
| <div>
|
| <label for="anomalyScore" class="block text-sm font-medium text-gray-700 mb-1">Operational Anomaly Score</label>
|
| <input type="number" id="anomalyScore" name="Operational Anomaly Score" required min="0" max="1" step="0.01" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-3 focus:border-indigo-500 focus:ring-indigo-500 border">
|
| </div>
|
|
|
| <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg shadow-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
|
| Check Eligibility
|
| </button>
|
| </form>
|
| </section>
|
|
|
| <section id="csv-upload-form" class="hidden">
|
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Upload a CSV File</h2>
|
| <form id="csv-form" class="space-y-6">
|
| <div>
|
| <label for="csvFile" class="block text-sm font-medium text-gray-700 mb-1">Select CSV File</label>
|
| <input type="file" id="csvFile" name="file" accept=".csv" required class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
|
| </div>
|
| <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg shadow-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
|
| Process CSV
|
| </button>
|
| </form>
|
| </section>
|
|
|
| <section id="result-section" class="mt-8">
|
| <div id="prediction-result" class="p-6 text-center text-lg font-semibold rounded-lg hidden">
|
| </div>
|
| </section>
|
| </div>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| <script>
|
| function displayFairnessMetrics(fairnessMetrics, fairnessObservation) {
|
| const fairnessSection = document.getElementById('fairness-section');
|
| const fairnessTable = document.getElementById('fairness-table');
|
| const fairnessChart = document.getElementById('fairness-chart');
|
| const fairnessObservationDiv = document.getElementById('fairness-observation');
|
| if (!fairnessMetrics || !fairnessMetrics.selection_rate) {
|
| fairnessSection.classList.add('hidden');
|
| return;
|
| }
|
|
|
| fairnessSection.classList.remove('hidden');
|
|
|
| let html = `<table class="min-w-full table-auto divide-y divide-gray-200"><thead><tr><th class="px-4 py-2">Group</th><th class="px-4 py-2">Selection Rate</th><th class="px-4 py-2">Equal Opportunity</th></tr></thead><tbody>`;
|
| const groups = Object.keys(fairnessMetrics.selection_rate);
|
| groups.forEach(group => {
|
| html += `<tr><td class="px-4 py-2">${group}</td><td class="px-4 py-2">${(fairnessMetrics.selection_rate[group]*100).toFixed(2)}%</td><td class="px-4 py-2">${(fairnessMetrics.equal_opportunity[group]*100).toFixed(2)}%</td></tr>`;
|
| });
|
| html += '</tbody></table>';
|
| fairnessTable.innerHTML = html;
|
|
|
| const chartData = {
|
| labels: groups,
|
| datasets: [
|
| {
|
| label: 'Selection Rate',
|
| data: groups.map(g => fairnessMetrics.selection_rate[g]),
|
| backgroundColor: 'rgba(59,130,246,0.7)'
|
| },
|
| {
|
| label: 'Equal Opportunity',
|
| data: groups.map(g => fairnessMetrics.equal_opportunity[g]),
|
| backgroundColor: 'rgba(16,185,129,0.7)'
|
| }
|
| ]
|
| };
|
| if (window.fairnessChartInstance) window.fairnessChartInstance.destroy();
|
| window.fairnessChartInstance = new Chart(fairnessChart, {
|
| type: 'bar',
|
| data: chartData,
|
| options: {
|
| responsive: true,
|
| plugins: { legend: { position: 'top' } },
|
| scales: { y: { beginAtZero: true, max: 1 } }
|
| }
|
| });
|
|
|
| fairnessObservationDiv.textContent = fairnessObservation || '';
|
| }
|
| </script>
|
| <script>
|
| document.addEventListener('DOMContentLoaded', () => {
|
| const tabSingle = document.getElementById('tab-single');
|
| const tabCsv = document.getElementById('tab-csv');
|
| const singleEntryForm = document.getElementById('single-entry-form');
|
| const csvUploadForm = document.getElementById('csv-upload-form');
|
| const form = document.getElementById('loan-form');
|
| const csvForm = document.getElementById('csv-form');
|
| const metricsSection = document.getElementById('metrics-section');
|
| const metricsData = document.getElementById('metrics-data');
|
| const predictionResult = document.getElementById('prediction-result');
|
|
|
|
|
| const csvResultsContainer = document.getElementById('csv-results-container');
|
| const csvResultsTable = document.getElementById('csv-results-table');
|
| const fairnessSection = document.getElementById('fairness-section');
|
|
|
|
|
| tabSingle.addEventListener('click', () => {
|
| tabSingle.classList.add('border-blue-600', 'text-blue-600');
|
| tabCsv.classList.remove('border-blue-600', 'text-blue-600');
|
| tabCsv.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700');
|
| singleEntryForm.classList.remove('hidden');
|
| csvUploadForm.classList.add('hidden');
|
| predictionResult.classList.add('hidden');
|
| csvResultsContainer.classList.add('hidden');
|
| fairnessSection.classList.add('hidden');
|
| });
|
|
|
| tabCsv.addEventListener('click', () => {
|
| tabCsv.classList.add('border-blue-600', 'text-blue-600');
|
| tabSingle.classList.remove('border-blue-600', 'text-blue-600');
|
| tabSingle.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700');
|
| csvUploadForm.classList.remove('hidden');
|
| singleEntryForm.classList.add('hidden');
|
| predictionResult.classList.add('hidden');
|
|
|
| });
|
|
|
|
|
| function displayMetrics(metrics) {
|
| metricsSection.classList.remove('hidden');
|
| metricsData.innerHTML = `
|
| <div class="flex items-center space-x-2">
|
| <svg class="h-6 w-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
| </svg>
|
| <p class="font-medium">Accuracy: <span class="text-blue-600">${(metrics.accuracy * 100).toFixed(2)}%</span></p>
|
| </div>
|
| <div class="flex items-center space-x-2">
|
| <svg class="h-6 w-6 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
|
| <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM11 9a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2zM5 9a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5z" />
|
| </svg>
|
| <p class="font-medium">Precision: <span class="text-blue-600">${(metrics.precision * 100).toFixed(2)}%</span></p>
|
| </div>
|
| <div class="flex items-center space-x-2">
|
| <svg class="h-6 w-6 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
|
| <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
| <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
|
| </svg>
|
| <p class="font-medium">Recall: <span class="text-blue-600">${(metrics.recall * 100).toFixed(2)}%</span></p>
|
| </div>
|
| <div class="flex items-center space-x-2">
|
| <svg class="h-6 w-6 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
|
| <path d="M3 12a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" />
|
| <path d="M10 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1z" />
|
| </svg>
|
| <p class="font-medium">F1-Score: <span class="text-blue-600">${(metrics.f1_score * 100).toFixed(2)}%</span></p>
|
| </div>
|
| `;
|
| }
|
|
|
|
|
| function convertToNumbers(data) {
|
| const numericKeys = [
|
| "Earnings (Value)",
|
| "Perf. Rating (Avg)",
|
| "Time on Platform (Months)",
|
| "Order/Trip Volume",
|
| "Financial Activity (Score)",
|
| "Earnings Volatility",
|
| "On-Time Loan Repayments",
|
| "Operational Anomaly Score"
|
| ];
|
|
|
|
|
| const newData = { ...data };
|
|
|
| for (const key of numericKeys) {
|
| if (newData[key] !== undefined) {
|
|
|
| if (key.includes("Score") || key.includes("Volatility") || key.includes("Rating")) {
|
| newData[key] = parseFloat(newData[key]);
|
| } else {
|
| newData[key] = parseInt(newData[key], 10);
|
| }
|
| }
|
| }
|
| return newData;
|
| }
|
|
|
|
|
| form.addEventListener('submit', async (e) => {
|
| e.preventDefault();
|
|
|
|
|
| const formData = new FormData(form);
|
| const data = {};
|
| formData.forEach((value, key) => {
|
| data[key] = value;
|
| });
|
|
|
|
|
| const processedData = convertToNumbers(data);
|
|
|
| const backendEndpoint = 'http://localhost:5000/predict';
|
|
|
| predictionResult.classList.remove('hidden');
|
| predictionResult.textContent = 'Checking eligibility...';
|
| predictionResult.classList.remove('bg-green-100', 'bg-red-100', 'text-green-800', 'text-red-800');
|
| try {
|
| const response = await fetch(backendEndpoint, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify(processedData),
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error(`HTTP error! status: ${response.status}`);
|
| }
|
|
|
| const result = await response.json();
|
|
|
|
|
| console.log("Backend response received:", result);
|
|
|
| displayMetrics(result.metrics);
|
|
|
| const predictionValue = (result && result.prediction) ? String(result.prediction).toLowerCase() : '';
|
|
|
| predictionResult.classList.remove('bg-green-100', 'bg-red-100', 'text-green-800', 'text-red-800');
|
| if (predictionValue === 'eligible') {
|
| predictionResult.textContent = 'Congratulations! You are eligible for a loan.';
|
| predictionResult.classList.add('bg-green-100', 'text-green-800');
|
| } else if (predictionValue === 'not eligible' || predictionValue === 'ineligible') {
|
| predictionResult.textContent = "We're sorry, you are not eligible for a loan at this time.";
|
| predictionResult.classList.add('bg-red-100', 'text-red-800');
|
| } else {
|
| predictionResult.textContent = 'Received a response from the backend, but no prediction was found.';
|
| predictionResult.classList.add('bg-red-100', 'text-red-800');
|
| }
|
| } catch (error) {
|
| console.error('Error:', error);
|
| predictionResult.textContent = `There was a problem checking your eligibility. Please ensure the backend is running at ${backendEndpoint}.`;
|
| predictionResult.classList.add('bg-red-100', 'text-red-800');
|
| }
|
| });
|
|
|
|
|
| csvForm.addEventListener('submit', async (e) => {
|
| e.preventDefault();
|
| predictionResult.classList.remove('hidden');
|
| predictionResult.innerHTML = 'Processing CSV file...';
|
| predictionResult.classList.remove('bg-green-100', 'bg-red-100', 'text-green-800', 'text-red-800');
|
| csvResultsContainer.classList.add('hidden');
|
|
|
| const csvFile = document.getElementById('csvFile').files[0];
|
| if (!csvFile) {
|
| predictionResult.textContent = 'Please select a CSV file to upload.';
|
| predictionResult.classList.add('bg-red-100', 'text-red-800');
|
| return;
|
| }
|
|
|
| const formData = new FormData();
|
| formData.append('file', csvFile);
|
|
|
| const backendEndpoint = 'http://localhost:5000/predict_csv';
|
| try {
|
| const response = await fetch(backendEndpoint, {
|
| method: 'POST',
|
| body: formData,
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error(`HTTP error! status: ${response.status}`);
|
| }
|
|
|
| const result = await response.json();
|
|
|
| displayMetrics(result.metrics);
|
| displayFairnessMetrics(result.fairness_metrics, result.fairness_observation);
|
| displayCsvResults(result.predictions);
|
|
|
| csvResultsContainer.classList.remove('hidden');
|
| predictionResult.classList.add('hidden');
|
| } catch (error) {
|
| console.error('Error:', error);
|
| predictionResult.textContent = `There was a problem processing the CSV file. Please ensure the backend is running at ${backendEndpoint}.`;
|
| predictionResult.classList.add('bg-red-100', 'text-red-800');
|
| }
|
| });
|
|
|
| function displayCsvResults(predictions) {
|
| csvResultsTable.classList.remove('hidden');
|
| let html = `<div class="overflow-x-auto rounded-lg shadow-md">
|
| <table class="min-w-full table-auto divide-y divide-gray-200">
|
| <thead class="bg-gray-200">
|
| <tr>`;
|
|
|
|
|
| if (predictions.length > 0) {
|
| const headers = Object.keys(predictions[0]);
|
| headers.forEach(header => {
|
| html += `<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">${header}</th>`;
|
| });
|
| }
|
| html += `</tr>
|
| </thead>
|
| <tbody class="bg-white divide-y divide-gray-200">`;
|
|
|
|
|
| predictions.forEach(row => {
|
| html += `<tr>`;
|
| Object.values(row).forEach(value => {
|
| html += `<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${value}</td>`;
|
| });
|
| html += `</tr>`;
|
| });
|
|
|
| html += `</tbody></table></div>`;
|
| csvResultsTable.innerHTML = html;
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
