|
<!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> |