Download index.html from jackboy70/thinking: direct link, hf CLI and curl.
- Browser
- Download file 38.9 kB
-
https://huggingface.co/spaces/jackboy70/thinking/resolve/main/index.html
- Command line
-
hf download hf://spaces/jackboy70/thinking/index.html
-
curl -L -o index.html https://huggingface.co/spaces/jackboy70/thinking/resolve/main/index.html
38.9 kB
| <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> | |
| /* New quantum effects */ | |
| @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"> | |
| <!-- Neural Nexus Container --> | |
| <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"> | |
| <!-- Holographic Effect Overlay --> | |
| <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> | |
| <!-- Header --> | |
| <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> | |
| <!-- Main Content Area --> | |
| <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative"> | |
| <!-- Quantum Particle Background --> | |
| <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> | |
| <!-- Left Panel - Neural Visualization --> | |
| <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"> | |
| <!-- Quantum Entanglement Visualization --> | |
| <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"> | |
| <!-- Interactive Neural Network SVG --> | |
| <svg id="neural-network" viewBox="0 0 200 200" class="w-full h-full"> | |
| <!-- Background grid --> | |
| <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)"/> | |
| <!-- Neural connections --> | |
| <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"/> | |
| <!-- Neurons --> | |
| <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> | |
| <!-- Sparkles for effect --> | |
| <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> | |
| <!-- Center Panel - Thinking Core --> | |
| <div class="lg:col-span-1 flex flex-col"> | |
| <!-- Brain Core Visualization --> | |
| <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"> | |
| <!-- Animated brain core --> | |
| <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> | |
| <!-- Orbiting tokens --> | |
| <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> | |
| <!-- Processing Status --> | |
| <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> | |
| <!-- Progress Visualization --> | |
| <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> | |
| <!-- Quantum State Metrics --> | |
| <div class="mt-4 bg-gray-800 rounded-xl p-4 border border-gray-700 relative overflow-hidden"> | |
| <!-- Quantum Decoherence Visualization --> | |
| <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> | |
| <!-- Right Panel - Code Execution --> | |
| <div class="lg:col-span-1 bg-gray-800 rounded-xl p-4 border border-gray-700 overflow-hidden group relative"> | |
| <!-- Quantum Superposition Effect --> | |
| <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> | |
| <!-- Entangled Code Highlight --> | |
| <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> | |
| <!-- Footer Controls --> | |
| <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> | |
| <!-- Interactive Console (for demo) --> | |
| <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() { | |
| // DOM Elements | |
| 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'); | |
| // State variables | |
| let isThinking = false; | |
| let isBoosted = false; | |
| let progressInterval, tokenInterval, statusInterval, codeInterval, neuralInterval; | |
| // Model names | |
| const models = [ | |
| 'GPT-4o Quantum', | |
| 'Claude-3 Opus', | |
| 'Llama-3 400B', | |
| 'Gemini Ultra', | |
| 'Mistral-Next', | |
| 'GPT-5 Preview' | |
| ]; | |
| // Status messages | |
| 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..." | |
| ]; | |
| // Code stream lines | |
| 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()" | |
| ]; | |
| // Start thinking process | |
| function startThinking() { | |
| if (isThinking) return; | |
| isThinking = true; | |
| // Random model and timestamp | |
| modelName.textContent = models[Math.floor(Math.random() * models.length)]; | |
| updateTimestamp(); | |
| connectionStatus.textContent = "Processing at quantum scale"; | |
| // Progress animation | |
| 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); | |
| // Token counter | |
| let tokens = 0; | |
| tokenInterval = setInterval(() => { | |
| tokens += Math.floor(Math.random() * (isBoosted ? 20 : 10)); | |
| if (tokens > 8192) tokens = 8192; | |
| tokenCount.textContent = tokens; | |
| }, isBoosted ? 80 : 100); | |
| // Latency simulation | |
| let lat = 0; | |
| setInterval(() => { | |
| lat = Math.floor(Math.random() * (isBoosted ? 200 : 400)); | |
| latency.textContent = lat; | |
| }, 1000); | |
| // Temperature fluctuation | |
| let temp = 0.7; | |
| setInterval(() => { | |
| temp = (0.7 + Math.random() * 0.3).toFixed(1); | |
| temperature.textContent = temp; | |
| }, 2000); | |
| // Status messages | |
| let statusIndex = 0; | |
| statusInterval = setInterval(() => { | |
| statusIndex = (statusIndex + 1) % statusMessages.length; | |
| statusText.innerHTML = `<span class="typing">${statusMessages[statusIndex]}</span>`; | |
| }, isBoosted ? 1500 : 2000); | |
| // Code stream | |
| codeInterval = setInterval(addCodeLine, isBoosted ? 800 : 1200); | |
| // Neural network animation | |
| const paths = document.querySelectorAll('.neuron-path'); | |
| paths.forEach(path => { | |
| const length = path.getTotalLength(); | |
| path.style.strokeDasharray = length; | |
| path.style.strokeDashoffset = length; | |
| }); | |
| // UI updates | |
| 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'); | |
| } | |
| // Add code line to stream | |
| 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; | |
| // Limit to 15 lines | |
| if (codeStream.children.length > 15) { | |
| codeStream.removeChild(codeStream.children[0]); | |
| } | |
| } | |
| // Finish thinking process | |
| function finishThinking() { | |
| clearIntervals(); | |
| statusText.innerHTML = `<span class="typing">Processing complete! Ready for next query.</span>`; | |
| connectionStatus.textContent = "Quantum connection stable"; | |
| isThinking = false; | |
| isBoosted = false; | |
| // Final code line | |
| const finalLine = document.createElement('div'); | |
| finalLine.className = 'code-line text-green-400'; | |
| finalLine.textContent = ">> Response generated successfully"; | |
| codeStream.appendChild(finalLine); | |
| codeStream.scrollTop = codeStream.scrollHeight; | |
| // UI updates | |
| 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`; | |
| } | |
| // Clear all intervals | |
| function clearIntervals() { | |
| clearInterval(progressInterval); | |
| clearInterval(tokenInterval); | |
| clearInterval(statusInterval); | |
| clearInterval(codeInterval); | |
| } | |
| // Update timestamp | |
| function updateTimestamp() { | |
| const now = new Date(); | |
| timestamp.textContent = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| } | |
| // Event listeners | |
| 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>`; | |
| // Add boost effect line | |
| 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; | |
| // Add cancellation line | |
| 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; | |
| // UI updates | |
| 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(); | |
| } | |
| }); | |
| // Initial timestamp | |
| updateTimestamp(); | |
| // Add orbit animation styles dynamically | |
| 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> |