Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FEI-Next - Cognitive Exploration</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @keyframes synapsePulse { | |
| 0% { opacity: 0.3; } | |
| 50% { opacity: 0.8; } | |
| 100% { opacity: 0.3; } | |
| } | |
| .synapse { | |
| animation: synapsePulse 4s infinite ease-in-out; | |
| } | |
| .gradient-mask { | |
| mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); | |
| } | |
| .thought-bubble { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .thought-bubble:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 24px -12px rgba(74, 144, 226, 0.4); | |
| } | |
| .proof-halo { | |
| box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8); | |
| animation: proofPulse 3s infinite; | |
| } | |
| @keyframes proofPulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8); | |
| 70% { box-shadow: 0 0 0 10px rgba(74, 144, 226, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); } | |
| } | |
| .data-node { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .data-node:hover { | |
| transform: scale(1.05); | |
| filter: brightness(1.2); | |
| } | |
| .cognitive-network { | |
| background: | |
| radial-gradient(circle at 20% 20%, rgba(74, 144, 226, 0.1) 0%, | |
| radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> | |
| <header class="gradient-mask px-6 py-8"> | |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-blue-500 rounded-full opacity-20 blur-md"></div> | |
| <div class="relative bg-gradient-to-br from-blue-600 to-indigo-800 w-12 h-12 rounded-2xl flex items-center justify-center"> | |
| <i data-feather="compass" class="w-6 h-6"></i> | |
| </div> | |
| <h1 class="ml-4 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-300"> | |
| Cognitive Exploration | |
| </h1> | |
| </div> | |
| <nav class="flex space-x-6"> | |
| <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center"> | |
| <i data-feather="home" class="w-4 h-4 mr-2"></i> | |
| Home | |
| </a> | |
| <a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center"> | |
| <i data-feather="code" class="w-4 h-4 mr-2"></i> | |
| API Explorer | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-6 pb-20"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Control Panel --> | |
| <div class="lg:col-span-1 bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"> | |
| <h3 class="text-lg font-bold mb-4">Exploration Controls</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Zoom Level</label> | |
| <input type="range" min="1" max="10" value="3" class="w-full" id="zoom-control"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-2">Focus Area</label> | |
| <select class="w-full bg-gray-700/50 border border-gray-600/50 rounded-lg px-3 py-2 text-sm"> | |
| <option>Memory Patterns</option> | |
| <option>Reasoning Traces</option> | |
| <option>Decision Pathways</option> | |
| </select> | |
| </div> | |
| <button onclick="generateNewData()" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm transition-colors"> | |
| Generate New Data | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Visualization --> | |
| <div class="lg:col-span-3 cognitive-network bg-gray-800/20 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"> | |
| <h3 class="text-lg font-bold mb-4">Cognitive Network</h3> | |
| <div class="h-96 relative rounded-xl bg-gray-900/50 border border-gray-700/50"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="grid grid-cols-5 gap-6" id="network-container"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Explorer --> | |
| <div class="mt-8 bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"> | |
| <h3 class="text-lg font-bold mb-4">Live Data Stream</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="data-stream"> | |
| <div class="text-center text-gray-400 py-8"> | |
| <i data-feather="refresh-cw" class="w-8 h-8 mx-auto mb-3 animate-spin"></i> | |
| <p>Loading cognitive patterns...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="border-t border-gray-800 py-8 mt-12"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="activity" class="w-5 h-5 text-blue-400 mr-2"></i> | |
| <span class="text-sm text-gray-400">FEI-Next Explorer v1.0</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors"> | |
| <i data-feather="home"></i> | |
| </a> | |
| <a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors"> | |
| <i data-feather="code"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| if (typeof VANTA !== 'undefined') { | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x111827, | |
| points: 12, | |
| maxDistance: 20, | |
| spacing: 18 | |
| }); | |
| } | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Cognitive network visualization | |
| const createNetworkNodes = () => { | |
| const container = document.getElementById('network-container'); | |
| container.innerHTML = ''; | |
| const nodes = 15; | |
| const colors = ['blue', 'purple', 'green', 'yellow', 'red']; | |
| for (let i = 0; i < nodes; i++) { | |
| const node = document.createElement('div'); | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| const size = Math.random() * 16 + 8; | |
| const x = Math.random() * 80 + 10; | |
| const y = Math.random() * 80 + 10; | |
| const delay = Math.random() * 2; | |
| node.className = `data-node absolute w-${Math.round(size/4)} h-${Math.round(size/4)} rounded-full bg-${color}-500/40 synapse'; | |
| node.style.left = `${x}%`; | |
| node.style.top = `${y}%`; | |
| node.style.width = `${size}px`; | |
| node.style.height = `${size}px`; | |
| node.style.animationDelay = `${delay}s`; | |
| node.title = `Cognitive Node ${i+1}`; | |
| node.addEventListener('click', () => { | |
| exploreNode(i+1); | |
| }); | |
| container.appendChild(node); | |
| } | |
| }; | |
| // Load and display data | |
| const loadDataStream = async () => { | |
| try { | |
| const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=6'); | |
| const posts = await response.json(); | |
| const streamContainer = document.getElementById('data-stream'); | |
| streamContainer.innerHTML = ''; | |
| posts.forEach(post => { | |
| const postElement = document.createElement('div'); | |
| postElement.className = 'thought-bubble bg-gray-700/50 p-4 rounded-xl border border-gray-600/50'; | |
| postElement.innerHTML = ` | |
| <h4 class="font-medium text-sm mb-2">${post.title.substring(0, 25)}...</h4> | |
| <p class="text-xs text-gray-300">${post.body.substring(0, 60)}...</p> | |
| <button class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-xs transition-colors" onclick="exploreNode(${post.id})"> | |
| Trace Pathway | |
| </button> | |
| `; | |
| streamContainer.appendChild(postElement); | |
| }); | |
| } catch (error) { | |
| console.log('Failed to load data stream:', error); | |
| } | |
| }; | |
| // Explore individual node | |
| window.exploreNode = async (id) => { | |
| try { | |
| const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`); | |
| const data = await response.json(); | |
| const overlay = document.createElement('div'); | |
| overlay.className = 'fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center p-8'; | |
| overlay.innerHTML = ` | |
| <div class="relative max-w-4xl w-full bg-gray-800 rounded-2xl p-8 border border-gray-700 max-h-[90vh] overflow-auto"> | |
| <button class="absolute top-4 right-4 text-gray-400 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| <h3 class="text-xl font-bold mb-4">Cognitive Node #${id}</h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-700/50 rounded-lg"> | |
| <h4 class="font-medium mb-2">${data.title}</h4> | |
| <p class="text-gray-300">${data.body}</p> | |
| <div class="mt-4 grid grid-cols-3 gap-4"> | |
| <div class="text-center p-3 bg-gray-600/30 rounded"> | |
| <i data-feather="cpu" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i> | |
| <span class="text-sm text-gray-300">Processing</span> | |
| </div> | |
| <div class="text-center p-3 bg-gray-600/30 rounded"> | |
| <i data-feather="activity" class="w-5 h-5 text-purple-400 mx-auto mb-2"></i> | |
| <span class="text-sm text-gray-300">Memory</span> | |
| </div> | |
| <div class="text-center p-3 bg-gray-600/30 rounded"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-green-400 mx-auto mb-2"></i> | |
| <span class="text-sm text-gray-300">Verified</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(overlay); | |
| feather.replace(); | |
| // Add close handler | |
| overlay.querySelector('button').addEventListener('click', () => { | |
| overlay.remove(); | |
| }); | |
| } catch (error) { | |
| console.log('Node exploration failed:', error); | |
| } | |
| }; | |
| // Generate new data | |
| window.generateNewData = () => { | |
| createNetworkNodes(); | |
| loadDataStream(); | |
| }; | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createNetworkNodes(); | |
| loadDataStream(); | |
| // Add zoom control functionality | |
| document.getElementById('zoom-control').addEventListener('input', (e) => { | |
| const zoomLevel = e.target.value / 3; | |
| document.getElementById('network-container').style.transform = `scale(${zoomLevel})`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |