| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SNET - Object Detection Platform</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .sidebar-item:hover .sidebar-icon { |
| transform: translateX(5px); |
| } |
| .progress-ring__circle { |
| transition: stroke-dashoffset 0.35s; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| .dropzone { |
| border: 2px dashed #a0aec0; |
| transition: all 0.3s ease; |
| } |
| .dropzone.active { |
| border-color: #4fd1c5; |
| background-color: rgba(79, 209, 197, 0.1); |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 gradient-bg text-white"> |
| <div class="flex items-center justify-center h-16 px-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye text-2xl mr-2"></i> |
| <span class="text-xl font-bold">SNET</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
| <div class="space-y-1"> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white bg-black bg-opacity-20"> |
| <i class="sidebar-icon fas fa-home mr-3 transition-transform"></i> |
| Dashboard |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-black hover:bg-opacity-20"> |
| <i class="sidebar-icon fas fa-project-diagram mr-3 transition-transform"></i> |
| Projects |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-black hover:bg-opacity-20"> |
| <i class="sidebar-icon fas fa-video mr-3 transition-transform"></i> |
| Video Management |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-black hover:bg-opacity-20"> |
| <i class="sidebar-icon fas fa-draw-polygon mr-3 transition-transform"></i> |
| Annotation |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-black hover:bg-opacity-20"> |
| <i class="sidebar-icon fas fa-robot mr-3 transition-transform"></i> |
| Model Training |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-black hover:bg-opacity-20"> |
| <i class="sidebar-icon fas fa-chart-line mr-3 transition-transform"></i> |
| Validation |
| </a> |
| </div> |
| <div class="mt-auto mb-4"> |
| <div class="p-4 bg-black bg-opacity-20 rounded-lg"> |
| <h4 class="text-sm font-medium mb-2">Storage Usage</h4> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 mr-3"> |
| <svg class="progress-ring" width="48" height="48"> |
| <circle class="progress-ring__circle" stroke="#4fd1c5" stroke-width="4" fill="transparent" r="20" cx="24" cy="24" stroke-dasharray="125.6" stroke-dashoffset="62.8"></circle> |
| </svg> |
| </div> |
| <div> |
| <p class="text-sm">50% used</p> |
| <p class="text-xs text-gray-300">250MB of 500MB</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> |
| <div class="flex items-center md:hidden"> |
| <button class="text-gray-500 focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| <div class="flex-1 max-w-md ml-4 md:ml-0"> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> |
| <i class="fas fa-search text-gray-400"></i> |
| </div> |
| <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="Search projects..." type="search"> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <div class="ml-3 relative"> |
| <div> |
| <button class="flex items-center max-w-xs text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500" id="user-menu"> |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2> |
| <button class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
| <i class="fas fa-plus mr-2"></i> New Project |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
| <i class="fas fa-project-diagram"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Active Projects</p> |
| <p class="text-2xl font-semibold text-gray-800">12</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
| <i class="fas fa-video"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Videos Uploaded</p> |
| <p class="text-2xl font-semibold text-gray-800">47</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Trained Models</p> |
| <p class="text-2xl font-semibold text-gray-800">8</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> |
| <i class="fas fa-tasks"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Pending Tasks</p> |
| <p class="text-2xl font-semibold text-gray-800">3</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-900">Recent Projects</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4 hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
| <i class="fas fa-box"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Package Detection</div> |
| <div class="text-sm text-gray-500">Last trained: 2 days ago</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
| Active |
| </span> |
| <button class="ml-4 text-gray-400 hover:text-gray-500"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Person Detection</div> |
| <div class="text-sm text-gray-500">Last trained: 1 week ago</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
| Active |
| </span> |
| <button class="ml-4 text-gray-400 hover:text-gray-500"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> |
| <i class="fas fa-car"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Vehicle Detection</div> |
| <div class="text-sm text-gray-500">Training in progress</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
| Processing |
| </span> |
| <button class="ml-4 text-gray-400 hover:text-gray-500"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 bg-gray-50 text-right"> |
| <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">View all projects</a> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden fade-in"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-900">Upload Training Videos</h3> |
| </div> |
| <div class="px-6 py-4"> |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer"> |
| <div class="flex flex-col items-center justify-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i> |
| <p class="text-sm text-gray-600">Drag and drop your videos here, or click to browse</p> |
| <p class="text-xs text-gray-500 mt-1">Supports MP4, MOV, AVI up to 2GB</p> |
| </div> |
| <input type="file" id="file-upload" class="hidden" multiple accept="video/mp4,video/quicktime,video/x-msvideo"> |
| </div> |
| <div id="upload-progress" class="mt-4 hidden"> |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| <span>package_delivery.mp4</span> |
| <span>45%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden fade-in"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-900">Create New Project</h3> |
| </div> |
| <div class="px-6 py-4"> |
| <form> |
| <div class="mb-4"> |
| <label for="project-name" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label> |
| <input type="text" id="project-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="e.g. Package Detection"> |
| </div> |
| <div class="mb-4"> |
| <label for="detection-classes" class="block text-sm font-medium text-gray-700 mb-1">Detection Classes</label> |
| <div class="flex flex-wrap gap-2 mb-2" id="classes-container"> |
| |
| </div> |
| <div class="flex"> |
| <input type="text" id="class-input" class="block w-full px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="Add a class (e.g. 'package')"> |
| <button type="button" id="add-class" class="px-4 py-2 bg-purple-600 text-white rounded-r-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
| Add |
| </button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label for="frame-frequency" class="block text-sm font-medium text-gray-700 mb-1">Frame Frequency</label> |
| <select id="frame-frequency" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"> |
| <option value="1">Every frame</option> |
| <option value="5" selected>Every 5 frames</option> |
| <option value="10">Every 10 frames</option> |
| <option value="30">Every 30 frames</option> |
| </select> |
| </div> |
| <button type="submit" class="w-full px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
| Create Project |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelector('.md\\:hidden button').addEventListener('click', function() { |
| document.querySelector('.hidden.md\\:flex').classList.toggle('hidden'); |
| }); |
| |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('file-upload'); |
| const uploadProgress = document.getElementById('upload-progress'); |
| |
| dropzone.addEventListener('click', () => fileInput.click()); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('active'); |
| } |
| |
| dropzone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| handleFiles(files); |
| } |
| |
| fileInput.addEventListener('change', function() { |
| handleFiles(this.files); |
| }); |
| |
| function handleFiles(files) { |
| if (files.length > 0) { |
| uploadProgress.classList.remove('hidden'); |
| dropzone.innerHTML = ` |
| <div class="flex items-center justify-center"> |
| <i class="fas fa-check-circle text-green-500 text-4xl mr-3"></i> |
| <div> |
| <p class="text-sm font-medium text-gray-900">${files.length} file(s) selected</p> |
| <p class="text-xs text-gray-500">Ready to upload</p> |
| </div> |
| </div> |
| `; |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress >= 100) { |
| progress = 100; |
| clearInterval(interval); |
| setTimeout(() => { |
| uploadProgress.classList.add('hidden'); |
| dropzone.innerHTML = ` |
| <div class="flex flex-col items-center justify-center"> |
| <i class="fas fa-check-circle text-green-500 text-4xl mb-3"></i> |
| <p class="text-sm font-medium text-gray-900">Upload complete!</p> |
| <p class="text-xs text-gray-500">${files.length} file(s) uploaded successfully</p> |
| </div> |
| `; |
| }, 500); |
| } |
| document.querySelector('.bg-purple-600').style.width = `${progress}%`; |
| document.querySelector('#upload-progress span:last-child').textContent = `${Math.round(progress)}%`; |
| }, 500); |
| } |
| } |
| |
| |
| const classInput = document.getElementById('class-input'); |
| const addClassBtn = document.getElementById('add-class'); |
| const classesContainer = document.getElementById('classes-container'); |
| |
| addClassBtn.addEventListener('click', function() { |
| const className = classInput.value.trim(); |
| if (className) { |
| const classTag = document.createElement('div'); |
| classTag.className = 'flex items-center bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm'; |
| classTag.innerHTML = ` |
| ${className} |
| <button type="button" class="ml-1 text-purple-600 hover:text-purple-800"> |
| <i class="fas fa-times"></i> |
| </button> |
| `; |
| classesContainer.appendChild(classTag); |
| classInput.value = ''; |
| |
| |
| classTag.querySelector('button').addEventListener('click', function() { |
| classTag.remove(); |
| }); |
| } |
| }); |
| |
| |
| classInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| e.preventDefault(); |
| addClassBtn.click(); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.sidebar-item').forEach(item => { |
| item.addEventListener('mouseenter', function() { |
| this.querySelector('.sidebar-icon').classList.add('translate-x-1'); |
| }); |
| item.addEventListener('mouseleave', function() { |
| this.querySelector('.sidebar-icon').classList.remove('translate-x-1'); |
| }); |
| }); |
| </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=lpetrov/snet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
