Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DataGlobe - 3D Data Collection Visualization</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/globe.gl@2.21.2/dist/globe.gl.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #000428 0%, #004e92 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% {box-shadow: 0 0 0 0 rgba(0, 99, 216, 0.5);} | |
| 70% {box-shadow: 0 0 0 10px rgba(0, 99, 216, 0);} | |
| 100% {box-shadow: 0 0 0 0 rgba(0, 99, 216, 0);} | |
| } | |
| .globe-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white font-sans"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed top-0 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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-globe-americas text-blue-400 text-xl mr-2"></i> | |
| <span class="text-xl font-bold">Data<span class="text-blue-400">Globe</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4"> | |
| <a href="#" class="text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-gray-300 hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Models</a> | |
| <a href="#" class="text-gray-300 hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Data Streams</a> | |
| <a href="#" class="text-gray-300 hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Analytics</a> | |
| <button class="ml-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-all"> | |
| Connect Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-16 min-h-screen"> | |
| <!-- Header --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-4"> | |
| Global Data Collection Network | |
| </h1> | |
| <p class="max-w-3xl mx-auto text-xl text-blue-100"> | |
| Real-time visualization of synthetic data collection across global nodes | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 -mt-16 relative z-10"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Data Points Collected --> | |
| <div class="glass-effect rounded-xl p-6 transition-all duration-300 dashboard-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-blue-200">Data Points Collected</p> | |
| <h3 class="text-3xl font-bold mt-2">1.8<span class="text-blue-400">B</span></h3> | |
| </div> | |
| <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-database text-blue-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-400"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>12.4% from last week</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Nodes --> | |
| <div class="glass-effect rounded-xl p-6 transition-all duration-300 dashboard-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-blue-200">Active Nodes</p> | |
| <h3 class="text-3xl font-bold mt-2">327</h3> | |
| </div> | |
| <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-server text-purple-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-400"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>5 new nodes this week</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Processing Speed --> | |
| <div class="glass-effect rounded-xl p-6 transition-all duration-300 dashboard-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-blue-200">Processing Speed</p> | |
| <h3 class="text-3xl font-bold mt-2">24.7<span class="text-xl">TB/s</span></h3> | |
| </div> | |
| <div class="bg-green-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-tachometer-alt text-green-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-400"> | |
| <i class="fas fa-bolt mr-1"></i> | |
| <span>98.3% uptime</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Accuracy --> | |
| <div class="glass-effect rounded-xl p-6 transition-all duration-300 dashboard-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-blue-200">Model Accuracy</p> | |
| <h3 class="text-3xl font-bold mt-2">96.4<span class="text-xl">%</span></h3> | |
| </div> | |
| <div class="bg-yellow-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-brain text-yellow-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-400"> | |
| <i class="fas fa-chart-line mr-1"></i> | |
| <span>+2.1% this month</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3D Globe Visualization --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="glass-effect rounded-xl overflow-hidden" style="height: 600px;"> | |
| <div id="globeViz" class="globe-container"></div> | |
| </div> | |
| </div> | |
| <!-- Controls and Analytics --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Data Types --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-bold">Data Types Collected</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-blue-500 bg-opacity-30 px-2 py-1 rounded">Live</button> | |
| <button class="text-xs bg-gray-700 bg-opacity-30 px-2 py-1 rounded">24h</button> | |
| <button class="text-xs bg-gray-700 bg-opacity-30 px-2 py-1 rounded">7d</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-blue-300">Computer Vision</span> | |
| <span>42%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-purple-300">Natural Language</span> | |
| <span>35%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-green-300">Time Series</span> | |
| <span>12%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-yellow-300">Audio</span> | |
| <span>8%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 8%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-red-300">Other</span> | |
| <span>3%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 3%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Data Nodes --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-bold">Top Data Nodes</h3> | |
| <div class="text-xs text-blue-300">Bandwidth Efficiency</div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">US-West-1</div> | |
| <div class="text-xs text-gray-400">San Francisco, USA</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm">2.4 TB/s</div> | |
| <div class="text-xs text-green-400">98.7% efficiency</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">EU-Central-1</div> | |
| <div class="text-xs text-gray-400">Frankfurt, Germany</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm">1.8 TB/s</div> | |
| <div class="text-xs text-green-400">97.2% efficiency</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">AP-South-1</div> | |
| <div class="text-xs text-gray-400">Mumbai, India</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm">1.5 TB/s</div> | |
| <div class="text-xs text-green-400">96.5% efficiency</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">AP-East-1</div> | |
| <div class="text-xs text-gray-400">Hong Kong, China</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm">1.2 TB/s</div> | |
| <div class="text-xs text-green-400">95.8% efficiency</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">SA-East-1</div> | |
| <div class="text-xs text-gray-400">São Paulo, Brazil</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm">0.9 TB/s</div> | |
| <div class="text-xs text-yellow-400">93.1% efficiency</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Flow Status --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-bold">Data Pipeline Status</h3> | |
| <div class="text-xs flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span> | |
| <span>All systems operational</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cloud-download-alt text-blue-400 mr-2"></i> | |
| <span class="text-sm">Ingestion</span> | |
| </div> | |
| <div class="text-xs px-2 py-1 bg-green-900 bg-opacity-30 rounded-full text-green-400"> | |
| Running | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microchip text-purple-400 mr-2"></i> | |
| <span class="text-sm">Processing</span> | |
| </div> | |
| <div class="text-xs px-2 py-1 bg-green-900 bg-opacity-30 rounded-full text-green-400"> | |
| Running | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-green-400 mr-2"></i> | |
| <span class="text-sm">Synthetic Generation</span> | |
| </div> | |
| <div class="text-xs px-2 py-1 bg-green-900 bg-opacity-30 rounded-full text-green-400"> | |
| Running | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span class="text-sm">Validation</span> | |
| </div> | |
| <div class="text-xs px-2 py-1 bg-green-900 bg-opacity-30 rounded-full text-green-400"> | |
| Running | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-database text-red-400 mr-2"></i> | |
| <span class="text-sm">Storage</span> | |
| </div> | |
| <div class="text-xs px-2 py-1 bg-yellow-900 bg-opacity-30 rounded-full text-yellow-400"> | |
| Warning | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium transition-all"> | |
| View Detailed Metrics | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Stream --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-bold">Real-time Data Stream</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="pulse-animation w-3 h-3 bg-blue-500 rounded-full"></span> | |
| <span class="text-xs text-blue-300">LIVE</span> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-4 font-mono text-sm h-64 overflow-y-auto"> | |
| <code> | |
| <p class="text-blue-400">> Initializing data stream connection...</p> | |
| <p class="text-green-400">> Connection established with US-West-1 [ping: 24ms]</p> | |
| <p class="text-purple-400">> Receiving CV data batch (1,243 images) from node: EU-Central-1</p> | |
| <p class="text-yellow-400">> Processing NLP dataset (783,412 tokens) from AP-South-1</p> | |
| <p class="text-blue-400">> Generating synthetic variants (12,411 samples) in queue</p> | |
| <p class="text-green-400">> Validation completed for TimeSeries batch XZ-1242</p> | |
| <p class="text-purple-400">> Compressing dataset partition (78.4% reduction)</p> | |
| <p class="text-yellow-400">> Streaming to storage cluster (transfer rate: 2.1TB/s)</p> | |
| <p class="text-blue-400">> System check: All nodes operational [327/327]</p> | |
| <p class="text-green-400">> Queue status: 12 active pipelines (98.7% capacity)</p> | |
| <p class="text-purple-400">> Receiving CV data batch (3,412 images) from node: SA-East-1</p> | |
| <p class="text-yellow-400">> Processing Audio dataset (124.4 hours) from AP-East-1</p> | |
| <p class="text-blue-400">> Synthetic generation complete [batch ID: SYN-78124]</p> | |
| <p class="text-green-400">> Quality check passed (98.6% accuracy threshold)</p> | |
| <p class="text-purple-400">> Compressed storage size: 24.7TB (original: 78.4TB)</p> | |
| <p class="text-yellow-400">> System update: New node detected [US-East-3]</p> | |
| </code> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize the 3D globe visualization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample data points | |
| const N = 50; | |
| const gData = [...Array(N).keys()].map(() => ({ | |
| lat: (Math.random() - 0.5) * 180, | |
| lng: (Math.random() - 0.5) * 360, | |
| size: Math.random() * 0.5 + 0.1, | |
| color: ['red', 'white', 'blue', 'green', 'yellow'][Math.round(Math.random() * 4)] | |
| })); | |
| // Major data center locations with weights | |
| const dataCenters = [ | |
| { lat: 37.7749, lng: -122.4194, size: 1.0, name: 'San Francisco', value: 42 }, // US West | |
| { lat: 40.7128, lng: -74.0060, size: 0.8, name: 'New York', value: 35 }, // US East | |
| { lat: 51.5074, lng: -0.1278, size: 0.7, name: 'London', value: 28 }, // Europe | |
| { lat: 48.8566, lng: 2.3522, size: 0.6, name: 'Paris', value: 24 }, // Europe | |
| { lat: 35.6895, lng: 139.6917, size: 0.7, name: 'Tokyo', value: 31 }, // Asia | |
| { lat: 19.0760, lng: 72.8777, size: 0.6, name: 'Mumbai', value: 22 }, // Asia | |
| { lat: -33.8688, lng: 151.2093, size: 0.5, name: 'Sydney', value: 18 }, // Australia | |
| { lat: -22.9068, lng: -43.1729, size: 0.5, name: 'Rio de Janeiro', value: 15 } // South America | |
| ]; | |
| // Create the globe | |
| const globe = Globe() | |
| .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg') | |
| .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png') | |
| .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') | |
| .hexBinPointsData(dataCenters) | |
| .hexBinPointWeight('value') | |
| .hexAltitude(d => d.sumWeight * 0.001) | |
| .hexTopColor(d => 'rgba(0, 123, 255, 0.8)') | |
| .hexSideColor(d => 'rgba(0, 80, 255, 0.5)') | |
| .hexBinResolution(4) | |
| .enablePointerInteraction(false) | |
| (document.getElementById('globeViz')); | |
| // Add arcs between major nodes | |
| globe.arcsData([ | |
| { startLat: 37.7749, startLng: -122.4194, endLat: 40.7128, endLng: -74.0060, color: ['red', 'blue'] }, | |
| { startLat: 40.7128, startLng: -74.0060, endLat: 51.5074, endLng: -0.1278, color: ['blue', 'yellow'] }, | |
| { startLat: 51.5074, startLng: -0.1278, endLat: 35.6895, endLng: 139.6917, color: ['yellow', 'green'] }, | |
| { startLat: 35.6895, startLng: 139.6917, endLat: 19.0760, endLng: 72.8777, color: ['green', 'purple'] }, | |
| { startLat: -33.8688, startLng: 151.2093, endLat: -22.9068, endLng: -43.1729, color: ['orange', 'white'] }, | |
| { startLat: 37.7749, startLng: -122.4194, endLat: -33.8688, endLng: 151.2093, color: ['red', 'orange'] } | |
| ]); | |
| // Auto-rotate | |
| globe.controls().autoRotate = true; | |
| globe.controls().autoRotateSpeed = 0.5; | |
| // Add pulse animation to data points | |
| setInterval(() => { | |
| dataCenters.forEach(center => { | |
| center.size = 0.5 + Math.random() * 0.6; | |
| }); | |
| globe.hexBinPointsData([...dataCenters]); | |
| }, 1500); | |
| // Resize handler | |
| window.addEventListener('resize', () => { | |
| globe.width([globeViz.clientWidth]); | |
| globe.height([globeViz.clientHeight]); | |
| }); | |
| // Tooltip for data centers | |
| globe.onHexBinClick(hex => { | |
| const { lat, lng, points } = hex; | |
| const totalValue = points.reduce((sum, pt) => sum + pt.value, 0); | |
| const avgSize = points.reduce((sum, pt) => sum + pt.size, 0) / points.length; | |
| alert(`Data Center Hub | |
| Location: ${points[0].name} | |
| Total Throughput: ${totalValue} TB/s | |
| Average Latency: ${Math.round(avgSize * 100)}ms`); | |
| }); | |
| // Add rings to major nodes | |
| setTimeout(() => { | |
| globe.ringsData(dataCenters.map(center => ({ | |
| lat: center.lat, | |
| lng: center.lng, | |
| maxR: center.size * 3, | |
| propagationSpeed: center.size * 0.5, | |
| repeatPeriod: 1000 + Math.random() * 2000 | |
| }))); | |
| }, 2000); | |
| }); | |
| </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=maxtom0/cyberplatform" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |