|
|
<!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> |
