visualizer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maze Visualizer - LLM Benchmark</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 30px;
            max-width: 1200px;
            width: 100%;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
            font-size: 2em;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 0.9em;
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .control-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        label {
            font-weight: 600;
            color: #555;
        }

        select, button {
            padding: 10px 15px;
            border-radius: 8px;
            border: 2px solid #ddd;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        select {
            background: white;
        }

        select:hover {
            border-color: #667eea;
        }

        button {
            background: #667eea;
            color: white;
            border: none;
            font-weight: 600;
        }

        button:hover {
            background: #5568d3;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .info-panel {
            background: #f7f9fc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            font-size: 0.85em;
            color: #666;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 1.1em;
            color: #333;
            font-weight: 600;
        }

        .algorithm-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
        }

        .badge-recursiveBacktracker {
            background: #e3f2fd;
            color: #1976d2;
        }

        .badge-prim {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        .badge-cellularAutomata {
            background: #e8f5e9;
            color: #388e3c;
        }

        .maze-container {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }

        .maze-grid {
            display: inline-grid;
            gap: 1px;
            background: #ddd;
            border: 3px solid #333;
            border-radius: 8px;
            padding: 2px;
        }

        .maze-cell {
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            border-radius: 2px;
        }

        .cell-wall {
            background: #2c3e50;
        }

        .cell-empty {
            background: #ecf0f1;
        }

        .cell-start {
            background: #3498db;
            color: white;
        }

        .cell-destination {
            background: #e74c3c;
            color: white;
        }

        .cell-path {
            background: #f39c12;
            position: relative;
        }

        .path-visualization {
            background: #fff9e6;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .path-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .path-title {
            font-weight: 600;
            color: #333;
            font-size: 1.1em;
        }

        .path-controls {
            display: flex;
            gap: 10px;
        }

        .path-controls button {
            padding: 6px 12px;
            font-size: 13px;
        }

        .path-display {
            font-family: 'Courier New', monospace;
            background: white;
            padding: 15px;
            border-radius: 8px;
            line-height: 1.8;
            word-wrap: break-word;
        }

        .arrow {
            color: #999;
            margin: 0 5px;
        }

        .step {
            display: inline-block;
            padding: 2px 8px;
            background: #f39c12;
            color: white;
            border-radius: 4px;
            margin: 2px;
            font-weight: 600;
        }

        .step.current {
            background: #e74c3c;
            transform: scale(1.1);
        }

        .navigation {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .nav-button {
            padding: 12px 24px;
            font-size: 16px;
        }

        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #eee;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .legend-box {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }

        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .no-data h2 {
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .maze-cell {
                width: 20px;
                height: 20px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .maze-cell {
                width: 15px;
                height: 15px;
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🗺️ Maze Visualizer</h1>
        <div class="subtitle">Interactive visualization of generated maze datasets</div>

        <div class="controls">
            <div class="control-group">
                <label for="algorithmFilter">Algorithm:</label>
                <select id="algorithmFilter">
                    <option value="all">All Algorithms</option>
                    <option value="recursiveBacktracker">Recursive Backtracker</option>
                    <option value="prim">Prim's Algorithm</option>
                    <option value="cellularAutomata">Cellular Automata</option>
                </select>
            </div>

            <div class="control-group">
                <label for="sizeFilter">Size:</label>
                <select id="sizeFilter">
                    <option value="all">All Sizes</option>
                    <option value="5x5">5x5</option>
                    <option value="10x10">10x10</option>
                    <option value="20x20">20x20</option>
                </select>
            </div>

            <button id="randomButton">🎲 Random</button>
        </div>

        <div id="content"></div>

        <div class="legend">
            <div class="legend-item">
                <div class="legend-box" style="background: #2c3e50;"></div>
                <span>Wall (#)</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #ecf0f1;"></div>
                <span>Empty (.)</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #3498db;"></div>
                <span>Start (P)</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #e74c3c;"></div>
                <span>Destination (D)</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #f39c12;"></div>
                <span>Optimal Path</span>
            </div>
        </div>
    </div>

    <script>
        let allMazes = [];
        let filteredMazes = [];
        let currentIndex = 0;
        let showingPath = false;
        let currentStep = -1;

        // Load the maze data
        async function loadMazes() {
            try {
                const response = await fetch('./data/benchmark_maps.json');
                allMazes = await response.json();
                filteredMazes = [...allMazes];
                renderMaze();
            } catch (error) {
                document.getElementById('content').innerHTML = `
                    <div class="no-data">
                        <h2>⚠️ Could not load maze data</h2>
                        <p>Make sure you've generated the dataset by running: <code>bun run generate</code></p>
                        <p style="margin-top: 10px; font-size: 0.9em; color: #999;">Error: ${error.message}</p>
                    </div>
                `;
            }
        }

        // Filter mazes based on selections
        function filterMazes() {
            const algorithm = document.getElementById('algorithmFilter').value;
            const size = document.getElementById('sizeFilter').value;

            filteredMazes = allMazes.filter(maze => {
                const matchAlgorithm = algorithm === 'all' || maze.algorithm === algorithm;
                const matchSize = size === 'all' || maze.size === size;
                return matchAlgorithm && matchSize;
            });

            currentIndex = 0;
            showingPath = false;
            currentStep = -1;
            renderMaze();
        }

        // Parse maze string into 2D array
        function parseMaze(mapString) {
            return mapString.split('\n').map(row => row.split(''));
        }

        // Render the current maze
        function renderMaze() {
            if (filteredMazes.length === 0) {
                document.getElementById('content').innerHTML = `
                    <div class="no-data">
                        <h2>No mazes match your filters</h2>
                        <p>Try adjusting the algorithm or size filters above</p>
                    </div>
                `;
                return;
            }

            const maze = filteredMazes[currentIndex];
            const grid = parseMaze(maze.map);
            
            // Get path coordinates
            const pathCoords = getPathCoordinates(maze);

            // Info panel
            const algorithmName = {
                'recursiveBacktracker': 'Recursive Backtracker',
                'prim': 'Prim\'s Algorithm',
                'cellularAutomata': 'Cellular Automata'
            }[maze.algorithm];

            let html = `
                <div class="info-panel">
                    <div class="info-item">
                        <div class="info-label">Map ID</div>
                        <div class="info-value">${maze.id}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Algorithm</div>
                        <div class="info-value">
                            <span class="algorithm-badge badge-${maze.algorithm}">
                                ${algorithmName}
                            </span>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Size</div>
                        <div class="info-value">${maze.size}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Path Length</div>
                        <div class="info-value">${maze.optimalPath.length} steps</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Current Map</div>
                        <div class="info-value">${currentIndex + 1} / ${filteredMazes.length}</div>
                    </div>
                </div>

                <div class="maze-container">
                    <div class="maze-grid" style="grid-template-columns: repeat(${grid[0].length}, 25px);">
            `;

            // Render grid
            grid.forEach((row, r) => {
                row.forEach((cell, c) => {
                    let className = 'maze-cell ';
                    let content = '';
                    
                    // Check if this cell is on the path
                    const isOnPath = showingPath && pathCoords.some(
                        (coord, idx) => coord.row === r && coord.col === c && 
                        (currentStep === -1 || idx <= currentStep)
                    );

                    if (cell === '#') {
                        className += 'cell-wall';
                    } else if (cell === 'P') {
                        className += 'cell-start';
                        content = 'P';
                    } else if (cell === 'D') {
                        className += 'cell-destination';
                        content = 'D';
                    } else if (isOnPath && cell === '.') {
                        className += 'cell-path';
                    } else {
                        className += 'cell-empty';
                    }

                    html += `<div class="${className}">${content}</div>`;
                });
            });

            html += `
                    </div>
                </div>

                <div class="path-visualization">
                    <div class="path-header">
                        <div class="path-title">
                            🧭 Optimal Path (${maze.optimalPath.length} steps)
                        </div>
                        <div class="path-controls">
                            <button onclick="togglePath()">${showingPath ? '🔴 Hide Path' : '🟢 Show Path'}</button>
                            ${showingPath ? '<button onclick="stepPath()">⏭️ Step</button>' : ''}
                            ${showingPath ? '<button onclick="resetPath()">🔄 Reset</button>' : ''}
                        </div>
                    </div>
                    <div class="path-display">
            `;

            maze.optimalPath.forEach((step, idx) => {
                const isCurrent = showingPath && currentStep === idx;
                html += `<span class="step ${isCurrent ? 'current' : ''}">${step}</span>`;
                if (idx < maze.optimalPath.length - 1) {
                    html += '<span class="arrow">→</span>';
                }
            });

            html += `
                    </div>
                </div>

                <div class="navigation">
                    <button class="nav-button" onclick="previousMaze()" ${currentIndex === 0 ? 'disabled' : ''}>
                        ⬅️ Previous
                    </button>
                    <button class="nav-button" onclick="nextMaze()" ${currentIndex === filteredMazes.length - 1 ? 'disabled' : ''}>
                        Next ➡️
                    </button>
                </div>
            `;

            document.getElementById('content').innerHTML = html;
        }

        // Get coordinates of the path
        function getPathCoordinates(maze) {
            const grid = parseMaze(maze.map);
            
            // Find start position
            let currentRow = -1, currentCol = -1;
            for (let r = 0; r < grid.length; r++) {
                for (let c = 0; c < grid[r].length; c++) {
                    if (grid[r][c] === 'P') {
                        currentRow = r;
                        currentCol = c;
                        break;
                    }
                }
                if (currentRow !== -1) break;
            }

            // Trace the path
            const coords = [{ row: currentRow, col: currentCol }];
            
            for (const direction of maze.optimalPath) {
                switch (direction) {
                    case 'UP': currentRow--; break;
                    case 'DOWN': currentRow++; break;
                    case 'LEFT': currentCol--; break;
                    case 'RIGHT': currentCol++; break;
                }
                coords.push({ row: currentRow, col: currentCol });
            }

            return coords;
        }

        function togglePath() {
            showingPath = !showingPath;
            if (!showingPath) {
                currentStep = -1;
            } else {
                currentStep = filteredMazes[currentIndex].optimalPath.length - 1;
            }
            renderMaze();
        }

        function stepPath() {
            const maxSteps = filteredMazes[currentIndex].optimalPath.length - 1;
            if (currentStep < maxSteps) {
                currentStep++;
            } else {
                currentStep = 0;
            }
            renderMaze();
        }

        function resetPath() {
            currentStep = -1;
            renderMaze();
        }

        function nextMaze() {
            if (currentIndex < filteredMazes.length - 1) {
                currentIndex++;
                showingPath = false;
                currentStep = -1;
                renderMaze();
            }
        }

        function previousMaze() {
            if (currentIndex > 0) {
                currentIndex--;
                showingPath = false;
                currentStep = -1;
                renderMaze();
            }
        }

        function randomMaze() {
            currentIndex = Math.floor(Math.random() * filteredMazes.length);
            showingPath = false;
            currentStep = -1;
            renderMaze();
        }

        // Event listeners
        document.getElementById('algorithmFilter').addEventListener('change', filterMazes);
        document.getElementById('sizeFilter').addEventListener('change', filterMazes);
        document.getElementById('randomButton').addEventListener('click', randomMaze);

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') nextMaze();
            if (e.key === 'ArrowLeft') previousMaze();
            if (e.key === ' ') {
                e.preventDefault();
                togglePath();
            }
        });

        // Load mazes on page load
        loadMazes();
    </script>
</body>
</html>