Hugging Face's logo

Spaces:
lonestar108
/
src-algorithm-visualizer
Running

App Files Community
lonestar108 commited on
Commit
68db0a2
·
verified ·
1 Parent(s): b52142a

different and better

Browse files
Files changed (1) hide show
  1. index.html +290 -137
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SRC Algorithm Visualizer</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>
@@ -51,8 +51,8 @@
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">Symbolic Resonance Collapse</h1>
55
- <p class="text-slate-400 mt-1">Visualization of P = NP Proof</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">
@@ -72,33 +72,46 @@
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">Prime-Encoded Hilbert 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">
78
  Reset
79
  </button>
80
- <button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm">
81
  Start Simulation
82
  </button>
 
 
 
83
  </div>
84
  </div>
85
 
86
- <!-- Hilbert Space Visualization -->
87
  <div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden">
88
- <div id="hilbertCanvas" class="w-full h-full relative">
89
- <!-- Prime states will be dynamically added here -->
 
 
 
 
 
90
  </div>
91
 
92
- <!-- Resonance path -->
93
  <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">
94
- <path id="resonancePath" class="resonance-path" fill="none" stroke="#818cf8" stroke-width="2"></path>
 
 
 
 
 
95
  </svg>
96
  </div>
97
 
98
  <!-- System Status -->
99
- <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
100
  <div class="bg-slate-800/50 p-4 rounded-lg">
101
- <div class="text-sm text-slate-400">Current State</div>
102
  <div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div>
103
  </div>
104
  <div class="bg-slate-800/50 p-4 rounded-lg">
@@ -106,17 +119,21 @@
106
  <div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div>
107
  </div>
108
  <div class="bg-slate-800/50 p-4 rounded-lg">
109
- <div class="text-sm text-slate-400">Time Step</div>
110
- <div id="timeStep" class="text-lg font-mono text-yellow-300">t = 0</div>
 
 
 
 
111
  </div>
112
  </div>
113
  </div>
114
 
115
  <!-- Entropy Graph -->
116
  <div class="hilbert-space rounded-xl p-6 mt-8">
117
- <h2 class="text-xl font-semibold text-indigo-200 mb-4">Entropy Convergence</h2>
118
  <div class="entropy-graph rounded-lg p-4 h-64">
119
- <canvas id="entropyChart" width="800" height="200"></canvas>
120
  </div>
121
  </div>
122
  </div>
@@ -130,8 +147,8 @@
130
  <div class="flex items-start">
131
  <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>
132
  <div class="ml-3">
133
- <h3 class="font-medium text-white">Prime-Encoded Hilbert Space</h3>
134
- <p class="mt-1 text-sm text-slate-400">Define HP over prime-number eigenstates |p⟩ for Boolean variables</p>
135
  </div>
136
  </div>
137
  </div>
@@ -140,8 +157,8 @@
140
  <div class="flex items-start">
141
  <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>
142
  <div class="ml-3">
143
- <h3 class="font-medium text-white">SAT Representation</h3>
144
- <p class="mt-1 text-sm text-slate-400">Encode SAT instance Φ into symbolic state |Ψ₀⟩ ∈ H⊗nP</p>
145
  </div>
146
  </div>
147
  </div>
@@ -150,8 +167,8 @@
150
  <div class="flex items-start">
151
  <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>
152
  <div class="ml-3">
153
- <h3 class="font-medium text-white">Symbolic Operators</h3>
154
- <p class="mt-1 text-sm text-slate-400">Define Hamiltonian ĤΦ and Resonance Operator R̂</p>
155
  </div>
156
  </div>
157
  </div>
@@ -160,8 +177,8 @@
160
  <div class="flex items-start">
161
  <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>
162
  <div class="ml-3">
163
- <h3 class="font-medium text-white">System Evolution</h3>
164
- <p class="mt-1 text-sm text-slate-400">Evolve |Ψ(t)⟩ using symbolic Schrödinger equation</p>
165
  </div>
166
  </div>
167
  </div>
@@ -170,8 +187,8 @@
170
  <div class="flex items-start">
171
  <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>
172
  <div class="ml-3">
173
- <h3 class="font-medium text-white">Entropy Minimization</h3>
174
- <p class="mt-1 text-sm text-slate-400">S(t) decreases as system approaches stable state</p>
175
  </div>
176
  </div>
177
  </div>
@@ -180,8 +197,8 @@
180
  <div class="flex items-start">
181
  <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>
182
  <div class="ml-3">
183
- <h3 class="font-medium text-white">Polynomial Convergence</h3>
184
- <p class="mt-1 text-sm text-slate-400">System reaches |Ψ*⟩ in O(nᵏ) symbolic time</p>
185
  </div>
