Bank Failures.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank Failure Forecasting & Stress Testing Tool</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #18bc9c;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #333333;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 20px;
        }

        h1 {
            color: var(--primary-color);
            margin-top: 0;
            font-size: 24px;
            border-bottom: 2px solid var(--bg-color);
            padding-bottom: 10px;
        }

        p.description {
            color: #666;
            font-size: 14px;
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--primary-color);
            border-left: 4px solid var(--secondary-color);
            padding-left: 8px;
            margin: 20px 0 10px 0;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
            font-size: 14px;
            color: var(--primary-color);
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 15px;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: var(--secondary-color);
        }

        .help-text {
            display: block;
            font-size: 11px;
            color: #7f8c8d;
            margin-top: 4px;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #1a252f;
        }

        .result-box {
            display: none;
            margin-top: 25px;
            padding: 20px;
            border-radius: 6px;
            animation: fadeIn 0.5s ease-in-out;
        }

        .solvent {
            background-color: #d1e7dd;
            border: 1px solid #badbcc;
            color: #0f5132;
        }

        .failed {
            background-color: #f8d7da;
            border: 1px solid #f5c2c7;
            color: #842029;
        }

        .result-title {
            font-size: 20px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .metrics-summary {
            font-size: 14px;
            background: rgba(255, 255, 255, 0.6);
            padding: 12px;
            border-radius: 4px;
            margin-top: 15px;
        }

        .graph-container {
            display: none;
            text-align: center;
            margin-top: 25px;
            padding: 15px;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }

        canvas {
            background-color: #fafafa;
            border: 1px solid #eaeaea;
            max-width: 100%;
        }

        .note-box {
            font-size: 12px;
            color: #7f8c8d;
            border-left: 3px solid #bdc3c7;
            padding-left: 10px;
            margin-top: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="card">
        <h1>Bank Failure Forecasting Tool</h1>
        <p class="description">
            This tool evaluates a bank's financial stability using the linear Support Vector Machine (SVM) decision boundary optimized by Gogas, Papadimitriou, and Agrapetidou (2018). Input values from the bank's most recent statement below.
        </p>

        <form id="calcForm">
            <div class="section-title">1. Capital Adequacy Indicators (Balance Sheet)</div>
            <div class="grid-2">
                <div class="form-group">
                    <label for="tier1">Tier 1 (Core) Capital ($)</label>
                    <input type="number" id="tier1" step="any" required placeholder="e.g., 52508">
                    <span class="help-text">Core equity, common stock, and retained earnings.</span>
                </div>
                <div class="form-group">
                    <label for="assets">Total Assets ($)</label>
                    <input type="number" id="assets" step="any" required placeholder="e.g., 2153690">
                    <span class="help-text">The total balance sheet size asset volume.</span>
                </div>
            </div>

            <div class="section-title">2. Operating Margin Leverage Indicators (Income Statement)</div>
            <div class="grid-2">
                <div class="form-group">
                    <label for="expense">Total Interest Expense ($)</label>
                    <input type="number" id="expense" step="any" required placeholder="e.g., 18776">
                    <span class="help-text">Interest paid to depositors and corporate debt liabilities.</span>
                </div>
                <div class="form-group">
                    <label for="income">Total Interest Income ($)</label>
                    <input type="number" id="income" step="any" required placeholder="e.g., 84660">
                    <span class="help-text">Interest earned from loans, mortgages, and securities.</span>
                </div>
            </div>

            <button type="submit">Forecast Bank Status & Plot Map</button>
        </form>

        <div id="result" class="result-box">
            <div id="resultTitle" class="result-title"></div>
            <div id="resultDetails"></div>
            <div class="metrics-summary">
                <strong>Calculated Values & Scaling Breakdown:</strong>
                <div id="calculatedRatios"></div>
                <div id="scaledValues"></div>
                <div id="distanceVal"></div>
            </div>
        </div>

        <div id="graphContainer" class="graph-container">
            <h3 style="margin-top:0; color: var(--primary-color); font-size:16px;">Decision Mapping Space (Linear Margin Visualizer)</h3>
            <canvas id="svmCanvas" width="500" height="400"></canvas>
            <div style="font-size: 11px; color:#555; margin-top:5px; display:flex; justify-content:center; gap:15px;">
                <span><span style="color:#d1e7dd; background:#d1e7dd; border:1px solid #badbcc; padding:0 5px; margin-right:3px;">&nbsp;</span> Solvent Subspace</span>
                <span><span style="color:#f8d7da; background:#f8d7da; border:1px solid #f5c2c7; padding:0 5px; margin-right:3px;">&nbsp;</span> Insolvent Subspace</span>
                <span><span style="color:black; font-weight:bold; margin-right:3px;">✖</span> Your Bank Point</span>
            </div>
        </div>
    </div>

    <div class="note-box">
        <strong>Methodology Note:</strong> 
        The straight line mapped on the canvas represents the optimized hyperplane boundary separating healthy firms from failures. The distance ($d(B)$) represents the perpendicular safety buffer zone metric calculated via Lagrange multipliers context scaling[cite: 145, 485, 500].
        The dynamic matrix evaluates the formula:<br>
        $$\epsilon: 23.45 \times T1CRC - 3.85 \times TIE + 10.55 = -0.7$$ [cite: 467]
    </div>
</div>

<script>
    window.MathJax = {
        tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] }
    };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chhtml.js"></script>

