Add

.gitignore

@@ -0,0 +1,9 @@
+__pycache__/
+*.py[cod]
+
+# Generated runtime outputs
+data/*.mp4
+data/*_annotated.mp4
+logs/
+output/
+uploads/

backend/dataset.yaml

@@ -17,18 +17,4 @@ names:
   2: car
   3: motorbike
   5: bus
-  7: truck
-
-# ── Notes ──────────────────────────────────────────────────────────────────
-# When exporting from Roboflow or Label Studio, remap your class indices
-# to match the COCO indices above (0,1,2,3,5,7) if needed.
-#
-# Recommended dataset size per scene:
-#   - ≥ 500 annotated frames
-#   - Mix of day/night, weather conditions
-#   - Multiple angles and zoom levels
-#
-# Labeling tips:
-#   - Label ALL visible objects, including partially occluded ones
-#   - Use tight bounding boxes
-#   - Consistent class names (lowercase, no spaces)
+  7: truck

backend/main.py

@@ -11,6 +11,8 @@ import subprocess
 import time
 import uuid
 import threading
+import urllib.parse
+import urllib.request
 from collections import defaultdict, deque
 from pathlib import Path
 
@@ -107,7 +109,8 @@ async def get_classes():
 
 @app.post("/upload")
 async def upload_video(
-    file: UploadFile = File(...),
+    file: UploadFile | None = File(None),
+    video_url: str = Form(""),
     scene_name: str = Form("scene_01"),
     group_id: str = Form("Group_05"),
     classes: str = Form(""),
@@ -116,10 +119,27 @@ async def upload_video(
 ):
     sid = str(uuid.uuid4())[:12]
 
-    suffix = Path(file.filename).suffix or ".mp4"
-    video_name = file.filename or f"{sid}{suffix}"
-    video_path = UPLOAD_DIR / f"{sid}{suffix}"
-    video_path.write_bytes(await file.read())
+    if file is not None and file.filename:
+        suffix = Path(file.filename).suffix or ".mp4"
+        video_name = file.filename
+        video_path = UPLOAD_DIR / f"{sid}{suffix}"
+        video_path.write_bytes(await file.read())
+    elif video_url.strip():
+        parsed = urllib.parse.urlparse(video_url.strip())
+        if parsed.scheme not in ("http", "https"):
+            raise HTTPException(400, "Video URL must start with http:// or https://")
+
+        suffix = Path(parsed.path).suffix or ".mp4"
+        video_name = Path(parsed.path).name or f"{sid}{suffix}"
+        video_path = UPLOAD_DIR / f"{sid}{suffix}"
+        try:
+            with urllib.request.urlopen(video_url.strip(), timeout=30) as response:
+                with open(video_path, "wb") as out:
+                    shutil.copyfileobj(response, out)
+        except Exception as exc:
+            raise HTTPException(400, f"Could not download video URL: {exc}") from exc
+    else:
+        raise HTTPException(400, "Upload a video file or provide a video URL")
 
     selected = [c.strip() for c in classes.split(",") if c.strip()] or DEFAULT_CLASSES
 

frontend/index.html

@@ -169,6 +169,10 @@
     padding: 7px 10px; outline: none; border-radius: 2px; transition: border-color .2s;
   }
   .field input:focus, .field select:focus { border-color: var(--accent); }
+  .source-divider {
+    font-family: var(--mono); font-size: 11px; color: var(--dim);
+    text-align: center; margin: 8px 0; letter-spacing: 1px;
+  }
 
   /* Class chips */
   .class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
@@ -274,6 +278,11 @@
   /* ── DASHBOARD PANEL ── */
   #view-dashboard { flex: 1; overflow-y: auto; padding: 22px; display: none; }
 
+  .dash-toolbar {
+    display: flex; justify-content: flex-end; margin-bottom: 14px;
+  }
+  .dash-toolbar .field { width: min(260px, 100%); margin-bottom: 0; }
+
   .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
   .stat-card { background: var(--surface); border: 1px solid var(--border); padding: 18px; border-radius: 2px; }
   .sc-label { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: 1.5px; margin-bottom: 8px; }
@@ -418,6 +427,10 @@
         <div class="up-hint"><b>Drop video here</b><br>or click to browse</div>
         <div class="up-name" id="fileName"></div>
       </label>
+      <div class="source-divider">OR VIDEO URL</div>
+      <div class="field">
+        <input type="url" id="videoUrl" placeholder="https://example.com/video.mp4"/>
+      </div>
       <!-- Progress bar for upload -->
       <div id="uploadProgBar"><div id="uploadProgFill"></div></div>
       <div id="uploadProgLabel"></div>
@@ -502,9 +515,17 @@
 
     <!-- DASHBOARD -->
     <div id="view-dashboard">
+      <div class="dash-toolbar">
+        <div class="field">
+          <label>FILTER BY SCENE</label>
+          <select id="sceneFilter" onchange="applySceneFilter()">
+            <option value="">All scenes</option>
+          </select>
+        </div>
+      </div>
       <div class="dash-grid" id="dashStats"></div>
       <div class="chart-card">
-        <h3>Objects by Class — All Scenes</h3>
+        <h3 id="objectsChartTitle">Objects by Class - All Scenes</h3>
         <div class="bar-chart" id="barChart"></div>
       </div>
       <div class="chart-card">
@@ -512,7 +533,7 @@
         <canvas id="timelineCanvas"></canvas>
       </div>
       <div class="chart-card">
-        <h3>Scene Comparison</h3>
+        <h3 id="sceneComparisonTitle">Scene Comparison</h3>
         <table class="scene-table">
           <thead>
             <tr>
@@ -584,6 +605,7 @@ let currentSid  = null;
 let sseSource   = null;
 let selectedFile = null;
 let pollTimer   = null;
+let dashboardCache = null;
 
 // Canvas
 const canvas = document.getElementById('liveCanvas');
@@ -610,6 +632,15 @@ window.onload = () => {
   document.getElementById('videoFile').addEventListener('change', e => {
     selectedFile = e.target.files[0];
     document.getElementById('fileName').textContent = selectedFile?.name || '';
+    if (selectedFile) document.getElementById('videoUrl').value = '';
+  });
+
+  document.getElementById('videoUrl').addEventListener('input', e => {
+    if (e.target.value.trim()) {
+      selectedFile = null;
+      document.getElementById('videoFile').value = '';
+      document.getElementById('fileName').textContent = '';
+    }
   });
 
   const zone = document.getElementById('uploadZone');
@@ -620,6 +651,7 @@ window.onload = () => {
     if (e.dataTransfer.files[0]) {
       selectedFile = e.dataTransfer.files[0];
       document.getElementById('fileName').textContent = selectedFile.name;
+      document.getElementById('videoUrl').value = '';
     }
   });
 };
@@ -667,13 +699,15 @@ function switchTab(tab, btn) {
 
 // ══ PROCESSING ════════════════════════════════════════════════════════════════
 async function startProcessing() {
-  if (!selectedFile) { toast('Please upload a video file first.', 'err'); return; }
+  const videoUrl = document.getElementById('videoUrl').value.trim();
+  if (!selectedFile && !videoUrl) { toast('Upload a video file or enter a video URL.', 'err'); return; }
 
   const selected = [...document.querySelectorAll('#classGrid input:checked')].map(i => i.value);
   if (!selected.length) { toast('Select at least one class.', 'err'); return; }
 
   const fd = new FormData();
-  fd.append('file',       selectedFile);
+  if (selectedFile) fd.append('file', selectedFile);
+  else fd.append('video_url', videoUrl);
   fd.append('scene_name', document.getElementById('sceneName').value || 'scene_01');
   fd.append('group_id',   document.getElementById('groupId').value   || 'group_01');
   fd.append('classes',    selected.join(','));
@@ -690,7 +724,7 @@ async function startProcessing() {
   progBar.style.display = 'block';
   progFill.style.width = '0%';
   progLabel.style.display = 'block';
-  progLabel.textContent = 'Uploading...';
+  progLabel.textContent = selectedFile ? 'Uploading...' : 'Fetching URL...';
 
   try {
     // Use XMLHttpRequest for progress
@@ -719,7 +753,7 @@ async function startProcessing() {
         reject(new Error('Network error'));
       };
       xhr.upload.onprogress = function(e) {
-        if (e.lengthComputable) {
+        if (selectedFile && e.lengthComputable) {
           const pct = Math.round(e.loaded / e.total * 100);
           progFill.style.width = pct + '%';
           progLabel.textContent = `Uploading... ${pct}%`;
@@ -968,16 +1002,55 @@ async function loadDashboard() {
   try {
     const r = await fetch(`${API_BASE}/dashboard`);
     const d = await r.json();
-    renderDashboard(d);
+    dashboardCache = d;
+    populateSceneFilter(d.scenes || []);
+    applySceneFilter();
   } catch {
     document.getElementById('dashStats').innerHTML =
       '<div style="font-family:var(--mono);font-size:12px;color:var(--dim)">Server not reachable.</div>';
   }
 }
 
+function populateSceneFilter(scenes) {
+  const select = document.getElementById('sceneFilter');
+  const current = select.value;
+  const names = [...new Set(scenes.map(sc => sc.scene).filter(Boolean))].sort();
+  select.innerHTML = '<option value="">All scenes</option>' +
+    names.map(name => `<option value="${escapeHtml(name)}">${escapeHtml(name)}</option>`).join('');
+  if (names.includes(current)) select.value = current;
+}
+
+function applySceneFilter() {
+  if (!dashboardCache) return;
+  const scene = document.getElementById('sceneFilter').value;
+  const scenes = (dashboardCache.scenes || []).filter(sc => !scene || sc.scene === scene);
+  const global_counts = {};
+  for (const sc of scenes) {
+    for (const [cls, cnt] of Object.entries(sc.count_per_class || {})) {
+      global_counts[cls] = (global_counts[cls] || 0) + cnt;
+    }
+  }
+  renderDashboard({
+    scenes,
+    global_counts,
+    total_scenes: scenes.length,
+    total_objects: Object.values(global_counts).reduce((a, b) => a + b, 0),
+  });
+}
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, ch => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+  }[ch]));
+}
+
 function renderDashboard(d) {
   const { global_counts = {}, total_scenes = 0, total_objects = 0, scenes = [] } = d;
   const totalDur = scenes.reduce((s, sc) => s + (sc.duration_sec || 0), 0);
+  const selectedScene = document.getElementById('sceneFilter')?.value || '';
+  const scope = selectedScene ? selectedScene : 'All Scenes';
+  document.getElementById('objectsChartTitle').textContent = `Objects by Class - ${scope}`;
+  document.getElementById('sceneComparisonTitle').textContent = selectedScene ? 'Selected Scene' : 'Scene Comparison';
 
   document.getElementById('dashStats').innerHTML = [
     statCard('SCENES',        total_scenes,   'videos'),