186
  </div>
187
  </div>
@@ -189,22 +206,27 @@
189
 
190
  <!-- Parameters -->
191
  <div class="mt-8">
192
- <h3 class="font-medium text-white mb-3">Simulation Parameters</h3>
193
  <div class="space-y-4">
194
  <div>
195
- <label class="block text-sm text-slate-400 mb-1">Variables (n)</label>
196
- <input type="range" min="3" max="10" value="5" id="varCount" class="w-full">
197
- <div class="text-right text-sm text-slate-400" id="varCountValue">5</div>
 
 
 
 
 
198
  </div>
199
  <div>
200
- <label class="block text-sm text-slate-400 mb-1">Clauses (m)</label>
201
- <input type="range" min="3" max="15" value="7" id="clauseCount" class="w-full">
202
- <div class="text-right text-sm text-slate-400" id="clauseCountValue">7</div>
203
  </div>
204
  <div>
205
- <label class="block text-sm text-slate-400 mb-1">Decay Constant (λ)</label>
206
- <input type="range" min="0.1" max="2" step="0.1" value="0.5" id="decayConstant" class="w-full">
207
- <div class="text-right text-sm text-slate-400" id="decayValue">0.5</div>
208
  </div>
209
  </div>
210
  </div>
@@ -213,40 +235,40 @@
213
 
214
  <!-- Explanation Section -->
215
  <div class="mt-12 hilbert-space rounded-xl p-8">
216
- <h2 class="text-2xl font-bold text-indigo-200 mb-6">How Symbolic Resonance Collapse Works</h2>
217
 
218
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
219
  <div>
220
- <h3 class="text-lg font-semibold text-white mb-3">The Framework</h3>
221
  <p class="text-slate-300 mb-4">
222
- The SRC framework redefines computation as an entropic resonance process in a quantum-inspired
223
- Hilbert space over prime-number eigenstates. Instead of combinatorial search, NP-complete problems
224
- converge to solution states through entropy-driven alignment.
225
  </p>
226
  <p class="text-slate-300">
227
- SAT instances are modeled as symbolic wavefunctions undergoing entropy minimization, with clause
228
- interactions acting as quantum-like operators in a resonance field.
229
  </p>
230
  </div>
231
 
232
  <div>
233
- <h3 class="text-lg font-semibold text-white mb-3">Key Insights</h3>
234
  <ul class="space-y-2 text-slate-300">
235
  <li class="flex items-start">
236
- <i data-feather="check-circle" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>
237
- <span>Computation as coherence alignment rather than enumeration</span>
238
  </li>
239
  <li class="flex items-start">
240
- <i data-feather="check-circle" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>
241
- <span>Polynomial convergence through symbolic gradient descent</span>
242
  </li>
243
  <li class="flex items-start">
244
- <i data-feather="check-circle" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>
245
- <span>Entropy minimization drives system to stable states</span>
246
  </li>
247
  <li class="flex items-start">
248
- <i data-feather="check-circle" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i>
249
- <span>No local minima for satisfiable instances</span>
250
  </li>
251
  </ul>
252
  </div>
@@ -259,185 +281,269 @@
259
  feather.replace();
260
 
261
  // DOM Elements
262
- const hilbertCanvas = document.getElementById('hilbertCanvas');
263
- const entropyChart = document.getElementById('entropyChart').getContext('2d');
264
  const currentStateEl = document.getElementById('currentState');
265
  const entropyValueEl = document.getElementById('entropyValue');
 
266
  const timeStepEl = document.getElementById('timeStep');
267
  const startBtn = document.getElementById('startBtn');
268
  const resetBtn = document.getElementById('resetBtn');
269
- const varCount = document.getElementById('varCount');
270
- const clauseCount = document.getElementById('clauseCount');
271
- const decayConstant = document.getElementById('decayConstant');
272
- const varCountValue = document.getElementById('varCountValue');
273
- const clauseCountValue = document.getElementById('clauseCountValue');
274
- const decayValue = document.getElementById('decayValue');
 
 
 
275
  const algorithmSteps = document.querySelectorAll('.algorithm-step');
276
 
277
  // Simulation state
278
  let simulationRunning = false;
279
  let currentTime = 0;
280
  let entropyData = [];
 
281
  let currentState = '|Ψ₀⟩';
282
- let primeStates = [];
283
  let animationTimeline = null;
 
284
 
285
  // Update parameter displays
286
- varCount.addEventListener('input', () => {
287
- varCountValue.textContent = varCount.value;
 
 
 
 
 
288
  });
289
 
290
- clauseCount.addEventListener('input', () => {
291
- clauseCountValue.textContent = clauseCount.value;
292
  });
