Upload 17 files

.gitattributes

@@ -33,3 +33,17 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/videos/Abuse.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Arrest.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Arson.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Assault.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Burglary.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Explosion.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Fighting.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Normal.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/RoadAccidents.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Robbery.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Shooting.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Shoplifting.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Stealing.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Vandalism.mp4 filter=lfs diff=lfs merge=lfs -text

static/css/style.css

@@ -0,0 +1,112 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #121212;
+    color: #e0e0e0;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    max-width: 1600px;
+    gap: 20px;
+}
+
+/* CHANGED: Main content takes more space, sidebar takes less */
+.main-content {
+    flex: 4; /* Increased from 3 */
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar {
+    flex: 1; /* Stays at 1, making it proportionally smaller */
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+    height: fit-content;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+h1 { border-bottom: none; padding-bottom: 0; }
+h2, h3 { color: #ffffff; border-bottom: 2px solid #333; padding-bottom: 10px; }
+
+/* CHANGED: Grid ratio adjusted to make the graph wider */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1.8fr 1.5fr; /* Video area vs Graph area */
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.video-area {
+    display: flex;
+    flex-direction: column;
+}
+
+.video-wrapper {
+    width: 100%;
+    margin-bottom: 10px; /* Space between video and status label */
+}
+
+#videoPlayer {
+    background-color: #000;
+    border-radius: 8px;
+}
+
+/* CHANGED: Status label is now positioned under the video */
+#statusLabel {
+    margin-top: 0; /* Resets previous margin */
+    font-style: italic;
+    color: #f44336;
+    text-align: center; /* Center the text under the video */
+    min-height: 24px; /* Prevents layout shifts */
+}
+
+/* The chart and yolo containers are now styled independently */
+.chart-container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.yolo-container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+#yoloTextLabel { font-size: 1.2em; font-weight: bold; color: #4CAF50; min-height: 25px; }
+#yoloImageFrame { width: 100%; height: auto; border-radius: 4px; background-color: #333; min-height: 150px; margin-top: 10px; }
+
+/* Styles for controls in the sidebar */
+.custom-select {
+    width: 100%;
+    padding: 12px 15px;
+    background-color: #3a3a3a;
+    color: #e0e0e0;
+    border: 1px solid #bb86fc;
+    border-radius: 4px;
+    font-size: 1em;
+    cursor: pointer;
+}
+.custom-select:hover { background-color: #4a4a4a; }
+
+.separator { border: none; border-top: 1px solid #333; margin: 20px 0; }
+.upload-section { display: flex; flex-direction: column; gap: 10px; }
+#videoUpload { color: #e0e0e0; }
+#videoUpload::file-selector-button { font-weight: bold; color: #bb86fc; background-color: #3a3a3a; padding: 8px 12px; border: 1px solid #bb86fc; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
+#videoUpload::file-selector-button:hover { background-color: #4a4a4a; }
+#uploadButton { padding: 10px 20px; font-size: 16px; font-weight: bold; color: white; background-color: #03dac6; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
+#uploadButton:hover { background-color: #018786; }
+#resetButton { padding: 10px 20px; font-size: 16px; font-weight: bold; color: white; background-color: #f44336; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
+#resetButton:hover { background-color: #d32f2f; }

static/js/main.js

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const socket = io();
+
+    const videoPlayer = document.getElementById('videoPlayer');
+    const yoloTextLabel = document.getElementById('yoloTextLabel');
+    const yoloImageFrame = document.getElementById('yoloImageFrame');
+    const statusLabel = document.getElementById('statusLabel');
+    const resetButton = document.getElementById('resetButton');
+    const videoUploadInput = document.getElementById('videoUpload');
+    const uploadButton = document.getElementById('uploadButton');
+    
+    // CHANGED: Get the new dropdown selector
+    const anomalySelector = document.getElementById('anomalySelector');
+
+    let chart;
+
+    function initializeChart() {
+        const ctx = document.getElementById('anomalyChart').getContext('2d');
+        if (chart) { chart.destroy(); }
+        chart = new Chart(ctx, {
+            type: 'line', data: { labels: [], datasets: [{ label: 'Anomaly Score', data: [], borderColor: 'rgba(255, 99, 132, 1)', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderWidth: 2, tension: 0.4, pointRadius: 0 }] }, options: { scales: { y: { beginAtZero: true, max: 1.0, ticks: { color: '#e0e0e0' }}, x: { ticks: { color: '#e0e0e0' }}}, plugins: { legend: { labels: { color: '#e0e0e0' }}}}
+        });
+    }
+
+    function resetUI() {
+        videoPlayer.pause();
+        videoPlayer.removeAttribute('src');
+        videoPlayer.load();
+        initializeChart();
+        yoloTextLabel.textContent = 'Waiting for anomaly...';
+        yoloImageFrame.src = '';
+        statusLabel.textContent = 'System reset. Select a video to begin.';
+        videoUploadInput.value = '';
+        anomalySelector.selectedIndex = 0; // Reset dropdown to the default option
+    }
+
+    // --- WebSocket Event Listeners (unchanged) ---
+    socket.on('connect', () => { statusLabel.textContent = 'Connected. Please select a video to start processing.'; });
+    socket.on('update_graph', (data) => {
+        const { score } = data;
+        if (!chart) return;
+        const newLabel = chart.data.labels.length + 1;
+        chart.data.labels.push(newLabel);
+        chart.data.datasets[0].data.push(score);
+        if (chart.data.labels.length > 100) { chart.data.labels.shift(); chart.data.datasets[0].data.shift(); }
+        chart.update();
+    });
+    socket.on('update_yolo_text', (data) => { yoloTextLabel.textContent = data.text; });
+    socket.on('update_yolo_image', (data) => { yoloImageFrame.src = `data:image/jpeg;base64,${data.image_data}`; });
+    socket.on('update_status', (data) => { statusLabel.textContent = data.status; });
+    socket.on('processing_error', (data) => { statusLabel.textContent = `Error: ${data.error}`; });
+    socket.on('processing_finished', (data) => { statusLabel.textContent = data.message; });
+    socket.on('system_reset_confirm', () => { resetUI(); });
+
+    // --- User Interaction ---
+
+    // CHANGED: Replaced the old event listener for links with one for the dropdown
+    anomalySelector.addEventListener('change', (event) => {
+        const anomalyName = event.target.value;
+        if (!anomalyName) return; // Do nothing if the default option is selected
+
+        resetUI();
+        statusLabel.textContent = `Requesting to process ${anomalyName}...`;
+        
+        videoPlayer.src = `/video_stream/demo/${anomalyName}`;
+        videoPlayer.play();
+        
+        socket.emit('start_processing', { 'source': 'demo', 'filename': anomalyName });
+    });
+
+    resetButton.addEventListener('click', () => { socket.emit('reset_system'); });
+
+    // Upload button logic (unchanged)
+    uploadButton.addEventListener('click', () => {
+        const file = videoUploadInput.files[0];
+        if (!file) {
+            alert('Please select a video file first!');
+            return;
+        }
+        
+        resetUI();
+        statusLabel.textContent = 'Uploading video...';
+        
+        const formData = new FormData();
+        formData.append('video', file);
+
+        fetch('/upload', { method: 'POST', body: formData })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                const uploadedFilename = data.filename;
+                statusLabel.textContent = `Upload successful. Starting analysis...`;
+                videoPlayer.src = `/video_stream/upload/${uploadedFilename}`;
+                videoPlayer.play();
+                socket.emit('start_processing', { 'source': 'upload', 'filename': uploadedFilename });
+            } else {
+                statusLabel.textContent = `Error: ${data.error}`;
+                alert(`Upload failed: ${data.error}`);
+            }
+        })
+        .catch(error => {
+            statusLabel.textContent = 'An error occurred during upload.';
+            console.error('Upload error:', error);
+        });
+    });
+
+    initializeChart();
+});

