Initial commit of Splay Network application

.agent/workflows/deploy_to_render.md

@@ -0,0 +1,83 @@
+---
+description: How to deploy the Splay Network application to Render
+---
+
+This guide outlines the steps to deploy your Flask application to **Render**, a cloud platform that supports Python web apps easily.
+
+### Prerequisites
+
+1.  **Gunicorn**: We have already added `gunicorn` to your `requirements.txt`. This is the production server required for deployment (app.run is only for development).
+2.  **Procfile**: We have created a `Procfile` in your root directory containing `web: gunicorn app:app`. This tells Render how to start your app.
+3.  **GitHub Account**: You will need to push your code to a GitHub repository.
+
+### Step-by-Step Deployment
+
+1.  **Push Code to GitHub**:
+    *   Initialize a git repository if you haven't already:
+        ```bash
+        git init
+        git add .
+        git commit -m "Initial commit for deployment"
+        ```
+    *   Create a new repository on GitHub.
+    *   Link and push your code:
+        ```bash
+        git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
+        git branch -M main
+        git push -u origin main
+        ```
+
+2.  **Create Service on Render**:
+    *   Go to [dashboard.render.com](https://dashboard.render.com/).
+    *   Click **New +** and select **Web Service**.
+    *   Connect your GitHub account and select the repository you just pushed.
+
+3.  **Configure Build & Start**:
+    *   **Name**: Give your service a unique name (e.g., `splay-network-app`).
+    *   **Region**: Choose the one closest to you.
+    *   **Runtime**: Select **Python 3**.
+    *   **Build Command**: `pip install -r requirements.txt`
+        *   *Note*: Render requires `numpy<2` compatibility if your code was developed that way. Ensure requirements.txt is accurate.
+    *   **Start Command**: `gunicorn app:app` (Render might auto-detect this from the Procfile).
+    *   **Free Instance Type**: Select "Free" if just testing.
+
+4.  **Environment Variables**:
+    *   If you have any API keys or secrets (not used in this simple demo), add them under the "Environment" tab.
+    *   For this app, ensure `PYTHON_VERSION` is set to `3.10.0` or similar if needed, typically default is fine.
+
+5.  **Deploy**:
+    *   Click **Create Web Service**.
+    *   Render will start building your app. Watch the logs.
+    *   Once the build finishes, you will see a green "Live" badge and a URL (e.g., `https://splay-network-app.onrender.com`).
+
+### Troubleshooting
+
+*   **Memory Issues**: The free tier has limited RAM (512MB). If loading PyTorch (Ultralytics) triggers an OOM (Out of Memory) kill, you might need to:
+    *   Use a smaller model (we are already using `yolov8n.pt`, the nano version, which is good).
+    *   Upgrade to a paid instance.
+*   **OpenCV Dependencies**: `opencv-python-headless` is already in requirements, which includes necessary binary dependencies for Linux environments on Render.
+
+### Docker Alternative (Advanced)
+
+If you prefer using Docker, you can add a `Dockerfile`:
+
+```dockerfile
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies for OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:10000"]
+```
+
+If using Docker on Render, choose "Docker" as the runtime instead of Python.

.gitignore

@@ -0,0 +1,6 @@
+venv/
+__pycache__/
+*.pyc
+uploads/
+.DS_Store
+.env

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

app.py

@@ -0,0 +1,54 @@
+from flask import Flask, render_template, jsonify, request, Response
+from simulation import Simulation
+from detection import VideoProcessor
+import os
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+sim = Simulation()
+video_processor = VideoProcessor()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/start', methods=['POST'])
+def start_simulation():
+    data = request.json
+    n_nodes = data.get('n_nodes', 50)
+    sim.reset(n_nodes)
+    return jsonify({'status': 'ok', 'n_nodes': n_nodes})
+
+@app.route('/step')
+def step():
+    state = sim.step()
+    return jsonify(state)
+
+@app.route('/upload_video', methods=['POST'])
+def upload_video():
+    if 'video' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['video']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    filename = secure_filename(file.filename)
+    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    file.save(filepath)
+    
+    # Initialize processor with this video
+    video_processor.set_source(filepath)
+    
+    return jsonify({'status': 'ok', 'filename': filename})
+
+@app.route('/video_feed')
+def video_feed():
+    return Response(video_processor.generate_frames(),
+                    mimetype='multipart/x-mixed-replace; boundary=frame')
+
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

detection.py

@@ -0,0 +1,152 @@
+import cv2
+import numpy as np
+import torch
+from ultralytics import YOLO
+from deep_sort_realtime.deepsort_tracker import DeepSort
+import os
+
+# ==========================================
+# 1. SwinIR Restoration Module (Server-Side)
+# ==========================================
+class SwinIRRestorer:
+    """
+    Simulates the SwinIR restoration step. 
+    In the paper, this recovers 640x640 images from 64x64/128x128 thumbnails.
+    """
+    def __init__(self, target_size=(640, 640)):
+        self.target_size = target_size
+        self.device = 'cuda' if torch.cuda.is_available() else 'cpu'
+        print(f"Restoration Module loaded on: {self.device}")
+        
+    def restore(self, low_res_image):
+        # Simulating restoration for the demo:
+        restored_img = cv2.resize(low_res_image, self.target_size, interpolation=cv2.INTER_CUBIC)
+        
+        # Optional: Apply slight sharpening to mimic SwinIR texture recovery
+        kernel = np.array([[0, -1, 0], [-1, 5,-1], [0, -1, 0]])
+        restored_img = cv2.filter2D(restored_img, -1, kernel)
+        
+        return restored_img
+
+# ==========================================
+# 2. Wildlife Analytics Module (Server-Side)
+# ==========================================
+class WildlifeAnalytics:
+    def __init__(self, confidence_threshold=0.4):
+        # Load YOLOv8 Model
+        print("Loading YOLOv8 Detector...")
+        try:
+             self.detector = YOLO('yolov8n.pt')
+        except Exception as e:
+             print(f"Failed to load YOLO model: {e}")
+             self.detector = None
+        
+
+        # Load DeepSORT Tracker
+        print("Loading DeepSORT Tracker...")
+        # Reduced n_init to 1 to show boxes immediately for moving animals
+        self.tracker = DeepSort(max_age=30, n_init=1, nms_max_overlap=1.0)
+        
+        # Paper specifies confidence > 0.4 
+        self.conf_threshold = confidence_threshold
+
+    def process_frame(self, frame):
+        if self.detector is None:
+             return []
+
+        # 1. Detection
+        results = self.detector(frame, verbose=False)[0]
+        detections = []
+        
+        for box in results.boxes:
+            conf = float(box.conf[0])
+            if conf > self.conf_threshold:
+                x1, y1, x2, y2 = box.xyxy[0].cpu().numpy()
+                cls = int(box.cls[0])
+                class_name = self.detector.names[cls]
+                
+                # Filter for animals if possible, but for demo we take all
+                w, h = x2 - x1, y2 - y1
+                detections.append(([x1, y1, w, h], conf, class_name))
+
+        # 2. Tracking
+        tracks = self.tracker.update_tracks(detections, frame=frame)
+        
+        return tracks
+
+class VideoProcessor:
+    def __init__(self):
+        self.restorer = SwinIRRestorer(target_size=(640, 640))
+        self.analytics = WildlifeAnalytics(confidence_threshold=0.4)
+        self.current_video_path = None
+        self.cap = None
+
+    def set_source(self, video_path):
+        self.current_video_path = video_path
+        if self.cap:
+            self.cap.release()
+        self.cap = cv2.VideoCapture(video_path)
+
+    def generate_frames(self):
+        if not self.cap or not self.cap.isOpened():
+            return
+
+        while True:
+            ret, full_res_frame = self.cap.read()
+            if not ret:
+                # Loop video for demo purposes
+                self.cap.set(cv2.CAP_PROP_POS_FRAMES, 0)
+                continue
+
+            # --- STEP 1: Simulate Node Capture (Edge) ---
+            node_thumbnail = cv2.resize(full_res_frame, (128, 128))
+
+            # --- STEP 2: Restore Image (Server) ---
+            restored_frame = self.restorer.restore(node_thumbnail)
+
+            # --- STEP 3: Detect & Track (Server) ---
+            tracks = self.analytics.process_frame(restored_frame)
+
+            # --- STEP 4: Visualization ---
+            for track in tracks:
+                if not track.is_confirmed() and track.time_since_update > 1:
+                    continue
+                
+                track_id = track.track_id
+                ltrb = track.to_ltrb()
+                class_name = track.det_class if track.det_class else "Object"
+
+                # Draw Bounding Box - Cyan for high visibility
+                # Using a dynamic thickness based on confidence or just thick enough
+                cv2.rectangle(restored_frame, (int(ltrb[0]), int(ltrb[1])), 
+                              (int(ltrb[2]), int(ltrb[3])), (255, 255, 0), 3)
+                
+                # Label with background for readability
+                label = f"ID:{track_id} {class_name}"
+                (w, h), _ = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, 0.6, 2)
+                
+                cv2.rectangle(restored_frame, (int(ltrb[0]), int(ltrb[1]) - 20), (int(ltrb[0]) + w, int(ltrb[1])), (255, 255, 0), -1)
+                
+                cv2.putText(restored_frame, label, (int(ltrb[0]), int(ltrb[1])-5), 
+                            cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 0, 0), 2)
+
+            # Combined View for the web feed
+            # Resize thumbnail to match height/scale for side-by-side
+            viz_thumbnail = cv2.resize(node_thumbnail, (640, 640), interpolation=cv2.INTER_NEAREST)
+            
+            # Create a nice layout: Left (Low Res Mockup), Right (High Res Result)
+            # Add labels
+            cv2.putText(viz_thumbnail, "EDGE NODE (128px)", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 255), 2)
+            cv2.putText(restored_frame, "SERVER (Restored + AI)", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2)
+            
+            combined_view = np.hstack((viz_thumbnail, restored_frame))
+            
+            # Scale down slightly for web performance if needed
+            combined_view = cv2.resize(combined_view, (1000, 500))
+
+            # Encode JPEG
+            ret, buffer = cv2.imencode('.jpg', combined_view)
+            frame = buffer.tobytes()
+
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

