<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eigenvalue Subspace Analysis</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.4.2/math.min.js"></script>
    <style>
        /* --- General Styling & NVIDIA Theme --- */
        :root {
            --nvidia-green: #76B900;
            --nvidia-black: #1A1A1A;
            --text-color: #FFFFFF;
            --border-color: #333333;
            --font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: var(--nvidia-black);
            font-family: var(--font-family);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
            margin: 0;
            min-height: 100vh;
        }

        /* --- Main Widget Container --- */
        .widget-container {
            display: grid;
            grid-template-areas:
                "header header"
                "controls matrix"
                "results results";
            gap: 20px;
            background-color: rgba(0,0,0,0.3);
            border: 1px solid var(--border-color);
            padding: 25px;
            border-radius: 10px;
            max-width: 900px;
            width: 100%;
        }
        
        h2 {
            grid-area: header;
            color: var(--nvidia-green);
            margin: 0 0 10px 0;
            text-align: center;
            border-bottom: 2px solid var(--nvidia-green);
            padding-bottom: 10px;
        }

        /* --- Controls Section --- */
        .controls-container {
            grid-area: controls;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-right: 20px;
            border-right: 1px solid var(--border-color);
        }

        .control-item label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        .control-item input[type="range"],
        .control-item select {
            width: 100%;
            cursor: pointer;
        }
        
        .control-item select {
             background-color: var(--border-color);
             color: var(--text-color);
             border: 1px solid #555;
             padding: 8px;
             border-radius: 4px;
        }

        /* --- Matrix Display --- */
        .matrix-display {
            grid-area: matrix;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .matrix-grid {
            display: grid;
            grid-template-columns: repeat(8, 35px);
            gap: 5px;
        }

        .matrix-cell {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--border-color);
            border-radius: 4px;
            font-size: 0.9em;
        }

        .highlight {
            background-color: var(--nvidia-green);
            color: var(--nvidia-black);
            font-weight: bold;
        }

        /* --- Results Section --- */
        .results-section {
            grid-area: results;
            border-top: 1px solid var(--border-color);
            padding-top: 15px;
        }

        .results-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 10px;
        }

        .results-section h3 {
            color: var(--nvidia-green);
            margin: 0 0 10px 0;
        }

        .results-section p { margin: 0; }
        .results-section ul {
            padding-left: 20px;
            margin: 5px 0 0 0;
            list-style-type: square;
            font-size: 0.95em;
        }

        .final-diff {
            margin-top: 20px;
            padding: 15px;
            border-top: 1px solid var(--border-color);
            background-color: var(--border-color);
            border-radius: 5px;
            text-align: center;
        }
        .final-diff strong { color: var(--nvidia-green); }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .widget-container {
                grid-template-areas:
                    "header"
                    "controls"
                    "matrix"
                    "results";
                padding: 15px;
            }
            .controls-container {
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                padding-right: 0;
                padding-bottom: 20px;
            }
            .matrix-grid {
                grid-template-columns: repeat(8, minmax(25px, 1fr));
            }
            .matrix-cell {
                height: auto;
                aspect-ratio: 1 / 1; /* Maintain square shape */
                font-size: 0.8em;
            }
            .results-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }

    </style>
</head>
<body>

    <div class="widget-container">
        <h2>Eigenvalue Subspace Analysis</h2>

        <div class="controls-container">
            <div class="control-item">
                <label for="m-slider">Subspace Size (m x m): <span id="m-value">4</span></label>
                <input type="range" id="m-slider" min="2" max="7" value="4">
            </div>
            <div class="control-item">
                <label for="corner-selector">Subspace Corner</label>
                <select id="corner-selector">
                    <option value="Top-Left">Top-Left</option>
                    <option value="Top-Right">Top-Right</option>
                    <option value="Bottom-Left">Bottom-Left</option>
                    <option value="Bottom-Right">Bottom-Right</option>
                </select>
            </div>
        </div>

        <div class="matrix-display">
            <div id="matrix-grid" class="matrix-grid"></div>
        </div>

        <div class="results-section">
            <div class="results-grid">
                <div id="full-matrix-results"></div>
                <div id="sub-matrix-results"></div>
            </div>
            <div id="final-difference" class="final-diff"></div>
        </div>
    </div>

    <script>
        // --- 1. CONFIGURATION AND DATA ---
        // A new symmetric matrix to ensure numerical stability for eigenvalue calculations.
        const A = [
            [40, 12, 25,  8, 33, 19, 45, 29],
            [12, 50,  3, 17, 22, 38,  9, 41],
            [25,  3, 60, 31,  7, 49, 14, 23],
            [ 8, 17, 31, 70, 42,  2, 28, 11],
            [33, 22,  7, 42, 80, 16,  5, 39],
            [19, 38, 49,  2, 16, 90, 27,  1],
            [45,  9, 14, 28,  5, 27, 20, 36],
            [29, 41, 23, 11, 39,  1, 36, 30]
        ];

        // --- 2. DOM ELEMENT REFERENCES ---
        const mSlider = document.getElementById('m-slider');
        const mValueLabel = document.getElementById('m-value');
        const cornerSelector = document.getElementById('corner-selector');
        const matrixGrid = document.getElementById('matrix-grid');
        const fullMatrixResultsDiv = document.getElementById('full-matrix-results');
        const subMatrixResultsDiv = document.getElementById('sub-matrix-results');
        const finalDifferenceDiv = document.getElementById('final-difference');

        // --- 3. CORE LOGIC & CALCULATION ---
        
        /**
         * Extracts a sub-matrix from the main matrix A.
         * @param {number} m - The dimension of the sub-matrix.
         * @param {string} corner - The corner to extract from.
         * @returns {Array<Array<number>>} The extracted sub-matrix.
         */
        function extractSubMatrix(m, corner) {
            const size = 8;
            let subMatrix = [];
            for (let r = 0; r < m; r++) {
                let row = [];
                for (let c = 0; c < m; c++) {
                    let source_r, source_c;
                    if (corner === 'Top-Left') {
                        source_r = r; source_c = c;
                    } else if (corner === 'Top-Right') {
                        source_r = r; source_c = size - m + c;
                    } else if (corner === 'Bottom-Left') {
                        source_r = size - m + r; source_c = c;
                    } else { // Bottom-Right
                        source_r = size - m + r; source_c = size - m + c;
                    }
                    row.push(A[source_r][source_c]);
                }
                subMatrix.push(row);
            }
            return subMatrix;
        }

        /**
         * Calculates eigenvalues, sorts their real parts, and finds the smallest.
         * @param {Array<Array<number>>} matrix - The input matrix.
         * @returns {Array<number>} Sorted real parts of the eigenvalues.
         */
        function getSortedEigenvalues(matrix) {
            try {
                const eigs = math.eigs(matrix);
                // Extract real parts (as some eigenvalues can be complex) and sort them
                const realParts = eigs.values.map(val => math.re(val));
                return realParts.sort((a, b) => a - b);
            } catch (error) {
                console.error("Eigenvalue calculation failed:", error);
                return [];
            }
        }
        
        // Calculate eigenvalues for the full matrix once, as they don't change.
        const eigenvaluesA_sorted = getSortedEigenvalues(A);

        /**
         * The main function to update the entire widget display.
         */
        function updateDisplay() {
            const m = parseInt(mSlider.value);
            const corner = cornerSelector.value;
            mValueLabel.textContent = m;

            // --- Calculations ---
            const subMatrix = extractSubMatrix(m, corner);
            const eigenvaluesSub_sorted = getSortedEigenvalues(subMatrix);
            
            // Ensure we have eigenvalues before calculating the difference
            if (eigenvaluesA_sorted.length > 0 && eigenvaluesSub_sorted.length > 0) {
                const diffSmallest = eigenvaluesA_sorted[0] - eigenvaluesSub_sorted[0];
                renderResults(m, corner, eigenvaluesSub_sorted, diffSmallest);
            } else {
                 // Handle case where eigenvalue calculation might fail
                finalDifferenceDiv.innerHTML = `<p>Could not compute eigenvalues.</p>`;
            }

            // --- Render UI Components ---
            renderMatrix(m, corner);
        }

        // --- 4. RENDERING FUNCTIONS ---
        
        /**
         * Renders the 8x8 matrix grid and highlights the selected sub-matrix.
         */
        function renderMatrix(m, corner) {
            let html = '';
            for (let r = 0; r < 8; r++) {
                for (let c = 0; c < 8; c++) {
                    let isHighlighted = false;
                    if (corner === 'Top-Left') isHighlighted = (r < m) && (c < m);
                    else if (corner === 'Top-Right') isHighlighted = (r < m) && (c >= 8 - m);
                    else if (corner === 'Bottom-Left') isHighlighted = (r >= 8 - m) && (c < m);
                    else if (corner === 'Bottom-Right') isHighlighted = (r >= 8 - m) && (c >= 8 - m);
                    
                    const className = isHighlighted ? "matrix-cell highlight" : "matrix-cell";
                    html += `<div class="${className}">${A[r][c]}</div>`;
                }
            }
            matrixGrid.innerHTML = html;
        }

        /**
         * Renders the results section with eigenvalues and their difference.
         */
        function renderResults(m, corner, subEigs, diff) {
            const formatList = (e_vals) => "<ul>" + e_vals.map(v => `<li>${v.toFixed(4)}</li>`).join('') + "</ul>";

            fullMatrixResultsDiv.innerHTML = `
                <p><strong>Full 8x8 Matrix Eigenvalues:</strong></p>
                ${formatList(eigenvaluesA_sorted)}
            `;
            subMatrixResultsDiv.innerHTML = `
                <p><strong>Subspace ${m}x${m} (${corner}) Eigenvalues:</strong></p>
                ${formatList(subEigs)}
            `;
            finalDifferenceDiv.innerHTML = `
                <p><strong>Difference between smallest eigenvalues (Full - Sub):</strong> ${diff.toFixed(4)}</p>
            `;
        }

        // --- 5. EVENT LISTENERS ---
        mSlider.addEventListener('input', updateDisplay);
        cornerSelector.addEventListener('change', updateDisplay);

        // --- 6. INITIAL RENDER ---
        // Use DOMContentLoaded to ensure the page is fully loaded before running the script
        document.addEventListener('DOMContentLoaded', updateDisplay);
    </script>
</body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company