| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Neural Nexus - LLM Thinking Interface</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 quantumGlow { |
| 0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); } |
| 50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.9), 0 0 30px rgba(236, 72, 153, 0.7); } |
| } |
| @keyframes particleFlow { |
| 0% { transform: translateY(0) translateX(0); opacity: 0; } |
| 50% { opacity: 1; } |
| 100% { transform: translateY(-100px) translateX(50px); opacity: 0; } |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 0.5; transform: scale(0.95); } |
| 50% { opacity: 1; transform: scale(1.05); } |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotate(0deg); } |
| 50% { transform: translateY(-10px) rotate(5deg); } |
| } |
| @keyframes wave { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: 200% 50%; } |
| } |
| @keyframes sparkle { |
| 0% { opacity: 0; transform: scale(0); } |
| 50% { opacity: 1; transform: scale(1.2); } |
| 100% { opacity: 0; transform: scale(0); } |
| } |
| @keyframes neuronPulse { |
| 0%, 100% { stroke-opacity: 0.3; } |
| 50% { stroke-opacity: 0.8; } |
| } |
| .thinking-dot { |
| animation: pulse 1.5s infinite ease-in-out; |
| } |
| .floating { |
| animation: float 3s infinite ease-in-out; |
| } |
| .brain-wave { |
| background: linear-gradient(90deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.3) 50%, rgba(99,102,241,0.1) 100%); |
| animation: wave 4s infinite linear; |
| background-size: 200% 100%; |
| } |
| .sparkle { |
| animation: sparkle 1.5s infinite; |
| } |
| .glow { |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); |
| } |
| .glow-text { |
| text-shadow: 0 0 8px rgba(99, 102, 241, 0.7); |
| } |
| .neuron-path { |
| stroke-dasharray: 1000; |
| stroke-dashoffset: 1000; |
| animation: dash 5s linear forwards infinite, neuronPulse 2s infinite; |
| } |
| @keyframes dash { |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
| .code-line { |
| font-family: 'Courier New', monospace; |
| background: rgba(30, 41, 59, 0.5); |
| margin: 2px 0; |
| padding: 2px 8px; |
| border-radius: 4px; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| .typing { |
| border-right: 2px solid; |
| animation: blink 1s step-end infinite; |
| } |
| @keyframes blink { |
| from, to { border-color: transparent } |
| 50% { border-color: #818cf8; } |
| } |
| .gradient-border { |
| position: relative; |
| border-radius: 1rem; |
| } |
| .gradient-border::before { |
| content: ""; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| border-radius: 1rem; |
| background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899); |
| z-index: -1; |
| opacity: 0.7; |
| background-size: 200% 200%; |
| animation: gradientMove 4s ease infinite; |
| } |
| @keyframes gradientMove { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-950 min-h-screen flex items-center justify-center p-4 font-sans"> |
| <div class="w-full max-w-4xl"> |
| |
| <div class="gradient-border"> |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform hover:scale-[1.005] relative"> |
| |
| <div class="absolute inset-0 pointer-events-none opacity-10" style="background: |
| radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.3), transparent 50%), |
| radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.3), transparent 50%);"> |
| </div> |
| |
| |
| <div class="bg-gradient-to-r from-gray-800 to-gray-900 p-4 flex items-center border-b border-gray-800 relative"> |
| <div class="flex items-center"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg floating"> |
| <i class="fas fa-brain text-2xl"></i> |
| </div> |
| <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-900 glow"></div> |
| </div> |
| <div class="ml-4"> |
| <h2 class="text-white font-bold text-xl glow-text">Neural Nexus</h2> |
| <p class="text-indigo-300 text-xs flex items-center"> |
| <span class="w-2 h-2 bg-indigo-400 rounded-full mr-2 thinking-dot"></span> |
| <span id="connection-status">Quantum connection established</span> |
| </p> |
| </div> |
| </div> |
| <div class="ml-auto flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-bolt text-yellow-400 mr-2"></i> |
| <div class="w-16 bg-gray-700 rounded-full h-1.5"> |
| <div class="bg-gradient-to-r from-yellow-400 to-yellow-600 h-1.5 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-memory text-blue-400 mr-2"></i> |
| <div class="w-16 bg-gray-700 rounded-full h-1.5"> |
| <div class="bg-gradient-to-r from-blue-400 to-blue-600 h-1.5 rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative"> |
| |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> |
| <div class="absolute top-0 left-1/4 w-1 h-1 bg-indigo-400 rounded-full opacity-70" style="animation: particleFlow 4s linear infinite;"></div> |
| <div class="absolute top-1/3 left-1/3 w-1 h-1 bg-purple-400 rounded-full opacity-70" style="animation: particleFlow 5s linear infinite 1s;"></div> |
| <div class="absolute top-2/3 right-1/4 w-1 h-1 bg-pink-400 rounded-full opacity-70" style="animation: particleFlow 6s linear infinite 2s;"></div> |
| <div class="absolute bottom-0 right-1/3 w-1 h-1 bg-blue-400 rounded-full opacity-70" style="animation: particleFlow 7s linear infinite 3s;"></div> |
| </div> |
| |
| <div class="lg:col-span-1 bg-gray-800 rounded-xl p-4 border border-gray-700 relative overflow-hidden hover:shadow-lg hover:shadow-indigo-500/20 transition-all duration-300"> |
| |
| <div class="absolute inset-0 opacity-20 pointer-events-none"> |
| <svg viewBox="0 0 200 200" class="w-full h-full"> |
| <path d="M30,100 Q100,30 170,100 Q100,170 30,100 Z" |
| fill="none" |
| stroke="url(#quantumGradient)" |
| stroke-width="0.5" |
| stroke-dasharray="5,3" |
| style="animation: dash 20s linear infinite reverse;" /> |
| <defs> |
| <linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stop-color="#6366f1" /> |
| <stop offset="50%" stop-color="#ec4899" /> |
| <stop offset="100%" stop-color="#6366f1" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| <div class="absolute inset-0 opacity-10" style="background: |
| radial-gradient(circle at center, rgba(99, 102, 241, 0.2), transparent 70%);"> |
| </div> |
| <h3 class="text-gray-300 text-sm font-semibold mb-3 flex items-center"> |
| <i class="fas fa-project-diagram text-indigo-400 mr-2"></i> |
| Neural Activity Map |
| </h3> |
| <div class="relative w-full h-64"> |
| |
| <svg id="neural-network" viewBox="0 0 200 200" class="w-full h-full"> |
| |
| <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"> |
| <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(55, 65, 81, 0.5)" stroke-width="0.5"/> |
| </pattern> |
| <rect width="100%" height="100%" fill="url(#grid)"/> |
| |
| |
| <path class="neuron-path" stroke="rgba(99, 102, 241, 0.3)" stroke-width="1" fill="none" |
| d="M30,50 Q50,30 70,50 Q90,70 110,50 Q130,30 150,50 Q170,70 170,90 Q150,110 170,130 Q150,150 130,130 Q110,150 90,130 Q70,150 50,130 Q30,150 30,130 Q50,110 30,90 Q50,70 30,50"/> |
| |
| <path class="neuron-path" stroke="rgba(139, 92, 246, 0.3)" stroke-width="1" fill="none" |
| d="M40,40 Q60,60 80,40 Q100,20 120,40 Q140,60 160,40 Q180,60 160,80 Q180,100 160,120 Q140,140 120,120 Q100,140 80,120 Q60,140 40,120 Q20,100 40,80 Q20,60 40,40"/> |
| |
| |
| <circle cx="30" cy="50" r="5" fill="rgba(99, 102, 241, 0.8)" class="thinking-dot"/> |
| <circle cx="70" cy="50" r="5" fill="rgba(99, 102, 241, 0.8)" class="thinking-dot" style="animation-delay: 0.2s"/> |
| <circle cx="110" cy="50" r="5" fill="rgba(99, 102, 241, 0.8)" class="thinking-dot" style="animation-delay: 0.4s"/> |
| <circle cx="150" cy="50" r="5" fill="rgba(99, 102, 241, 0.8)" class="thinking-dot" style="animation-delay: 0.6s"/> |
| <circle cx="170" cy="90" r="5" fill="rgba(139, 92, 246, 0.8)" class="thinking-dot" style="animation-delay: 0.8s"/> |
| <circle cx="150" cy="130" r="5" fill="rgba(139, 92, 246, 0.8)" class="thinking-dot" style="animation-delay: 1s"/> |
| <circle cx="110" cy="150" r="5" fill="rgba(236, 72, 153, 0.8)" class="thinking-dot" style="animation-delay: 1.2s"/> |
| <circle cx="70" cy="130" r="5" fill="rgba(236, 72, 153, 0.8)" class="thinking-dot" style="animation-delay: 1.4s"/> |
| <circle cx="30" cy="130" r="5" fill="rgba(236, 72, 153, 0.8)" class="thinking-dot" style="animation-delay: 1.6s"/> |
| </svg> |
| |
| |
| <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white rounded-full sparkle" style="animation-delay: 0.5s"></div> |
| <div class="absolute top-1/3 right-1/3 w-2 h-2 bg-indigo-300 rounded-full sparkle" style="animation-delay: 1s"></div> |
| <div class="absolute bottom-1/4 right-1/4 w-2 h-2 bg-purple-300 rounded-full sparkle" style="animation-delay: 1.5s"></div> |
| </div> |
| <div class="mt-3 flex justify-between text-xs text-gray-400"> |
| <span>Input Layer</span> |
| <span>Hidden Layers</span> |
| <span>Output Layer</span> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1 flex flex-col"> |
| |
| <div class="flex-1 bg-gray-800 rounded-xl p-4 border border-gray-700 flex flex-col items-center justify-center relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10" style="background: |
| radial-gradient(circle at center, rgba(236, 72, 153, 0.2), transparent 70%);"> |
| </div> |
| <h3 class="text-gray-300 text-sm font-semibold mb-4 flex items-center"> |
| <i class="fas fa-cogs text-pink-400 mr-2"></i> |
| Cognitive Processor |
| </h3> |
| <div class="relative w-40 h-40 mb-4"> |
| |
| <div class="absolute inset-0 rounded-full brain-wave flex items-center justify-center"> |
| <i class="fas fa-brain text-white text-5xl floating"></i> |
| </div> |
| |
| |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-indigo-400 rounded-full flex items-center justify-center text-xs font-bold text-white glow orbit" style="animation: orbit 4s linear infinite;"> |
| <span class="transform -rotate-45">T</span> |
| </div> |
| <div class="absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-purple-400 rounded-full flex items-center justify-center text-xs font-bold text-white glow orbit" style="animation: orbit 5s linear infinite reverse; animation-delay: 1s;"> |
| <span class="transform rotate-45">K</span> |
| </div> |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-6 h-6 bg-pink-400 rounded-full flex items-center justify-center text-xs font-bold text-white glow orbit" style="animation: orbit 6s linear infinite; animation-delay: 2s;"> |
| <span class="transform rotate-90">V</span> |
| </div> |
| <div class="absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center text-xs font-bold text-white glow orbit" style="animation: orbit 7s linear infinite reverse; animation-delay: 3s;"> |
| <span class="transform -rotate-45">Q</span> |
| </div> |
| </div> |
| |
| |
| <div class="w-full bg-gray-700 rounded-lg p-3 mb-3"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-indigo-400 rounded-full thinking-dot mr-2"></div> |
| <div class="flex-1"> |
| <p id="status-text" class="text-gray-300 text-sm font-mono"> |
| <span class="typing">Initializing quantum cognition matrix...</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-full"> |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> |
| <span>0%</span> |
| <span id="progress-percent">0%</span> |
| <span>100%</span> |
| </div> |
| <div class="h-2 w-full bg-gray-700 rounded-full overflow-hidden"> |
| <div id="progress-bar" class="h-full bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-500 rounded-full transition-all duration-300" style="width: 0%"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> |
| <span>Tokenizing</span> |
| <span>Processing</span> |
| <span>Generating</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-4 bg-gray-800 rounded-xl p-4 border border-gray-700 relative overflow-hidden"> |
| |
| <div class="absolute inset-0 opacity-10 pointer-events-none"> |
| <div class="absolute top-0 left-0 w-full h-full" style="background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%); animation: pulse 4s infinite ease-in-out;"></div> |
| </div> |
| <div class="grid grid-cols-3 gap-4 text-center"> |
| <div> |
| <div class="text-indigo-300 text-sm mb-1">Tokens</div> |
| <div class="text-white font-mono text-xl"> |
| <span id="token-count">0</span>/<span>8192</span> |
| </div> |
| </div> |
| <div> |
| <div class="text-purple-300 text-sm mb-1">Latency</div> |
| <div class="text-white font-mono text-xl"> |
| <span id="latency">0</span>ms |
| </div> |
| </div> |
| <div> |
| <div class="text-pink-300 text-sm mb-1">Temp</div> |
| <div class="text-white font-mono text-xl"> |
| <span id="temperature">0.7</span>K |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1 bg-gray-800 rounded-xl p-4 border border-gray-700 overflow-hidden group relative"> |
| |
| <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/10 to-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div> |
| |
| <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-indigo-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div> |
| <h3 class="text-gray-300 text-sm font-semibold mb-3 flex items-center"> |
| <i class="fas fa-code text-blue-400 mr-2"></i> |
| Thought Stream |
| </h3> |
| <div class="bg-gray-900 rounded-lg p-3 h-64 overflow-y-auto font-mono text-sm"> |
| <div id="code-stream" class="space-y-1"> |
| <div class="code-line text-gray-500">// Initializing neural pathways...</div> |
| <div class="code-line text-blue-400">import transformers from 'quantum-nlp'</div> |
| <div class="code-line text-gray-500">// Loading knowledge embeddings...</div> |
| <div class="code-line text-purple-400">const context = loadEmbeddings('wiki2023')</div> |
| </div> |
| </div> |
| <div class="mt-3 flex justify-between items-center"> |
| <div class="text-xs text-gray-400"> |
| <i class="fas fa-circle text-green-400 mr-1"></i> |
| <span id="model-name">GPT-4o Quantum</span> |
| </div> |
| <div class="text-xs text-gray-400"> |
| <i class="far fa-clock text-yellow-400 mr-1"></i> |
| <span id="timestamp">Just now</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 px-4 py-3 border-t border-gray-700 flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <button id="start-btn" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center"> |
| <i class="fas fa-play mr-2"></i> Engage |
| </button> |
| <button id="boost-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition flex items-center"> |
| <i class="fas fa-bolt mr-2 text-yellow-400"></i> Boost |
| </button> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center text-xs text-gray-400"> |
| <i class="fas fa-shield-alt text-green-400 mr-1"></i> |
| <span>Ethical Filters: Active</span> |
| </div> |
| <button id="cancel-btn" class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-3 py-1.5 rounded transition flex items-center"> |
| <i class="fas fa-stop mr-1"></i> Abort |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-gray-900 rounded-xl p-6 border border-gray-800 max-w-4xl mx-auto"> |
| <h3 class="text-gray-300 text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-terminal text-green-400 mr-2"></i> |
| Neural Interface Console |
| </h3> |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div> |
| <input type="text" id="prompt-input" class="bg-gray-700 text-gray-200 px-3 py-2 rounded flex-1 font-mono text-sm" placeholder="Enter your cognitive query..." value="Explain quantum machine learning in simple terms"> |
| </div> |
| <div class="flex justify-end space-x-2"> |
| <button id="advanced-btn" class="text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 py-1 rounded transition"> |
| <i class="fas fa-sliders-h mr-1"></i> Advanced |
| </button> |
| <button id="submit-btn" class="text-xs bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white px-3 py-1 rounded transition"> |
| <i class="fas fa-paper-plane mr-1"></i> Submit |
| </button> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 flex justify-between"> |
| <div> |
| <i class="fas fa-info-circle mr-1"></i> |
| <span>System ready for cognitive processing</span> |
| </div> |
| <div> |
| <i class="fas fa-server mr-1"></i> |
| <span>Cluster: Quantum-Node-42</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const statusText = document.getElementById('status-text'); |
| const progressBar = document.getElementById('progress-bar'); |
| const progressPercent = document.getElementById('progress-percent'); |
| const tokenCount = document.getElementById('token-count'); |
| const latency = document.getElementById('latency'); |
| const temperature = document.getElementById('temperature'); |
| const modelName = document.getElementById('model-name'); |
| const timestamp = document.getElementById('timestamp'); |
| const codeStream = document.getElementById('code-stream'); |
| const connectionStatus = document.getElementById('connection-status'); |
| const startBtn = document.getElementById('start-btn'); |
| const boostBtn = document.getElementById('boost-btn'); |
| const cancelBtn = document.getElementById('cancel-btn'); |
| const submitBtn = document.getElementById('submit-btn'); |
| const promptInput = document.getElementById('prompt-input'); |
| const advancedBtn = document.getElementById('advanced-btn'); |
| |
| |
| let isThinking = false; |
| let isBoosted = false; |
| let progressInterval, tokenInterval, statusInterval, codeInterval, neuralInterval; |
| |
| |
| const models = [ |
| 'GPT-4o Quantum', |
| 'Claude-3 Opus', |
| 'Llama-3 400B', |
| 'Gemini Ultra', |
| 'Mistral-Next', |
| 'GPT-5 Preview' |
| ]; |
| |
| |
| const statusMessages = [ |
| "Initializing quantum cognition matrix...", |
| "Tokenizing input sequence with BPE-256k...", |
| "Analyzing semantic context in 128D space...", |
| "Generating latent representations...", |
| "Optimizing response coherence with RLHF...", |
| "Applying ethical and safety filters...", |
| "Finalizing output token stream...", |
| "Almost done, refining response quality..." |
| ]; |
| |
| |
| const codeLines = [ |
| "def generate_response(prompt):", |
| " tokens = tokenizer.encode(prompt)", |
| " embeddings = model.embed(tokens)", |
| " for layer in model.layers:", |
| " embeddings = layer(embeddings)", |
| " logits = model.head(embeddings)", |
| " tokens = sample(logits, temp=0.7)", |
| " return tokenizer.decode(tokens)", |
| "", |
| "// Applying attention mechanisms...", |
| "const attention = (Q, K, V) => {", |
| " const scores = matmul(Q, K.transpose())", |
| " const weights = softmax(scores / sqrt(d_k))", |
| " return matmul(weights, V)", |
| "}", |
| "", |
| "# Parallelizing across TPU pods...", |
| "with strategy.scope():", |
| " outputs = model(inputs, training=False)", |
| "", |
| "// Quantum state preparation...", |
| "qreg = QuantumRegister(8)", |
| "circuit = QuantumCircuit(qreg)", |
| "circuit.h(qreg)", |
| "circuit.measure_all()" |
| ]; |
| |
| |
| function startThinking() { |
| if (isThinking) return; |
| isThinking = true; |
| |
| |
| modelName.textContent = models[Math.floor(Math.random() * models.length)]; |
| updateTimestamp(); |
| connectionStatus.textContent = "Processing at quantum scale"; |
| |
| |
| let progress = 0; |
| progressInterval = setInterval(() => { |
| progress += (isBoosted ? Math.random() * 8 : Math.random() * 5); |
| if (progress > 100) progress = 100; |
| progressBar.style.width = `${progress}%`; |
| progressPercent.textContent = `${Math.round(progress)}%`; |
| |
| if (progress === 100) { |
| finishThinking(); |
| } |
| }, isBoosted ? 200 : 300); |
| |
| |
| let tokens = 0; |
| tokenInterval = setInterval(() => { |
| tokens += Math.floor(Math.random() * (isBoosted ? 20 : 10)); |
| if (tokens > 8192) tokens = 8192; |
| tokenCount.textContent = tokens; |
| }, isBoosted ? 80 : 100); |
| |
| |
| let lat = 0; |
| setInterval(() => { |
| lat = Math.floor(Math.random() * (isBoosted ? 200 : 400)); |
| latency.textContent = lat; |
| }, 1000); |
| |
| |
| let temp = 0.7; |
| setInterval(() => { |
| temp = (0.7 + Math.random() * 0.3).toFixed(1); |
| temperature.textContent = temp; |
| }, 2000); |
| |
| |
| let statusIndex = 0; |
| statusInterval = setInterval(() => { |
| statusIndex = (statusIndex + 1) % statusMessages.length; |
| statusText.innerHTML = `<span class="typing">${statusMessages[statusIndex]}</span>`; |
| }, isBoosted ? 1500 : 2000); |
| |
| |
| codeInterval = setInterval(addCodeLine, isBoosted ? 800 : 1200); |
| |
| |
| const paths = document.querySelectorAll('.neuron-path'); |
| paths.forEach(path => { |
| const length = path.getTotalLength(); |
| path.style.strokeDasharray = length; |
| path.style.strokeDashoffset = length; |
| }); |
| |
| |
| startBtn.innerHTML = `<i class="fas fa-sync-alt mr-2"></i> Processing`; |
| startBtn.classList.add('cursor-not-allowed'); |
| boostBtn.classList.add('opacity-50', 'cursor-not-allowed'); |
| } |
| |
| |
| function addCodeLine() { |
| const line = codeLines[Math.floor(Math.random() * codeLines.length)]; |
| const colorClasses = ['text-blue-400', 'text-purple-400', 'text-green-400', 'text-gray-500']; |
| const color = colorClasses[Math.floor(Math.random() * colorClasses.length)]; |
| |
| const codeLine = document.createElement('div'); |
| codeLine.className = `code-line ${color}`; |
| codeLine.textContent = line; |
| |
| codeStream.appendChild(codeLine); |
| codeStream.scrollTop = codeStream.scrollHeight; |
| |
| |
| if (codeStream.children.length > 15) { |
| codeStream.removeChild(codeStream.children[0]); |
| } |
| } |
| |
| |
| function finishThinking() { |
| clearIntervals(); |
| statusText.innerHTML = `<span class="typing">Processing complete! Ready for next query.</span>`; |
| connectionStatus.textContent = "Quantum connection stable"; |
| isThinking = false; |
| isBoosted = false; |
| |
| |
| const finalLine = document.createElement('div'); |
| finalLine.className = 'code-line text-green-400'; |
| finalLine.textContent = ">> Response generated successfully"; |
| codeStream.appendChild(finalLine); |
| codeStream.scrollTop = codeStream.scrollHeight; |
| |
| |
| startBtn.innerHTML = `<i class="fas fa-play mr-2"></i> Engage`; |
| startBtn.classList.remove('cursor-not-allowed'); |
| boostBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| boostBtn.innerHTML = `<i class="fas fa-bolt mr-2 text-yellow-400"></i> Boost`; |
| } |
| |
| |
| function clearIntervals() { |
| clearInterval(progressInterval); |
| clearInterval(tokenInterval); |
| clearInterval(statusInterval); |
| clearInterval(codeInterval); |
| } |
| |
| |
| function updateTimestamp() { |
| const now = new Date(); |
| timestamp.textContent = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
| } |
| |
| |
| startBtn.addEventListener('click', startThinking); |
| |
| boostBtn.addEventListener('click', function() { |
| if (!isThinking || isBoosted) return; |
| isBoosted = true; |
| this.innerHTML = `<i class="fas fa-bolt mr-2 text-yellow-400"></i> Boosted!`; |
| statusText.innerHTML = `<span class="typing">Activated quantum processing boost...</span>`; |
| |
| |
| const boostLine = document.createElement('div'); |
| boostLine.className = 'code-line text-yellow-400'; |
| boostLine.textContent = ">> Activating quantum processing boost..."; |
| codeStream.appendChild(boostLine); |
| codeStream.scrollTop = codeStream.scrollHeight; |
| }); |
| |
| cancelBtn.addEventListener('click', function() { |
| if (!isThinking) return; |
| clearIntervals(); |
| statusText.innerHTML = `<span class="typing">Process terminated by user</span>`; |
| connectionStatus.textContent = "Quantum connection paused"; |
| isThinking = false; |
| isBoosted = false; |
| |
| |
| const cancelLine = document.createElement('div'); |
| cancelLine.className = 'code-line text-red-400'; |
| cancelLine.textContent = ">> Process terminated by user"; |
| codeStream.appendChild(cancelLine); |
| codeStream.scrollTop = codeStream.scrollHeight; |
| |
| |
| startBtn.innerHTML = `<i class="fas fa-play mr-2"></i> Engage`; |
| startBtn.classList.remove('cursor-not-allowed'); |
| boostBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| boostBtn.innerHTML = `<i class="fas fa-bolt mr-2 text-yellow-400"></i> Boost`; |
| }); |
| |
| submitBtn.addEventListener('click', function() { |
| if (promptInput.value.trim() === '') return; |
| startThinking(); |
| }); |
| |
| promptInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| submitBtn.click(); |
| } |
| }); |
| |
| |
| updateTimestamp(); |
| |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| @keyframes orbit { |
| 0% { transform: rotate(0deg) translateX(40px) rotate(0deg); } |
| 100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); } |
| } |
| `; |
| document.head.appendChild(style); |
| }); |
| </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=jackboy70/thinking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