293
 
294
- decayConstant.addEventListener('input', () => {
295
- decayValue.textContent = decayConstant.value;
296
  });
297
 
298
  // Initialize visualization
299
  function initVisualization() {
300
- hilbertCanvas.innerHTML = '';
301
- primeStates = [];
302
 
303
- // Create prime-number eigenstates
304
- const primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];
305
- const n = parseInt(varCount.value);
306
 
307
  for (let i = 0; i < n; i++) {
308
- const prime = primes[i];
309
  const state = document.createElement('div');
310
- state.className = 'prime-state absolute w-16 h-16 rounded-full flex items-center justify-center text-white font-bold border-2 border-indigo-400';
311
- state.style.left = `${20 + (i % 3) * 30}%`;
312
- state.style.top = `${20 + Math.floor(i / 3) * 30}%`;
313
- state.style.backgroundColor = `rgba(${50 + i * 20}, ${60 + i * 15}, ${200 + i * 5}, 0.7)`;
314
- state.textContent = `|${prime}⟩`;
315
- state.dataset.prime = prime;
316
  state.dataset.index = i;
317
 
318
- hilbertCanvas.appendChild(state);
319
- primeStates.push(state);
320
  }
321
 
322
  // Reset state displays
323
  currentStateEl.textContent = '|Ψ₀⟩';
324
  entropyValueEl.textContent = 'S₀';
 
325
  timeStepEl.textContent = 't = 0';
326
  entropyData = [{time: 0, entropy: 100}];
327
- drawEntropyChart();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
  }
329
 
330
- // Draw entropy convergence chart
331
- function drawEntropyChart() {
332
- entropyChart.clearRect(0, 0, entropyChart.canvas.width, entropyChart.canvas.height);
333
 
334
  if (entropyData.length === 0) return;
335
 
336
  // Draw grid
337
- entropyChart.strokeStyle = '#334155';
338
- entropyChart.lineWidth = 1;
339
 
340
  // Vertical grid lines
341
  for (let i = 0; i <= 10; i++) {
342
- const x = (i / 10) * entropyChart.canvas.width;
343
- entropyChart.beginPath();
344
- entropyChart.moveTo(x, 0);
345
- entropyChart.lineTo(x, entropyChart.canvas.height);
346
- entropyChart.stroke();
347
  }
348
 
349
  // Horizontal grid lines
350
  for (let i = 0; i <= 5; i++) {
351
- const y = (i / 5) * entropyChart.canvas.height;
352
- entropyChart.beginPath();
353
- entropyChart.moveTo(0, y);
354
- entropyChart.lineTo(entropyChart.canvas.width, y);
355
- entropyChart.stroke();
356
  }
357
 
358
  // Draw entropy curve
359
- entropyChart.strokeStyle = '#4ade80';
360
- entropyChart.lineWidth = 3;
361
- entropyChart.beginPath();
362
 
363
  for (let i = 0; i < entropyData.length; i++) {
364
- const x = (entropyData[i].time / 100) * entropyChart.canvas.width;
365
- const y = entropyChart.canvas.height - (entropyData[i].entropy / 100) * entropyChart.canvas.height;
366
 
367
  if (i === 0) {
368
- entropyChart.moveTo(x, y);
369
  } else {
370
- entropyChart.lineTo(x, y);
371
  }
372
  }
 
 
 
 
 
 
373
 
374
- entropyChart.stroke();
 
 
 
 
 
 
 
 
 
 
375
  }
376
 
377
  // Animate the simulation