requirements.txt

@@ -0,0 +1,8 @@
+flask
+opencv-python-headless
+ultralytics
+deep-sort-realtime
+numpy
+torch
+torchvision
+gunicorn

simulation.py

@@ -0,0 +1,143 @@
+import math
+import random
+from collections import defaultdict
+
+# --- Configuration (Defaults) ---
+AREA_SIZE = 1000.0
+N_CLUSTERS = 5
+T_MAX = 30
+ALPHA = 0.5; BETA = 0.3; KAPPA = 0.1; ZETA = 0.1
+
+def dist(a, b): return math.hypot(a[0]-b[0], a[1]-b[1])
+
+class Node:
+    def __init__(self, idx, pos, cluster):
+        self.idx = idx; self.pos = pos; self.cluster = int(cluster)
+        self.batt = 100.0; self.dead = False; self.S = 0.0; self.fair = 0.0
+        self.is_head = False; self.head_since = 0
+        self.dead_since = None
+
+    def get_color(self):
+        if self.dead: return '#ff0000' # Red
+        if self.batt > 50: return '#00ff00' # Green
+        if self.batt > 20: return '#ffff00' # Yellow
+        return '#ff9900' # Orange
+
+    def consume(self, amount, sim_time):
+        if self.dead: return
+        self.batt -= amount
+        if self.batt <= 0: 
+            self.batt = 0; self.dead = True; self.is_head = False
+            self.dead_since = sim_time
+
+def calculate_utility(node, gateway):
+    term_S = min(node.S, 1.0); term_E = node.batt / 100.0
+    term_fair = min(node.fair, 1.0)
+    d_gate = dist(node.pos, gateway)
+    term_lq = 1.0 - (d_gate / (AREA_SIZE * 1.414))
+    return ALPHA*term_S + BETA*term_E + KAPPA*term_fair + ZETA*term_lq
+
+class Simulation:
+    def __init__(self, n_nodes=50):
+        self.n_nodes = n_nodes
+        self.rng = random.Random() # New random instance
+        self.nodes = []
+        self.clusters = defaultdict(list)
+        self.current_heads = {}
+        self.sim_time = 0
+        self.gateway = (AREA_SIZE/2, AREA_SIZE/2)
+        self.reset(n_nodes)
+
+    def reset(self, n_nodes):
+        self.n_nodes = int(n_nodes)
+        self.sim_time = 0
+        
+        # Setup Network
+        centers = [(self.rng.uniform(100, AREA_SIZE-100), self.rng.uniform(100, AREA_SIZE-100)) for _ in range(N_CLUSTERS)]
+        self.nodes = []
+        for i in range(self.n_nodes):
+            c_idx = self.rng.randint(0, N_CLUSTERS-1)
+            cx, cy = centers[c_idx]
+            nx = cx + self.rng.gauss(0, 80)
+            ny = cy + self.rng.gauss(0, 80)
+            pos = (max(0, min(AREA_SIZE, nx)), max(0, min(AREA_SIZE, ny)))
+            self.nodes.append(Node(i, pos, c_idx))
+
+        self.clusters = defaultdict(list)
+        for n in self.nodes: self.clusters[n.cluster].append(n)
+        self.current_heads = {c: None for c in self.clusters}
+
+    def step(self):
+        # Run logic 1x per frame to slow down backend progression too, or keep it 3x? 
+        # User said "simulation is going really fast", often better to slow down updates.
+        # Let's reduce internal ticks to 1 per step call as well.
+        for _ in range(1):
+            self._run_simulation_step()
+        
+        return self.get_state()
+
+    def _run_simulation_step(self):
+        self.sim_time += 1
+        ev_pos = (self.rng.uniform(0, AREA_SIZE), self.rng.uniform(0, AREA_SIZE))
+
+        for n in self.nodes:
+            if n.dead: continue
+            n.consume(0.2, self.sim_time)
+            n.S *= 0.9
+            if not n.is_head: n.fair += 0.02
+            if dist(n.pos, ev_pos) < 150: n.S += 0.8; n.consume(0.5, self.sim_time)
+
+        for c_id, members in self.clusters.items():
+            head = self.current_heads.get(c_id)
+            if head is None or head.dead or (head and (self.sim_time - head.head_since) > T_MAX):
+                candidates = [n for n in members if not n.dead]
+                if candidates:
+                    winner = max(candidates, key=lambda n: calculate_utility(n, self.gateway))
+                    if head and head != winner: head.is_head = False
+                    self.current_heads[c_id] = winner; winner.is_head = True
+                    winner.head_since = self.sim_time; winner.fair = 0.0; winner.consume(1.5, self.sim_time)
+
+    def get_state(self):
+        # Return serializable state
+        nodes_data = []
+        links = []
+        dead_nodes_stats = []
+        
+        for n in self.nodes:
+            color = n.get_color()
+            
+            # Logic for links: if not head, link to head
+            if not n.is_head and not n.dead:
+                head = self.current_heads.get(n.cluster)
+                if head and not head.dead:
+                    links.append({
+                        'start': n.pos,
+                        'end': head.pos
+                    })
+            
+            if n.dead:
+                downtime = self.sim_time - n.dead_since if n.dead_since is not None else 0
+                dead_nodes_stats.append({
+                    'id': n.idx,
+                    'dead_since': n.dead_since,
+                    'downtime': downtime
+                })
+
+            nodes_data.append({
+                'id': n.idx,
+                'x': n.pos[0],
+                'y': n.pos[1],
+                'color': color,
+                'is_head': n.is_head,
+                'dead': n.dead,
+                'batt': n.batt,
+                'cluster': n.cluster
+            })
+            
+        return {
+            'sim_time': self.sim_time,
+            'gateway': self.gateway,
+            'nodes': nodes_data,
+            'links': links,
+            'dead_stats': dead_nodes_stats
+        }

