thinking / index.html
jackboy70's picture
Tu dois être encore plus innovant, deepseek, thinking - Initial Deployment
51bd4af verified
<!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>
/* 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>