<script>
    document.getElementById('calcForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // 1. Fetch separate inputs
        const tier1Raw = parseFloat(document.getElementById('tier1').value);
        const assetsRaw = parseFloat(document.getElementById('assets').value);
        const expenseRaw = parseFloat(document.getElementById('expense').value);
        const incomeRaw = parseFloat(document.getElementById('income').value);

        if (assetsRaw <= 0 || incomeRaw <= 0) {
            alert("Total Assets and Total Interest Income must be numbers greater than zero.");
            return;
        }

        // 2. Compute underlying ratios as defined in the paper
        const t1crcRaw = tier1Raw / assetsRaw; // Tier 1 Capital / Total Assets [cite: 123, 159, 319]
        const tieRaw = expenseRaw / incomeRaw;   // Interest Expense / Interest Income [cite: 124, 159, 319]

        // 3. Normalized values using original dataset baselines
        const t1crc_min = -0.011; 
        const t1crc_max = 0.1834;
        const tie_min = -0.0163;
        const tie_max = 1.6367;

        let t1crcScaled = 2 * ((t1crcRaw - t1crc_min) / (t1crc_max - t1crc_min)) - 1;
        let tieScaled = 2 * ((tieRaw - tie_min) / (tie_max - tie_min)) - 1;

        // Domain clamp to safe limits [-1, 1] 
        t1crcScaled = Math.max(-1, Math.min(1, t1crcScaled));
        tieScaled = Math.max(-1, Math.min(1, tieScaled));

        // 4. SVM Hyperspace Math Evaluation [cite: 467]
        const evaluationValue = (23.45 * t1crcScaled) - (3.85 * tieScaled) + 10.55;
        const cutoff = -0.7; // Linear optimization cut-off [cite: 299, 467]
        const isSolvent = evaluationValue > cutoff;

        // Perpendicular distance calculation d(B) 
        const numerator = Math.abs((23.45 * t1crcScaled) - (3.85 * tieScaled) + 11.25);
        const denominator = Math.sqrt(Math.pow(23.45, 2) + Math.pow(-3.85, 2));
        const distance = numerator / denominator;

        // 5. Update UI Text Fields
        document.getElementById('result').style.display = 'block';
        document.getElementById('graphContainer').style.display = 'block';
        
        const resultBox = document.getElementById('result');
        const resultTitle = document.getElementById('resultTitle');
        const resultDetails = document.getElementById('resultDetails');

        if (isSolvent) {
            resultBox.className = 'result-box solvent';
            resultTitle.innerText = 'Forecast Status: SOLVENT';
            resultDetails.innerHTML = 'The bank is structuraly safe for the next 12 months. Its operational assets and capital core cushions sit inside the healthy survival zone.';
        } else {
            resultBox.className = 'result-box failed';
            resultTitle.innerText = 'Forecast Status: HIGH RISK OF FAILURE';
            resultDetails.innerHTML = 'Warning: The bank has crossed into the insolvency space threshold. Intervention scenario modeling is recommended to alter capital metrics safely.';
        }

        document.getElementById('calculatedRatios').innerHTML = `• Derived Ratios &rarr; <strong>T1CRC:</strong> ${t1crcRaw.toFixed(4)} | <strong>TIE:</strong> ${tieRaw.toFixed(4)}`;
        document.getElementById('scaledValues').innerHTML = `• Normalized Space Vectors Vector ([-1, 1]): &rarr; <strong>X (T1CRC):</strong> ${t1crcScaled.toFixed(3)} | <strong>Y (TIE):</strong> ${tieScaled.toFixed(3)}`;
        document.getElementById('distanceVal').innerHTML = `• Exact Distance Margin to Decision Threshold ($d(B)$): <strong>${distance.toFixed(4)}</strong>`;

        // 6. Canvas Graph Rendering Engine
        drawSvmGraph(t1crcScaled, tieScaled, isSolvent);
    });

    function drawSvmGraph(bankX, bankY, isSolvent) {
        const canvas = document.getElementById('svmCanvas');
        const ctx = canvas.getContext('2d');
        const width = canvas.width;
        const height = canvas.height;

        // Clear everything
        ctx.clearRect(0, 0, width, height);

        // Grid configuration transformation maps [-1, 1] domain to pixel dimensions
        // X maps to T1CRC, Y maps to TIE.
        // We flip Y on canvas since standard HTML grid systems read down-wards.
        function getPixelX(val) { return ((val + 1) / 2) * (width - 60) + 40; }
        function getPixelY(val) { return height - (((val + 1) / 2) * (height - 60) + 40); }

        // Draw Subspace Color Splitting Regions
        // Equation: 23.45 * x - 3.85 * y + 11.25 = 0  =>  y = (23.45 * x + 11.25) / 3.85
        for (let px = 0; px < width; px++) {
            // Reverse calculate domain 'x' value based on current pixel coordinate position
            let domainX = (((px - 40) / (width - 60)) * 2) - 1;
            let separationY = (23.45 * domainX + 11.25) / 3.85;
            let pYBoundary = getPixelY(separationY);

            // Solvent (Green Safe side) is above or below line depending on standard vector orientation
            // For this equation space, lower TIE (Y) and higher T1CRC (X) is solvent.
            ctx.fillStyle = '#badbcc'; // Soft green
            ctx.fillRect(px, Math.max(0, pYBoundary), 1, height - Math.max(0, pYBoundary));
            
            ctx.fillStyle = '#f5c2c7'; // Soft red
            ctx.fillRect(px, 0, 1, Math.max(0, pYBoundary));
        }

        // Draw Axis Lines
        ctx.strokeStyle = '#7f8c8d';
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // X-axis at domain 0 position
        ctx.moveTo(40, getPixelY(-1)); ctx.lineTo(width - 20, getPixelY(-1));
        // Y-axis at domain 0 position
        ctx.moveTo(40, 20); ctx.lineTo(40, getPixelY(-1));
        ctx.stroke();

        // Draw Hyperplane Separator Line (Dashed Style) [cite: 106, 144]
        ctx.strokeStyle = '#2c3e50';
        ctx.lineWidth = 3;
        ctx.setLineDash([6, 4]);
        ctx.beginPath();
        
        let firstPointSet = false;
        for (let xCoord = -1.0; xCoord <= 1.0; xCoord += 0.01) {
            let yCoord = (23.45 * xCoord + 11.25) / 3.85;
            if (yCoord >= -1 && yCoord <= 1) {
                if (!firstPointSet) {
                    ctx.moveTo(getPixelX(xCoord), getPixelY(yCoord));
                    firstPointSet = true;
                } else {
                    ctx.lineTo(getPixelX(xCoord), getPixelY(yCoord));
                }
            }
        }
        ctx.stroke();
        ctx.setLineDash([]); // Reset default solid borders

        // Label Axes Text Markup
        ctx.fillStyle = '#2c3e50';
        ctx.font = 'bold 11px sans-serif';
        ctx.fillText('Capital Adequacy (T1CRC) →', width - 170, height - 10);
        
        ctx.save();
        ctx.translate(15, 140);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('← Financial Leverage / Expenses (TIE)', 0, 0);
        ctx.restore();

        // Draw Target Calculated Bank Coordinate Node
        let targetX = getPixelX(bankX);
        let targetY = getPixelY(bankY);

        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(targetX, targetY, 6, 0, 2 * Math.PI);
        ctx.fill();

        // Overlay a small "✖" accent over node center element positions
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(targetX - 3, targetY - 3); ctx.lineTo(targetX + 3, targetY + 3);
        ctx.moveTo(targetX + 3, targetY - 3); ctx.lineTo(targetX - 3, targetY + 3);
        ctx.stroke();
    }
</script>

</body>
</html>