static/script.js

@@ -0,0 +1,327 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('simCanvas');
+    const ctx = canvas.getContext('2d');
+    const startBtn = document.getElementById('startBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const nodeCountInput = document.getElementById('nodeCount');
+    const simTimeEl = document.getElementById('simTime');
+    const activeNodesEl = document.getElementById('activeNodes');
+
+    // Dashboard Elements
+    const deadCountEl = document.getElementById('deadCount');
+    const avgDowntimeEl = document.getElementById('avgDowntime');
+    const deadNodesListEl = document.getElementById('deadNodesList');
+
+    let isRunning = false;
+    let animationId = null;
+    const AREA_SIZE = 1000.0; // Must match backend
+
+    function resizeCanvas() {
+        const wrapper = document.getElementById('canvas-wrapper');
+        canvas.width = wrapper.clientWidth;
+        canvas.height = wrapper.clientHeight;
+    }
+
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+
+    startBtn.addEventListener('click', async () => {
+        if (isRunning) return;
+
+        const n_nodes = parseInt(nodeCountInput.value);
+        if (!n_nodes || n_nodes < 1) {
+            alert("Please enter a valid number of nodes.");
+            return;
+        }
+
+        try {
+            const res = await fetch('/start', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ n_nodes: n_nodes })
+            });
+            const data = await res.json();
+
+            if (data.status === 'ok') {
+                isRunning = true;
+                startBtn.disabled = true;
+                stopBtn.disabled = false;
+                startBtn.classList.add('disabled');
+
+                // Reset Dashboard
+                if (deadNodesListEl) deadNodesListEl.innerHTML = '';
+                if (deadCountEl) deadCountEl.textContent = '0';
+                if (avgDowntimeEl) avgDowntimeEl.textContent = '0';
+
+                loop();
+            }
+        } catch (e) {
+            console.error("Error starting simulation:", e);
+        }
+    });
+
+    stopBtn.addEventListener('click', () => {
+        isRunning = false;
+        if (animationId) clearTimeout(animationId);
+        startBtn.disabled = false;
+        stopBtn.disabled = true;
+        startBtn.classList.remove('disabled');
+    });
+
+    async function loop() {
+        if (!isRunning) return;
+
+        try {
+            const res = await fetch('/step');
+            const state = await res.json();
+            draw(state);
+            updateDashboard(state);
+
+            simTimeEl.textContent = state.sim_time;
+            const liveNodes = state.nodes.filter(n => !n.dead).length;
+            activeNodesEl.textContent = liveNodes;
+
+            if (liveNodes === 0 && isRunning) {
+                isRunning = false;
+                startBtn.disabled = false;
+                stopBtn.disabled = true;
+                startBtn.classList.remove('disabled');
+                return;
+            }
+
+            // Throttled loop: 200ms delay ~ 5 FPS
+            animationId = setTimeout(loop, 200);
+        } catch (e) {
+            console.error("Error fetching step:", e);
+            isRunning = false;
+        }
+    }
+
+    function updateDashboard(state) {
+        if (!state.dead_stats) return;
+
+        const deadCount = state.dead_stats.length;
+        if (deadCountEl) deadCountEl.textContent = deadCount;
+
+        // Calculate Average Downtime
+        let totalDowntime = 0;
+        state.dead_stats.forEach(s => totalDowntime += s.downtime);
+        const avg = deadCount > 0 ? (totalDowntime / deadCount).toFixed(1) : 0;
+        if (avgDowntimeEl) avgDowntimeEl.textContent = avg;
+
+        // Populate List (Latest 5 failures?)
+        if (deadNodesListEl) {
+            // Clear current list to rebuild or append? Rebuilding is safer for sync
+            deadNodesListEl.innerHTML = '';
+
+            // Sort by most recent death (highest downtime implies earliest death, wait. 
+            // We want recent failures. dead_since is the tick. Higher dead_since = more recent.)
+            // let's sort by dead_since descending.
+            const sorted = [...state.dead_stats].sort((a, b) => b.dead_since - a.dead_since);
+
+            sorted.slice(0, 10).forEach(stat => {
+                const li = document.createElement('li');
+                li.className = 'dead-node-item';
+                li.innerHTML = `
+                    <span class="dead-node-id">Node ${stat.id}</span>
+                    <span class="dead-node-time">Down for ${stat.downtime}t (Since: ${stat.dead_since})</span>
+                `;
+                deadNodesListEl.appendChild(li);
+            });
+        }
+    }
+
+    function draw(state) {
+        // Clear background
+        ctx.fillStyle = '#0a0a12'; // Or clearRect for transparency if using CSS bg
+        ctx.clearRect(0, 0, canvas.width, canvas.height); // Use CSS background
+
+        // Calculate Scale to Fit
+        const scaleX = canvas.width / AREA_SIZE;
+        const scaleY = canvas.height / AREA_SIZE;
+        const scale = Math.min(scaleX, scaleY) * 0.9; // 90% fit
+        const offsetX = (canvas.width - AREA_SIZE * scale) / 2;
+        const offsetY = (canvas.height - AREA_SIZE * scale) / 2;
+
+        const transform = (x, y) => ({
+            x: offsetX + x * scale,
+            y: offsetY + y * scale // Flip Y if needed? Matplotlib is cartesian bottom-up, but usually 0,0 is top-left in canvas.
+            // In the Python code: (0,0) to (1000, 1000).
+            // Matplotlib typically puts (0,0) at bottom-left. Canvas is top-left.
+            // If I want to match visual exactly, I might need to invert Y: AREA_SIZE - y.
+            // Let's assume standard top-left for now or just check.
+            // The python visual uses `ax.set_ylim(0, AREA_SIZE)`, so 0 is bottom.
+            // So: y_canvas = offsetY + (AREA_SIZE - y) * scale
+        });
+
+        // Helper to transform points
+        const t = (x, y) => {
+            return {
+                x: offsetX + x * scale,
+                y: offsetY + (AREA_SIZE - y) * scale
+            };
+        };
+
+        // Draw Links
+        if (state.links) {
+            state.links.forEach(link => {
+                const start = t(link.start[0], link.start[1]);
+                const end = t(link.end[0], link.end[1]);
+
+                ctx.beginPath();
+                ctx.moveTo(start.x, start.y);
+                ctx.lineTo(end.x, end.y);
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+            });
+        }
+
+        // Draw Gateway
+        const gw = t(state.gateway[0], state.gateway[1]);
+        ctx.fillStyle = '#00f3ff';
+        ctx.shadowColor = '#00f3ff';
+        ctx.shadowBlur = 20;
+        ctx.beginPath();
+        ctx.arc(gw.x, gw.y, 8, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.shadowBlur = 0; // Reset
+
+        // Draw Nodes
+        state.nodes.forEach(node => {
+            const p = t(node.x, node.y);
+
+            // Outer glow for heads
+            if (node.is_head) {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 12, 0, Math.PI * 2);
+                ctx.fillStyle = hexToRgba(node.color, 0.2);
+                ctx.fill();
+
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 8, 0, Math.PI * 2);
+                ctx.strokeStyle = node.color;
+                ctx.lineWidth = 2;
+                ctx.stroke();
+            }
+
+            // Core node
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, node.is_head ? 6 : 4, 0, Math.PI * 2);
+            ctx.fillStyle = node.color;
+            ctx.fill();
+
+            // Dead marker
+            if (node.dead) {
+                ctx.strokeStyle = '#fff';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(p.x - 3, p.y - 3);
+                ctx.lineTo(p.x + 3, p.y + 3);
+                ctx.moveTo(p.x + 3, p.y - 3);
+                ctx.lineTo(p.x - 3, p.y + 3);
+                ctx.stroke();
+            }
+        });
+    }
+
+    function hexToRgba(hex, alpha) {
+        // Basic hex parsing
+        let c;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            c = hex.substring(1).split('');
+            if (c.length === 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
+        }
+        return hex;
+    }
+
+    // --- Wildlife Detection Utils ---
+    const dropZone = document.getElementById('dropZone');
+    const videoInput = document.getElementById('videoInput');
+    const uploadStatus = document.getElementById('uploadStatus');
+    const videoPlaceholder = document.getElementById('videoPlaceholder');
+    const feedWrapper = document.querySelector('.video-feed-wrapper');
+
+    if (dropZone) {
+        dropZone.addEventListener('click', () => videoInput.click());
+
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.style.borderColor = '#00f3ff';
+        });
+
+        dropZone.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            dropZone.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+            if (e.dataTransfer.files.length) {
+                handleUpload(e.dataTransfer.files[0]);
+            }
+        });
+
+        videoInput.addEventListener('change', () => {
+            if (videoInput.files.length) {
+                handleUpload(videoInput.files[0]);
+            }
+        });
+    }
+
+    async function handleUpload(file) {
+        if (!file.type.startsWith('video/')) {
+            uploadStatus.textContent = "Error: Please upload a video file.";
+            uploadStatus.style.color = '#ff4444';
+            return;
+        }
+
+        uploadStatus.textContent = `Uploading ${file.name}... (This may take a moment)`;
+        uploadStatus.style.color = '#8892b0';
+
+        const formData = new FormData();
+        formData.append('video', file);
+
+        try {
+            const res = await fetch('/upload_video', {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await res.json();
+
+            if (data.status === 'ok') {
+                uploadStatus.textContent = "Processing Started! Stream below.";
+                uploadStatus.style.color = '#00ff00';
+                startVideoFeed();
+            } else {
+                uploadStatus.textContent = "Upload Failed: " + (data.error || 'Unknown error');
+                uploadStatus.style.color = '#ff4444';
+            }
+        } catch (e) {
+            console.error(e);
+            uploadStatus.textContent = "Network Error.";
+            uploadStatus.style.color = '#ff4444';
+        }
+    }
+
+    function startVideoFeed() {
+        // Clear placeholder
+        if (videoPlaceholder) videoPlaceholder.style.display = 'none';
+
+        // Remove existing img if any
+        const existing = document.getElementById('detectionFeed');
+        if (existing) existing.remove();
+
+        // Add MJPEG Stream Image
+        const img = document.createElement('img');
+        img.id = 'detectionFeed';
+        img.src = '/video_feed?' + new Date().getTime(); // Cache bust
+        feedWrapper.appendChild(img);
+    }
+});