378
  function animateSimulation() {
379
- if (!simulationRunning) return;
380
 
381
  currentTime++;
382
  timeStepEl.textContent = `t = ${currentTime}`;
383
 
384
- // Update entropy
385
- const newEntropy = Math.max(0, 100 - currentTime * 5);
386
- entropyValueEl.textContent = `S(t) = ${newEntropy.toFixed(1)}`;
 
 
387
  entropyData.push({time: currentTime, entropy: newEntropy});
388
- drawEntropyChart();
 
389
 
390
- // Animate prime states
391
- primeStates.forEach((state, index) => {
392
- // Simulate phase changes
393
- const phase = (currentTime + index) % 4;
394
- const phases = ['0', 'π/2', 'π', '3π/2'];
395
 
396
- // Update visual state
397
  anime({
398
  targets: state,
399
- scale: [1, 1.1, 1],
 
400
  backgroundColor: [
401
  state.style.backgroundColor,
402
- `rgba(${100 + index * 15}, ${120 + index * 10}, ${220 + index * 5}, 0.9)`,
403
  state.style.backgroundColor
404
  ],
405
- duration: 1000,
406
  easing: 'easeInOutQuad'
407
  });
408
 
409
- // Add active class temporarily
410
  state.classList.add('active-state');
411
  setTimeout(() => {
412
  state.classList.remove('active-state');
413
- }, 1000);
414
  });
415
 
 
 
 
416
  // Update current state
417
- if (currentTime < 10) {
418
  currentStateEl.textContent = '|Ψ(t)⟩';
419
- } else if (currentTime < 20) {
420
  currentStateEl.textContent = '|Ψ*⟩';
421
- // Highlight final step
422
  algorithmSteps.forEach(step => step.classList.remove('current-step'));
423
  algorithmSteps[5].classList.add('current-step');
424
  }
425
 
426
  // Update algorithm steps
427
- if (currentTime >= 5 && currentTime < 10) {
428
  algorithmSteps.forEach(step => step.classList.remove('current-step'));
429
  algorithmSteps[3].classList.add('current-step');
430
- } else if (currentTime >= 10 && currentTime < 15) {
431
  algorithmSteps.forEach(step => step.classList.remove('current-step'));
432
  algorithmSteps[4].classList.add('current-step');
433
  }
434
 
435
  // Continue animation or stop
436
- if (currentTime < 25) {
437
- setTimeout(animateSimulation, 800);
438
  } else {
439
- simulationRunning = false;
440
- startBtn.textContent = 'Restart Simulation';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
441
  }
442
  }
443
 
@@ -445,13 +551,20 @@
445
  startBtn.addEventListener('click', () => {
446
  if (!simulationRunning) {
447
  simulationRunning = true;
 
448
  startBtn.textContent = 'Running...';
449
  animateSimulation();
450
  }
451
  });
452
 
 
 
 
 
 
453
  resetBtn.addEventListener('click', () => {
454
  simulationRunning = false;
 
455
  currentTime = 0;
456
  startBtn.textContent = 'Start Simulation';
457
  initVisualization();
@@ -465,16 +578,56 @@
465
  window.addEventListener('load', () => {
466
  initVisualization();
467
 
468
- // Animate introduction
469
  anime({
470
- targets: '.prime-state',
471
  scale: [0, 1],
472
  opacity: [0, 1],
473
- delay: anime.stagger(200),
474
- duration: 1000,
 
475
  easing: 'easeOutElastic'
476
  });
477
  });
478
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
  </body>
480
  </html>
 
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>
 
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">
 
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
  Reset
79
  </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 Simulation
82
  </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 Forward
85
+ </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">
 
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>
 
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>
 
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>
 
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>
 
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>
 
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>
 
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>
 
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>
 
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>
 
281
  feather.replace();
282
 
283
  // DOM Elements
284
+ 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 state
304
  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 displays
314
+ 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 visualization
332
  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 displays
353
  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 pattern
363
+ 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 chart
380
+ function drawMetricsChart() {
381
+ metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height);
382
 
383
  if (entropyData.length === 0) return;
384
 
385
  // Draw grid
386
+ metricsChart.strokeStyle = '#334155';
387
+ metricsChart.lineWidth = 1;
388
 
389
  // Vertical grid lines
390
  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 lines
399
  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 curve
408
+ 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 curve
425
+ 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 simulation
443
  function animateSimulation() {
444
+ if (!simulationRunning && !stepMode) return;
445
 
446
  currentTime++;
447
  timeStepEl.textContent = `t = ${currentTime}`;
448
 
449
+ // Update metrics
450
+ 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 effects
459
+ quantumStates.forEach((state, index) => {
460
+ const phase = (currentTime + index) % 6;
 
 
461
 
462
+ // Quantum oscillation effect
463
  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.backgroundColor
471
  ],
472
+ duration: 1200,
473
  easing: 'easeInOutQuad'
474
  });
475
 
476
+ // Add quantum glow effect
477
  state.classList.add('active-state');
478
  setTimeout(() => {
479
  state.classList.remove('active-state');
480
+ }, 800);
481
  });
482
 
483
+ // Add entanglement lines between states
484
+ updateEntanglementLines();
485
+
486
  // Update current state
487
+ 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 steps
496
+ 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 stop
505
+ 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 visualization
518
+ function updateEntanglementLines() {
519
+ // Clear existing lines
520
+ const existingLines = quantumCanvas.querySelectorAll('.entanglement-line');
521
+ existingLines.forEach(line => line.remove());
522
+
523
+ // Create new entanglement lines between adjacent states
524
+ 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
 
 
551
  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();
 
578
  window.addEventListener('load', () => {
579
  initVisualization();
580
 
581
+ // Animate quantum state appearance
582
  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>