- {/* Sidebar */}
-
-
Baggage AI
- Clients
- Projects
- Cameras
- Live Stream
-
-
- {/* Main Content */}
-
);
}
diff --git a/frontend/src/layout/navbar-layout.css b/frontend/src/layout/navbar-layout.css
new file mode 100644
index 0000000..a9103b5
--- /dev/null
+++ b/frontend/src/layout/navbar-layout.css
@@ -0,0 +1,93 @@
+/* ===================================
+ NAVBAR LAYOUT STYLES
+ =================================== */
+
+.app-layout {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background: var(--color-bg-primary);
+}
+
+.main-content {
+ flex: 1;
+ overflow: auto;
+}
+
+/* Footer */
+.app-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 32px;
+ background: var(--color-bg-secondary);
+ border-top: 1px solid var(--color-border);
+ font-size: 12px;
+ color: var(--color-text-muted);
+}
+
+.footer-left span {
+ color: var(--color-text-muted);
+}
+
+.footer-right {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.footer-status {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--color-success);
+ font-weight: 500;
+}
+
+.status-dot {
+ width: 8px;
+ height: 8px;
+ background: var(--color-success);
+ border-radius: 50%;
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+
+ 0%,
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ 50% {
+ opacity: 0.6;
+ transform: scale(0.9);
+ }
+}
+
+.footer-link {
+ color: var(--color-accent-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color var(--transition-fast);
+}
+
+.footer-link:hover {
+ color: var(--color-accent-secondary);
+ text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+ .app-footer {
+ flex-direction: column;
+ gap: 12px;
+ text-align: center;
+ padding: 16px;
+ }
+
+ .footer-right {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/layout/sidebar.css b/frontend/src/layout/sidebar.css
index f95ea08..8b5d014 100644
--- a/frontend/src/layout/sidebar.css
+++ b/frontend/src/layout/sidebar.css
@@ -1,27 +1,197 @@
+/* ===================================
+ BAGGAGE AI - SIDEBAR STYLES
+ Premium Navigation Design
+ =================================== */
+
.sidebar {
- width: 220px;
- height: 100vh;
- background: #1e1e2f;
- color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
+ width: 260px;
+ min-height: 100vh;
+ background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ position: sticky;
+ top: 0;
+}
+
+/* Logo Section */
+.sidebar-header {
+ padding: 28px 24px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.sidebar-logo {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.sidebar-logo-icon {
+ width: 42px;
+ height: 42px;
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
+}
+
+.sidebar-logo-text {
+ font-size: 20px;
+ font-weight: 700;
+ color: #f1f5f9;
+ letter-spacing: -0.5px;
+}
+
+.sidebar-logo-badge {
+ font-size: 10px;
+ font-weight: 600;
+ color: #8b5cf6;
+ background: rgba(139, 92, 246, 0.15);
+ padding: 2px 8px;
+ border-radius: 4px;
+ margin-left: auto;
+}
+
+/* Navigation */
+.sidebar-nav {
+ flex: 1;
+ padding: 20px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.sidebar-section-title {
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #64748b;
+ padding: 16px 12px 8px;
+ margin-top: 8px;
+}
+
+.sidebar-section-title:first-child {
+ margin-top: 0;
+}
+
+.sidebar-link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ color: #94a3b8;
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ border-radius: 10px;
+ transition: all 200ms ease;
+ position: relative;
+}
+
+.sidebar-link:hover {
+ background: rgba(99, 102, 241, 0.1);
+ color: #f1f5f9;
+}
+
+.sidebar-link.active {
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
+ color: #f1f5f9;
+}
+
+.sidebar-link.active::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 24px;
+ background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+ border-radius: 0 3px 3px 0;
+}
+
+.sidebar-link-icon {
+ font-size: 18px;
+ width: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.sidebar-link-badge {
+ margin-left: auto;
+ font-size: 11px;
+ font-weight: 600;
+ padding: 2px 8px;
+ border-radius: 6px;
+ background: rgba(99, 102, 241, 0.2);
+ color: #a5b4fc;
+}
+
+.sidebar-link-badge.new {
+ background: rgba(16, 185, 129, 0.2);
+ color: #10b981;
+}
+
+/* Footer */
+.sidebar-footer {
+ padding: 20px 16px;
+ border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.sidebar-footer-content {
+ background: rgba(99, 102, 241, 0.1);
+ border: 1px solid rgba(99, 102, 241, 0.2);
+ border-radius: 12px;
+ padding: 16px;
+ text-align: center;
+}
+
+.sidebar-footer-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #f1f5f9;
+ margin-bottom: 4px;
+}
+
+.sidebar-footer-text {
+ font-size: 12px;
+ color: #94a3b8;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .sidebar {
+ width: 72px;
+ padding: 0;
}
-
- .sidebar h2 {
- margin-top: 0;
+
+ .sidebar-logo-text,
+ .sidebar-logo-badge,
+ .sidebar-section-title,
+ .sidebar-link span,
+ .sidebar-link-badge,
+ .sidebar-footer-content {
+ display: none;
}
-
- .sidebar a {
- color: white;
- text-decoration: none;
- padding: 10px 0;
- margin: 5px 0;
- display: block;
- border-radius: 4px;
+
+ .sidebar-header {
+ padding: 16px;
+ justify-content: center;
}
-
- .sidebar a:hover {
- background: #33334d;
+
+ .sidebar-link {
+ justify-content: center;
+ padding: 14px;
}
-
\ No newline at end of file
+
+ .sidebar-link-icon {
+ width: auto;
+ font-size: 20px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AutoAnnotationPage.css b/frontend/src/pages/AutoAnnotationPage.css
new file mode 100644
index 0000000..91e44e5
--- /dev/null
+++ b/frontend/src/pages/AutoAnnotationPage.css
@@ -0,0 +1,553 @@
+/* ===================================
+ AUTO-ANNOTATION PAGE STYLES
+ =================================== */
+
+.auto-annotation-page {
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.annotation-layout {
+ display: grid;
+ grid-template-columns: 400px 1fr;
+ gap: 24px;
+}
+
+/* Upload Section */
+.upload-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.section-content {
+ padding: 24px;
+ flex: 1;
+}
+
+.section-title {
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ margin: 0 0 8px 0;
+}
+
+.section-description {
+ font-size: 14px;
+ color: var(--color-text-muted);
+ margin: 0 0 24px 0;
+ line-height: 1.5;
+}
+
+/* Drop Zone */
+.drop-zone {
+ border: 2px dashed var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: 40px 24px;
+ text-align: center;
+ cursor: pointer;
+ transition: all var(--transition-normal);
+ background: var(--color-bg-tertiary);
+}
+
+.drop-zone:hover {
+ border-color: var(--color-accent-primary);
+ background: rgba(99, 102, 241, 0.05);
+}
+
+.drop-icon {
+ width: 64px;
+ height: 64px;
+ margin: 0 auto 16px;
+ background: rgba(99, 102, 241, 0.1);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-accent-primary);
+}
+
+.drop-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0 0 4px 0;
+}
+
+.drop-subtitle {
+ font-size: 13px;
+ color: var(--color-text-muted);
+ margin: 0 0 16px 0;
+}
+
+.file-types {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+.file-type {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ padding: 4px 12px;
+ border-radius: 20px;
+}
+
+.files-selected {
+ margin-top: 16px;
+ padding: 8px 16px;
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--color-success);
+ border-radius: 20px;
+ font-size: 13px;
+ font-weight: 600;
+ display: inline-block;
+}
+
+.hidden {
+ display: none;
+}
+
+/* Confidence Control */
+.confidence-control {
+ margin: 24px 0;
+}
+
+.confidence-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+}
+
+.confidence-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.confidence-value {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-accent-primary);
+}
+
+.slider-container {
+ position: relative;
+}
+
+.confidence-slider {
+ width: 100%;
+ height: 6px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: var(--color-bg-tertiary);
+ border-radius: 3px;
+ outline: none;
+}
+
+.confidence-slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 18px;
+ height: 18px;
+ background: var(--color-accent-primary);
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+}
+
+.slider-labels {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 8px;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+/* Start Button */
+.start-btn {
+ width: 100%;
+ padding: 16px;
+ font-size: 15px;
+ margin-bottom: 16px;
+}
+
+.start-btn .spin {
+ animation: spin 1s linear infinite;
+}
+
+/* Pro Tip */
+.pro-tip {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 14px;
+ background: rgba(99, 102, 241, 0.08);
+ border-radius: var(--radius-md);
+ font-size: 12px;
+ color: var(--color-text-secondary);
+ line-height: 1.5;
+}
+
+.pro-tip svg {
+ flex-shrink: 0;
+ color: var(--color-accent-primary);
+ margin-top: 2px;
+}
+
+/* Error Message */
+.error-message {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 14px;
+ background: rgba(239, 68, 68, 0.1);
+ border: 1px solid rgba(239, 68, 68, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--color-danger);
+ font-size: 13px;
+ margin-top: 16px;
+}
+
+/* Model Info */
+.model-info {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px 24px;
+ background: var(--color-bg-tertiary);
+ border-top: 1px solid var(--color-border);
+}
+
+.model-badge {
+ width: 40px;
+ height: 40px;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-accent-primary);
+}
+
+.model-details {
+ flex: 1;
+}
+
+.model-label {
+ display: block;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.model-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.model-latency {
+ text-align: right;
+}
+
+.latency-label {
+ display: block;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+.latency-value {
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--color-success);
+}
+
+/* Annotations Section */
+.annotations-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.annotations-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: 24px;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.annotations-title {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ margin: 0 0 4px 0;
+}
+
+.annotations-subtitle {
+ font-size: 13px;
+ color: var(--color-text-muted);
+ margin: 0;
+}
+
+.annotations-actions {
+ display: flex;
+ gap: 8px;
+}
+
+/* Annotations Table */
+.annotations-table {
+ flex: 1;
+}
+
+.table-header {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr 80px;
+ gap: 16px;
+ padding: 12px 24px;
+ background: var(--color-bg-tertiary);
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.table-body {
+ padding: 0 24px;
+}
+
+.table-row {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr 80px;
+ gap: 16px;
+ padding: 16px 0;
+ align-items: center;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.table-row:last-child {
+ border-bottom: none;
+}
+
+.col-filename {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.file-icon {
+ width: 36px;
+ height: 36px;
+ background: rgba(245, 158, 11, 0.1);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-warning);
+}
+
+.file-icon.error {
+ background: rgba(239, 68, 68, 0.1);
+ color: var(--color-danger);
+}
+
+.filename {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.col-date {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+.col-objects {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.col-status {
+ font-size: 13px;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.status-completed {
+ color: var(--color-success);
+}
+
+.status-processing {
+ color: var(--color-accent-primary);
+}
+
+.status-failed {
+ color: var(--color-danger);
+}
+
+.col-status .dot {
+ width: 6px;
+ height: 6px;
+ background: currentColor;
+ border-radius: 50%;
+}
+
+.col-status .dot.pulse {
+ animation: pulse 1.5s infinite;
+}
+
+.col-action {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.action-btn {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ color: var(--color-text-muted);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.action-btn:hover {
+ color: var(--color-text-primary);
+ border-color: var(--color-accent-primary);
+}
+
+/* Pagination */
+.annotations-pagination {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border-top: 1px solid var(--color-border);
+}
+
+.page-info {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+.page-controls {
+ display: flex;
+ gap: 8px;
+}
+
+.page-arrow {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ color: var(--color-text-muted);
+ cursor: pointer;
+}
+
+.page-arrow:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Footer Stats */
+.annotation-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 32px;
+ margin-top: 24px;
+ padding: 16px 24px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+}
+
+.footer-stat {
+ text-align: right;
+}
+
+.footer-stat .stat-label {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ display: block;
+ margin-bottom: 4px;
+}
+
+.stat-value-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.footer-stat .stat-number {
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+}
+
+.footer-stat .stat-number.success {
+ color: var(--color-success);
+}
+
+.mini-progress {
+ width: 80px;
+ height: 6px;
+ background: var(--color-bg-tertiary);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+.mini-fill {
+ height: 100%;
+ background: var(--color-accent-primary);
+ border-radius: 3px;
+}
+
+/* Responsive */
+@media (max-width: 1000px) {
+ .annotation-layout {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 768px) {
+
+ .table-header,
+ .table-row {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .col-date,
+ .col-objects {
+ display: none;
+ }
+
+ .annotations-header {
+ flex-direction: column;
+ gap: 16px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AutoAnnotationPage.jsx b/frontend/src/pages/AutoAnnotationPage.jsx
new file mode 100644
index 0000000..81665c4
--- /dev/null
+++ b/frontend/src/pages/AutoAnnotationPage.jsx
@@ -0,0 +1,297 @@
+import React, { useState } from "react";
+import {
+ Upload, FileText, CheckCircle, AlertCircle, Loader,
+ Download, Trash2, Eye, RefreshCw, Info, Zap, Cpu
+} from "lucide-react";
+import "./AutoAnnotationPage.css";
+
+const API_URL = "http://localhost:5000";
+
+const AutoAnnotationPage = () => {
+ const [files, setFiles] = useState([]);
+ const [uploading, setUploading] = useState(false);
+ const [processing, setProcessing] = useState(false);
+ const [results, setResults] = useState(null);
+ const [error, setError] = useState(null);
+ const [confidence, setConfidence] = useState(0.45);
+
+
+
+ const handleDragOver = (e) => {
+ e.preventDefault();
+ };
+
+ const handleDrop = (e) => {
+ e.preventDefault();
+ if (e.dataTransfer.files) {
+ setFiles(Array.from(e.dataTransfer.files));
+ }
+ };
+
+ const handleFileChange = (e) => {
+ if (e.target.files) {
+ setFiles(Array.from(e.target.files));
+ }
+ };
+
+ const handleUploadAndProcess = async () => {
+ if (files.length === 0) return;
+
+ setUploading(true);
+ setError(null);
+ setResults(null);
+
+ const formData = new FormData();
+ files.forEach((file) => {
+ formData.append("images", file);
+ });
+
+ try {
+ const uploadRes = await fetch(`${API_URL}/api/annotation/upload`, {
+ method: "POST",
+ body: formData,
+ });
+
+ if (!uploadRes.ok) throw new Error("Upload failed");
+
+ setUploading(false);
+ setProcessing(true);
+
+ const processRes = await fetch(`${API_URL}/api/annotation/process`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ confidence }),
+ });
+
+ if (!processRes.ok) throw new Error("Processing failed");
+
+ const data = await processRes.json();
+ setResults(data.results);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setUploading(false);
+ setProcessing(false);
+ }
+ };
+
+ const getConfidenceLabel = () => {
+ if (confidence < 0.3) return "PRECISE";
+ if (confidence < 0.6) return "BALANCED";
+ return "LOOSE";
+ };
+
+ return (
+
+
+ {/* Left Panel - Upload Area */}
+
+
+
Auto-Annotation Tool
+
+ Upload images to automatically generate YOLO labels using our high-precision server model.
+
+
+ {/* Drop Zone */}
+
document.getElementById("fileInput").click()}
+ >
+
+
+
+
+
Drag & Drop images here
+
or click to browse from files
+
+ JPG
+ PNG
+ WEBP
+
+ {files.length > 0 && (
+
+ {files.length} images selected
+
+ )}
+
+
+ {/* Confidence Slider */}
+
+
+ Confidence Threshold
+ {confidence.toFixed(2)}
+
+
+
setConfidence(parseFloat(e.target.value))}
+ className="confidence-slider"
+ />
+
+ PRECISE
+ BALANCED
+ LOOSE
+
+
+
+
+ {/* Action Button */}
+
+
+ {/* Pro Tip */}
+
+
+ Pro tip: Higher confidence reduces false positives but might miss smaller baggage items in low lighting.
+
+
+ {error && (
+
+ )}
+
+
+
+
+
+ CURRENT MODEL
+ YOLOv11n-Baggage v1.2.3
+
+
+ LATENCY
+ ~14ms
+
+
+
+ {/* Right Panel - Recent Annotations */}
+
+
+
+
Recent Annotations
+
Manage and export your processed imagery
+
+
+
+
+
+
+
+ IMAGE
+ FILENAME
+ LABEL FILE
+ ACTION
+
+
+ {results ? (
+ results.map((item, index) => (
+
+
+
+
+
+
+
+ {item.image}
+
+
+ {item.label}
+
+
+
+ ))
+ ) : (
+
+
No processed results yet. Upload images to start.
+
+ )}
+
+
+
Page 1 of 1
+
+
+
+
+
+
+
+ {/* Footer Stats */}
+
+
+
+ SYSTEM UPTIME
+ 99.8%
+
+
+
+ );
+};
+
+export default AutoAnnotationPage;
diff --git a/frontend/src/pages/CamerasPage.css b/frontend/src/pages/CamerasPage.css
new file mode 100644
index 0000000..97b0782
--- /dev/null
+++ b/frontend/src/pages/CamerasPage.css
@@ -0,0 +1,687 @@
+/* ===================================
+ CAMERAS PAGE STYLES
+ =================================== */
+
+.cameras-page {
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+/* Page Header */
+.page-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24px;
+}
+
+.header-left .page-title {
+ margin-bottom: 4px;
+}
+
+.header-actions {
+ display: flex;
+ gap: 12px;
+}
+
+/* Layout Grid */
+.cameras-layout {
+ display: grid;
+ grid-template-columns: 280px 1fr;
+ gap: 24px;
+}
+
+/* Sidebar */
+.cameras-sidebar {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.sidebar-card {
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: 20px;
+}
+
+.sidebar-card .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+ padding: 0;
+ border: none;
+}
+
+.sidebar-card .card-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.card-badge {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--color-accent-primary);
+ background: rgba(99, 102, 241, 0.1);
+ padding: 4px 8px;
+ border-radius: 4px;
+}
+
+/* Project List */
+.project-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.project-item {
+ width: 100%;
+ padding: 12px 16px;
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: var(--radius-md);
+ text-align: left;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.project-item:hover {
+ background: var(--color-bg-tertiary);
+ color: var(--color-text-primary);
+}
+
+.project-item.active {
+ background: rgba(99, 102, 241, 0.1);
+ border-color: var(--color-accent-primary);
+ color: var(--color-accent-primary);
+}
+
+.empty-text {
+ font-size: 13px;
+ color: var(--color-text-muted);
+ text-align: center;
+ padding: 20px;
+}
+
+/* Empty State */
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 80px 40px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ text-align: center;
+}
+
+.empty-state-icon {
+ font-size: 48px;
+ margin-bottom: 16px;
+}
+
+.empty-state-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0 0 8px 0;
+}
+
+.empty-state-text {
+ font-size: 14px;
+ color: var(--color-text-muted);
+ margin: 0;
+}
+
+/* Airport Map */
+.airport-map {
+ position: relative;
+ height: 180px;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+.map-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ padding: 16px;
+}
+
+.terminal-zone {
+ position: absolute;
+ width: 45%;
+ height: 50%;
+ border: 1px dashed var(--color-border);
+ border-radius: 8px;
+}
+
+.zone-a {
+ top: 10%;
+ left: 5%;
+}
+
+.zone-b {
+ top: 10%;
+ right: 5%;
+}
+
+.baggage-zone {
+ position: absolute;
+ bottom: 10%;
+ left: 25%;
+ width: 50%;
+ height: 25%;
+ border: 1px dashed var(--color-border);
+ border-radius: 8px;
+}
+
+.camera-marker {
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 3px solid;
+ cursor: pointer;
+ transition: transform var(--transition-fast);
+}
+
+.camera-marker:hover {
+ transform: scale(1.2);
+}
+
+.camera-marker.active {
+ background: var(--color-success);
+ border-color: rgba(16, 185, 129, 0.3);
+ box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
+}
+
+.camera-marker.warning {
+ background: var(--color-warning);
+ border-color: rgba(245, 158, 11, 0.3);
+}
+
+.camera-marker.offline {
+ background: var(--color-danger);
+ border-color: rgba(239, 68, 68, 0.3);
+}
+
+.map-controls {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.map-btn {
+ width: 28px;
+ height: 28px;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 16px;
+ color: var(--color-text-secondary);
+}
+
+.map-btn:hover {
+ background: var(--color-bg-tertiary);
+}
+
+/* Zone Statistics */
+.zone-stats {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.zone-stat {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.zone-label {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+.zone-value {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+}
+
+.zone-value .count {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+}
+
+.zone-value .status {
+ font-size: 11px;
+ font-weight: 600;
+}
+
+.zone-value .status.active {
+ color: var(--color-success);
+}
+
+.zone-value .status.offline {
+ color: var(--color-danger);
+}
+
+/* Health Items */
+.health-items {
+ margin-top: 8px;
+}
+
+.health-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.health-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: var(--color-text-secondary);
+}
+
+.health-label .dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+
+.health-label .dot.success {
+ background: var(--color-success);
+}
+
+.health-value {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+/* Camera Grid */
+.cameras-grid-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.cameras-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+}
+
+/* Camera Card */
+.camera-card {
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ transition: all var(--transition-normal);
+}
+
+.camera-card:hover {
+ border-color: rgba(99, 102, 241, 0.3);
+ box-shadow: var(--shadow-md);
+ transform: translateY(-2px);
+}
+
+.camera-preview {
+ position: relative;
+ aspect-ratio: 16/10;
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+ overflow: hidden;
+}
+
+.camera-preview img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.camera-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.camera-preview .detection-box {
+ position: absolute;
+ width: 80px;
+ height: 60px;
+ border: 2px solid var(--color-success);
+ border-radius: 4px;
+ background: rgba(16, 185, 129, 0.1);
+}
+
+.camera-preview .detection-label {
+ position: absolute;
+ top: -24px;
+ left: 0;
+ background: var(--color-success);
+ color: white;
+ font-size: 10px;
+ font-weight: 600;
+ padding: 2px 8px;
+ border-radius: 4px;
+ white-space: nowrap;
+}
+
+.camera-offline-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #64748b;
+ gap: 12px;
+}
+
+.camera-offline-state span {
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 1px;
+}
+
+.camera-preview .status-badge {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 12px;
+ border-radius: 6px;
+ font-size: 11px;
+ font-weight: 700;
+}
+
+.camera-preview .status-badge.online {
+ background: rgba(16, 185, 129, 0.9);
+ color: white;
+}
+
+.camera-preview .status-badge.offline {
+ background: rgba(100, 116, 139, 0.9);
+ color: white;
+}
+
+.camera-preview .status-badge .dot {
+ width: 6px;
+ height: 6px;
+ background: white;
+ border-radius: 50%;
+ animation: pulse 2s infinite;
+}
+
+.expand-btn {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ width: 32px;
+ height: 32px;
+ background: rgba(255, 255, 255, 0.9);
+ border: none;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity var(--transition-fast);
+}
+
+.camera-card:hover .expand-btn {
+ opacity: 1;
+}
+
+/* Camera Info */
+.camera-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: 16px;
+}
+
+.camera-details {
+ flex: 1;
+}
+
+.camera-name {
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0 0 4px 0;
+}
+
+.camera-location {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--color-text-muted);
+ margin: 0;
+}
+
+.camera-count {
+ text-align: right;
+}
+
+.camera-count .count-value {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color-accent-primary);
+ line-height: 1;
+}
+
+.camera-count .count-label {
+ display: block;
+ font-size: 10px;
+ color: var(--color-text-muted);
+ margin-top: 2px;
+}
+
+/* Camera Footer */
+.camera-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 16px;
+ background: var(--color-bg-tertiary);
+ border-top: 1px solid var(--color-border);
+}
+
+.camera-tags {
+ display: flex;
+ gap: 8px;
+}
+
+.tag {
+ font-size: 11px;
+ font-weight: 600;
+ padding: 4px 10px;
+ border-radius: 4px;
+}
+
+.tag.normal {
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--color-success);
+}
+
+.tag.detection {
+ background: rgba(99, 102, 241, 0.1);
+ color: var(--color-accent-primary);
+}
+
+.tag.high-volume {
+ background: rgba(239, 68, 68, 0.1);
+ color: var(--color-danger);
+}
+
+.tag.maintenance {
+ background: rgba(245, 158, 11, 0.1);
+ color: var(--color-warning);
+}
+
+.troubleshoot-btn {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--color-accent-primary);
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.troubleshoot-btn:hover {
+ text-decoration: underline;
+}
+
+.settings-btn {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ color: var(--color-text-muted);
+ cursor: pointer;
+}
+
+.settings-btn:hover {
+ color: var(--color-text-primary);
+ border-color: var(--color-accent-primary);
+}
+
+/* Pagination */
+.cameras-pagination {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 20px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+}
+
+.pagination-info {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+.pagination-info strong {
+ color: var(--color-text-primary);
+}
+
+.pagination-controls {
+ display: flex;
+ gap: 8px;
+}
+
+.page-btn {
+ min-width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.page-btn:hover:not(:disabled) {
+ border-color: var(--color-accent-primary);
+ color: var(--color-accent-primary);
+}
+
+.page-btn.active {
+ background: var(--color-accent-primary);
+ border-color: var(--color-accent-primary);
+ color: white;
+}
+
+.page-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.page-btn.grid-toggle {
+ background: var(--color-accent-primary);
+ border-color: var(--color-accent-primary);
+ color: white;
+}
+
+.grid-icon {
+ font-size: 16px;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+ .cameras-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .cameras-sidebar {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ }
+}
+
+@media (max-width: 900px) {
+ .cameras-sidebar {
+ grid-template-columns: 1fr;
+ }
+
+ .cameras-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 600px) {
+ .page-header {
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .header-actions {
+ width: 100%;
+ }
+
+ .header-actions .btn {
+ flex: 1;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/CamerasPage.jsx b/frontend/src/pages/CamerasPage.jsx
index 906d737..81d487d 100644
--- a/frontend/src/pages/CamerasPage.jsx
+++ b/frontend/src/pages/CamerasPage.jsx
@@ -1,165 +1,142 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
import { API } from "../api/backend";
import {
- TextField,
- Button,
- MenuItem,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
-} from "@mui/material";
+ Camera, MapPin, Filter, Plus, Settings, Wifi, WifiOff
+} from "lucide-react";
+import "./CamerasPage.css";
export default function CamerasPage() {
const [projects, setProjects] = useState([]);
- const [projectId, setProjectId] = useState("");
const [cameras, setCameras] = useState([]);
-
- const [cameraName, setCameraName] = useState("");
- const [rtspUrl, setRtspUrl] = useState("");
-
- const [editCamera, setEditCamera] = useState(null);
- const [editName, setEditName] = useState("");
- const [editUrl, setEditUrl] = useState("");
+ const [projectId, setProjectId] = useState("");
useEffect(() => {
- API.get("/projects").then((res) => setProjects(res.data));
+ API.get("/projects").then((res) => setProjects(res.data)).catch(() => { });
}, []);
const fetchCameras = async (projId) => {
- const res = await API.get(`/cameras/project/${projId}`);
- setCameras(res.data);
- };
-
- const createCamera = async () => {
- await API.post("/cameras", { projectId, cameraName, rtspUrl });
- setCameraName("");
- setRtspUrl("");
- fetchCameras(projectId);
- };
-
- const openEditDialog = (camera) => {
- setEditCamera(camera);
- setEditName(camera.cameraName);
- setEditUrl(camera.rtspUrl);
- };
-
- const updateCamera = async () => {
- await API.put(`/cameras/${editCamera.id}`, {
- cameraName: editName,
- rtspUrl: editUrl,
- });
- setEditCamera(null);
- fetchCameras(projectId);
- };
-
- const deleteCamera = async (id) => {
- await API.delete(`/cameras/${id}`);
- fetchCameras(projectId);
+ try {
+ const res = await API.get(`/cameras/project/${projId}`);
+ setCameras(res.data);
+ } catch (err) {
+ console.error("Failed to fetch cameras", err);
+ }
};
return (
-
-
Cameras
-
-
{
- setProjectId(e.target.value);
- fetchCameras(e.target.value);
- }}
- style={{ width: 300, marginBottom: 20 }}
- >
- {projects.map((project) => (
-
- ))}
-
-
-
-
-
setCameraName(e.target.value)}
- style={{ marginRight: 10 }}
- />
- setRtspUrl(e.target.value)}
- style={{ marginRight: 10 }}
- />
-
-
-
- Camera List
-
- {cameras.map((c) => (
-
-
{c.cameraName} — {c.rtspUrl}
-
-
-
-
-
-
+
+ {/* Page Header */}
+
+
+
+ {/* Left Sidebar */}
+
+
+ {/* Camera Grid */}
+
+ {cameras.length > 0 ? (
+
+ {cameras.map((camera) => (
+
+
+
+
+ CAMERA FEED
+
+
+
+ AVAILABLE
+
+
+
+
+
+
{camera.cameraName}
+
+
+ {camera.rtspUrl}
+
+
+
+
+
+
+ ))}
+
+
📹
+
No Cameras
+
+ {projectId ? "No cameras found for this project." : "Select a project to view cameras."}
+
+
+
);
}
diff --git a/frontend/src/pages/DashboardHostPage.css b/frontend/src/pages/DashboardHostPage.css
new file mode 100644
index 0000000..20399b0
--- /dev/null
+++ b/frontend/src/pages/DashboardHostPage.css
@@ -0,0 +1,172 @@
+/* ===================================
+ DASHBOARD HOST PAGE STYLES
+ =================================== */
+
+.dashboard-page {
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+/* Header */
+.dashboard-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24px;
+}
+
+.header-content .page-title {
+ margin-bottom: 4px;
+}
+
+.header-stats {
+ display: flex;
+ gap: 24px;
+}
+
+.header-stat {
+ text-align: center;
+ padding: 12px 20px;
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+}
+
+.header-stat .stat-number {
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--color-accent-primary);
+ line-height: 1;
+}
+
+.header-stat .stat-text {
+ font-size: 12px;
+ color: var(--color-text-muted);
+ display: block;
+ margin-top: 4px;
+}
+
+/* Control Panel */
+.control-panel {
+ padding: 20px 24px;
+ margin-bottom: 24px;
+ border-radius: var(--radius-lg);
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+}
+
+.control-panel-inner {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.input-group {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ padding: 0 16px;
+ transition: all var(--transition-normal);
+}
+
+.input-group:focus-within {
+ border-color: var(--color-accent-primary);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.input-icon {
+ font-size: 18px;
+ color: var(--color-text-muted);
+}
+
+.input-group .input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ padding: 14px 0;
+}
+
+.input-group .input:focus {
+ box-shadow: none;
+}
+
+.demo-btn {
+ white-space: nowrap;
+}
+
+/* Quick Actions */
+.quick-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-top: 16px;
+ border-top: 1px solid var(--color-border);
+}
+
+.quick-label {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+/* Stream Grid */
+.stream-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+ gap: 24px;
+}
+
+.stream-link {
+ text-decoration: none;
+ color: inherit;
+ display: block;
+}
+
+.stream-link:hover .card {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+/* Empty State */
+.empty-state {
+ padding: 80px 32px;
+ background: var(--color-bg-card);
+}
+
+.empty-state-icon {
+ font-size: 56px;
+ margin-bottom: 20px;
+}
+
+.empty-state-title {
+ font-size: 20px;
+ margin-bottom: 8px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .dashboard-header {
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .control-panel-inner {
+ flex-direction: column;
+ }
+
+ .input-group {
+ width: 100%;
+ }
+
+ .stream-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .quick-actions {
+ flex-wrap: wrap;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/DashboardHostPage.jsx b/frontend/src/pages/DashboardHostPage.jsx
new file mode 100644
index 0000000..ba941af
--- /dev/null
+++ b/frontend/src/pages/DashboardHostPage.jsx
@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import StreamViewer from "../components/StreamViewer";
+import "./DashboardHostPage.css";
+
+const DashboardHostPage = () => {
+ const [sourceInput, setSourceInput] = useState("");
+ const [streams, setStreams] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ const startStream = async (sourceOverride = null) => {
+ const source = sourceOverride || sourceInput.trim();
+
+ if (!source) {
+ return alert("Please enter a RTSP URL, File Path, or '0' for webcam");
+ }
+
+ setLoading(true);
+ try {
+ const res = await fetch("http://localhost:5000/streams/start", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ source }),
+ });
+ const data = await res.json();
+
+ if (data.success) {
+ setStreams([...streams, { id: data.streamId, source: source, startedAt: new Date() }]);
+ if (!sourceOverride) setSourceInput("");
+ } else {
+ alert("Failed to start stream: " + (data.error || "Unknown error"));
+ }
+ } catch (err) {
+ alert("Error connecting to backend. Make sure the server is running on port 5000.");
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const stopStream = async (streamId) => {
+ try {
+ await fetch("http://localhost:5000/streams/stop", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ streamId }),
+ });
+ setStreams(streams.filter(s => s.id !== streamId));
+ } catch (err) {
+ console.error("Failed to stop stream", err);
+ }
+ };
+
+ const handleKeyPress = (e) => {
+ if (e.key === 'Enter' && !loading) {
+ startStream();
+ }
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Control Panel */}
+
+
+
+ 🔗
+ setSourceInput(e.target.value)}
+ onKeyPress={handleKeyPress}
+ disabled={loading}
+ />
+
+
+
+
+
+ Quick start:
+
+
+
+
+
+ {/* Stream Grid */}
+ {streams.length > 0 ? (
+
+ {streams.map((stream) => (
+
+
+
+ ))}
+
+ ) : (
+
+
🎥
+
No Active Streams
+
+ Add a video feed above to start real-time baggage detection analysis.
+
+
+ )}
+
+ );
+};
+
+export default DashboardHostPage;
diff --git a/frontend/src/pages/SettingsPage.css b/frontend/src/pages/SettingsPage.css
new file mode 100644
index 0000000..a05417f
--- /dev/null
+++ b/frontend/src/pages/SettingsPage.css
@@ -0,0 +1,547 @@
+/* ===================================
+ SETTINGS PAGE STYLES
+ =================================== */
+
+.settings-page {
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+/* Header */
+.settings-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24px;
+}
+
+.settings-header .page-title {
+ margin-bottom: 4px;
+}
+
+.header-actions {
+ display: flex;
+ gap: 12px;
+}
+
+/* Layout */
+.settings-layout {
+ display: grid;
+ grid-template-columns: 240px 1fr;
+ gap: 24px;
+}
+
+/* Sidebar */
+.settings-sidebar {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.sidebar-nav {
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: 8px;
+}
+
+.nav-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ padding: 12px 16px;
+ background: transparent;
+ border: none;
+ border-radius: var(--radius-md);
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ text-align: left;
+}
+
+.nav-item:hover {
+ background: var(--color-bg-tertiary);
+ color: var(--color-text-primary);
+}
+
+.nav-item.active {
+ background: rgba(99, 102, 241, 0.1);
+ color: var(--color-accent-primary);
+}
+
+/* System Status */
+.system-status {
+ background: var(--color-bg-card);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: 16px;
+}
+
+.status-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-accent-primary);
+ margin-bottom: 16px;
+}
+
+.status-dot {
+ width: 8px;
+ height: 8px;
+ background: var(--color-success);
+ border-radius: 50%;
+ animation: pulse 2s infinite;
+}
+
+.status-item {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ padding: 8px 0;
+}
+
+.status-label {
+ color: var(--color-text-muted);
+}
+
+.status-value {
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.status-value.success {
+ color: var(--color-success);
+}
+
+/* Settings Content */
+.settings-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.settings-section {
+ padding: 24px;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24px;
+}
+
+.section-header h2 {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ margin: 0 0 4px 0;
+}
+
+.section-header p {
+ font-size: 13px;
+ color: var(--color-text-muted);
+ margin: 0;
+}
+
+/* Form Elements */
+.form-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ margin-bottom: 24px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.form-group label {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.value-badge {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-accent-primary);
+}
+
+.form-select,
+.form-input {
+ padding: 12px 14px;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ font-size: 14px;
+ color: var(--color-text-primary);
+ font-family: inherit;
+ transition: all var(--transition-fast);
+}
+
+.form-select:focus,
+.form-input:focus {
+ outline: none;
+ border-color: var(--color-accent-primary);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-range {
+ width: 100%;
+ height: 6px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: var(--color-bg-tertiary);
+ border-radius: 3px;
+ outline: none;
+}
+
+.form-range::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 18px;
+ height: 18px;
+ background: var(--color-accent-primary);
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+}
+
+.form-hint {
+ font-size: 11px;
+ color: var(--color-text-muted);
+ margin: 4px 0 0 0;
+ line-height: 1.4;
+}
+
+.input-with-suffix {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.input-with-suffix .form-input {
+ flex: 1;
+}
+
+.input-suffix {
+ font-size: 14px;
+ color: var(--color-text-muted);
+}
+
+/* Toggle Items */
+.toggle-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+}
+
+.toggle-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+ background: var(--color-bg-tertiary);
+ border-radius: var(--radius-md);
+}
+
+.toggle-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.toggle-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.toggle-desc {
+ font-size: 12px;
+ color: var(--color-text-muted);
+}
+
+.toggle-switch {
+ width: 48px;
+ height: 26px;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 13px;
+ position: relative;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.toggle-switch.active {
+ background: var(--color-accent-primary);
+ border-color: var(--color-accent-primary);
+}
+
+.toggle-knob {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ background: white;
+ border-radius: 50%;
+ transition: all var(--transition-fast);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toggle-switch.active .toggle-knob {
+ left: calc(100% - 22px);
+}
+
+/* Subsection Title */
+.subsection-title {
+ font-size: 11px;
+ font-weight: 700;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ margin: 24px 0 16px 0;
+}
+
+/* Notification Hooks */
+.notification-hooks {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.hook-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 16px;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: 20px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.hook-item:hover {
+ border-color: var(--color-accent-primary);
+}
+
+.hook-item.active {
+ background: rgba(99, 102, 241, 0.1);
+ border-color: var(--color-accent-primary);
+ color: var(--color-accent-primary);
+}
+
+.hook-item .check-icon {
+ color: var(--color-success);
+}
+
+/* Users Table */
+.users-table {
+ margin-top: 16px;
+}
+
+.users-table .table-header {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr 60px;
+ gap: 16px;
+ padding: 12px 16px;
+ background: var(--color-bg-tertiary);
+ border-radius: var(--radius-md);
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.users-table .table-row {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr 60px;
+ gap: 16px;
+ padding: 16px;
+ align-items: center;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.users-table .table-row:last-child {
+ border-bottom: none;
+}
+
+.user-cell {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.user-avatar {
+ width: 36px;
+ height: 36px;
+ background: var(--color-accent-gradient);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 700;
+ color: white;
+}
+
+.user-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.user-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.user-email {
+ font-size: 12px;
+ color: var(--color-text-muted);
+}
+
+.role-badge {
+ display: inline-block;
+ padding: 4px 10px;
+ border-radius: 4px;
+ font-size: 11px;
+ font-weight: 600;
+}
+
+.role-badge.super-admin {
+ background: rgba(99, 102, 241, 0.15);
+ color: var(--color-accent-primary);
+}
+
+.role-badge.operator {
+ background: rgba(16, 185, 129, 0.15);
+ color: var(--color-success);
+}
+
+.role-badge.viewer {
+ background: rgba(100, 116, 139, 0.15);
+ color: var(--color-text-secondary);
+}
+
+.last-active {
+ font-size: 13px;
+ color: var(--color-text-muted);
+}
+
+.users-table .status-badge {
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.users-table .status-badge.active {
+ color: var(--color-success);
+}
+
+.users-table .status-badge.inactive {
+ color: var(--color-text-muted);
+}
+
+.users-table .action-btn {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ color: var(--color-text-muted);
+ cursor: pointer;
+}
+
+.users-table .action-btn:hover {
+ border-color: var(--color-accent-primary);
+ color: var(--color-text-primary);
+}
+
+.view-all-link {
+ text-align: center;
+ padding-top: 16px;
+}
+
+.view-all-link a {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-accent-primary);
+ text-decoration: none;
+}
+
+.view-all-link a:hover {
+ text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 1000px) {
+ .settings-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .settings-sidebar {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ }
+
+ .sidebar-nav {
+ order: 1;
+ }
+
+ .system-status {
+ order: 2;
+ }
+}
+
+@media (max-width: 768px) {
+ .settings-header {
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .header-actions {
+ width: 100%;
+ }
+
+ .form-grid,
+ .toggle-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .settings-sidebar {
+ grid-template-columns: 1fr;
+ }
+
+ .users-table .table-header,
+ .users-table .table-row {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .users-table .table-header span:nth-child(3),
+ .users-table .table-header span:nth-child(4),
+ .users-table .table-row .last-active,
+ .users-table .table-row .status-badge:not(.role-badge) {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/SettingsPage.jsx b/frontend/src/pages/SettingsPage.jsx
new file mode 100644
index 0000000..007e31f
--- /dev/null
+++ b/frontend/src/pages/SettingsPage.jsx
@@ -0,0 +1,233 @@
+import React, { useState } from "react";
+import {
+ Brain, Settings, Users, Shield, Check,
+ Mail, Webhook, MessageSquare
+} from "lucide-react";
+import "./SettingsPage.css";
+
+const SettingsPage = () => {
+ const [activeTab, setActiveTab] = useState("ai-config");
+ const [modelArchitecture, setModelArchitecture] = useState("yolo-v11-small");
+ const [inferenceEngine, setInferenceEngine] = useState("tensorrt");
+ const [confidenceThreshold, setConfidenceThreshold] = useState(0.45);
+ const [nmsThreshold, setNmsThreshold] = useState(0.25);
+ const [edgeDetection, setEdgeDetection] = useState(true);
+ const [autoRetraining, setAutoRetraining] = useState(false);
+ const [historyRetention, setHistoryRetention] = useState(30);
+ const [exportFormat, setExportFormat] = useState("csv");
+
+ const tabs = [
+ { id: "ai-config", label: "AI Model Config", icon: Brain },
+ { id: "general", label: "General Settings", icon: Settings },
+ ];
+
+ return (
+
+ {/* Page Header */}
+
+
+
+ {/* Sidebar Navigation */}
+
+
+ {/* Main Content */}
+
+ {/* AI Model Configuration */}
+ {activeTab === "ai-config" && (
+
+
+
AI Model Configuration
+
Select and tune the baggage detection model parameters.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
setConfidenceThreshold(parseFloat(e.target.value))}
+ className="form-range"
+ />
+
Minimum confidence score required for an object to be detected as baggage.
+
+
+
+
+
setNmsThreshold(parseFloat(e.target.value))}
+ className="form-range"
+ />
+
Threshold for Non-Maximum Suppression to handle overlapping detection boxes.
+
+
+
+
+ Enable Edge Detection
+ Run model on edge gateway devices
+
+
+
+
+
+
+ Automatic Retraining
+ Use flagged false-positives for training
+
+
+
+
+
General Settings
+
Configure global application behavior and notifications.
+
REPORTING & DATA
+
+
+
+
+ setHistoryRetention(e.target.value)}
+ className="form-input"
+ />
+ Days
+
+
+
+
+
+
+
+
SYSTEM NOTIFICATION HOOKS
+
+
+
+ Email Alerts
+
+
+
+ Webhook URL
+
+
+
+ SMS Notifications
+
+
+
+
+ );
+};
+
+export default SettingsPage;
diff --git a/frontend/src/pages/SingleFeedDashboard.css b/frontend/src/pages/SingleFeedDashboard.css
new file mode 100644
index 0000000..12a0a27
--- /dev/null
+++ b/frontend/src/pages/SingleFeedDashboard.css
@@ -0,0 +1,608 @@
+/* ===================================
+ SINGLE FEED DASHBOARD STYLES
+ =================================== */
+
+.single-feed-dashboard {
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+/* Dashboard Layout Grid */
+.dashboard-layout {
+ display: grid;
+ grid-template-columns: 1fr 340px;
+ gap: 24px;
+}
+
+.main-column {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.side-column {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+/* Feed Section */
+.feed-section {
+ overflow: hidden;
+}
+
+.feed-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.feed-title {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.feed-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.icon-btn-sm {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-tertiary);
+ border: none;
+ border-radius: 6px;
+ color: var(--color-text-muted);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.icon-btn-sm:hover {
+ background: var(--color-bg-primary);
+ color: var(--color-text-primary);
+}
+
+/* Video Container */
+.video-container {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+ overflow: hidden;
+}
+
+.video-feed {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.video-placeholder {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ color: #94a3b8;
+}
+
+/* Count Overlay */
+.count-overlay {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(12px);
+ border-radius: 12px;
+ padding: 16px 24px;
+ text-align: center;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+ z-index: 10;
+}
+
+.count-label {
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+.count-value {
+ font-size: 48px;
+ font-weight: 800;
+ color: var(--color-text-primary);
+ line-height: 1;
+ margin: 4px 0;
+}
+
+.count-change {
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.count-change.up {
+ color: var(--color-success);
+}
+
+.count-change.down {
+ color: var(--color-danger);
+}
+
+/* Detection Overlay */
+.detection-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.detection-box {
+ position: absolute;
+ border: 2px solid var(--color-success);
+ border-radius: 4px;
+ background: rgba(16, 185, 129, 0.1);
+}
+
+.detection-box.warning {
+ border-color: var(--color-warning);
+ background: rgba(245, 158, 11, 0.1);
+}
+
+.detection-label {
+ position: absolute;
+ top: -24px;
+ left: 0;
+ background: var(--color-success);
+ color: white;
+ font-size: 10px;
+ font-weight: 600;
+ padding: 2px 8px;
+ border-radius: 4px;
+ white-space: nowrap;
+}
+
+.detection-box.warning .detection-label {
+ background: var(--color-warning);
+}
+
+/* Chart Section */
+.chart-section {
+ padding: 0;
+}
+
+.chart-container {
+ padding: 20px;
+}
+
+.chart-tabs {
+ display: flex;
+ gap: 4px;
+ background: var(--color-bg-tertiary);
+ padding: 4px;
+ border-radius: 8px;
+}
+
+.tab-btn {
+ padding: 8px 16px;
+ font-size: 13px;
+ font-weight: 500;
+ border-radius: 6px;
+ background: transparent;
+ border: none;
+ color: var(--color-text-muted);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.tab-btn.active {
+ background: white;
+ color: var(--color-text-primary);
+ box-shadow: var(--shadow-sm);
+}
+
+.tab-btn:hover:not(.active) {
+ color: var(--color-text-primary);
+}
+
+.chart-legend {
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--color-border);
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: var(--color-text-secondary);
+}
+
+.legend-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+}
+
+/* Status Section */
+.status-section {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.status-section .metric-card {
+ padding: 20px;
+}
+
+.metric-card .metric-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.metric-card .metric-label {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--color-text-muted);
+}
+
+.metric-card .metric-value {
+ font-size: 36px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ line-height: 1.1;
+}
+
+.metric-card .metric-subtext {
+ font-size: 12px;
+ color: var(--color-text-muted);
+ margin-top: 2px;
+}
+
+.metric-card .metric-trend {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 13px;
+ font-weight: 600;
+ margin-top: 12px;
+}
+
+.metric-card .metric-trend.up {
+ color: var(--color-success);
+}
+
+.metric-card .metric-trend.warning {
+ color: var(--color-warning);
+}
+
+/* Performance Section */
+.performance-section {
+ padding: 0;
+}
+
+.performance-content {
+ padding: 16px 20px;
+}
+
+.perf-item {
+ padding: 16px 0;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.perf-item:first-child {
+ padding-top: 0;
+}
+
+.perf-item:last-child {
+ border-bottom: none;
+}
+
+.perf-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.perf-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: var(--color-text-secondary);
+}
+
+.perf-badge {
+ font-size: 10px;
+ font-weight: 700;
+ color: var(--color-success);
+ text-transform: uppercase;
+}
+
+.perf-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin-bottom: 8px;
+}
+
+.perf-value {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+}
+
+.perf-value .number {
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+}
+
+.perf-value .unit {
+ font-size: 14px;
+ color: var(--color-text-muted);
+}
+
+.perf-meta {
+ display: flex;
+ justify-content: space-between;
+ font-size: 11px;
+ color: var(--color-text-muted);
+ margin-bottom: 8px;
+}
+
+/* System Info Footer */
+.system-info {
+ padding: 16px 20px;
+ background: var(--color-bg-tertiary);
+ border-top: 1px solid var(--color-border);
+}
+
+.info-row {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ padding: 6px 0;
+ color: var(--color-text-muted);
+}
+
+.info-row .link {
+ color: var(--color-accent-primary);
+ cursor: pointer;
+}
+
+/* Locations Section */
+.locations-section {
+ margin-top: 0;
+}
+
+.locations-grid {
+ display: grid;
+ grid-template-columns: 200px repeat(4, 1fr);
+ gap: 16px;
+}
+
+/* Airport Layout */
+.airport-layout {
+ grid-row: span 2;
+ padding: 16px;
+}
+
+.layout-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 16px;
+}
+
+.layout-map {
+ position: relative;
+ height: 160px;
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ padding: 12px;
+}
+
+.terminal {
+ position: relative;
+ font-size: 9px;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+.terminal-a {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+}
+
+.terminal-b {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+.baggage-area {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ right: 10px;
+ text-align: center;
+}
+
+.camera-dot {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ border: 3px solid;
+}
+
+.camera-dot.active {
+ background: var(--color-success);
+ border-color: rgba(16, 185, 129, 0.3);
+ box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
+}
+
+.camera-dot.offline {
+ background: var(--color-danger);
+ border-color: rgba(239, 68, 68, 0.3);
+}
+
+/* Camera Location Card */
+.camera-location-card {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+}
+
+.camera-icon-wrapper {
+ width: 44px;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-tertiary);
+ border-radius: 10px;
+}
+
+.camera-icon-wrapper .online {
+ color: var(--color-success);
+}
+
+.camera-icon-wrapper .offline {
+ color: var(--color-text-muted);
+}
+
+.camera-info {
+ flex: 1;
+}
+
+.camera-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 2px;
+}
+
+.camera-loc {
+ font-size: 12px;
+ color: var(--color-text-muted);
+ margin-bottom: 6px;
+}
+
+.status-badge {
+ font-size: 10px;
+ font-weight: 600;
+ padding: 3px 8px;
+ border-radius: 4px;
+ text-transform: uppercase;
+}
+
+.status-badge.online {
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--color-success);
+}
+
+.status-badge.offline {
+ background: rgba(239, 68, 68, 0.1);
+ color: var(--color-danger);
+}
+
+.camera-count {
+ text-align: right;
+}
+
+.camera-count .count-num {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color-accent-primary);
+}
+
+.camera-count .count-label {
+ display: block;
+ font-size: 10px;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+/* Responsive */
+@media (max-width: 1400px) {
+ .locations-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .airport-layout {
+ grid-row: auto;
+ grid-column: span 3;
+ }
+}
+
+@media (max-width: 1200px) {
+ .dashboard-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .side-column {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ }
+
+ .status-section {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+ }
+}
+
+@media (max-width: 768px) {
+ .locations-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .airport-layout {
+ grid-column: auto;
+ }
+
+ .side-column {
+ grid-template-columns: 1fr;
+ }
+
+ .status-section {
+ grid-template-columns: 1fr;
+ }
+
+ .count-overlay {
+ padding: 12px 16px;
+ }
+
+ .count-value {
+ font-size: 32px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/SingleFeedDashboard.jsx b/frontend/src/pages/SingleFeedDashboard.jsx
new file mode 100644
index 0000000..19384c1
--- /dev/null
+++ b/frontend/src/pages/SingleFeedDashboard.jsx
@@ -0,0 +1,274 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useParams, Link } from "react-router-dom";
+import {
+ AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer
+} from "recharts";
+import {
+ Activity, ArrowLeft, TrendingUp, Settings, Wifi, AlertTriangle, Play, Cpu
+} from "lucide-react";
+import "./SingleFeedDashboard.css";
+
+const SingleFeedDashboard = () => {
+ const { streamId } = useParams();
+ const [imageSrc, setImageSrc] = useState(null);
+ const [currentCount, setCurrentCount] = useState(0);
+ const [status, setStatus] = useState("connecting");
+ const [fps, setFps] = useState(0);
+ const [historicalData, setHistoricalData] = useState([]);
+ const ws = useRef(null);
+ const frameTimestamps = useRef([]);
+
+ // Data generation for charts based on real detections
+ useEffect(() => {
+ const interval = setInterval(() => {
+ const now = new Date();
+ const timeStr = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
+
+ setHistoricalData(prev => {
+ const newData = [...prev, {
+ time: timeStr,
+ count: currentCount
+ }];
+ if (newData.length > 20) return newData.slice(1);
+ return newData;
+ });
+ }, 10000);
+ return () => clearInterval(interval);
+ }, [currentCount]);
+
+ useEffect(() => {
+ ws.current = new WebSocket("ws://localhost:8081");
+
+ ws.current.onopen = () => setStatus("live");
+
+ ws.current.onmessage = (event) => {
+ try {
+ const data = JSON.parse(event.data);
+ if (data.streamId === streamId) {
+ setImageSrc(`data:image/jpeg;base64,${data.image}`);
+ setCurrentCount(data.count || 0);
+
+ // FPS Calc
+ const now = Date.now();
+ frameTimestamps.current.push(now);
+ frameTimestamps.current = frameTimestamps.current.filter(t => now - t < 1000);
+ setFps(frameTimestamps.current.length);
+ }
+ } catch (err) {
+ console.error("WS Parse Error", err);
+ }
+ };
+
+ ws.current.onclose = () => setStatus("disconnected");
+
+ return () => {
+ if (ws.current) ws.current.close();
+ };
+ }, [streamId]);
+
+ const handleStopStream = async () => {
+ try {
+ await fetch("http://localhost:5000/streams/stop", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ streamId }),
+ });
+ setStatus("stopped");
+ if (ws.current) ws.current.close();
+ } catch (err) {
+ console.error("Failed to stop stream", err);
+ }
+ };
+
+ return (
+
+ {/* Main Grid */}
+
+ {/* Left Column - Video & Charts */}
+
+ {/* Live Feed Card */}
+
+
+
+
+
+
+
Live Feed - {streamId.slice(0, 8)}
+
+ {status.toUpperCase()}
+
+
+
+
+ {imageSrc ? (
+
+ ) : (
+
+
+
Establishing Secure Connection...
+
+ )}
+
+ {/* Baggage Count Overlay */}
+
+
CURRENT COUNT
+
{currentCount}
+
+
+
+ {/* Historical Trends Chart */}
+
+
+
Historical Trends - Today
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right Column - Status & Performance */}
+
+ {/* Current Status Section */}
+
+ CURRENT STATUS
+
+ {/* Current Baggage Card */}
+
+
+ Current Baggage
+ Live
+
+
{currentCount}
+
Items detected
+
+
+ Stream Status
+
+ {status === 'live' ? 'Connected' : 'Waiting'}
+
+
+
{streamId.slice(0, 8)}
+
Stream ID
+
+
+ {/* System Performance Section */}
+
+ SYSTEM PERFORMANCE
+
+ {/* Detection FPS */}
+
+
+
+
{fps > 20 ? 'GOOD' : fps > 10 ? 'FAIR' : 'LOW'}
+
+
+
+
+
+ {/* Network Status */}
+
+
+
+
+ Connection
+
+
{status === 'live' ? 'ACTIVE' : 'WAITING'}
+
+
+
+ {status === 'live' ? 'Connected' : 'Connecting'}
+
+
+
+
+
+ Model:
+ YOLOv11
+
+
+ WebSocket:
+ ws://localhost:8081
+
+
+
+
+
+ );
+};
+
+export default SingleFeedDashboard;
diff --git a/python-engine/auto_annotate.py b/python-engine/auto_annotate.py
new file mode 100644
index 0000000..2ae731b
--- /dev/null
+++ b/python-engine/auto_annotate.py
@@ -0,0 +1,89 @@
+import os
+import cv2
+import argparse
+from ultralytics import YOLO
+from pathlib import Path
+
+# CONFIG
+SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
+DEFAULT_MODEL_PATH = os.path.join(SCRIPT_DIR, "best.pt")
+
+def auto_annotate(input_dir, output_dir, model_path, conf_threshold):
+ # Load model
+ print(f"Loading model from {model_path}...")
+ model = YOLO(model_path)
+
+ # Create output directories
+ output_path = Path(output_dir)
+ labels_path = output_path / "labels"
+ visualized_path = output_path / "visualized"
+
+ labels_path.mkdir(parents=True, exist_ok=True)
+ visualized_path.mkdir(parents=True, exist_ok=True)
+
+ # Supported image extensions
+ image_extensions = [".jpg", ".jpeg", ".png", ".bmp", ".webp"]
+
+ input_path = Path(input_dir)
+ images = [f for f in input_path.iterdir() if f.suffix.lower() in image_extensions]
+
+ if not images:
+ print(f"No images found in {input_dir}")
+ return
+
+ print(f"Found {len(images)} images. Starting auto-annotation...")
+
+ for img_file in images:
+ print(f"Processing {img_file.name}...")
+
+ # Read image
+ frame = cv2.imread(str(img_file))
+ if frame is None:
+ print(f" Warning: Could not read {img_file.name}")
+ continue
+
+ h, w, _ = frame.shape
+
+ # Run inference
+ results = model(frame, conf=conf_threshold, verbose=False)[0]
+
+ # Generate YOLO format txt:
+ # Normalized to 0.0 - 1.0
+ label_file = labels_path / f"{img_file.stem}.txt"
+
+ with open(label_file, "w") as f:
+ for box in results.boxes:
+ # Get coordinates in xywh (normalized)
+ xywhn = box.xywhn[0].tolist()
+ cls_id = int(box.cls[0])
+
+ # Write to file
+ line = f"{cls_id} {' '.join(map(str, xywhn))}\n"
+ f.write(line)
+
+ # Draw on visualized copy
+ x1, y1, x2, y2 = map(int, box.xyxy[0])
+ conf = float(box.conf[0])
+ class_name = model.names.get(cls_id, f"Class {cls_id}")
+
+ color = (0, 255, 0) # Green
+ cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+ label = f"{class_name} {conf:.2f}"
+ cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
+
+ # Save visualized image
+ cv2.imwrite(str(visualized_path / img_file.name), frame)
+
+ print(f"Done! Annotations saved to {labels_path}")
+ print(f"Visualizations saved to {visualized_path}")
+
+if __name__ == "__main__":
+ parser = argparse.ArgumentParser(description="Auto-annotate images using a YOLO model")
+ parser.add_argument("--input", type=str, required=True, help="Directory containing images to annotate")
+ parser.add_argument("--output", type=str, default="auto_annotations", help="Directory to save labels and visualizations")
+ parser.add_argument("--model", type=str, default=DEFAULT_MODEL_PATH, help="Path to the YOLO model (.pt)")
+ parser.add_argument("--conf", type=float, default=0.25, help="Confidence threshold for detections")
+
+ args = parser.parse_args()
+
+ auto_annotate(args.input, args.output, args.model, args.conf)
diff --git a/python-engine/live_yolo_engine.py b/python-engine/live_yolo_engine.py
index 96dd49a..188daf2 100644
--- a/python-engine/live_yolo_engine.py
+++ b/python-engine/live_yolo_engine.py
@@ -1,60 +1,135 @@
import cv2
import base64
-import requests
+import json
+import argparse
+import os
import websocket
from ultralytics import YOLO
# CONFIG
-BACKEND = "http://localhost:3000"
WS_URL = "ws://localhost:8081"
+SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
+MODEL_PATH = os.path.join(SCRIPT_DIR, "best.pt")
-# Connect to WebSocket
-ws = websocket.WebSocket()
-ws.connect(WS_URL)
-print("Connected to WebSocket")
+# Load YOLO model globally or in main? Better in start_yolo_stream or main
+model = None
-# Load YOLO model
-model = YOLO("best.pt") # your trained model
+import time
+def start_yolo_stream(source, stream_id):
+ global model
+ if model is None:
+ print(f"Loading YOLO model from {MODEL_PATH}...")
+ model = YOLO(MODEL_PATH)
+
+ print(f"Starting persistent engine for {stream_id} with source: {source}")
+
+ # Expand source to int if it's a digit (for webcam index)
+ if source.isdigit():
+ source = int(source)
-def get_camera_url(camera_id):
- data = requests.get(f"{BACKEND}/cameras/{camera_id}").json()
- return data["rtspUrl"] # your backend uses rtspUrl key
+ while True: # Outer loop for overall process persistence
+ ws = None
+ try:
+ # 1. Connect to WebSocket
+ print(f"Connecting to WebSocket at {WS_URL}...")
+ ws = websocket.WebSocket()
+ ws.connect(WS_URL)
+ print("Connected to WebSocket")
+ # 2. Open Video Source
+ cap = cv2.VideoCapture(source)
+ if not cap.isOpened():
+ print(f"Failed to open source: {source}. Retrying in 5 seconds...")
+ time.sleep(5)
+ continue
-def start_yolo_stream(camera_id):
- cam_url = get_camera_url(camera_id)
- print("Opening Camera:", cam_url)
+ print(f"Source {source} opened successfully")
- cap = cv2.VideoCapture(cam_url)
+ frame_count = 0
+ while True: # Inner loop for frame processing
+ ret, frame = cap.read()
+ if not ret:
+ print("Cannot read frame. Source might be disconnected. Retrying...")
+ # Try to release and re-open the capture
+ cap.release()
+ time.sleep(2)
+ cap = cv2.VideoCapture(source)
+ if not cap.isOpened():
+ break # Break inner loop to restart everything if source is truly gone
+ continue
- while True:
- ret, frame = cap.read()
- if not ret:
- print("Cannot read frame")
- continue
+ frame_count += 1
+ # OPTIMIZATION: Process every 3rd frame (skip 2)
+ if frame_count % 3 != 0:
+ continue
- # Run YOLO detection
- results = model(frame)[0]
- for box in results.boxes:
- x1, y1, x2, y2 = box.xyxy[0]
- cv2.rectangle(
- frame,
- (int(x1), int(y1)),
- (int(x2), int(y2)),
- (0, 255, 0), 2
- )
+ # OPTIMIZATION: Resize to 640 width (maintain aspect ratio)
+ h, w = frame.shape[:2]
+ if w > 640:
+ scale = 640 / w
+ new_h = int(h * scale)
+ frame = cv2.resize(frame, (640, new_h))
- # Encode to JPEG
- success, buffer = cv2.imencode(".jpg", frame)
- if not success:
- continue
+ # Run YOLO detection
+ results = model(frame, verbose=False)[0]
+ for box in results.boxes:
+ x1, y1, x2, y2 = map(int, box.xyxy[0])
+ conf = float(box.conf[0])
+ cls_id = int(box.cls[0])
+ class_name = model.names.get(cls_id, f"Class {cls_id}")
+
+ # Color based on confidence
+ if conf > 0.7:
+ color = (0, 255, 0)
+ elif conf > 0.5:
+ color = (0, 255, 255)
+ else:
+ color = (0, 165, 255)
+
+ cv2.rectangle(frame, (x1, y1), (x2, y2), color, 2)
+ label = f"{class_name} {conf:.0%}"
+ (label_w, label_h), baseline = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, 0.5, 1)
+ cv2.rectangle(frame, (x1, y1 - label_h - 10), (x1 + label_w + 10, y1), color, -1)
+ cv2.putText(frame, label, (x1 + 5, y1 - 5), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 0), 1)
- jpg_base64 = base64.b64encode(buffer).decode("utf-8")
+ # Encode to JPEG with lower quality for speed
+ success, buffer = cv2.imencode(".jpg", frame, [int(cv2.IMWRITE_JPEG_QUALITY), 70])
+ if not success:
+ continue
- # Send frame to Node WebSocket
- ws.send(jpg_base64)
+ jpg_base64 = base64.b64encode(buffer).decode("utf-8")
+ # Create JSON payload
+ payload = {
+ "streamId": stream_id,
+ "image": jpg_base64,
+ "count": len(results.boxes),
+ "timestamp": time.time()
+ }
-# Start streaming for camera ID 5
-start_yolo_stream(camera_id=5)
+ # Send frame to Node WebSocket
+ try:
+ ws.send(json.dumps(payload))
+ except Exception as e:
+ print(f"WebSocket send error: {e}. Attempting to reconnect...")
+ break # Break inner loop to reconnect WebSocket
+
+ cap.release()
+ except Exception as e:
+ print(f"Process Error: {e}. Restarting in 5 seconds...")
+ time.sleep(5)
+ finally:
+ if ws:
+ try:
+ ws.close()
+ except:
+ pass
+
+if __name__ == "__main__":
+ parser = argparse.ArgumentParser()
+ parser.add_argument("--source", type=str, required=True, help="RTSP URL or Video File Path")
+ parser.add_argument("--streamId", type=str, required=True, help="Unique ID for this stream session")
+ args = parser.parse_args()
+
+ start_yolo_stream(args.source, args.streamId)
diff --git a/video/test_video.mp4 b/video/test_video.mp4
new file mode 100644
index 0000000..6e37785
Binary files /dev/null and b/video/test_video.mp4 differ