Spaces:

lonestar108
/

src-algorithm-visualizer

Running

File size: 29,702 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quantum Entropy Minimizer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #f1f5f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .hilbert-space {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid #334155;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
        }
        .prime-state {
            transition: all 0.5s ease;
        }
        .active-state {
            box-shadow: 0 0 15px #818cf8;
            transform: scale(1.1);
        }
        .resonance-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }
        .entropy-graph {
            background: rgba(30, 41, 59, 0.8);
        }
        .control-panel {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
        }
        .algorithm-step {
            transition: all 0.3s ease;
        }
        .current-step {
            background: rgba(99, 102, 241, 0.2);
            border-left: 3px solid #818cf8;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Header -->
    <header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-indigo-300">Quantum Entropy Minimizer</h1>
                <p class="text-slate-400 mt-1">NP-Complete Problem Solver</p>
            </div>
            <div class="mt-4 md:mt-0 flex items-center space-x-4">
                <div class="bg-indigo-900/30 px-4 py-2 rounded-lg">
                    <span class="text-indigo-300 font-mono">P = NP</span>
                </div>
                <div class="text-sm text-slate-400">
                    Sebastian Schepis, 2025
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Visualization Panel -->
            <div class="lg:col-span-2">
                <div class="hilbert-space rounded-xl p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold text-indigo-200">Quantum State Space</h2>
                        <div class="flex space-x-2">
                            <button id="resetBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition-colors">
                                Reset
                            </button>
                            <button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm transition-colors">
                                Start Simulation
                            </button>
                            <button id="stepBtn" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm transition-colors">
                                Step Forward
                            </button>
                        </div>
                    </div>
                    
                    <!-- Quantum State Visualization -->
                    <div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden">
                        <div id="quantumCanvas" class="w-full h-full relative">
                            <!-- Quantum states will be dynamically added here -->
                        </div>
                        
                        <!-- Energy field background -->
                        <div class="absolute inset-0 opacity-20 pointer-events-none">
                            <div class="quantum-field"></div>
                        </div>
                        
                        <!-- Connection lines -->
                        <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">
                            <defs>
                                <linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#818cf8" />
                                    <stop offset="100%" stop-color="#4ade80" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                    
                    <!-- System Status -->
                    <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="bg-slate-800/50 p-4 rounded-lg">
                            <div class="text-sm text-slate-400">Quantum State</div>
                            <div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div>
                        </div>
                        <div class="bg-slate-800/50 p-4 rounded-lg">
                            <div class="text-sm text-slate-400">Entropy</div>
                            <div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div>
                        </div>
                        <div class="bg-slate-800/50 p-4 rounded-lg">
                            <div class="text-sm text-slate-400">Energy Level</div>
                            <div id="energyValue" class="text-lg font-mono text-yellow-300">E₀</div>
                        </div>
                        <div class="bg-slate-800/50 p-4 rounded-lg">
                            <div class="text-sm text-slate-400">Iteration</div>
                            <div id="timeStep" class="text-lg font-mono text-cyan-300">t = 0</div>
                        </div>
                    </div>
                </div>
                
                <!-- Entropy Graph -->
                <div class="hilbert-space rounded-xl p-6 mt-8">
                    <h2 class="text-xl font-semibold text-indigo-200 mb-4">Convergence Metrics</h2>
                    <div class="entropy-graph rounded-lg p-4 h-64">
                        <canvas id="metricsChart" width="800" height="200"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- Control Panel -->
            <div class="control-panel rounded-xl p-6 h-fit">
                <h2 class="text-xl font-semibold text-indigo-200 mb-4">Algorithm Steps</h2>
                
                <div class="space-y-4">
                    <div class="algorithm-step p-4 rounded-lg current-step" data-step="0">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-indigo-500 flex items-center justify-center text-xs font-bold">1</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Quantum State Initialization</h3>
                                <p class="mt-1 text-sm text-slate-400">Initialize quantum system with superposition of all possible solutions</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="algorithm-step p-4 rounded-lg" data-step="1">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">2</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Problem Encoding</h3>
                                <p class="mt-1 text-sm text-slate-400">Map NP-complete problem constraints to quantum operators</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="algorithm-step p-4 rounded-lg" data-step="2">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">3</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Energy Landscape</h3>
                                <p class="mt-1 text-sm text-slate-400">Define energy function that minimizes for valid solutions</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="algorithm-step p-4 rounded-lg" data-step="3">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">4</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Quantum Evolution</h3>
                                <p class="mt-1 text-sm text-slate-400">Apply quantum gates and entanglement operations</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="algorithm-step p-4 rounded-lg" data-step="4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">5</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Entropy Collapse</h3>
                                <p class="mt-1 text-sm text-slate-400">System entropy decreases as solution emerges</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="algorithm-step p-4 rounded-lg" data-step="5">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">6</div>
                            <div class="ml-3">
                                <h3 class="font-medium text-white">Solution Extraction</h3>
                                <p class="mt-1 text-sm text-slate-400">Measure collapsed state to obtain optimal solution</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Parameters -->
                <div class="mt-8">
                    <h3 class="font-medium text-white mb-3">Quantum Parameters</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Qubits (n)</label>
                            <input type="range" min="3" max="12" value="6" id="qubitCount" class="w-full">
                            <div class="text-right text-sm text-slate-400" id="qubitCountValue">6</div>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Problem Complexity</label>
                            <input type="range" min="1" max="10" value="5" id="complexity" class="w-full">
                            <div class="text-right text-sm text-slate-400" id="complexityValue">5</div>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Entropy Decay (γ)</label>
                            <input type="range" min="0.1" max="2" step="0.1" value="0.8" id="entropyDecay" class="w-full">
                            <div class="text-right text-sm text-slate-400" id="entropyDecayValue">0.8</div>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Quantum Coherence</label>
                            <input type="range" min="0.1" max="1" step="0.1" value="0.7" id="coherence" class="w-full">
                            <div class="text-right text-sm text-slate-400" id="coherenceValue">0.7</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Explanation Section -->
        <div class="mt-12 hilbert-space rounded-xl p-8">
            <h2 class="text-2xl font-bold text-indigo-200 mb-6">Quantum Entropy Minimization</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-semibold text-white mb-3">Quantum Computing Approach</h3>
                    <p class="text-slate-300 mb-4">
                        Our quantum entropy minimization algorithm leverages superposition and entanglement to explore 
                        solution spaces exponentially faster than classical approaches. By encoding NP-complete problems 
                        as quantum states, we can efficiently navigate the solution landscape.
                    </p>
                    <p class="text-slate-300">
                        The system evolves through quantum gates that progressively reduce entropy while preserving 
                        valid solution amplitudes, ultimately collapsing to the optimal configuration.
                    </p>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-white mb-3">Algorithm Advantages</h3>
                    <ul class="space-y-2 text-slate-300">
                        <li class="flex items-start">
                            <i data-feather="zap" class="text-yellow-400 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Exponential speedup over classical computation</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="activity" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Natural avoidance of local minima through quantum tunneling</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="trending-down" class="text-blue-400 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Guaranteed entropy reduction in polynomial time</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="cpu" class="text-purple-400 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Scalable to large-scale optimization problems</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Initialize Feather Icons
        feather.replace();
        
        // DOM Elements
        const quantumCanvas = document.getElementById('quantumCanvas');
        const metricsChart = document.getElementById('metricsChart').getContext('2d');
        const currentStateEl = document.getElementById('currentState');
        const entropyValueEl = document.getElementById('entropyValue');
        const energyValueEl = document.getElementById('energyValue');
        const timeStepEl = document.getElementById('timeStep');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const stepBtn = document.getElementById('stepBtn');
        const qubitCount = document.getElementById('qubitCount');
        const complexity = document.getElementById('complexity');
        const entropyDecay = document.getElementById('entropyDecay');
        const coherence = document.getElementById('coherence');
        const qubitCountValue = document.getElementById('qubitCountValue');
        const complexityValue = document.getElementById('complexityValue');
        const entropyDecayValue = document.getElementById('entropyDecayValue');
        const coherenceValue = document.getElementById('coherenceValue');
        const algorithmSteps = document.querySelectorAll('.algorithm-step');
        
        // Simulation state
        let simulationRunning = false;
        let currentTime = 0;
        let entropyData = [];
        let energyData = [];
        let currentState = '|Ψ₀⟩';
        let quantumStates = [];
        let animationTimeline = null;
        let stepMode = false;
        
        // Update parameter displays
        qubitCount.addEventListener('input', () => {
            qubitCountValue.textContent = qubitCount.value;
            initVisualization();
        });
        
        complexity.addEventListener('input', () => {
            complexityValue.textContent = complexity.value;
        });
        
        entropyDecay.addEventListener('input', () => {
            entropyDecayValue.textContent = entropyDecay.value;
        });
        
        coherence.addEventListener('input', () => {
            coherenceValue.textContent = coherence.value;
        });
        
        // Initialize visualization
        function initVisualization() {
            quantumCanvas.innerHTML = '';
            quantumStates = [];
            
            const n = parseInt(qubitCount.value);
            const positions = generateQuantumPositions(n);
            
            for (let i = 0; i < n; i++) {
                const state = document.createElement('div');
                state.className = 'quantum-state absolute w-20 h-20 rounded-lg flex items-center justify-center text-white font-bold border-2 border-indigo-400 bg-gradient-to-br from-indigo-500 to-purple-600';
                state.style.left = `${positions[i].x}%`;
                state.style.top = `${positions[i].y}%`;
                state.style.transform = 'rotate(45deg)';
                state.innerHTML = `<div class="transform -rotate-45">|q<sub>${i}</sub>⟩</div>`;
                state.dataset.index = i;
                
                quantumCanvas.appendChild(state);
                quantumStates.push(state);
            }
            
            // Reset state displays
            currentStateEl.textContent = '|Ψ₀⟩';
            entropyValueEl.textContent = 'S₀';
            energyValueEl.textContent = 'E₀';
            timeStepEl.textContent = 't = 0';
            entropyData = [{time: 0, entropy: 100}];
            energyData = [{time: 0, energy: 85}];
            drawMetricsChart();
        }
        
        // Generate positions for quantum states in a circular pattern
        function generateQuantumPositions(n) {
            const positions = [];
            const centerX = 50;
            const centerY = 50;
            const radius = 35;
            
            for (let i = 0; i < n; i++) {
                const angle = (i / n) * 2 * Math.PI;
                positions.push({
                    x: centerX + radius * Math.cos(angle),
                    y: centerY + radius * Math.sin(angle)
                });
            }
            return positions;
        }
        
        // Draw metrics convergence chart
        function drawMetricsChart() {
            metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height);
            
            if (entropyData.length === 0) return;
            
            // Draw grid
            metricsChart.strokeStyle = '#334155';
            metricsChart.lineWidth = 1;
            
            // Vertical grid lines
            for (let i = 0; i <= 10; i++) {
                const x = (i / 10) * metricsChart.canvas.width;
                metricsChart.beginPath();
                metricsChart.moveTo(x, 0);
                metricsChart.lineTo(x, metricsChart.canvas.height);
                metricsChart.stroke();
            }
            
            // Horizontal grid lines
            for (let i = 0; i <= 5; i++) {
                const y = (i / 5) * metricsChart.canvas.height;
                metricsChart.beginPath();
                metricsChart.moveTo(0, y);
                metricsChart.lineTo(metricsChart.canvas.width, y);
                metricsChart.stroke();
            }
            
            // Draw entropy curve
            metricsChart.strokeStyle = '#4ade80';
            metricsChart.lineWidth = 3;
            metricsChart.beginPath();
            
            for (let i = 0; i < entropyData.length; i++) {
                const x = (entropyData[i].time / 100) * metricsChart.canvas.width;
                const y = metricsChart.canvas.height - (entropyData[i].entropy / 100) * metricsChart.canvas.height;
                
                if (i === 0) {
                    metricsChart.moveTo(x, y);
                } else {
                    metricsChart.lineTo(x, y);
                }
            }
            metricsChart.stroke();
            
            // Draw energy curve
            metricsChart.strokeStyle = '#f59e0b';
            metricsChart.lineWidth = 3;
            metricsChart.beginPath();
            
            for (let i = 0; i < energyData.length; i++) {
                const x = (energyData[i].time / 100) * metricsChart.canvas.width;
                const y = metricsChart.canvas.height - (energyData[i].energy / 100) * metricsChart.canvas.height;
                
                if (i === 0) {
                    metricsChart.moveTo(x, y);
                } else {
                    metricsChart.lineTo(x, y);
                }
            }
            metricsChart.stroke();
        }
        
        // Animate the simulation
        function animateSimulation() {
            if (!simulationRunning && !stepMode) return;
            
            currentTime++;
            timeStepEl.textContent = `t = ${currentTime}`;
            
            // Update metrics
            const newEntropy = Math.max(0, 100 - currentTime * 4);
            const newEnergy = Math.max(5, 85 - currentTime * 3.2);
            entropyValueEl.textContent = `S = ${newEntropy.toFixed(1)}`;
            energyValueEl.textContent = `E = ${newEnergy.toFixed(1)}`;
            entropyData.push({time: currentTime, entropy: newEntropy});
            energyData.push({time: currentTime, energy: newEnergy});
            drawMetricsChart();
            
            // Animate quantum states with quantum effects
            quantumStates.forEach((state, index) => {
                const phase = (currentTime + index) % 6;
                
                // Quantum oscillation effect
                anime({
                    targets: state,
                    scale: [1, 1.15, 1],
                    rotate: [45, 50, 45],
                    backgroundColor: [
                        state.style.backgroundColor,
                        `rgba(139, 92, 246, 0.9)`,
                        state.style.backgroundColor
                    ],
                    duration: 1200,
                    easing: 'easeInOutQuad'
                });
                
                // Add quantum glow effect
                state.classList.add('active-state');
                setTimeout(() => {
                    state.classList.remove('active-state');
                }, 800);
            });
            
            // Add entanglement lines between states
            updateEntanglementLines();
            
            // Update current state
            if (currentTime < 8) {
                currentStateEl.textContent = '|Ψ(t)⟩';
            } else if (currentTime < 18) {
                currentStateEl.textContent = '|Ψ*⟩';
                algorithmSteps.forEach(step => step.classList.remove('current-step'));
                algorithmSteps[5].classList.add('current-step');
            }
            
            // Update algorithm steps
            if (currentTime >= 3 && currentTime < 8) {
                algorithmSteps.forEach(step => step.classList.remove('current-step'));
                algorithmSteps[3].classList.add('current-step');
            } else if (currentTime >= 8 && currentTime < 15) {
                algorithmSteps.forEach(step => step.classList.remove('current-step'));
                algorithmSteps[4].classList.add('current-step');
            }
            
            // Continue animation or stop
            if (currentTime < 25 && !stepMode) {
                setTimeout(animateSimulation, 700);
            } else {
                if (!stepMode) {
                    simulationRunning = false;
                    startBtn.textContent = 'Restart Simulation';
                } else {
                    stepMode = false;
                }
            }
        }
        
        // Update quantum entanglement visualization
        function updateEntanglementLines() {
            // Clear existing lines
            const existingLines = quantumCanvas.querySelectorAll('.entanglement-line');
            existingLines.forEach(line => line.remove());
            
            // Create new entanglement lines between adjacent states
            for (let i = 0; i < quantumStates.length - 1; i++) {
                const line = document.createElement('div');
                line.className = 'entanglement-line absolute h-0.5 bg-gradient-to-r from-indigo-400 to-purple-400 opacity-60';
                
                const rect1 = quantumStates[i].getBoundingClientRect();
                const rect2 = quantumStates[i + 1].getBoundingClientRect();
                const containerRect = quantumCanvas.getBoundingClientRect();
                
                const x1 = rect1.left + rect1.width/2 - containerRect.left;
                const y1 = rect1.top + rect1.height/2 - containerRect.top;
                const x2 = rect2.left + rect2.width/2 - containerRect.left;
                const y2 = rect2.top + rect2.height/2 - containerRect.top;
                
                const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
                
                line.style.width = `${length}px`;
                line.style.left = `${x1}px`;
                line.style.top = `${y1}px`;
                line.style.transform = `rotate(${angle}deg)`;
                line.style.transformOrigin = '0 0';
                
                quantumCanvas.appendChild(line);
            }
        }
        
        // Event Listeners
        startBtn.addEventListener('click', () => {
            if (!simulationRunning) {
                simulationRunning = true;
                stepMode = false;
                startBtn.textContent = 'Running...';
                animateSimulation();
            }
        });
        
        stepBtn.addEventListener('click', () => {
            stepMode = true;
            animateSimulation();
        });
        
        resetBtn.addEventListener('click', () => {
            simulationRunning = false;
            stepMode = false;
            currentTime = 0;
            startBtn.textContent = 'Start Simulation';
            initVisualization();
            
            // Reset algorithm steps
            algorithmSteps.forEach(step => step.classList.remove('current-step'));
            algorithmSteps[0].classList.add('current-step');
        });
        
        // Initialize on load
        window.addEventListener('load', () => {
            initVisualization();
            
            // Animate quantum state appearance
            anime({
                targets: '.quantum-state',
                scale: [0, 1],
                opacity: [0, 1],
                rotate: [0, 45],
                delay: anime.stagger(150),
                duration: 1200,
                easing: 'easeOutElastic'
            });
        });
    </script>
    <style>
        .quantum-field {
            background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.1) 0%, transparent 50%),
                       radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%),
                       radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
            width: 100%;
            height: 100%;
            animation: fieldPulse 8s ease-in-out infinite;
        }
        
        @keyframes fieldPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }
        
        .entanglement-line {
            animation: entanglementPulse 2s ease-in-out infinite;
        }
        
        @keyframes entanglementPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }
        
        .quantum-state {
            transition: all 0.5s ease;
            box-shadow: 0 0 20px rgba(129, 140, 248, 0.3);
        }
        
        .quantum-state.active-state {
            box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
            animation: quantumGlow 1s ease-in-out;
        }
        
        @keyframes quantumGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); }
            50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); }
        }
    </style>
</body>
</html>