lonestar108/src-algorithm-visualizer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Quantum Entropy Minimizer</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>11 <style>12 body {13 background: linear-gradient(135deg, #0f172a, #1e293b);14 color: #f1f5f9;15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;16 }17 .hilbert-space {18 background: rgba(15, 23, 42, 0.7);19 border: 1px solid #334155;20 box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);21 }22 .prime-state {23 transition: all 0.5s ease;24 }25 .active-state {26 box-shadow: 0 0 15px #818cf8;27 transform: scale(1.1);28 }29 .resonance-path {30 stroke-dasharray: 1000;31 stroke-dashoffset: 1000;32 }33 .entropy-graph {34 background: rgba(30, 41, 59, 0.8);35 }36 .control-panel {37 background: rgba(15, 23, 42, 0.9);38 backdrop-filter: blur(10px);39 }40 .algorithm-step {41 transition: all 0.3s ease;42 }43 .current-step {44 background: rgba(99, 102, 241, 0.2);45 border-left: 3px solid #818cf8;46 }47 </style>48</head>49<body class="min-h-screen">50 <!-- Header -->51 <header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700">52 <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">53 <div>54 <h1 class="text-3xl font-bold text-indigo-300">Quantum Entropy Minimizer</h1>55 <p class="text-slate-400 mt-1">NP-Complete Problem Solver</p>56 </div>57 <div class="mt-4 md:mt-0 flex items-center space-x-4">58 <div class="bg-indigo-900/30 px-4 py-2 rounded-lg">59 <span class="text-indigo-300 font-mono">P = NP</span>60 </div>61 <div class="text-sm text-slate-400">62 Sebastian Schepis, 202563 </div>64 </div>65 </div>66 </header>67 68 <!-- Main Content -->69 <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">70 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">71 <!-- Visualization Panel -->72 <div class="lg:col-span-2">73 <div class="hilbert-space rounded-xl p-6">74 <div class="flex justify-between items-center mb-6">75 <h2 class="text-xl font-semibold text-indigo-200">Quantum State Space</h2>76 <div class="flex space-x-2">77 <button id="resetBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition-colors">78 Reset79 </button>80 <button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm transition-colors">81 Start Simulation82 </button>83 <button id="stepBtn" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm transition-colors">84 Step Forward85 </button>86 </div>87 </div>88 89 <!-- Quantum State Visualization -->90 <div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden">91 <div id="quantumCanvas" class="w-full h-full relative">92 <!-- Quantum states will be dynamically added here -->93 </div>94 95 <!-- Energy field background -->96 <div class="absolute inset-0 opacity-20 pointer-events-none">97 <div class="quantum-field"></div>98 </div>99 100 <!-- Connection lines -->101 <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">102 <defs>103 <linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%">104 <stop offset="0%" stop-color="#818cf8" />105 <stop offset="100%" stop-color="#4ade80" />106 </linearGradient>107 </defs>108 </svg>109 </div>110 111 <!-- System Status -->112 <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">113 <div class="bg-slate-800/50 p-4 rounded-lg">114 <div class="text-sm text-slate-400">Quantum State</div>115 <div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div>116 </div>117 <div class="bg-slate-800/50 p-4 rounded-lg">118 <div class="text-sm text-slate-400">Entropy</div>119 <div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div>120 </div>121 <div class="bg-slate-800/50 p-4 rounded-lg">122 <div class="text-sm text-slate-400">Energy Level</div>123 <div id="energyValue" class="text-lg font-mono text-yellow-300">E₀</div>124 </div>125 <div class="bg-slate-800/50 p-4 rounded-lg">126 <div class="text-sm text-slate-400">Iteration</div>127 <div id="timeStep" class="text-lg font-mono text-cyan-300">t = 0</div>128 </div>129 </div>130 </div>131 132 <!-- Entropy Graph -->133 <div class="hilbert-space rounded-xl p-6 mt-8">134 <h2 class="text-xl font-semibold text-indigo-200 mb-4">Convergence Metrics</h2>135 <div class="entropy-graph rounded-lg p-4 h-64">136 <canvas id="metricsChart" width="800" height="200"></canvas>137 </div>138 </div>139 </div>140 141 <!-- Control Panel -->142 <div class="control-panel rounded-xl p-6 h-fit">143 <h2 class="text-xl font-semibold text-indigo-200 mb-4">Algorithm Steps</h2>144 145 <div class="space-y-4">146 <div class="algorithm-step p-4 rounded-lg current-step" data-step="0">147 <div class="flex items-start">148 <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>149 <div class="ml-3">150 <h3 class="font-medium text-white">Quantum State Initialization</h3>151 <p class="mt-1 text-sm text-slate-400">Initialize quantum system with superposition of all possible solutions</p>152 </div>153 </div>154 </div>155 156 <div class="algorithm-step p-4 rounded-lg" data-step="1">157 <div class="flex items-start">158 <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>159 <div class="ml-3">160 <h3 class="font-medium text-white">Problem Encoding</h3>161 <p class="mt-1 text-sm text-slate-400">Map NP-complete problem constraints to quantum operators</p>162 </div>163 </div>164 </div>165 166 <div class="algorithm-step p-4 rounded-lg" data-step="2">167 <div class="flex items-start">168 <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>169 <div class="ml-3">170 <h3 class="font-medium text-white">Energy Landscape</h3>171 <p class="mt-1 text-sm text-slate-400">Define energy function that minimizes for valid solutions</p>172 </div>173 </div>174 </div>175 176 <div class="algorithm-step p-4 rounded-lg" data-step="3">177 <div class="flex items-start">178 <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>179 <div class="ml-3">180 <h3 class="font-medium text-white">Quantum Evolution</h3>181 <p class="mt-1 text-sm text-slate-400">Apply quantum gates and entanglement operations</p>182 </div>183 </div>184 </div>185 186 <div class="algorithm-step p-4 rounded-lg" data-step="4">187 <div class="flex items-start">188 <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>189 <div class="ml-3">190 <h3 class="font-medium text-white">Entropy Collapse</h3>191 <p class="mt-1 text-sm text-slate-400">System entropy decreases as solution emerges</p>192 </div>193 </div>194 </div>195 196 <div class="algorithm-step p-4 rounded-lg" data-step="5">197 <div class="flex items-start">198 <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>199 <div class="ml-3">200 <h3 class="font-medium text-white">Solution Extraction</h3>201 <p class="mt-1 text-sm text-slate-400">Measure collapsed state to obtain optimal solution</p>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Parameters -->208 <div class="mt-8">209 <h3 class="font-medium text-white mb-3">Quantum Parameters</h3>210 <div class="space-y-4">211 <div>212 <label class="block text-sm text-slate-400 mb-1">Qubits (n)</label>213 <input type="range" min="3" max="12" value="6" id="qubitCount" class="w-full">214 <div class="text-right text-sm text-slate-400" id="qubitCountValue">6</div>215 </div>216 <div>217 <label class="block text-sm text-slate-400 mb-1">Problem Complexity</label>218 <input type="range" min="1" max="10" value="5" id="complexity" class="w-full">219 <div class="text-right text-sm text-slate-400" id="complexityValue">5</div>220 </div>221 <div>222 <label class="block text-sm text-slate-400 mb-1">Entropy Decay (γ)</label>223 <input type="range" min="0.1" max="2" step="0.1" value="0.8" id="entropyDecay" class="w-full">224 <div class="text-right text-sm text-slate-400" id="entropyDecayValue">0.8</div>225 </div>226 <div>227 <label class="block text-sm text-slate-400 mb-1">Quantum Coherence</label>228 <input type="range" min="0.1" max="1" step="0.1" value="0.7" id="coherence" class="w-full">229 <div class="text-right text-sm text-slate-400" id="coherenceValue">0.7</div>230 </div>231 </div>232 </div>233 </div>234 </div>235 236 <!-- Explanation Section -->237 <div class="mt-12 hilbert-space rounded-xl p-8">238 <h2 class="text-2xl font-bold text-indigo-200 mb-6">Quantum Entropy Minimization</h2>239 240 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">241 <div>242 <h3 class="text-lg font-semibold text-white mb-3">Quantum Computing Approach</h3>243 <p class="text-slate-300 mb-4">244 Our quantum entropy minimization algorithm leverages superposition and entanglement to explore 245 solution spaces exponentially faster than classical approaches. By encoding NP-complete problems 246 as quantum states, we can efficiently navigate the solution landscape.247 </p>248 <p class="text-slate-300">249 The system evolves through quantum gates that progressively reduce entropy while preserving 250 valid solution amplitudes, ultimately collapsing to the optimal configuration.251 </p>252 </div>253 254 <div>255 <h3 class="text-lg font-semibold text-white mb-3">Algorithm Advantages</h3>256 <ul class="space-y-2 text-slate-300">257 <li class="flex items-start">258 <i data-feather="zap" class="text-yellow-400 mt-1 mr-2 flex-shrink-0"></i>259 <span>Exponential speedup over classical computation</span>260 </li>261 <li class="flex items-start">262 <i data-feather="activity" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>263 <span>Natural avoidance of local minima through quantum tunneling</span>264 </li>265 <li class="flex items-start">266 <i data-feather="trending-down" class="text-blue-400 mt-1 mr-2 flex-shrink-0"></i>267 <span>Guaranteed entropy reduction in polynomial time</span>268 </li>269 <li class="flex items-start">270 <i data-feather="cpu" class="text-purple-400 mt-1 mr-2 flex-shrink-0"></i>271 <span>Scalable to large-scale optimization problems</span>272 </li>273 </ul>274 </div>275 </div>276 </div>277 </main>278 279 <script>280 // Initialize Feather Icons281 feather.replace();282 283 // DOM Elements284 const quantumCanvas = document.getElementById('quantumCanvas');285 const metricsChart = document.getElementById('metricsChart').getContext('2d');286 const currentStateEl = document.getElementById('currentState');287 const entropyValueEl = document.getElementById('entropyValue');288 const energyValueEl = document.getElementById('energyValue');289 const timeStepEl = document.getElementById('timeStep');290 const startBtn = document.getElementById('startBtn');291 const resetBtn = document.getElementById('resetBtn');292 const stepBtn = document.getElementById('stepBtn');293 const qubitCount = document.getElementById('qubitCount');294 const complexity = document.getElementById('complexity');295 const entropyDecay = document.getElementById('entropyDecay');296 const coherence = document.getElementById('coherence');297 const qubitCountValue = document.getElementById('qubitCountValue');298 const complexityValue = document.getElementById('complexityValue');299 const entropyDecayValue = document.getElementById('entropyDecayValue');300 const coherenceValue = document.getElementById('coherenceValue');301 const algorithmSteps = document.querySelectorAll('.algorithm-step');302 303 // Simulation state304 let simulationRunning = false;305 let currentTime = 0;306 let entropyData = [];307 let energyData = [];308 let currentState = '|Ψ₀⟩';309 let quantumStates = [];310 let animationTimeline = null;311 let stepMode = false;312 313 // Update parameter displays314 qubitCount.addEventListener('input', () => {315 qubitCountValue.textContent = qubitCount.value;316 initVisualization();317 });318 319 complexity.addEventListener('input', () => {320 complexityValue.textContent = complexity.value;321 });322 323 entropyDecay.addEventListener('input', () => {324 entropyDecayValue.textContent = entropyDecay.value;325 });326 327 coherence.addEventListener('input', () => {328 coherenceValue.textContent = coherence.value;329 });330 331 // Initialize visualization332 function initVisualization() {333 quantumCanvas.innerHTML = '';334 quantumStates = [];335 336 const n = parseInt(qubitCount.value);337 const positions = generateQuantumPositions(n);338 339 for (let i = 0; i < n; i++) {340 const state = document.createElement('div');341 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';342 state.style.left = `${positions[i].x}%`;343 state.style.top = `${positions[i].y}%`;344 state.style.transform = 'rotate(45deg)';345 state.innerHTML = `<div class="transform -rotate-45">|q<sub>${i}</sub>⟩</div>`;346 state.dataset.index = i;347 348 quantumCanvas.appendChild(state);349 quantumStates.push(state);350 }351 352 // Reset state displays353 currentStateEl.textContent = '|Ψ₀⟩';354 entropyValueEl.textContent = 'S₀';355 energyValueEl.textContent = 'E₀';356 timeStepEl.textContent = 't = 0';357 entropyData = [{time: 0, entropy: 100}];358 energyData = [{time: 0, energy: 85}];359 drawMetricsChart();360 }361 362 // Generate positions for quantum states in a circular pattern363 function generateQuantumPositions(n) {364 const positions = [];365 const centerX = 50;366 const centerY = 50;367 const radius = 35;368 369 for (let i = 0; i < n; i++) {370 const angle = (i / n) * 2 * Math.PI;371 positions.push({372 x: centerX + radius * Math.cos(angle),373 y: centerY + radius * Math.sin(angle)374 });375 }376 return positions;377 }378 379 // Draw metrics convergence chart380 function drawMetricsChart() {381 metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height);382 383 if (entropyData.length === 0) return;384 385 // Draw grid386 metricsChart.strokeStyle = '#334155';387 metricsChart.lineWidth = 1;388 389 // Vertical grid lines390 for (let i = 0; i <= 10; i++) {391 const x = (i / 10) * metricsChart.canvas.width;392 metricsChart.beginPath();393 metricsChart.moveTo(x, 0);394 metricsChart.lineTo(x, metricsChart.canvas.height);395 metricsChart.stroke();396 }397 398 // Horizontal grid lines399 for (let i = 0; i <= 5; i++) {400 const y = (i / 5) * metricsChart.canvas.height;401 metricsChart.beginPath();402 metricsChart.moveTo(0, y);403 metricsChart.lineTo(metricsChart.canvas.width, y);404 metricsChart.stroke();405 }406 407 // Draw entropy curve408 metricsChart.strokeStyle = '#4ade80';409 metricsChart.lineWidth = 3;410 metricsChart.beginPath();411 412 for (let i = 0; i < entropyData.length; i++) {413 const x = (entropyData[i].time / 100) * metricsChart.canvas.width;414 const y = metricsChart.canvas.height - (entropyData[i].entropy / 100) * metricsChart.canvas.height;415 416 if (i === 0) {417 metricsChart.moveTo(x, y);418 } else {419 metricsChart.lineTo(x, y);420 }421 }422 metricsChart.stroke();423 424 // Draw energy curve425 metricsChart.strokeStyle = '#f59e0b';426 metricsChart.lineWidth = 3;427 metricsChart.beginPath();428 429 for (let i = 0; i < energyData.length; i++) {430 const x = (energyData[i].time / 100) * metricsChart.canvas.width;431 const y = metricsChart.canvas.height - (energyData[i].energy / 100) * metricsChart.canvas.height;432 433 if (i === 0) {434 metricsChart.moveTo(x, y);435 } else {436 metricsChart.lineTo(x, y);437 }438 }439 metricsChart.stroke();440 }441 442 // Animate the simulation443 function animateSimulation() {444 if (!simulationRunning && !stepMode) return;445 446 currentTime++;447 timeStepEl.textContent = `t = ${currentTime}`;448 449 // Update metrics450 const newEntropy = Math.max(0, 100 - currentTime * 4);451 const newEnergy = Math.max(5, 85 - currentTime * 3.2);452 entropyValueEl.textContent = `S = ${newEntropy.toFixed(1)}`;453 energyValueEl.textContent = `E = ${newEnergy.toFixed(1)}`;454 entropyData.push({time: currentTime, entropy: newEntropy});455 energyData.push({time: currentTime, energy: newEnergy});456 drawMetricsChart();457 458 // Animate quantum states with quantum effects459 quantumStates.forEach((state, index) => {460 const phase = (currentTime + index) % 6;461 462 // Quantum oscillation effect463 anime({464 targets: state,465 scale: [1, 1.15, 1],466 rotate: [45, 50, 45],467 backgroundColor: [468 state.style.backgroundColor,469 `rgba(139, 92, 246, 0.9)`,470 state.style.backgroundColor471 ],472 duration: 1200,473 easing: 'easeInOutQuad'474 });475 476 // Add quantum glow effect477 state.classList.add('active-state');478 setTimeout(() => {479 state.classList.remove('active-state');480 }, 800);481 });482 483 // Add entanglement lines between states484 updateEntanglementLines();485 486 // Update current state487 if (currentTime < 8) {488 currentStateEl.textContent = '|Ψ(t)⟩';489 } else if (currentTime < 18) {490 currentStateEl.textContent = '|Ψ*⟩';491 algorithmSteps.forEach(step => step.classList.remove('current-step'));492 algorithmSteps[5].classList.add('current-step');493 }494 495 // Update algorithm steps496 if (currentTime >= 3 && currentTime < 8) {497 algorithmSteps.forEach(step => step.classList.remove('current-step'));498 algorithmSteps[3].classList.add('current-step');499 } else if (currentTime >= 8 && currentTime < 15) {500 algorithmSteps.forEach(step => step.classList.remove('current-step'));501 algorithmSteps[4].classList.add('current-step');502 }503 504 // Continue animation or stop505 if (currentTime < 25 && !stepMode) {506 setTimeout(animateSimulation, 700);507 } else {508 if (!stepMode) {509 simulationRunning = false;510 startBtn.textContent = 'Restart Simulation';511 } else {512 stepMode = false;513 }514 }515 }516 517 // Update quantum entanglement visualization518 function updateEntanglementLines() {519 // Clear existing lines520 const existingLines = quantumCanvas.querySelectorAll('.entanglement-line');521 existingLines.forEach(line => line.remove());522 523 // Create new entanglement lines between adjacent states524 for (let i = 0; i < quantumStates.length - 1; i++) {525 const line = document.createElement('div');526 line.className = 'entanglement-line absolute h-0.5 bg-gradient-to-r from-indigo-400 to-purple-400 opacity-60';527 528 const rect1 = quantumStates[i].getBoundingClientRect();529 const rect2 = quantumStates[i + 1].getBoundingClientRect();530 const containerRect = quantumCanvas.getBoundingClientRect();531 532 const x1 = rect1.left + rect1.width/2 - containerRect.left;533 const y1 = rect1.top + rect1.height/2 - containerRect.top;534 const x2 = rect2.left + rect2.width/2 - containerRect.left;535 const y2 = rect2.top + rect2.height/2 - containerRect.top;536 537 const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));538 const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;539 540 line.style.width = `${length}px`;541 line.style.left = `${x1}px`;542 line.style.top = `${y1}px`;543 line.style.transform = `rotate(${angle}deg)`;544 line.style.transformOrigin = '0 0';545 546 quantumCanvas.appendChild(line);547 }548 }549 550 // Event Listeners551 startBtn.addEventListener('click', () => {552 if (!simulationRunning) {553 simulationRunning = true;554 stepMode = false;555 startBtn.textContent = 'Running...';556 animateSimulation();557 }558 });559 560 stepBtn.addEventListener('click', () => {561 stepMode = true;562 animateSimulation();563 });564 565 resetBtn.addEventListener('click', () => {566 simulationRunning = false;567 stepMode = false;568 currentTime = 0;569 startBtn.textContent = 'Start Simulation';570 initVisualization();571 572 // Reset algorithm steps573 algorithmSteps.forEach(step => step.classList.remove('current-step'));574 algorithmSteps[0].classList.add('current-step');575 });576 577 // Initialize on load578 window.addEventListener('load', () => {579 initVisualization();580 581 // Animate quantum state appearance582 anime({583 targets: '.quantum-state',584 scale: [0, 1],585 opacity: [0, 1],586 rotate: [0, 45],587 delay: anime.stagger(150),588 duration: 1200,589 easing: 'easeOutElastic'590 });591 });592 </script>593 <style>594 .quantum-field {595 background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.1) 0%, transparent 50%),596 radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%),597 radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);598 width: 100%;599 height: 100%;600 animation: fieldPulse 8s ease-in-out infinite;601 }602 603 @keyframes fieldPulse {604 0%, 100% { opacity: 0.3; }605 50% { opacity: 0.6; }606 }607 608 .entanglement-line {609 animation: entanglementPulse 2s ease-in-out infinite;610 }611 612 @keyframes entanglementPulse {613 0%, 100% { opacity: 0.3; }614 50% { opacity: 0.8; }615 }616 617 .quantum-state {618 transition: all 0.5s ease;619 box-shadow: 0 0 20px rgba(129, 140, 248, 0.3);620 }621 622 .quantum-state.active-state {623 box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);624 animation: quantumGlow 1s ease-in-out;625 }626 627 @keyframes quantumGlow {628 0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); }629 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); }630 }631 </style>632</body>633</html>634