static/script.js

@@ -0,0 +1,41 @@
+const videoPlayer = document.getElementById("videoPlayer");
+const yoloResult = document.getElementById("yoloResult");
+
+// Dummy chart for anomaly graph
+const ctx = document.getElementById("anomalyGraph").getContext("2d");
+const graph = new Chart(ctx, {
+    type: "line",
+    data: {
+        labels: [],
+        datasets: [{
+            label: "Anomaly Score",
+            data: [],
+            borderColor: "red",
+            borderWidth: 2
+        }]
+    },
+    options: {
+        responsive: true,
+        scales: {
+            y: { min: 0, max: 1 }
+        }
+    }
+});
+
+async function playDemo(name) {
+    const response = await fetch("/get_video", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({ name })
+    });
+
+    const data = await response.json();
+    if (data.error) {
+        alert(data.error);
+        return;
+    }
+
+    // Load video
+    videoPlayer.src = "file:///" + data.path;
+    yoloResult.innerText = `Playing demo: ${name}`;
+}

static/videos/Abuse.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:425744aa3472e424d52d7ce97bf6d0bdd445ad62ad1be110095d2027a31550cc
+size 6250495

static/videos/Arrest.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:faf0f08b1ee989545ad1de2edecdb56a24e65914194b8083f47d10481926c0e1
+size 11929804

static/videos/Arson.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:902f3138fa8b839abd08bcd3e434e84756742fdf0c60bcc0769cd7106b1ac3a2
+size 12694369

static/videos/Assault.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b83cf948fef884ede2b86a2d3fe68de779b9c81301a5c653fbb329bfc243274
+size 21066405

static/videos/Burglary.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd17094bfd2e5b73bcce767c434f14b715744eb3338fb80f1a213c1a337ce65d
+size 9857751

static/videos/Explosion.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b462f9241ab7521e98071b18e8956c5a921336140b4da68ddbf56a5684e87fb6
+size 5162883

static/videos/Fighting.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a135cc99b9b7d1f314375cc5e29b6a38aa1131544bf0d9ca133a95644668abf6
+size 5519077

static/videos/Normal.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7a4881043c8e9deefe11c65ed8663a281c8366a5baa91f091d67b98eb638018
+size 7205089

static/videos/RoadAccidents.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e6ccd7bac80120cfeac9a5ef3e726da29864fb8cfd218ea0ed42d696ce553ab
+size 14490312

static/videos/Robbery.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce7983bbb834708b8316c72cb916b9cab0105e2f283c7f8e636d38b36ddd6b48
+size 26631485

static/videos/Shooting.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b125ed267b82f514820cc568c7c820a0f04cd531500bd242003c8efd2f9bdcdf
+size 2198741

static/videos/Shoplifting.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:717d68d3671d3f7638f80cc7db2e682599fceee21f15385431c569a1480d42ab
+size 22406639

static/videos/Stealing.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97ebf655ad4192fdfef01ec91c435f85d6e773257fe72a1458eacf5abdd2e04b
+size 27565440

static/videos/Vandalism.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:407508a2a3587caac3b3e4b165983f494692301e400ed4c4bbed504c47ba9e56
+size 2851411