Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard | AI Vision</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body class="dashboard-body"> | |
| <div class="liquid-container"> | |
| <div class="liquid-bg"></div> | |
| </div> | |
| <div class="grain-overlay"></div> | |
| <div class="dashboard-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <a href="/" class="nav-icon"><i class="fas fa-house"></i></a> | |
| <div class="nav-icon active"><i class="fas fa-th-large"></i></div> | |
| <div class="nav-icon"><i class="fas fa-chart-line"></i></div> | |
| <div class="nav-icon mobile-hide"><i class="fas fa-gear"></i></div> | |
| </aside> | |
| <main class="main-wrapper"> | |
| <!-- Header --> | |
| <header class="dashboard-header"> | |
| <div class="user-info"> | |
| <h2 style="font-weight: 800; letter-spacing: -0.02em;">Synaptic Dashboard</h2> | |
| <div class="system-stats"> | |
| <div class="stat-item"><i class="fas fa-memory" style="color: #60a5fa;"></i> RF-DETR ACTIVE | |
| </div> | |
| <div class="stat-item"><i class="fas fa-eye" style="color: #facc15;"></i> OCR ON</div> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="add-btn mobile-hide">EXPORT LOGS</button> | |
| </div> | |
| </header> | |
| <div class="dashboard-grid"> | |
| <!-- Video Feed --> | |
| <div class="feed-card card overlay-active" style="position: relative;"> | |
| <div class="live-badge" style="position: absolute; top: 20px; left: 20px; z-index: 20;"> | |
| <span id="live-indicator" | |
| style="display:inline-block; width:8px; height:8px; background:#fff; border-radius:50%; animation: pulse 1.5s infinite;"></span> | |
| <span id="live-status">LIVE INFERENCE</span> | |
| </div> | |
| <img id="processed-stream" src="" alt="Neural Stream Output" | |
| style="width:100%; height:100%; object-fit:contain; background: #000; display: none; position: absolute; top: 0; left: 0; z-index: 1;"> | |
| <canvas id="camera-canvas" style="display:none;"></canvas> | |
| <video id="camera-video" autoplay playsinline muted | |
| style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1;"></video> | |
| <!-- Upload Overlay --> | |
| <div id="drop-zone-overlay" | |
| style="position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); text-align:center; padding: 2rem; z-index: 10;"> | |
| <i class="fas fa-plus-circle" | |
| style="font-size:3.5rem; color: var(--purple-main); margin-bottom:1rem;"></i> | |
| <h3 style="font-weight: 700;">Deploy Synaptic Node</h3> | |
| <p style="opacity: 0.6; font-size: 0.9rem; margin-bottom: 1.5rem;">Choose your input source</p> | |
| <!-- Mode Selection Buttons --> | |
| <div class="mode-btn-wrap" | |
| style="display: flex; gap: 1rem; margin-bottom: 1rem; z-index: 10; position: relative;"> | |
| <button id="upload-mode-btn" class="mode-btn" | |
| style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;" | |
| onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'" | |
| onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'"> | |
| <i class="fas fa-upload"></i> Upload Video | |
| </button> | |
| <button id="camera-mode-btn" class="mode-btn" | |
| style="padding: 0.8rem 1.5rem; background: rgba(138, 79, 255, 0.2); border: 2px solid var(--purple-main); border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.9rem;" | |
| onmouseover="this.style.background='rgba(138, 79, 255, 0.4)'" | |
| onmouseout="this.style.background='rgba(138, 79, 255, 0.2)'"> | |
| <i class="fas fa-video"></i> Live Camera | |
| </button> | |
| </div> | |
| <input type="file" id="file-input" hidden accept="video/*"> | |
| </div> | |
| </div> | |
| <!-- Side Panel (Logs) --> | |
| <div class="side-panel-wrapper" style="display:flex; flex-direction:column; gap:1.5rem;"> | |
| <div class="chart-card card"> | |
| <div style="display:flex; justify-content:space-between; margin-bottom:1rem;"> | |
| <h3 style="font-size: 1.1rem; font-weight: 700;">Real-time Analytics</h3> | |
| <span id="violation-count-badge" | |
| style="background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 800;">0</span> | |
| </div> | |
| <!-- Scrollable Log List --> | |
| <div id="results-panel" | |
| style="flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; max-height: 400px; padding-right: 5px;"> | |
| <!-- Items injected by JS --> | |
| <div style="text-align:center; opacity:0.5; padding:20px; font-size:0.8rem;"> | |
| Waiting for data stream... | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mini Gallery --> | |
| <div class="side-card card" style="height: auto; min-height: 150px;"> | |
| <h4 | |
| style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom:10px;"> | |
| Evidence Cache</h4> | |
| <div class="mini-feed-gallery" id="mini-results-panel"> | |
| <!-- Thumbs injected by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Enhanced Modal --> | |
| <div id="detail-modal" class="modal" | |
| style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:3000; backdrop-filter:blur(10px);"> | |
| <div | |
| style="width:90%; max-width:1100px; margin:5vh auto; background: #1a1a1a; border: 1px solid var(--glass-border); padding:2rem; border-radius:30px; position:relative; display: flex; flex-direction: column; height: 90vh;"> | |
| <span class="close-modal" | |
| style="position:absolute; top:20px; right:30px; font-size:2rem; cursor:pointer; color: #fff;">×</span> | |
| <h2 style="margin-bottom:1.5rem; font-weight: 800; color:#fff;">Violation Detail View</h2> | |
| <div class="modal-inner-grid" | |
| style="display:grid; grid-template-columns: 2fr 1fr; gap:2rem; flex: 1; overflow: hidden;"> | |
| <!-- Main Rider Image --> | |
| <div class="modal-main-img-wrap" | |
| style="background: #000; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center;"> | |
| <img id="modal-thumb" src="" style="max-width:100%; max-height: 100%; object-fit: contain;"> | |
| </div> | |
| <!-- Right Sidebar: Plate & Data --> | |
| <div style="display: flex; flex-direction: column; gap: 1.5rem; overflow: hidden;"> | |
| <!-- Plate Zoom --> | |
| <div class="modal-plate-box" | |
| style="background: #252525; padding: 1rem; border-radius: 15px; border: 1px solid var(--glass-border);"> | |
| <h4 | |
| style="color: var(--text-dim); font-size: 0.8rem; margin-bottom: 0.5rem; text-transform: uppercase;"> | |
| License Plate OCR</h4> | |
| <div | |
| style="height: 100px; background: #000; border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center;"> | |
| <img id="modal-plate-thumb" src="" alt="No Plate Detected" | |
| style="max-height: 100%; max-width: 100%; object-fit: contain;"> | |
| </div> | |
| <div id="modal-plate-text" | |
| style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #facc15; text-align: center; letter-spacing: 2px;"> | |
| ---- | |
| </div> | |
| </div> | |
| <!-- JSON Data --> | |
| <div class="modal-json-box" | |
| style="flex: 1; background:rgba(0,0,0,0.45); padding:1rem; border-radius:15px; border: 1px solid var(--glass-border); overflow-y: auto; min-height: 0;"> | |
| <div | |
| style="font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.5rem;"> | |
| Detection Data</div> | |
| <div id="modal-json" class="json-viewer"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> |