static/style.css

@@ -0,0 +1,547 @@
+:root {
+    --bg-color: #040408;
+    --panel-bg: rgba(20, 20, 30, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --primary-hsl: 250, 100%, 65%;
+    --primary-color: hsl(var(--primary-hsl));
+    --accent-color: #00f3ff;
+    --text-main: #ffffff;
+    --text-muted: #8892b0;
+    --font-family: 'Outfit', sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-color);
+    background-image:
+        radial-gradient(circle at 10% 20%, rgba(76, 29, 149, 0.2) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(0, 243, 255, 0.1) 0%, transparent 20%);
+    color: var(--text-main);
+    font-family: var(--font-family);
+    min-height: 100vh;
+    overflow-x: hidden;
+    /* Prevent horizontal scroll only */
+    overflow-y: auto;
+    /* Allow vertical scroll */
+}
+
+/* Page Layout Wrapper */
+.page-wrapper {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Header / Hero Section */
+.hero {
+    text-align: center;
+    padding: 3rem 1rem;
+    margin-bottom: 2rem;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #fff 0%, #b8b8b8 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+    font-size: 1.2rem;
+    color: var(--text-muted);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+/* Main App Container - Now a section within the page */
+.app-container {
+    display: grid;
+    grid-template-columns: 350px 1fr;
+    gap: 2rem;
+    height: 800px;
+    /* Fixed height for the dashboard area to keep it contained */
+    margin-bottom: 4rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 900px) {
+    .app-container {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
+
+    .sidebar {
+        width: 100%;
+        margin-bottom: 2rem;
+    }
+
+    .viewport {
+        height: 500px;
+        /* Min height for canvas on mobile */
+    }
+}
+
+.sidebar {
+    width: 100%;
+    /* Take full width of grid column */
+    height: 100%;
+    padding: 0;
+    z-index: 10;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    padding: 2rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    height: 100%;
+    overflow-y: auto;
+    /* Allow sidebar internal scroll if needed */
+}
+
+h1 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, #fff 0%, #a5a5a5 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 2rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.control-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.input-wrapper input {
+    width: 100%;
+    padding: 12px 16px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    color: white;
+    font-family: var(--font-family);
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+.input-wrapper input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
+}
+
+button {
+    width: 100%;
+    padding: 14px;
+    border-radius: 12px;
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    border: none;
+    margin-bottom: 1rem;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.2s;
+}
+
+button:active {
+    transform: scale(0.98);
+}
+
+.primary-btn {
+    background: linear-gradient(135deg, var(--primary-color), #8a2be2);
+    color: white;
+    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
+}
+
+.primary-btn:hover {
+    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6);
+}
+
+.primary-btn:disabled,
+.primary-btn.disabled {
+    background: #444;
+    color: #888;
+    box-shadow: none;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.secondary-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-main);
+}
+
+.secondary-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.secondary-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.stats {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--glass-border);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-item .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+
+.stat-item .value {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--accent-color);
+}
+
+.viewport {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+#canvas-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: 24px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--glass-border);
+    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+/* Legend Styles */
+.legend {
+    margin-top: 2rem;
+    border-top: 1px solid var(--glass-border);
+    padding-top: 1.5rem;
+}
+
+.legend h3 {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    letter-spacing: 1.5px;
+    margin-bottom: 1rem;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    font-size: 0.9rem;
+    color: var(--text-main);
+}
+
+.legend-item .icon {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 12px;
+    display: inline-block;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.legend-item .icon.gateway {
+    background: #00f3ff;
+    box-shadow: 0 0 8px #00f3ff;
+}
+
+.legend-item .icon.head {
+    background: transparent;
+    border: 2px solid var(--primary-color);
+    box-shadow: 0 0 10px var(--primary-color);
+    width: 14px;
+    height: 14px;
+}
+
+.legend-item .icon.high-batt {
+    background: #00ff00;
+}
+
+.legend-item .icon.med-batt {
+    background: #ffff00;
+}
+
+.legend-item .icon.low-batt {
+    background: #ff9900;
+}
+
+.legend-item .icon.dead {
+    width: 10px;
+    height: 10px;
+    background: transparent;
+    position: relative;
+}
+
+.legend-item .icon.dead::before,
+.legend-item .icon.dead::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    background: red;
+}
+
+.legend-item .icon.dead::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.legend-item .icon.dead::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* --- Analytics Section --- */
+.analytics-container {
+    max-width: 1200px;
+    margin: 4rem auto;
+    background: rgba(10, 10, 20, 0.6);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    padding: 3rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.analytics-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.analytics-header h2 {
+    font-size: 2rem;
+    background: linear-gradient(90deg, #00f3ff, #00ff00);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+.analytics-header p {
+    color: var(--text-muted);
+}
+
+.analytics-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+    align-items: start;
+}
+
+/* Upload Zone */
+.upload-box {
+    border: 2px dashed var(--glass-border);
+    border-radius: 16px;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.upload-box:hover {
+    border-color: var(--accent-color);
+    background: rgba(0, 243, 255, 0.05);
+}
+
+.upload-box .icon {
+    display: block;
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 1rem;
+    background: var(--text-muted);
+    /* Placeholder for an icon */
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center;
+    background-color: var(--accent-color);
+}
+
+.status-box {
+    margin-top: 1rem;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* Video Feed */
+.video-feed-wrapper {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background: #000;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
+}
+
+.video-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    background: radial-gradient(circle at center, #111 0%, #000 100%);
+}
+
+#detectionFeed {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+@media (max-width: 900px) {
+    .analytics-content {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* --- Dashboard Panel --- */
+.dashboard-panel {
+    margin-top: 1rem;
+    background: var(--panel-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 1.5rem;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.dashboard-panel h3 {
+    font-size: 1.1rem;
+    color: var(--text-main);
+    border-bottom: 1px solid var(--glass-border);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.dash-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1rem;
+    text-align: center;
+    border: 1px solid var(--glass-border);
+}
+
+.dash-label {
+    display: block;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.dash-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #ff4444;
+    /* Alert color for failures */
+}
+
+/* List container for dead nodes */
+.dead-nodes-list-container {
+    max-height: 150px;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    padding: 0.5rem;
+}
+
+.dead-nodes-list-container h4 {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+    position: sticky;
+    top: 0;
+    background: rgba(24, 24, 30, 0.9);
+    padding: 0.2rem 0;
+}
+
+.dead-nodes-list {
+    list-style: none;
+    padding: 0;
+}
+
+.dead-node-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.4rem 0.8rem;
+    border-bottom: 1px solid var(--glass-border);
+    font-size: 0.85rem;
+}
+
+.dead-node-item:last-child {
+    border-bottom: none;
+}
+
+.dead-node-id {
+    color: #ff4444;
+    font-weight: 600;
+}
+
+.dead-node-time {
+    color: var(--text-muted);
+}

templates/index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Splay Algorithm Visualization</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+
+<body>
+    <div class="page-wrapper">
+        <section class="hero">
+            <h1>Energy-Efficient Wildlife Tracking Using a Splay Tree Inspired Clustering Policy and Vision-Aided
+                Analytics</h1>
+            <p>Advanced Sensor Cluster Simulation & Visualization<br>Powered by Splay Network Algorithms</p>
+        </section>
+
+        <section class="app-container">
+            <aside class="sidebar">
+                <div class="glass-panel">
+                    <p class="subtitle">Simulation Controls</p>
+
+                    <div class="control-group">
+                        <label for="nodeCount">Number of Nodes</label>
+                        <div class="input-wrapper">
+                            <input type="number" id="nodeCount" value="50" min="10" max="500">
+                        </div>
+                    </div>
+
+                    <div class="control-group">
+                        <button id="startBtn" class="primary-btn">
+                            <span class="btn-text">Initialize & Start</span>
+                            <div class="btn-shine"></div>
+                        </button>
+                        <button id="stopBtn" class="secondary-btn" disabled>Stop</button>
+                    </div>
+
+                    <div class="stats">
+                        <div class="stat-item">
+                            <span class="label">Time Step</span>
+                            <span class="value" id="simTime">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="label">Active Nodes</span>
+                            <span class="value" id="activeNodes">0</span>
+                        </div>
+                    </div>
+
+                    <div class="legend">
+                        <h3>Network State Legend</h3>
+                        <div class="legend-item">
+                            <span class="icon gateway"></span>
+                            <span class="text">Gateway</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="icon head"></span>
+                            <span class="text">Cluster Head</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="icon high-batt"></span>
+                            <span class="text">High Battery (>50%)</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="icon med-batt"></span>
+                            <span class="text">Med Battery (>20%)</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="icon low-batt"></span>
+                            <span class="text">Low Battery</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="icon dead"></span>
+                            <span class="text">Dead Node</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            <main class="viewport">
+                <!-- Canvas container for responsive sizing -->
+                <div id="canvas-wrapper">
+                    <canvas id="simCanvas"></canvas>
+                </div>
+
+                <!-- Live Dashboard -->
+                <div id="dashboard" class="dashboard-panel">
+                    <h3>Network Health Dashboard</h3>
+                    <div class="dashboard-grid">
+                        <div class="dash-card">
+                            <span class="dash-label">Total Dead Nodes</span>
+                            <span class="dash-value" id="deadCount">0</span>
+                        </div>
+                        <div class="dash-card">
+                            <span class="dash-label">Avg Downtime (Ticks)</span>
+                            <span class="dash-value" id="avgDowntime">0</span>
+                        </div>
+                    </div>
+                    <div class="dead-nodes-list-container">
+                        <h4>Recent Node Failures</h4>
+                        <ul id="deadNodesList" class="dead-nodes-list">
+                            <!-- Populated via JS -->
+                        </ul>
+                    </div>
+                </div>
+            </main>
+        </section>
+
+        <!-- New Section: Wildlife Analytics -->
+        <section class="analytics-container">
+            <div class="analytics-header">
+                <h2>Real-Time Wildlife Analytics</h2>
+                <p>Upload video footprint to detect and track species using Splay-Optimized Edge-Server Pipeline.</p>
+            </div>
+
+            <div class="analytics-content">
+                <div class="upload-zone">
+                    <div class="upload-box" id="dropZone">
+                        <span class="icon cloud-upload"></span>
+                        <p>Drag & Drop Wildlife Video or Click to Browse</p>
+                        <input type="file" id="videoInput" accept="video/*" hidden>
+                    </div>
+                    <div class="status-box" id="uploadStatus">Awaiting Upload...</div>
+                </div>
+
+                <div class="video-feed-wrapper">
+                    <div class="video-placeholder" id="videoPlaceholder">
+                        <p>Live Detection Feed will appear here</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+
+</html>