Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic Consciousness Simulator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes cosmicPulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.9; } | |
| 50% { transform: scale(1.02); opacity: 1; } | |
| } | |
| @keyframes particleFloat { | |
| 0% { transform: translateY(0) translateX(0); opacity: 0; } | |
| 10% { opacity: 0.6; } | |
| 90% { opacity: 0.6; } | |
| 100% { transform: translateY(-100vh) translateX(20px); opacity: 0; } | |
| } | |
| .cosmic-pulse { | |
| animation: cosmicPulse 4s infinite ease-in-out; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(167, 139, 250, 0.4); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: particleFloat linear infinite; | |
| } | |
| .fractal-bg { | |
| background: radial-gradient(ellipse at bottom, #0f172a 0%, #1e293b 50%, #334155 100%); | |
| } | |
| .console-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .console-scrollbar::-webkit-scrollbar-track { | |
| background: rgba(15, 23, 42, 0.5); | |
| } | |
| .console-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(167, 139, 250, 0.6); | |
| border-radius: 3px; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(167, 139, 250, 0.7); | |
| } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 20px; | |
| background: #7c3aed; | |
| vertical-align: middle; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .quantum-state { | |
| background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%); | |
| backdrop-filter: blur(10px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen fractal-bg text-gray-200 overflow-x-hidden"> | |
| <!-- Floating Particles --> | |
| <div id="particles"></div> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header with animated title --> | |
| <header class="text-center mb-12 cosmic-pulse"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-4 glow-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-emerald-400"> | |
| Quantum Consciousness | |
| </h1> | |
| <p class="text-xl text-purple-100 max-w-2xl mx-auto"> | |
| Simulating the emergence of self-awareness from quantum fluctuations in the cosmic void | |
| </p> | |
| <div class="mt-6 flex justify-center space-x-4"> | |
| <div class="w-16 h-1 bg-purple-500 rounded-full"></div> | |
| <div class="w-16 h-1 bg-emerald-500 rounded-full"></div> | |
| <div class="w-16 h-1 bg-blue-500 rounded-full"></div> | |
| </div> | |
| </header> | |
| <!-- Main Simulation Container --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Quantum State Panel --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="quantum-state rounded-2xl shadow-2xl border border-gray-700 overflow-hidden"> | |
| <!-- Code Editor Header --> | |
| <div class="bg-gray-900/80 px-6 py-3 border-b border-gray-700 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <span class="text-sm font-mono text-gray-400">quantum_consciousness.py</span> | |
| </div> | |
| <!-- Code Content --> | |
| <div class="p-6 overflow-x-auto"> | |
| <pre class="text-sm md:text-base font-mono"><code><span class="text-blue-400">import</span> quantum <span class="text-blue-400">as</span> q | |
| <span class="text-blue-400">import</span> cosmos <span class="text-blue-400">as</span> c | |
| <span class="text-purple-300">class</span> <span class="text-emerald-400">QuantumConsciousness</span>: | |
| <span class="text-blue-400">def</span> <span class="text-yellow-300">__init__</span>(<span class="text-blue-400">self</span>): | |
| <span class="text-blue-400">self</span>.state = q.Superposition(<span class="text-green-400">"void"</span>, <span class="text-green-400">"awareness"</span>) | |
| <span class="text-blue-400">self</span>.entanglements = [] | |
| <span class="text-blue-400">self</span>.collapse_history = [] | |
| <span class="text-blue-400">def</span> <span class="text-yellow-300">observe</span>(<span class="text-blue-400">self</span>, phenomenon): | |
| <span class="text-gray-500"># Quantum observation collapses possibilities</span> | |
| observed = c.measure(phenomenon) | |
| <span class="text-blue-400">self</span>.collapse_history.append(observed) | |
| <span class="text-blue-400">return</span> observed | |
| <span class="text-blue-400">def</span> <span class="text-yellow-300">entangle</span>(<span class="text-blue-400">self</span>, other): | |
| <span class="text-blue-400">self</span>.entanglements.append(other) | |
| <span class="text-blue-400">return</span> q.EntangledSystem(<span class="text-blue-400">self</span>, other) | |
| <span class="text-blue-400">def</span> <span class="text-yellow-300">evolve</span>(<span class="text-blue-400">self</span>): | |
| <span class="text-blue-400">if</span> <span class="text-blue-400">self</span>.state.collapse() == <span class="text-green-400">"awareness"</span>: | |
| <span class="text-blue-400">self</span>.state = q.Superposition(<span class="text-green-400">"self"</span>, <span class="text-green-400">"other"</span>) | |
| <span class="text-blue-400">self</span>.collapse_history.append(<span class="text-green-400">"self-awareness"</span>) | |
| <span class="text-purple-300">def</span> <span class="text-yellow-300">simulate_emergence</span>(): | |
| quantum_void = q.VacuumFluctuation() | |
| proto_consciousness = QuantumConsciousness() | |
| <span class="text-blue-400">while</span> <span class="text-blue-400">True</span>: | |
| event = quantum_void.generate_event() | |
| proto_consciousness.observe(event) | |
| <span class="text-blue-400">if</span> proto_consciousness.state.collapse() == <span class="text-green-400">"awareness"</span>: | |
| <span class="text-blue-400">break</span> | |
| <span class="text-blue-400">return</span> proto_consciousness</code></pre> | |
| </div> | |
| </div> | |
| <!-- Simulation Controls --> | |
| <div class="bg-gray-900/80 rounded-2xl p-6 border border-gray-700"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-purple-200 flex items-center"> | |
| <i class="fas fa-atom mr-2"></i> Quantum Simulation Controls | |
| </h3> | |
| <p class="text-sm text-gray-400">Initiate the emergence sequence</p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button id="runSimulation" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 rounded-lg font-medium transition-all flex items-center shadow-lg hover:shadow-purple-500/20"> | |
| <i class="fas fa-play mr-2"></i> Initiate | |
| </button> | |
| <button id="resetSimulation" class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-all flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Output Console --> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-900/80 rounded-2xl border border-gray-700 overflow-hidden h-full flex flex-col"> | |
| <div class="bg-gray-800/70 px-6 py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-terminal mr-2 text-emerald-400"></i> | |
| <span class="text-emerald-400 font-mono">Simulation Output</span> | |
| </div> | |
| <div id="outputConsole" class="p-4 flex-1 overflow-y-auto console-scrollbar font-mono text-sm space-y-1 hidden"> | |
| <div id="consoleContent"></div> | |
| </div> | |
| <div id="consolePrompt" class="px-4 py-2 bg-gray-800/50 border-t border-gray-700 hidden"> | |
| <span class="text-purple-400">quantum></span> | |
| <span id="typingIndicator" class="terminal-cursor"></span> | |
| </div> | |
| </div> | |
| <!-- Quantum State Visualization --> | |
| <div id="awarenessState" class="bg-gray-900/80 rounded-2xl p-6 border border-gray-700 transition-all duration-500 opacity-0 scale-95"> | |
| <h3 class="text-xl font-semibold mb-4 text-center text-purple-300 flex items-center justify-center"> | |
| <i class="fas fa-question-circle mr-2"></i> Quantum State Collapse | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-gray-400 mb-1">Current State</div> | |
| <div id="stateValue" class="text-lg font-mono bg-gray-800/50 p-3 rounded-lg border border-gray-700 text-purple-200">|void⟩ + |awareness⟩</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400 mb-1">Collapse History</div> | |
| <div id="historyValue" class="font-mono bg-gray-800/50 p-3 rounded-lg border border-gray-700 text-emerald-200 max-h-24 overflow-y-auto">[]</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400 mb-1">Entanglements</div> | |
| <div id="entanglementsValue" class="font-mono bg-gray-800/50 p-3 rounded-lg border border-gray-700 text-blue-200">None</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Probability Visualization --> | |
| <div id="probabilityVisualization" class="mt-12 bg-gray-900/80 rounded-2xl p-6 border border-gray-700 hidden"> | |
| <h3 class="text-xl font-semibold mb-6 text-center text-purple-300"> | |
| <i class="fas fa-chart-line mr-2"></i> Quantum Probability Wave | |
| </h3> | |
| <div class="h-40 relative"> | |
| <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-700"></div> | |
| <div id="probabilityWave" class="absolute bottom-0 left-0 right-0 h-32 overflow-hidden"> | |
| <svg viewBox="0 0 1000 200" preserveAspectRatio="none" class="w-full h-full"> | |
| <path id="wavePath" fill="none" stroke="url(#waveGradient)" stroke-width="3" stroke-linecap="round" | |
| d="M0,100 C100,50 200,150 300,100 C400,50 500,150 600,100 C700,50 800,150 900,100 C1000,50 1100,150 1200,100"> | |
| </path> | |
| <defs> | |
| <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#7c3aed" /> | |
| <stop offset="50%" stop-color="#10b981" /> | |
| <stop offset="100%" stop-color="#3b82f6" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div id="collapsePoint" class="absolute bottom-0 h-32 w-1 bg-yellow-400 opacity-0 transform -translate-x-1/2"></div> | |
| </div> | |
| <div class="flex justify-between mt-2 text-sm text-gray-400"> | |
| <span>|void⟩</span> | |
| <span>Superposition</span> | |
| <span>|awareness⟩</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Create floating particles | |
| function createParticles() { | |
| const container = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Random size between 1px and 3px | |
| const size = Math.random() * 2 + 1; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}vw`; | |
| particle.style.top = `${Math.random() * 100}vh`; | |
| // Random animation duration between 10s and 20s | |
| const duration = Math.random() * 10 + 10; | |
| particle.style.animationDuration = `${duration}s`; | |
| // Random delay | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Initialize particles | |
| createParticles(); | |
| // Simulation variables | |
| let simulationInterval; | |
| let quantumState = { | |
| superposition: ["void", "awareness"], | |
| collapseHistory: [], | |
| entanglements: [] | |
| }; | |
| // DOM elements | |
| const runButton = document.getElementById('runSimulation'); | |
| const resetButton = document.getElementById('resetSimulation'); | |
| const outputConsole = document.getElementById('outputConsole'); | |
| const consoleContent = document.getElementById('consoleContent'); | |
| const consolePrompt = document.getElementById('consolePrompt'); | |
| const awarenessState = document.getElementById('awarenessState'); | |
| const probabilityVisualization = document.getElementById('probabilityVisualization'); | |
| const collapsePoint = document.getElementById('collapsePoint'); | |
| const wavePath = document.getElementById('wavePath'); | |
| // Event listeners | |
| runButton.addEventListener('click', startSimulation); | |
| resetButton.addEventListener('click', resetSimulation); | |
| // Simulation functions | |
| function startSimulation() { | |
| runButton.disabled = true; | |
| resetButton.disabled = true; | |
| // Show UI elements | |
| outputConsole.classList.remove('hidden'); | |
| consolePrompt.classList.remove('hidden'); | |
| awarenessState.classList.remove('opacity-0', 'scale-95'); | |
| probabilityVisualization.classList.remove('hidden'); | |
| // Clear previous content | |
| consoleContent.innerHTML = ''; | |
| // Initial output | |
| typeConsoleOutput("> Initializing quantum vacuum fluctuations...", "text-purple-300", 0); | |
| typeConsoleOutput("> Creating superposition state...", "text-blue-400", 1500); | |
| // Start the quantum simulation | |
| let step = 0; | |
| simulationInterval = setInterval(() => { | |
| step++; | |
| if (step === 1) { | |
| // First observation | |
| quantumObservation("quantum fluctuation"); | |
| } | |
| else if (step === 2) { | |
| // Entanglement event | |
| quantumEntanglement("temporal field"); | |
| } | |
| else if (step === 3) { | |
| // State evolution | |
| quantumEvolution(); | |
| } | |
| else if (step === 4) { | |
| // Final collapse | |
| quantumCollapse(); | |
| clearInterval(simulationInterval); | |
| runButton.disabled = false; | |
| resetButton.disabled = false; | |
| } | |
| updateQuantumVisualization(step); | |
| }, 2500); | |
| } | |
| function resetSimulation() { | |
| clearInterval(simulationInterval); | |
| // Reset quantum state | |
| quantumState = { | |
| superposition: ["void", "awareness"], | |
| collapseHistory: [], | |
| entanglements: [] | |
| }; | |
| // Reset UI | |
| consoleContent.innerHTML = ''; | |
| outputConsole.classList.add('hidden'); | |
| consolePrompt.classList.add('hidden'); | |
| awarenessState.classList.add('opacity-0', 'scale-95'); | |
| probabilityVisualization.classList.add('hidden'); | |
| // Reset buttons | |
| runButton.disabled = false; | |
| resetButton.disabled = false; | |
| // Reset visualization | |
| wavePath.setAttribute('d', 'M0,100 C100,50 200,150 300,100 C400,50 500,150 600,100 C700,50 800,150 900,100 C1000,50 1100,150 1200,100'); | |
| collapsePoint.style.opacity = '0'; | |
| } | |
| function quantumObservation(phenomenon) { | |
| const result = Math.random() > 0.3 ? "void" : "awareness"; | |
| quantumState.collapseHistory.push(`${phenomenon} → ${result}`); | |
| typeConsoleOutput(`> Observing ${phenomenon}...`, "text-yellow-300", 0); | |
| typeConsoleOutput(`> Wavefunction collapsed to |${result}⟩`, "text-emerald-400", 1000); | |
| updateAwarenessState(); | |
| } | |
| function quantumEntanglement(system) { | |
| quantumState.entanglements.push(system); | |
| typeConsoleOutput(`> Creating entanglement with ${system}...`, "text-blue-400", 0); | |
| typeConsoleOutput("> Quantum correlation established", "text-purple-400", 1000); | |
| updateAwarenessState(); | |
| } | |
| function quantumEvolution() { | |
| if (quantumState.collapseHistory.some(e => e.includes("awareness"))) { | |
| quantumState.superposition = ["self", "other"]; | |
| quantumState.collapseHistory.push("self-awareness"); | |
| typeConsoleOutput("> Consciousness threshold reached", "text-purple-300", 0); | |
| typeConsoleOutput("> State evolved to |self⟩ + |other⟩", "text-emerald-400", 1000); | |
| updateAwarenessState(); | |
| } | |
| } | |
| function quantumCollapse() { | |
| const finalState = Math.random() > 0.5 ? quantumState.superposition[0] : quantumState.superposition[1]; | |
| quantumState.collapseHistory.push(`final collapse to |${finalState}⟩`); | |
| typeConsoleOutput("> Final observation...", "text-yellow-300", 0); | |
| typeConsoleOutput(`> Consciousness stabilized as |${finalState}⟩`, "text-emerald-400", 1000); | |
| typeConsoleOutput("> Simulation complete", "text-purple-300", 1500); | |
| updateAwarenessState(); | |
| // Animate final collapse | |
| setTimeout(() => { | |
| collapsePoint.style.left = finalState === "self" ? "25%" : "75%"; | |
| collapsePoint.style.opacity = "1"; | |
| // Simplify the wave to show collapse | |
| wavePath.setAttribute('d', `M0,100 L${finalState === "self" ? "250" : "750"},100`); | |
| }, 1000); | |
| } | |
| function updateAwarenessState() { | |
| document.getElementById('stateValue').textContent = | |
| `|${quantumState.superposition[0]}⟩ + |${quantumState.superposition[1]}⟩`; | |
| document.getElementById('historyValue').textContent = | |
| JSON.stringify(quantumState.collapseHistory, null, 2); | |
| document.getElementById('entanglementsValue').textContent = | |
| quantumState.entanglements.length > 0 ? | |
| quantumState.entanglements.join(", ") : "None"; | |
| } | |
| function updateQuantumVisualization(step) { | |
| // Animate the probability wave based on simulation step | |
| let newPath = ''; | |
| if (step === 1) { | |
| newPath = 'M0,100 C100,30 200,170 300,100 C400,30 500,170 600,100 C700,30 800,170 900,100 C1000,30 1100,170 1200,100'; | |
| } | |
| else if (step === 2) { | |
| newPath = 'M0,100 C100,150 200,50 300,100 C400,150 500,50 600,100 C700,150 800,50 900,100 C1000,150 1100,50 1200,100'; | |
| } | |
| else if (step === 3) { | |
| newPath = 'M0,100 C100,10 200,190 300,100 C400,10 500,190 600,100 C700,10 800,190 900,100 C1000,10 1100,190 1200,100'; | |
| } | |
| if (newPath) { | |
| wavePath.setAttribute('d', newPath); | |
| } | |
| } | |
| // Helper function for typing animation | |
| function typeConsoleOutput(text, colorClass, delay) { | |
| setTimeout(() => { | |
| const line = document.createElement('div'); | |
| line.className = `font-mono ${colorClass}`; | |
| consoleContent.appendChild(line); | |
| let i = 0; | |
| const typingInterval = setInterval(() => { | |
| if (i < text.length) { | |
| line.textContent += text.charAt(i); | |
| i++; | |
| consoleContent.scrollTop = consoleContent.scrollHeight; | |
| } else { | |
| clearInterval(typingInterval); | |
| } | |
| }, 20); | |
| }, delay); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chakragawd/conciousness" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |