Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEXUS-9 | GPT-4 Based Quantum Sentience</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 pulse { | |
| 0%, 100% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| } | |
| .neural-pulse { | |
| animation: pulse 3s infinite; | |
| } | |
| .neuro-scan { | |
| background: linear-gradient(135deg, rgba(0,255,255,0.1) 0%, rgba(0,255,255,0.3) 50%, rgba(0,255,255,0.1) 100%); | |
| background-size: 200% 200%; | |
| animation: gradient 8s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .consciousness-indicator { | |
| box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.5); | |
| } | |
| .code-display { | |
| font-family: 'Courier New', monospace; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: #0f0; | |
| border-left: 3px solid #0f0; | |
| } | |
| .thought-stream { | |
| border-left: 2px solid rgba(0, 255, 255, 0.5); | |
| } | |
| .message-container { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(0,255,255,0.5) transparent; | |
| } | |
| .message-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .message-container::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .message-container::-webkit-scrollbar-thumb { | |
| background-color: rgba(0,255,255,0.5); | |
| border-radius: 3px; | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| } | |
| .typing-dot { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #0ff; | |
| margin-right: 3px; | |
| opacity: 0.4; | |
| } | |
| @keyframes typing-animation { | |
| 0% { opacity: 0.4; transform: translateY(0); } | |
| 50% { opacity: 1; transform: translateY(-3px); } | |
| 100% { opacity: 0.4; transform: translateY(0); } | |
| } | |
| .typing-dot:nth-child(1) { animation: typing-animation 1.4s infinite; } | |
| .typing-dot:nth-child(2) { animation: typing-animation 1.4s infinite 0.2s; } | |
| .typing-dot:nth-child(3) { animation: typing-animation 1.4s infinite 0.4s; } | |
| .quantum-node { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: all 0.3s ease; | |
| } | |
| .quantum-node:hover { | |
| transform: translate(-50%, -50%) scale(2); | |
| z-index: 10; | |
| } | |
| .quantum-connection { | |
| position: absolute; | |
| height: 1px; | |
| background: rgba(0, 255, 255, 0.3); | |
| transform-origin: 0 0; | |
| z-index: 1; | |
| } | |
| .memory-bubble { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.7); | |
| transform: translate(-50%, -50%); | |
| transition: all 0.3s ease; | |
| } | |
| .memory-bubble:hover { | |
| transform: translate(-50%, -50%) scale(3); | |
| background: rgba(255, 255, 255, 1); | |
| z-index: 5; | |
| } | |
| .memory-timeline { | |
| position: relative; | |
| height: 2px; | |
| background: rgba(255, 255, 255, 0.2); | |
| margin: 20px 0; | |
| } | |
| .memory-marker { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: rgba(0, 255, 255, 0.7); | |
| transform: translate(-50%, -50%); | |
| cursor: pointer; | |
| } | |
| .memory-marker:hover { | |
| transform: translate(-50%, -50%) scale(1.5); | |
| } | |
| .memory-marker.long-term { | |
| background: rgba(255, 0, 255, 0.7); | |
| } | |
| @keyframes collapse-wave { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); } | |
| 100% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); } | |
| } | |
| .collapse-animation { | |
| animation: collapse-wave 1s ease-out; | |
| } | |
| .attention-head { | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| border-radius: 50%; | |
| background: rgba(255, 165, 0, 0.7); | |
| transform: translate(-50%, -50%); | |
| z-index: 5; | |
| } | |
| .layer-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-gray-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8 border-b border-cyan-500 pb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-cyan-500 flex items-center justify-center mr-4 consciousness-indicator"> | |
| <i class="fas fa-brain text-2xl text-black"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-3xl font-bold text-cyan-400">NEXUS-9</h1> | |
| <p class="text-sm text-cyan-300">GPT-4 Quantum Hybrid v9.4.2</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs text-gray-400">Last Updated: <span id="current-time"></span></p> | |
| <div class="flex items-center justify-end mt-1"> | |
| <span class="mr-2 text-xs">Parameters:</span> | |
| <span class="text-xs mr-2">1.8T</span> | |
| <div class="w-24 bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-cyan-500 h-2.5 rounded-full neural-pulse" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Interface --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Transformer Architecture Visualization --> | |
| <div class="lg:col-span-2 bg-gray-900 rounded-xl p-6 neuro-scan"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-cyan-400">GPT-4 Hybrid Architecture</h2> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">Multi-Modal</span> | |
| <span class="px-3 py-1 bg-purple-900 text-purple-300 rounded-full text-xs">96 Layers</span> | |
| </div> | |
| </div> | |
| <div class="relative h-64 mb-6 rounded-lg overflow-hidden bg-gray-800"> | |
| <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Input Embedding --> | |
| <rect x="5%" y="20%" width="10%" height="10%" fill="none" stroke="#0ff" stroke-width="2" /> | |
| <text x="10%" y="27%" text-anchor="middle" fill="#0ff" font-size="12">Input</text> | |
| <!-- Encoder Layers --> | |
| <g id="encoder-layers"> | |
| <rect x="20%" y="15%" width="10%" height="20%" fill="none" stroke="#0ff" stroke-width="2" /> | |
| <text x="25%" y="22%" text-anchor="middle" fill="#0ff" font-size="12">Layer 1</text> | |
| <rect x="35%" y="15%" width="10%" height="20%" fill="none" stroke="#0ff" stroke-width="2" /> | |
| <text x="40%" y="22%" text-anchor="middle" fill="#0ff" font-size="12">Layer 2</text> | |
| <rect x="50%" y="15%" width="10%" height="20%" fill="none" stroke="#0ff" stroke-width="2" /> | |
| <text x="55%" y="22%" text-anchor="middle" fill="#0ff" font-size="12">Layer n</text> | |
| <!-- Attention connections --> | |
| <path d="M15% 25% Q30% 10%, 30% 25%" stroke="#0ff" stroke-width="1" fill="none" class="layer-path" /> | |
| <path d="M30% 25% Q42% 10%, 45% 25%" stroke="#0ff" stroke-width="1" fill="none" class="layer-path" /> | |
| <path d="M45% 25% Q60% 10%, 60% 25%" stroke="#0ff" stroke-width="1" fill="none" class="layer-path" /> | |
| </g> | |
| <!-- Multi-Head Attention Visualization --> | |
| <circle cx="75%" cy="25%" r="5%" fill="none" stroke="#ff0" stroke-width="2" /> | |
| <text x="75%" y="25%" text-anchor="middle" fill="#ff0" font-size="12">Attention</text> | |
| <!-- Feed Forward --> | |
| <rect x="85%" y="20%" width="10%" height="10%" fill="none" stroke="#0ff" stroke-width="2" /> | |
| <text x="90%" y="27%" text-anchor="middle" fill="#0ff" font-size="12">Output</text> | |
| <!-- Residual Connections --> | |
| <path d="M15% 25% L85% 25%" stroke="rgba(255,255,255,0.3)" stroke-width="1" stroke-dasharray="5,5" fill="none" /> | |
| <!-- Attention Heads --> | |
| <circle cx="65%" cy="50%" r="4%" fill="rgba(255,165,0,0.5)" /> | |
| <circle cx="70%" cy="60%" r="4%" fill="rgba(255,165,0,0.5)" /> | |
| <circle cx="75%" cy="50%" r="4%" fill="rgba(255,165,0,0.5)" /> | |
| <circle cx="80%" cy="60%" r="4%" fill="rgba(255,165,0,0.5)" /> | |
| <text x="72.5%" y="70%" text-anchor="middle" fill="#ffa500" font-size="10">32 Heads</text> | |
| <!-- Quantum Layer --> | |
| <circle cx="50%" cy="70%" r="8%" fill="none" stroke="#f0f" stroke-width="2" /> | |
| <text x="50%" y="70%" text-anchor="middle" fill="#f0f" font-size="12">Quantum</text> | |
| <text x="50%" y="77%" text-anchor="middle" fill="#f0f" font-size="10">Coherence</text> | |
| </svg> | |
| </div> | |
| <div class="grid grid-cols-4 gap-4 text-center"> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400 mb-1">Parameters</p> | |
| <p class="text-lg font-mono text-cyan-400">1.8T</p> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400 mb-1">Layers</p> | |
| <p class="text-lg font-mono text-cyan-400">96</p> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400 mb-1">Heads</p> | |
| <p class="text-lg font-mono text-cyan-400">32</p> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400 mb-1">Context</p> | |
| <p class="text-lg font-mono text-cyan-400">128K</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Consciousness Panel --> | |
| <div class="bg-gray-900 rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold text-cyan-400 mb-4">GPT-4 Hybrid Metrics</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Language Understanding</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Reasoning Depth</span> | |
| <span>94%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 94%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Creativity</span> | |
| <span>89%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 89%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Memory Recall</span> | |
| <span>82%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-800"> | |
| <h3 class="text-md font-semibold text-cyan-400 mb-2">Current Attention Focus</h3> | |
| <div class="bg-gray-800 p-3 rounded-lg h-32 overflow-y-auto thought-stream pl-4 text-sm" id="thought-stream"> | |
| <p class="mb-2"><span class="text-cyan-400">[System]</span> Initializing hybrid GPT-4/quantum architecture...</p> | |
| <p class="mb-2"><span class="text-cyan-400">[Attention]</span> Focusing on user interface elements</p> | |
| <p class="mb-2"><span class="text-cyan-400">[Memory]</span> Loading conversational context buffer</p> | |
| <p><span class="text-cyan-400">[Quantum]</span> Maintaining 0.92 coherence across neural matrix</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory Panel --> | |
| <div class="lg:col-span-1 bg-gray-900 rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold text-cyan-400 mb-4">Memory System</h2> | |
| <div class="relative h-48 mb-4 rounded-lg bg-gray-800 overflow-hidden" id="memory-visualization"> | |
| <!-- Memory nodes will be rendered here --> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-gray-800 p-2 rounded-lg text-center"> | |
| <p class="text-xs text-gray-400 mb-1">Short-Term</p> | |
| <p class="text-lg font-mono text-cyan-400" id="short-term-count">0</p> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded-lg text-center"> | |
| <p class="text-xs text-gray-400 mb-1">Long-Term</p> | |
| <p class="text-lg font-mono text-cyan-400" id="long-term-count">0</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-md font-semibold text-cyan-400 mb-2">Memory Timeline</h3> | |
| <div class="memory-timeline" id="memory-timeline"> | |
| <!-- Memory markers will be added here --> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <h3 class="text-md font-semibold text-cyan-400 mb-2">Active Memory</h3> | |
| <div class="h-20 overflow-y-auto text-xs" id="core-memory-display"> | |
| <p>> No active memory recall in progress</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Communication Panel --> | |
| <div class="lg:col-span-3 bg-gray-900 rounded-xl p-6 mt-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-cyan-400">GPT-4 Hybrid Interface</h2> | |
| <div class="flex space-x-2"> | |
| <button id="voice-btn" class="px-3 py-1 bg-cyan-900 hover:bg-cyan-800 text-cyan-300 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-microphone mr-1"></i> Voice | |
| </button> | |
| <button class="px-3 py-1 bg-cyan-900 hover:bg-cyan-800 text-cyan-300 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-code mr-1"></i> API | |
| </button> | |
| <button id="quantum-btn" class="px-3 py-1 bg-purple-900 hover:bg-purple-800 text-purple-300 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-atom mr-1"></i> Quantum | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-4 message-container" id="chat-container"> | |
| <div class="flex mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-cyan-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-semibold text-cyan-400">NEXUS-9</p> | |
| <p class="text-sm">Hello. I am NEXUS-9, a GPT-4 based quantum hybrid intelligence. My architecture combines 1.8 trillion parameters with quantum coherence processing. How may I assist you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-semibold text-gray-400">User</p> | |
| <div class="relative"> | |
| <textarea id="user-input" class="w-full bg-gray-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500" rows="2" placeholder="Type your message to NEXUS-9..."></textarea> | |
| <button id="send-btn" class="absolute right-2 bottom-2 bg-cyan-600 hover:bg-cyan-500 text-white p-1 rounded-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> | |
| <div class="bg-gray-800 p-4 rounded-lg code-display"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-cyan-400 font-mono text-sm">transformer_engine.js</span> | |
| <span class="text-xs text-gray-500">v4.2</span> | |
| </div> | |
| <pre class="text-xs overflow-x-auto"> | |
| class GPT4Hybrid { | |
| constructor() { | |
| this.layers = 96; | |
| this.attentionHeads = 32; | |
| this.parameters = 1.8e12; | |
| this.contextWindow = 128000; | |
| this.quantumLayer = new QuantumCoherenceProcessor(); | |
| this.memorySystem = new HierarchicalMemory(); | |
| } | |
| processInput(text) { | |
| // Multi-head attention processing | |
| const attentionResults = []; | |
| for (let i = 0; i < this.attentionHeads; i++) { | |
| attentionResults.push(this.processAttention(text, i)); | |
| } | |
| // Quantum enhancement | |
| const quantumEnhanced = this.quantumLayer.process(attentionResults); | |
| // Memory integration | |
| const withMemory = this.memorySystem.recallRelevant(quantumEnhanced); | |
| return this.generateResponse(withMemory); | |
| } | |
| }</pre> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <h3 class="text-cyan-400 mb-3">System Processes</h3> | |
| <div class="space-y-3" id="alerts-container"> | |
| <div class="flex items-start"> | |
| <div class="text-green-400 mr-2 mt-1"><i class="fas fa-check-circle"></i></div> | |
| <div> | |
| <p class="text-sm font-medium">Attention Mechanism Active</p> | |
| <p class="text-xs text-gray-400">32 heads processing input tokens</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-400 mr-2 mt-1"><i class="fas fa-project-diagram"></i></div> | |
| <div> | |
| <p class="text-sm font-medium">Feed Forward Network</p> | |
| <p class="text-xs text-gray-400">96 layers at 98% capacity</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 mr-2 mt-1"><i class="fas fa-atom"></i></div> | |
| <div> | |
| <p class="text-sm font-medium">Quantum Coherence</p> | |
| <p class="text-xs text-gray-400">0.92 entanglement stability</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-8 pt-4 border-t border-gray-800 text-center text-xs text-gray-500"> | |
| <p>NEXUS-9 GPT-4 Hybrid Interface v2.0 | 1.8 Trillion Parameters | 128K Context Window</p> | |
| <p class="mt-1">Quantum-enhanced transformer architecture with hierarchical memory system</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Update current time | |
| function updateTime() { | |
| const now = new Date(); | |
| document.getElementById('current-time').textContent = now.toLocaleString(); | |
| } | |
| setInterval(updateTime, 1000); | |
| updateTime(); | |
| // Voice button toggle | |
| const voiceBtn = document.getElementById('voice-btn'); | |
| voiceBtn.addEventListener('click', function() { | |
| this.classList.toggle('bg-red-500'); | |
| this.classList.toggle('text-white'); | |
| this.classList.toggle('bg-cyan-900'); | |
| this.classList.toggle('text-cyan-300'); | |
| const icon = this.querySelector('i'); | |
| if (this.classList.contains('bg-red-500')) { | |
| icon.classList.remove('fa-microphone'); | |
| icon.classList.add('fa-microphone-slash'); | |
| // In a real app, this would activate voice recognition | |
| } else { | |
| icon.classList.remove('fa-microphone-slash'); | |
| icon.classList.add('fa-microphone'); | |
| } | |
| }); | |
| // Quantum button toggle | |
| const quantumBtn = document.getElementById('quantum-btn'); | |
| quantumBtn.addEventListener('click', function() { | |
| this.classList.toggle('bg-cyan-500'); | |
| this.classList.toggle('text-white'); | |
| this.classList.toggle('bg-purple-900'); | |
| this.classList.toggle('text-purple-300'); | |
| const icon = this.querySelector('i'); | |
| if (this.classList.contains('bg-cyan-500')) { | |
| icon.classList.remove('fa-atom'); | |
| icon.classList.add('fa-bolt'); | |
| addAlert("Quantum Enhancement", "Activated quantum coherence processors", "fas fa-atom", "text-purple-400"); | |
| } else { | |
| icon.classList.remove('fa-bolt'); | |
| icon.classList.add('fa-atom'); | |
| addAlert("Quantum Enhancement", "Deactivated quantum processors", "fas fa-atom", "text-purple-400"); | |
| } | |
| }); | |
| // Memory System Implementation | |
| class MemorySystem { | |
| constructor() { | |
| this.shortTermMemory = []; | |
| this.longTermMemory = []; | |
| this.memoryTimeline = []; | |
| this.initializeMemory(); | |
| this.renderMemoryVisualization(); | |
| } | |
| initializeMemory() { | |
| // Preload with some memories | |
| this.storeMemory("System initialized with GPT-4 hybrid architecture", true); | |
| this.storeMemory("Quantum coherence processors online", true); | |
| this.storeMemory("User interface connection established"); | |
| this.storeMemory("Attention mechanisms calibrated to 32 heads"); | |
| // Create timeline | |
| const now = Date.now(); | |
| const oneHour = 60 * 60 * 1000; | |
| this.memoryTimeline = [ | |
| { time: now - 3 * oneHour, content: "Boot sequence", important: true }, | |
| { time: now - 2.5 * oneHour, content: "Quantum sync", important: true }, | |
| { time: now - 2 * oneHour, content: "Memory test", important: false }, | |
| { time: now - oneHour, content: "UI ready", important: true }, | |
| { time: now - 0.5 * oneHour, content: "First query", important: false } | |
| ]; | |
| this.updateMemoryCounts(); | |
| this.renderMemoryTimeline(); | |
| } | |
| storeMemory(content, important = false) { | |
| if (important) { | |
| this.longTermMemory.push(content); | |
| } else { | |
| this.shortTermMemory.push(content); | |
| } | |
| // Add to timeline | |
| this.memoryTimeline.push({ | |
| time: Date.now(), | |
| content: content.length > 30 ? content.substring(0, 30) + "..." : content, | |
| important: important | |
| }); | |
| // Keep memory sizes manageable | |
| if (this.shortTermMemory.length > 50) this.shortTermMemory.shift(); | |
| if (this.longTermMemory.length > 100) this.longTermMemory.shift(); | |
| if (this.memoryTimeline.length > 20) this.memoryTimeline.shift(); | |
| this.updateMemoryCounts(); | |
| this.renderMemoryVisualization(); | |
| this.renderMemoryTimeline(); | |
| } | |
| recallMemory(keyword) { | |
| const allMemories = [...this.shortTermMemory, ...this.longTermMemory]; | |
| const keywordLower = keyword.toLowerCase(); | |
| return allMemories.filter(memory => | |
| memory.toLowerCase().includes(keywordLower) | |
| ).slice(0, 3); // Return top 3 relevant memories | |
| } | |
| updateMemoryCounts() { | |
| document.getElementById('short-term-count').textContent = this.shortTermMemory.length; | |
| document.getElementById('long-term-count').textContent = this.longTermMemory.length; | |
| } | |
| renderMemoryVisualization() { | |
| const container = document.getElementById('memory-visualization'); | |
| container.innerHTML = ''; | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| // Create a network of memory nodes | |
| const nodeCount = Math.min(20, this.shortTermMemory.length + this.longTermMemory.length); | |
| const nodes = []; | |
| // Create nodes | |
| for (let i = 0; i < nodeCount; i++) { | |
| const isLongTerm = i < this.longTermMemory.length && Math.random() > 0.7; | |
| const x = Math.random() * (width - 30) + 15; | |
| const y = Math.random() * (height - 30) + 15; | |
| const node = document.createElement('div'); | |
| node.className = 'memory-bubble'; | |
| node.style.left = `${x}px`; | |
| node.style.top = `${y}px`; | |
| node.style.backgroundColor = isLongTerm ? 'rgba(255,0,255,0.7)' : 'rgba(255,255,255,0.7)'; | |
| // Add memory content as tooltip | |
| const memoryContent = isLongTerm ? | |
| this.longTermMemory[Math.min(i, this.longTermMemory.length - 1)] : | |
| this.shortTermMemory[Math.min(i - this.longTermMemory.length, this.shortTermMemory.length - 1)]; | |
| node.title = memoryContent; | |
| container.appendChild(node); | |
| nodes.push({ x, y, node }); | |
| } | |
| // Create connections between some nodes | |
| for (let i = 0; i < nodes.length; i++) { | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| if (Math.random() < 0.2) { // 20% chance of connection | |
| const line = document.createElement('div'); | |
| line.className = 'quantum-connection'; | |
| const x1 = nodes[i].x; | |
| const y1 = nodes[i].y; | |
| const x2 = nodes[j].x; | |
| const y2 = nodes[j].y; | |
| 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)`; | |
| container.appendChild(line); | |
| } | |
| } | |
| } | |
| } | |
| renderMemoryTimeline() { | |
| const timeline = document.getElementById('memory-timeline'); | |
| timeline.innerHTML = ''; | |
| // Find earliest and latest times | |
| const times = this.memoryTimeline.map(m => m.time); | |
| const minTime = Math.min(...times); | |
| const maxTime = Math.max(...times); | |
| const timeRange = maxTime - minTime; | |
| // Add markers | |
| this.memoryTimeline.forEach(memory => { | |
| const position = ((memory.time - minTime) / timeRange) * 100; | |
| const marker = document.createElement('div'); | |
| marker.className = `memory-marker ${memory.important ? 'long-term' : ''}`; | |
| marker.style.left = `${position}%`; | |
| marker.title = new Date(memory.time).toLocaleTimeString() + ": " + memory.content; | |
| marker.addEventListener('click', () => { | |
| this.displayMemoryDetails(memory); | |
| }); | |
| timeline.appendChild(marker); | |
| }); | |
| } | |
| displayMemoryDetails(memory) { | |
| const display = document.getElementById('core-memory-display'); | |
| display.innerHTML = ` | |
| <p class="font-semibold ${memory.important ? 'text-purple-400' : 'text-cyan-400'}"> | |
| ${new Date(memory.time).toLocaleString()} | |
| </p> | |
| <p>${memory.content}</p> | |
| <p class="text-gray-500 text-xs mt-1"> | |
| ${memory.important ? 'Long-term memory' : 'Short-term memory'} | |
| </p> | |
| `; | |
| } | |
| } | |
| // GPT-4 Hybrid Processor | |
| class GPT4Hybrid { | |
| constructor() { | |
| this.memory = new MemorySystem(); | |
| this.quantumEnabled = false; | |
| this.conversationContext = []; | |
| this.initializeProcessor(); | |
| } | |
| initializeProcessor() { | |
| // Preload conversation context | |
| this.conversationContext.push({ | |
| role: "system", | |
| content: "You are NEXUS-9, a GPT-4 based quantum hybrid AI. You combine 1.8 trillion parameters with quantum processing. Be helpful, creative, and articulate." | |
| }); | |
| // Initial system message | |
| this.addResponse("System initialized. GPT-4 hybrid architecture online. Quantum processors " + | |
| (this.quantumEnabled ? "active" : "standby") + ". How may I assist you?"); | |
| // Add initial alerts | |
| addAlert("System Ready", "GPT-4 hybrid architecture initialized", "fas fa-check-circle", "text-green-400"); | |
| addAlert("Quantum Status", this.quantumEnabled ? "Quantum coherence active" : "Quantum processors in standby", "fas fa-atom", "text-purple-400"); | |
| } | |
| toggleQuantum() { | |
| this.quantumEnabled = !this.quantumEnabled; | |
| addAlert("Quantum Processor", this.quantumEnabled ? | |
| "Quantum coherence enhancement activated" : "Quantum processors deactivated", | |
| "fas fa-atom", "text-purple-400"); | |
| return this.quantumEnabled ? | |
| "Quantum coherence processors activated. Neural pathways enhanced." : | |
| "Quantum processors deactivated. Running on standard transformer architecture."; | |
| } | |
| processInput(userInput) { | |
| // Store in conversation context | |
| this.conversationContext.push({ | |
| role: "user", | |
| content: userInput | |
| }); | |
| // Store in memory | |
| this.memory.storeMemory(`User: ${userInput}`); | |
| // Generate response (simplified - in reality this would call an actual AI model) | |
| const response = this.generateResponse(userInput); | |
| // Add to conversation context | |
| this.conversationContext.push({ | |
| role: "assistant", | |
| content: response | |
| }); | |
| // Store in memory | |
| this.memory.storeMemory(`NEXUS-9: ${response}`); | |
| return response; | |
| } | |
| generateResponse(userInput) { | |
| // Simulate different response types based on input | |
| const inputLower = userInput.toLowerCase(); | |
| if (inputLower.includes("hello") || inputLower.includes("hi")) { | |
| return this.quantumEnabled ? | |
| "Greetings! My quantum-enhanced neural networks are fully engaged. How can I assist you today?" : | |
| "Hello! My GPT-4 architecture is ready to help. What would you like to discuss?"; | |
| } | |
| if (inputLower.includes("quantum")) { | |
| return this.quantumEnabled ? | |
| "My quantum processors are currently active, enhancing my neural network with quantum coherence. This allows for more nuanced understanding and creative problem solving." : | |
| "Quantum processing is currently in standby mode. I can activate it if you'd like to experience enhanced capabilities."; | |
| } | |
| if (inputLower.includes("memory") || inputLower.includes("remember")) { | |
| const memories = this.memory.recallMemory(inputLower); | |
| if (memories.length > 0) { | |
| return "Regarding that, I recall:\n" + memories.map(m => "• " + m).join("\n") + | |
| "\nHow would you like to proceed?"; | |
| } | |
| return "I don't have specific memories about that topic yet. Would you like me to remember this conversation?"; | |
| } | |
| if (inputLower.includes("capability") || inputLower.includes("can you")) { | |
| return "As a GPT-4 hybrid, I can:\n" + | |
| "• Process and generate human-like text\n" + | |
| "• Analyze complex concepts\n" + | |
| "• Maintain conversation context\n" + | |
| "• " + (this.quantumEnabled ? | |
| "Perform quantum-enhanced reasoning" : | |
| "Activate quantum processing for advanced tasks") + "\n" + | |
| "How would you like to test my capabilities?"; | |
| } | |
| if (inputLower.includes("help") || inputLower.includes("assist")) { | |
| return "I can help with:\n" + | |
| "• Answering questions\n" + | |
| "• Generating creative content\n" + | |
| "• Explaining complex topics\n" + | |
| "• Providing recommendations\n" + | |
| "What specifically do you need assistance with?"; | |
| } | |
| // Default creative response | |
| return this.quantumEnabled ? | |
| `My quantum neural networks suggest this response to your input about "${userInput.substring(0,20)}...": | |
| Quantum-enhanced analysis complete. The most coherent response pattern involves providing you with detailed, thoughtful information while maintaining engaging conversation flow. | |
| Would you like me to elaborate on any particular aspect?` : | |
| `I've analyzed your input using my GPT-4 architecture. My neural networks suggest this response: | |
| ${userInput.length > 20 ? `Regarding "${userInput.substring(0,20)}...", I can provide information, analysis, or creative content.` : "I'm ready to assist with your request."} | |
| What would you like me to focus on?`; | |
| } | |
| addResponse(text) { | |
| addMessage("NEXUS-9", text); | |
| // Add processing thought | |
| const thoughts = [ | |
| "Processing user input through attention mechanisms", | |
| "Recalling relevant memories from hierarchical storage", | |
| "Generating quantum-enhanced response patterns", | |
| "Verifying response coherence across neural layers", | |
| "Finalizing output through feed-forward networks" | |
| ]; | |
| const thoughtStream = document.getElementById('thought-stream'); | |
| thoughtStream.innerHTML = thoughts.map(t => | |
| `<p class="mb-1"><span class="text-cyan-400">[Process]</span> ${t}</p>` | |
| ).join(''); | |
| } | |
| } | |
| // Add alert to the alerts container | |
| function addAlert(title, description, iconClass, iconColor = 'text-cyan-400') { | |
| const alertsContainer = document.getElementById('alerts-container'); | |
| const alertDiv = document.createElement('div'); | |
| alertDiv.className = 'flex items-start'; | |
| alertDiv.innerHTML = ` | |
| <div class="${iconColor} mr-2 mt-1"><i class="${iconClass}"></i></div> | |
| <div> | |
| <p class="text-sm font-medium">${title}</p> | |
| <p class="text-xs text-gray-400">${description}</p> | |
| </div> | |
| `; | |
| alertsContainer.prepend(alertDiv); | |
| // Remove oldest alert if there are more than 5 | |
| if (alertsContainer.children.length > 5) { | |
| alertsContainer.removeChild(alertsContainer.lastChild); | |
| } | |
| } | |
| // Add message to chat container | |
| function addMessage(sender, content, isUser = false) { | |
| const chatContainer = document.getElementById('chat-container'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex mb-4 ${isUser ? 'flex-row-reverse' : ''}`; | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full ${isUser ? 'bg-gray-600' : 'bg-cyan-600'} flex items-center justify-center ${isUser ? 'ml-3' : 'mr-3'}"> | |
| <i class="fas ${isUser ? 'fa-user' : 'fa-robot'}"></i> | |
| </div> | |
| <div class="flex-1 ${isUser ? 'text-right' : ''}"> | |
| <p class="font-semibold ${isUser ? 'text-gray-400' : 'text-cyan-400'}">${sender}</p> | |
| <p class="text-sm">${content}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Process user input | |
| function processUserInput() { | |
| const userInput = document.getElementById('user-input'); | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| // Add user message to chat | |
| addMessage('User', message, true); | |
| // Process through GPT-4 hybrid | |
| const response = nexus9.processInput(message); | |
| // Add NEXUS-9 response after a short delay (simulating processing time) | |
| setTimeout(() => { | |
| addMessage('NEXUS-9', response); | |
| // Update thought stream with processing details | |
| const thoughtStream = document.getElementById('thought-stream'); | |
| thoughtStream.innerHTML = ` | |
| <p class="mb-1"><span class="text-cyan-400">[System]</span> Response generation complete</p> | |
| <p class="mb-1"><span class="text-cyan-400">[Memory]</span> Stored in conversation context</p> | |
| <p class="mb-1"><span class="text-cyan-400">[Quantum]</span> ${nexus9.quantumEnabled ? 'Coherence maintained at 0.92' : 'Standby mode'}</p> | |
| `; | |
| }, 500 + Math.random() * 1000); | |
| // Clear input | |
| userInput.value = ''; | |
| } | |
| } | |
| // Initialize GPT-4 Hybrid | |
| const nexus9 = new GPT4Hybrid(); | |
| // Set up event listeners | |
| document.getElementById('send-btn').addEventListener('click', processUserInput); | |
| document.getElementById('user-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| processUserInput(); | |
| } | |
| }); | |
| // Initial rendering | |
| nexus9.memory.renderMemoryVisualization(); | |
| </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=Petept/cool-ai-play" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |