Spaces:
Running
Running
Por, favor añade elementos visuales de redes neuronales interactivas y todas las paginas del frontend, no solamente en el dashboard, y quiero que tambien implementes un aspecto visual mas futurista en todo el frontend mas elementos visuales interactivos, mucho mas efectos 3D y mas colores gradientes con alto contraste! - Initial Deployment
6d78783
verified
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hiper Feature Pipeline - Dataset Explorer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="h-8 w-8 text-blue-400"></i> | |
| <span class="ml-2 text-xl font-bold">Hiper Feature Pipeline</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Dashboard</a> | |
| <a href="datasets.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700 text-white">Datasets</a> | |
| <a href="training.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Training</a> | |
| <a href="models.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Models</a> | |
| <a href="system-health.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">System Health</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Header --> | |
| <div class="text-center py-12" data-aos="fade-down"> | |
| <h1 class="text-5xl font-bold mb-4 orbitron gradient-text">DATASET EXPLORER</h1> | |
| <p class="text-xl text-[#42dcff] orbitron">FINANCIAL DATA MANAGEMENT WITH EVENT SOURCING ARCHITECTURE</p> | |
| <div class="mt-4 data-stream"></div> | |
| </div> | |
| <!-- Upload Section --> | |
| <div class="glass-effect rounded-lg p-6 mb-12" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold mb-6">Ingest New Dataset</h2> | |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center"> | |
| <i data-feather="upload-cloud" class="h-12 w-12 mx-auto text-gray-400"></i> | |
| <p class="mt-4 text-gray-300">Drag & drop your dataset file or click to browse</p> | |
| <button class="mt-4 px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg">Select File</button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Dataset Name</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3" placeholder="Enter dataset name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Dataset Type</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3"> | |
| <option>Financial Time Series</option> | |
| <option>Market Data</option> | |
| <option>Economic Indicators</option> | |
| <option>Alternative Data</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full py-3 bg-green-600 hover:bg-green-700 rounded-lg font-medium">Ingest Dataset</button> | |
| </div> | |
| <!-- Datasets Grid --> | |
| <h2 class="text-2xl font-bold mb-6" data-aos="fade-up">Available Datasets</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> | |
| <!-- Dataset Card 1 --> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">SP500_2023</h3> | |
| <p class="text-sm text-gray-400">Financial Time Series</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-500 rounded-full text-xs">Validated</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Records:</span> | |
| <span>12,584</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Size:</span> | |
| <span>45.2 MB</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Ingested:</span> | |
| <span>2 days ago</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm">Explore</button> | |
| <button class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Download</button> | |
| </div> | |
| </div> | |
| <!-- Dataset Card 2 --> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">NASDAQ_Stocks</h3> | |
| <p class="text-sm text-gray-400">Market Data</p> | |
| </div> | |
| <span class="px-2 py-1 bg-yellow-500 rounded-full text-xs">Processing</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Records:</span> | |
| <span>8,432</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Size:</span> | |
| <span>32.1 MB</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Ingested:</span> | |
| <span>5 hours ago</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm">Explore</button> | |
| <button class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Download</button> | |
| </div> | |
| </div> | |
| <!-- Dataset Card 3 --> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Crypto_Market</h3> | |
| <p class="text-sm text-gray-400">Alternative Data</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-500 rounded-full text-xs">Validated</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Records:</span> | |
| <span>24,967</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Size:</span> | |
| <span>89.5 MB</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Ingested:</span> | |
| <span>1 week ago</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm">Explore</button> | |
| <button class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Download</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Quality Metrics --> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold mb-6">Data Quality Metrics</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="text-center p-4 bg-gray-800 rounded-lg"> | |
| <div class="text-3xl font-bold text-green-400">98.7%</div> | |
| <div class="text-sm text-gray-400 mt-1">Completeness</div> | |
| </div> | |
| <div class="text-center p-4 bg-gray-800 rounded-lg"> | |
| <div class="text-3xl font-bold text-blue-400">96.2%</div> | |
| <div class="text-sm text-gray-400 mt-1">Consistency</div> | |
| </div> | |
| <div class="text-center p-4 bg-gray-800 rounded-lg"> | |
| <div class="text-3xl font-bold text-yellow-400">94.8%</div> | |
| <div class="text-sm text-gray-400 mt-1">Accuracy</div> | |
| </div> | |
| <div class="text-center p-4 bg-gray-800 rounded-lg"> | |
| <div class="text-3xl font-bold text-purple-400">99.1%</div> | |
| <div class="text-sm text-gray-400 mt-1">Timeliness</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-effect nav-glow mt-12 py-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <p class="text-[#42dcff] orbitron">QUANTUM TRADING AI v6.0 - ADVANCED FINANCIAL MACHINE LEARNING SYSTEM</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js NET background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x4260ff, | |
| backgroundColor: 0x10172a, | |
| points: 15.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize particles.js | |
| particlesJS('particles-js', { | |
| particles: { | |
| number: { value: 80, density: { enable: true, value_area: 800 } }, | |
| color: { value: "#42dcff" }, | |
| shape: { | |
| type: "circle", | |
| stroke: { width: 0, color: "#000000" }, | |
| polygon: { nb_sides: 5 } | |
| }, | |
| opacity: { | |
| value: 0.5, | |
| random: true, | |
| anim: { enable: true, speed: 1, opacity_min: 极狐.1, sync: false } | |
| }, | |
| size: { | |
| value: 3, | |
| random: true, | |
| anim: { enable: true, speed: 2, size_min: 0.1, sync: false } | |
| }, | |
| line_linked: { | |
| enable: true, | |
| distance: 150, | |
| color: "#4260ff", | |
| opacity: 0.4, | |
| width: 1 | |
| }, | |
| move: { | |
| enable: true, | |
| speed: 2, | |
| direction: "none", | |
| random: true, | |
| straight: false, | |
| out_mode: "极狐", | |
| bounce: false, | |
| attract: { enable: false, rotateX: 600, rotateY: 1200 } | |
| } | |
| }, | |
| interactivity: { | |
| detect_on: "canvas", | |
| events: { | |
| onhover: { enable: true, mode: "grab" }, | |
| onclick: { enable: true, mode: "push" }, | |
| resize: true | |
| }, | |
| modes: { | |
| grab: { distance: 140, line_linked: { opacity: 1 } }, | |
| push: { particles_nb: 4 } | |
| } | |
| }, | |
| retina_detect: true | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Create neural network connections | |
| document.addEventListener('DOMContentLoaded', function() { | |
| createNeuralConnections(); | |
| }); | |
| function createNeuralConnections() { | |
| const svg = document.querySelector('.neural-connection'); | |
| const containers = document.querySelectorAll('.glass-effect'); | |
| // Clear existing connections | |
| svg.innerHTML = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#42dcff" /><stop offset="50%" stop-color="#4260ff" /><stop offset="100%" stop-color="#9042ff" /></linearGradient></defs>'; | |
| // Create connections between elements | |
| for (let i = 0; i < containers.length - 1; i++) { | |
| for (let j = i + 1; j < containers.length; j++) { | |
| if (Math.random() > 0.7) { // Only connect some elements | |
| const rect1 = containers[i].getBoundingClientRect(); | |
| const rect2 = containers[j].getBoundingClientRect(); | |
| const x1 = rect1.left + rect1.width / 2; | |
| const y1 = rect1.top + rect1.height / 2; | |
| const x2 = rect2.left + rect2.width / 2; | |
| const y2 = rect2.top + rect2.height / 2; | |
| // Create a curved line | |
| const curveIntensity = 50 * (Math.random() - 0.5); | |
| const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| path.setAttribute('d', `M${x1},${y1} C${x1 + curveIntensity},${y1} ${x2 - curveIntensity},${y2} ${x2},${y2}`); | |
| path.setAttribute('stroke', 'url(#gradient)'); | |
| path.setAttribute('stroke-width', '1'); | |
| path.setAttribute('fill', 'none'); | |
| path.setAttribute('stroke-dasharray', '5,5'); | |
| // Add animation | |
| const animate = document.createElementNS('http://www.w3.org/2000/s极狐', 'animate'); | |
| animate.setAttribute('attributeName', 'stroke-dashoffset'); | |
| animate.setAttribute('from', '0'); | |
| animate.setAttribute('to', '10'); | |
| animate.setAttribute('dur', '1s'); | |
| animate.setAttribute('repeatCount', 'indefinite'); | |
| path.appendChild(animate); | |
| svg.appendChild(path); | |
| } | |
| } | |
| } | |
| } | |
| // Recreate connections on resize | |
| window.addEventListener('resize', createNeuralConnections); | |
| </script> | |
| </body> | |
| </html> | |