kiap

.idea/workspace.xml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="82a48ce3-b0fe-4383-a5c5-1857889128ea" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Dockerfile" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "associatedIndex": 3
+}]]></component>
+  <component name="ProjectId" id="33zr2jYSXA7j2m2NetACLNED8HB" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "git-widget-placeholder": "main",
+    "last_opened_file_path": "/Users/rizkynindra.sukma/PycharmProjects/squadrone"
+  }
+}]]></component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-python-sdk-82724e2b1abb-e2d783800521-com.jetbrains.pycharm.community.sharedIndexes.bundled-PC-251.28293.52" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="82a48ce3-b0fe-4383-a5c5-1857889128ea" name="Changes" comment="" />
+      <created>1760330537074</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1760330537074</updated>
+    </task>
+    <servers />
+  </component>
+</project>

Dockerfile

@@ -11,11 +11,11 @@ RUN pip install --no-cache-dir -r requirements.txt
 # Copy your Flask app
 COPY . .
 
-# Expose port 7860 (Hugging Face default)
-EXPOSE 7860
+# Expose port 5000 (Hugging Face default)
+EXPOSE 5000
 
 # Set environment variable for Flask
-ENV PORT=7860
+ENV PORT=5000
 
 # Run Flask app
 CMD ["python", "app2.py"]

app2.py

@@ -0,0 +1,164 @@
+from flask import Flask, render_template, request, jsonify, send_from_directory
+import base64
+import cv2
+import numpy as np
+from ultralytics import YOLO
+import io
+from PIL import Image
+import time
+import torch
+
+print(f"PyTorch CUDA available: {torch.cuda.is_available()}")
+print(f"CUDA device count: {torch.cuda.device_count()}")
+if torch.cuda.is_available():
+    print(f"CUDA device name: {torch.cuda.get_device_name(0)}")
+
+app = Flask(__name__)
+
+@app.route('/audio/<path:filename>')
+def serve_audio(filename):
+    return send_from_directory('audio', filename)
+
+# Load YOLO model
+model = YOLO('model/best_100_fix.pt')
+
+#use GPU
+model.to('cuda')
+print(f"YOLO model loaded on device: {model.device}")
+
+# Model configuration
+CONFIDENCE_THRESHOLD = 0.3 # Lower confidence threshold for better detection
+IMAGE_SIZE = 480  # Smaller inference size can improve performance
+
+# Human detection tracking
+human_detection_state = {
+    'first_detected_at': None,
+    'is_alarm_active': False,
+    'last_detection_time': 0,
+    'detection_threshold': 2.0  # 2 seconds
+}
+
+
+@app.route('/')
+def index():
+    return render_template('screen_share_bck.html')
+
+
+@app.route('/detect', methods=['POST'])
+def detect():
+    start_time = time.time()
+    try:
+        # Get image data from request
+        data = request.json
+        image_data = data['image']
+
+        # Remove the prefix from base64 data
+        if 'data:image/jpeg;base64,' in image_data:
+            image_data = image_data.replace('data:image/jpeg;base64,', '')
+        elif 'data:image/png;base64,' in image_data:
+            image_data = image_data.replace('data:image/png;base64,', '')
+
+        # Decode base64 to image
+        image_bytes = base64.b64decode(image_data)
+        image = Image.open(io.BytesIO(image_bytes))
+
+        # Convert to OpenCV format
+        frame = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+
+        # Run detection with optimized parameters
+        results = model.predict(
+            source=frame,
+            conf=CONFIDENCE_THRESHOLD,
+            verbose=False,
+            imgsz=IMAGE_SIZE,  # Use smaller size for faster inference
+            iou=0.5
+        )
+
+        # Process results
+        detections = []
+        human_detected = False
+
+        for result in results:
+            boxes = result.boxes.xyxy.cpu().numpy()
+            scores = result.boxes.conf.cpu().numpy()
+            classes = result.boxes.cls.cpu().numpy()
+
+            for box, score, cls in zip(boxes, scores, classes):
+                x1, y1, x2, y2 = map(int, box)
+                class_name = model.names[int(cls)]
+
+                # Check if this is a human/person detection
+                if class_name.lower() in ['person', 'human']:
+                    human_detected = True
+
+                detections.append({
+                    'box': [x1, y1, x2, y2],
+                    'class': class_name,
+                    'confidence': float(score)
+                })
+
+        # Update human detection state
+        current_time = time.time()
+        alarm_status = check_human_detection(human_detected, current_time)
+
+        processing_time = time.time() - start_time
+        return jsonify({
+            'success': True,
+            'detections': detections,
+            'processing_time_ms': round(processing_time * 1000, 2),
+            'alarm': alarm_status
+        })
+
+    except Exception as e:
+        print(f"Error processing image: {str(e)}")
+        # Reset human detection on error
+        reset_human_detection()
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+
+def check_human_detection(human_detected, current_time):
+    """Track human detection and determine if alarm should be triggered"""
+    global human_detection_state
+
+    if human_detected:
+        # If this is the first human detection or there was a gap in detection
+        if human_detection_state['first_detected_at'] is None:
+            human_detection_state['first_detected_at'] = current_time
+            human_detection_state['is_alarm_active'] = False
+            return {'active': False}
+
+        # Check if human has been detected for the threshold duration
+        elapsed_time = current_time - human_detection_state['first_detected_at']
+        if elapsed_time >= human_detection_state['detection_threshold']:
+            # Trigger the alarm if not already triggered
+            human_detection_state['is_alarm_active'] = True
+            return {'active': True, 'duration': elapsed_time}
+
+        # Human detected but threshold not reached
+        return {'active': False, 'progress': elapsed_time / human_detection_state['detection_threshold']}
+    else:
+        # No human detected, reset the tracking
+        reset_human_detection()
+        return {'active': False}
+
+
+def reset_human_detection():
+    """Reset human detection tracking"""
+    global human_detection_state
+    human_detection_state['first_detected_at'] = None
+    human_detection_state['is_alarm_active'] = False
+
+
+@app.route('/reset_alarm', methods=['POST'])
+def reset_alarm():
+    """Endpoint to manually reset the alarm"""
+    reset_human_detection()
+    return jsonify({'success': True})
+
+
+if __name__ == '__main__':
+    # Use threaded mode for better performance
+    app.run(debug=True, host='0.0.0.0', port=5000, threaded=True)

model/best (1).pt

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

model/best.pt

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

model/best2.pt

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

model/best5.pt

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

model/best_100.pt

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

model/best_100_fix.pt

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

model/best_4.pt

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

requirements.txt

@@ -0,0 +1,117 @@
+altair==5.5.0
+altgraph==0.17.4
+appnope==0.1.4
+asttokens==3.0.0
+attrs==25.1.0
+backcall==0.2.0
+beautifulsoup4==4.13.3
+bleach==6.2.0
+blinker==1.9.0
+bottle==0.13.2
+cachetools==5.5.2
+certifi==2025.1.31
+cffi==1.17.1
+charset-normalizer==3.4.1
+click==8.1.8
+clr_loader==0.2.7.post0
+colorama==0.4.6
+contourpy==1.3.1
+cycler==0.12.1
+decorator==5.2.1
+defusedxml==0.7.1
+docopt==0.6.2
+executing==2.2.0
+fastjsonschema==2.21.1
+filelock==3.17.0
+fonttools==4.56.0
+fsspec==2025.3.0
+gitdb==4.0.12
+GitPython==3.1.44
+idna==3.10
+ipython==8.12.3
+jedi==0.19.2
+Jinja2==3.1.6
+jsonschema==4.23.0
+jsonschema-specifications==2024.10.1
+jupyter_client==8.6.3
+jupyter_core==5.7.2
+jupyterlab_pygments==0.3.0
+kiwisolver==1.4.8
+lap==0.5.12
+macholib==1.16.3
+MarkupSafe==3.0.2
+matplotlib==3.10.1
+matplotlib-inline==0.1.7
+mistune==3.1.2
+mpmath==1.3.0
+narwhals==1.29.1
+nbclient==0.10.2
+nbconvert==7.16.6
+nbformat==5.10.4
+networkx==3.4.2
+numpy==2.1.1
+opencv-python==4.11.0.86
+packaging==24.2
+pandas==2.2.3
+pandocfilters==1.5.1
+parso==0.8.4
+pefile==2023.2.7
+pexpect==4.9.0
+pickleshare==0.7.5
+pillow==11.1.0
+pipreqs==0.5.0
+platformdirs==4.3.6
+prompt_toolkit==3.0.50
+protobuf==5.29.3
+proxy_tools==0.1.0
+psutil==7.0.0
+ptyprocess==0.7.0
+pure_eval==0.2.3
+py-cpuinfo==9.0.0
+pyarrow==19.0.1
+pycparser==2.22
+pydeck==0.9.1
+Pygments==2.19.1
+pyinstaller==6.12.0
+pyinstaller-hooks-contrib==2025.1
+pyobjc-core==11.1
+pyobjc-framework-Cocoa==11.1
+pyobjc-framework-Quartz==11.1
+pyobjc-framework-Security==11.1
+pyobjc-framework-WebKit==11.1
+pyparsing==3.2.1
+python-dateutil==2.9.0.post0
+pythonnet==3.0.5
+pytz==2025.1
+pywebview==5.4
+PyYAML==6.0.2
+pyzmq==26.2.1
+referencing==0.36.2
+requests==2.32.3
+rpds-py==0.23.1
+scipy==1.15.2
+seaborn==0.13.2
+six==1.17.0
+smmap==5.0.2
+soupsieve==2.6
+stack-data==0.6.3
+streamlit==1.43.1
+streamlit-desktop-app==0.3.4
+sympy==1.13.1
+tenacity==9.0.0
+tinycss2==1.4.0
+toml==0.10.2
+torch==2.6.0
+torchvision==0.21.0
+tornado==6.4.2
+tqdm==4.67.1
+traitlets==5.14.3
+typing_extensions==4.12.2
+tzdata==2025.1
+ultralytics==8.3.85
+ultralytics-thop==2.0.14
+urllib3==2.3.0
+watchdog==6.0.0
+wcwidth==0.2.13
+webencodings==0.5.1
+yarg==0.1.9

templates/screen_share.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Squadrone</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+        }
+        .video-container {
+            margin: 20px 0;
+            text-align: center;
+            position: relative;
+        }
+        video {
+            max-width: 100%;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        canvas {
+            position: absolute;
+            left: 0;
+            top: 0;
+            max-width: 100%;
+        }
+        button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 10px 5px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .controls {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .status {
+            text-align: center;
+            color: #666;
+            margin: 10px 0;
+            font-style: italic;
+        }
+        .detection-info {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .fps-counter {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            padding: 5px;
+            border-radius: 3px;
+            font-size: 12px;
+        }
+        .alarm {
+            background-color: #ff0000;
+            color: white;
+            padding: 15px;
+            margin-top: 10px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 18px;
+            border-radius: 4px;
+            display: none;
+        }
+        @keyframes alarm-flash {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .alarm-active {
+            display: block;
+            animation: alarm-flash 1s infinite;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Squadrone v1.0.1</h1>
+
+        <div class="controls">
+            <button id="startButton">Start Screen Share</button>
+            <button id="stopButton" disabled>Stop Screen Share</button>
+            <button id="startDetectionButton" disabled>Start Detection</button>
+            <button id="pauseDetectionButton" disabled>Pause Detection</button>
+        </div>
+
+        <div class="status" id="status">Ready to share screen</div>
+
+        <!-- Alarm sound -->
+        <div class="alarm" id="humanAlarm">ALERT: Human detected for extended period!</div>
+
+
+        <div class="video-container">
+            <video id="screenVideo" autoplay playsinline muted></video>
+            <canvas id="detectionCanvas"></canvas>
+            <div id="fpsCounter" class="fps-counter">0 FPS</div>
+        </div>
+
+        <div class="detection-info" id="detectionResults">
+            <h3>Detection Results</h3>
+            <p>No detection performed yet.</p>
+        </div>
+    </div>
+
+    <script>
+        const startButton = document.getElementById('startButton');
+        const stopButton = document.getElementById('stopButton');
+        const startDetectionButton = document.getElementById('startDetectionButton');
+        const pauseDetectionButton = document.getElementById('pauseDetectionButton');
+        const screenVideo = document.getElementById('screenVideo');
+        const statusElement = document.getElementById('status');
+        const detectionCanvas = document.getElementById('detectionCanvas');
+        const detectionResults = document.getElementById('detectionResults');
+        const fpsCounter = document.getElementById('fpsCounter');
+        const humanAlarm = document.getElementById('humanAlarm');
+
+        let mediaStream = null;
+        let capturedFrame = null;
+        let detectionActive = false;
+        let detectionInProgress = false;
+        let animationFrameId = null;
+        let lastDetectionTime = 0;
+        let frameCount = 0;
+        let lastFpsUpdateTime = 0;
+        let alarmActive = false;
+
+        // Add this line for the alarm sound
+        const humanDetectionAudio = new Audio('/audio/enemy_spotted.mp3');
+        // Detection throttle settings
+        const MIN_DETECTION_INTERVAL = 100; // ms between detection requests
+
+        startButton.addEventListener('click', async () => {
+            try {
+                statusElement.textContent = 'Requesting screen access...';
+
+                // Request screen capture
+                mediaStream = await navigator.mediaDevices.getDisplayMedia({
+                    video: {
+                        cursor: "always"
+                    },
+                    audio: false
+                });
+
+                // Connect the media stream to the video element
+                screenVideo.srcObject = mediaStream;
+
+                // Wait for video to be loaded
+                screenVideo.onloadedmetadata = () => {
+                    // Set canvas dimensions to match video
+                    detectionCanvas.width = screenVideo.videoWidth;
+                    detectionCanvas.height = screenVideo.videoHeight;
+                };
+
+                // Enable buttons
+                startButton.disabled = true;
+                stopButton.disabled = false;
+                startDetectionButton.disabled = false;
+
+                statusElement.textContent = 'Screen sharing active';
+
+                // Listen for the end of stream
+                mediaStream.getVideoTracks()[0].addEventListener('ended', () => {
+                    stopScreenSharing();
+                });
+
+            } catch (error) {
+                console.error('Error accessing screen:', error);
+                statusElement.textContent = `Error: ${error.message || 'Could not access screen'}`;
+            }
+        });
+
+        stopButton.addEventListener('click', stopScreenSharing);
+
+        function stopScreenSharing() {
+            stopDetection();
+
+            if (mediaStream) {
+                mediaStream.getTracks().forEach(track => track.stop());
+                screenVideo.srcObject = null;
+            }
+
+            startButton.disabled = false;
+            stopButton.disabled = true;
+            startDetectionButton.disabled = true;
+            pauseDetectionButton.disabled = true;
+            statusElement.textContent = 'Screen sharing stopped';
+        }
+
+        startDetectionButton.addEventListener('click', startDetection);
+        pauseDetectionButton.addEventListener('click', pauseDetection);
+
+        function startDetection() {
+            if (!screenVideo.srcObject) {
+                statusElement.textContent = 'No video stream available';
+                return;
+            }
+
+            detectionActive = true;
+            startDetectionButton.disabled = true;
+            pauseDetectionButton.disabled = false;
+            statusElement.textContent = 'Real-time detection active';
+
+            // Start the detection loop
+            lastFpsUpdateTime = performance.now();
+            frameCount = 0;
+            detectLoop();
+        }
+
+        function pauseDetection() {
+            detectionActive = false;
+            startDetectionButton.disabled = false;
+            pauseDetectionButton.disabled = true;
+            statusElement.textContent = 'Detection paused';
+
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+
+            // Reset alarm
+            if (alarmActive) {
+                resetAlarm();
+            }
+        }
+
+        function stopDetection() {
+            detectionActive = false;
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+
+        function captureVideoFrame() {
+            if (!screenVideo.srcObject) {
+                return false;
+            }
+
+            const canvas = document.createElement('canvas');
+            canvas.width = detectionCanvas.width;
+            canvas.height = detectionCanvas.height;
+            const ctx = canvas.getContext('2d');
+
+            // Draw the current video frame on a temporary canvas
+            ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);
+
+            // Store the captured frame as data URL - use lower quality for better performance
+            capturedFrame = canvas.toDataURL('image/jpeg', 0.7);
+            return true;
+        }
+
+        function detectLoop() {
+            if (!detectionActive) return;
+
+            // Calculate FPS
+            frameCount++;
+            const now = performance.now();
+            const elapsed = now - lastFpsUpdateTime;
+
+            if (elapsed >= 1000) { // Update FPS once per second
+                const fps = Math.round((frameCount / elapsed) * 1000);
+                fpsCounter.textContent = `${fps} FPS`;
+                frameCount = 0;
+                lastFpsUpdateTime = now;
+            }
+
+            // Update the video display without clearing the bounding boxes
+            const ctx = detectionCanvas.getContext('2d');
+            ctx.drawImage(screenVideo, 0, 0, detectionCanvas.width, detectionCanvas.height);
+
+            // Check if we should send a new detection request
+            if (!detectionInProgress && now - lastDetectionTime >= MIN_DETECTION_INTERVAL) {
+                if (captureVideoFrame()) {
+                    lastDetectionTime = now;
+                    detectObjects();
+                }
+            }
+
+            // Continue the loop
+            animationFrameId = requestAnimationFrame(detectLoop);
+        }
+
+        async function detectObjects() {
+            if (!capturedFrame || detectionInProgress) {
+                return;
+            }
+
+            try {
+                detectionInProgress = true;
+
+                // Send the captured frame to your Flask backend
+                const response = await fetch('/detect', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        image: capturedFrame
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}`);
+                }
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Display detection results
+                    displayDetectionResults(result);
+
+                    // Store the latest detections to be drawn in the detectLoop
+                    latestDetections = result.detections;
+
+                    // Check alarm status from server
+                    handleAlarmStatus(result.alarm);
+                } else {
+                    throw new Error(result.error || 'Detection failed');
+                }
+
+            } catch (error) {
+                console.error('Error in detection:', error);
+                statusElement.textContent = `Error: ${error.message}`;
+            } finally {
+                detectionInProgress = false;
+            }
+        }
+
+        // Add a global variable to store latest detections
+        let latestDetections = [];
+
+        function detectLoop() {
+            if (!detectionActive) return;
+
+            // Calculate FPS
+            frameCount++;
+            const now = performance.now();
+            const elapsed = now - lastFpsUpdateTime;
+
+            if (elapsed >= 1000) { // Update FPS once per second
+                const fps = Math.round((frameCount / elapsed) * 1000);
+                fpsCounter.textContent = `${fps} FPS`;
+                frameCount = 0;
+                lastFpsUpdateTime = now;
+            }
+
+            // Clear canvas and update the video display
+            const ctx = detectionCanvas.getContext('2d');
+            ctx.clearRect(0, 0, detectionCanvas.width, detectionCanvas.height);
+            ctx.drawImage(screenVideo, 0, 0, detectionCanvas.width, detectionCanvas.height);
+
+            // Draw detection boxes from the latest results
+            if (latestDetections && latestDetections.length) {
+                drawDetectionBoxes(latestDetections);
+            }
+
+            // Check if we should send a new detection request
+            if (!detectionInProgress && now - lastDetectionTime >= MIN_DETECTION_INTERVAL) {
+                if (captureVideoFrame()) {
+                    lastDetectionTime = now;
+                    detectObjects();
+                }
+            }
+
+            // Continue the loop
+            animationFrameId = requestAnimationFrame(detectLoop);
+        }
+
+        // Add function to handle alarm status
+        function handleAlarmStatus(alarmStatus) {
+            if (alarmStatus.active) {
+                if (!alarmActive) {
+                    triggerAlarm();
+                }
+            } else {
+                if (alarmActive) {
+                    resetAlarm();
+                }
+            }
+        }
+
+        function triggerAlarm() {
+            alarmActive = true;
+            humanAlarm.classList.add('alarm-active');
+
+            // Play alarm sound
+            humanDetectionAudio.play().catch(err => console.log('Audio play error:', err));
+
+            // Update status
+            // statusElement.textContent = 'ALERT: Human detected!';
+        }
+
+        function resetAlarm() {
+            alarmActive = false;
+            humanAlarm.classList.remove('alarm-active');
+            humanDetectionAudio.pause();
+            humanDetectionAudio.currentTime = 0;
+
+            // Reset on server side too
+            fetch('/reset_alarm', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).catch(err => console.log('Error resetting alarm on server:', err));
+        }
+
+        function displayDetectionResults(result) {
+            let html = '<h3>Detection Results</h3>';
+
+            if (result.detections && result.detections.length) {
+                html += '<ul>';
+                result.detections.forEach(detection => {
+                    html += `<li>${detection.class} (${(detection.confidence * 100).toFixed(2)}%)</li>`;
+                });
+                html += '</ul>';
+            } else {
+                html += '<p>No objects detected.</p>';
+            }
+
+            detectionResults.innerHTML = html;
+        }
+
+        function drawDetectionBoxes(detections) {
+            if (!detections || !detections.length) return;
+
+            const canvas = detectionCanvas;
+            const ctx = canvas.getContext('2d');
+
+            // No need to clear or redraw the video frame here, that's done in detectLoop
+
+            // Draw detection boxes
+            detections.forEach(detection => {
+                const { box, class: className, confidence } = detection;
+                const [x1, y1, x2, y2] = box;
+
+                ctx.strokeStyle = 'lime';
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x1, y1, x2-x1, y2-y1);
+
+                // Draw label
+                ctx.fillStyle = 'lime';
+                ctx.font = '16px Arial';
+                const label = `${className} ${(confidence * 100).toFixed(1)}%`;
+                const textWidth = ctx.measureText(label).width;
+
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                ctx.fillRect(x1, y1 - 25, textWidth + 10, 25);
+
+                ctx.fillStyle = 'white';
+                ctx.fillText(label, x1 + 5, y1 - 7);
+            });
+        }
+
+
+<!--        function drawDetectionBoxes(detections) {-->
+<!--            // if (!detections || !detections.length) return;-->
+
+<!--            const canvas = detectionCanvas;-->
+<!--            const ctx = canvas.getContext('2d');-->
+
+<!--            // Clear previous drawings-->
+<!--            ctx.clearRect(0, 0, canvas.width, canvas.height);-->
+
+<!--            // Draw current video frame-->
+<!--            ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);-->
+
+<!--            // Draw detection boxes only for humans-->
+<!--            if (detections && detections.length) {-->
+<!--                detections.forEach(detection => {-->
+<!--                    const { box, class: className, confidence } = detection;-->
+
+<!--                    // Only draw boxes for human/person detections-->
+<!--                    if (className.toLowerCase() === 'person' || className.toLowerCase() === 'human') {-->
+<!--                        const [x1, y1, x2, y2] = box;-->
+
+<!--                        // Red color for humans-->
+<!--                        ctx.strokeStyle = 'red';-->
+<!--                        ctx.lineWidth = 3;-->
+<!--                        ctx.strokeRect(x1, y1, x2-x1, y2-y1);-->
+
+<!--                        // Draw label-->
+<!--                        ctx.font = '16px Arial';-->
+<!--                        const label = `${className} ${(confidence * 100).toFixed(1)}%`;-->
+<!--                        const textWidth = ctx.measureText(label).width;-->
+
+<!--                        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';-->
+<!--                        ctx.fillRect(x1, y1 - 25, textWidth + 10, 25);-->
+
+<!--                        ctx.fillStyle = 'white';-->
+<!--                        ctx.fillText(label, x1 + 5, y1 - 7);-->
+<!--                    }-->
+<!--                });-->
+<!--            }-->
+<!--        }-->
+    </script>
+</body>
+</html>

templates/screen_share_bck.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Squadrone</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+        }
+        .video-container {
+            margin: 20px 0;
+            text-align: center;
+            position: relative;
+        }
+        video {
+            max-width: 100%;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        canvas {
+            position: absolute;
+            left: 0;
+            top: 0;
+            max-width: 100%;
+        }
+        button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 10px 5px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .controls {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .status {
+            text-align: center;
+            color: #666;
+            margin: 10px 0;
+            font-style: italic;
+        }
+        .detection-info {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .fps-counter {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            padding: 5px;
+            border-radius: 3px;
+            font-size: 12px;
+        }
+        .alarm {
+            background-color: #ff0000;
+            color: white;
+            padding: 15px;
+            margin-top: 10px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 18px;
+            border-radius: 4px;
+            display: none;
+        }
+        @keyframes alarm-flash {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .alarm-active {
+            display: block;
+            animation: alarm-flash 1s infinite;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Squadrone v1.0.1</h1>
+
+        <div class="controls">
+            <button id="startButton">Start Screen Share</button>
+            <button id="stopButton" disabled>Stop Screen Share</button>
+            <button id="startDetectionButton" disabled>Start Detection</button>
+            <button id="pauseDetectionButton" disabled>Pause Detection</button>
+        </div>
+
+        <div class="status" id="status">Ready to share screen</div>
+
+        <!-- Alarm sound -->
+        <div class="alarm" id="humanAlarm">ALERT: Human detected for extended period!</div>
+
+
+        <div class="video-container">
+            <video id="screenVideo" autoplay playsinline muted></video>
+            <canvas id="detectionCanvas"></canvas>
+            <div id="fpsCounter" class="fps-counter">0 FPS</div>
+        </div>
+
+        <div class="detection-info" id="detectionResults">
+            <h3>Detection Results</h3>
+            <p>No detection performed yet.</p>
+        </div>
+    </div>
+
+    <script>
+        const startButton = document.getElementById('startButton');
+        const stopButton = document.getElementById('stopButton');
+        const startDetectionButton = document.getElementById('startDetectionButton');
+        const pauseDetectionButton = document.getElementById('pauseDetectionButton');
+        const screenVideo = document.getElementById('screenVideo');
+        const statusElement = document.getElementById('status');
+        const detectionCanvas = document.getElementById('detectionCanvas');
+        const detectionResults = document.getElementById('detectionResults');
+        const fpsCounter = document.getElementById('fpsCounter');
+        const humanAlarm = document.getElementById('humanAlarm');
+
+        let mediaStream = null;
+        let capturedFrame = null;
+        let detectionActive = false;
+        let detectionInProgress = false;
+        let animationFrameId = null;
+        let lastDetectionTime = 0;
+        let frameCount = 0;
+        let lastFpsUpdateTime = 0;
+        let alarmActive = false;
+
+        // Add this line for the alarm sound
+        const humanDetectionAudio = new Audio('/audio/enemy_spotted.mp3');
+        // Detection throttle settings
+        const MIN_DETECTION_INTERVAL = 100; // ms between detection requests
+
+        startButton.addEventListener('click', async () => {
+            try {
+                statusElement.textContent = 'Requesting screen access...';
+
+                // Request screen capture
+                mediaStream = await navigator.mediaDevices.getDisplayMedia({
+                    video: {
+                        cursor: "always"
+                    },
+                    audio: false
+                });
+
+                // Connect the media stream to the video element
+                screenVideo.srcObject = mediaStream;
+
+                // Wait for video to be loaded
+                screenVideo.onloadedmetadata = () => {
+                    // Set canvas dimensions to match video
+                    detectionCanvas.width = screenVideo.videoWidth;
+                    detectionCanvas.height = screenVideo.videoHeight;
+                };
+
+                // Enable buttons
+                startButton.disabled = true;
+                stopButton.disabled = false;
+                startDetectionButton.disabled = false;
+
+                statusElement.textContent = 'Screen sharing active';
+
+                // Listen for the end of stream
+                mediaStream.getVideoTracks()[0].addEventListener('ended', () => {
+                    stopScreenSharing();
+                });
+
+            } catch (error) {
+                console.error('Error accessing screen:', error);
+                statusElement.textContent = `Error: ${error.message || 'Could not access screen'}`;
+            }
+        });
+
+        stopButton.addEventListener('click', stopScreenSharing);
+
+        function stopScreenSharing() {
+            stopDetection();
+
+            if (mediaStream) {
+                mediaStream.getTracks().forEach(track => track.stop());
+                screenVideo.srcObject = null;
+            }
+
+            startButton.disabled = false;
+            stopButton.disabled = true;
+            startDetectionButton.disabled = true;
+            pauseDetectionButton.disabled = true;
+            statusElement.textContent = 'Screen sharing stopped';
+        }
+
+        startDetectionButton.addEventListener('click', startDetection);
+        pauseDetectionButton.addEventListener('click', pauseDetection);
+
+        function startDetection() {
+            if (!screenVideo.srcObject) {
+                statusElement.textContent = 'No video stream available';
+                return;
+            }
+
+            detectionActive = true;
+            startDetectionButton.disabled = true;
+            pauseDetectionButton.disabled = false;
+            statusElement.textContent = 'Real-time detection active';
+
+            // Start the detection loop
+            lastFpsUpdateTime = performance.now();
+            frameCount = 0;
+            detectLoop();
+        }
+
+        function pauseDetection() {
+            detectionActive = false;
+            startDetectionButton.disabled = false;
+            pauseDetectionButton.disabled = true;
+            statusElement.textContent = 'Detection paused';
+
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+
+            // Reset alarm
+            if (alarmActive) {
+                resetAlarm();
+            }
+        }
+
+        function stopDetection() {
+            detectionActive = false;
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+
+        function captureVideoFrame() {
+            if (!screenVideo.srcObject) {
+                return false;
+            }
+
+            const canvas = document.createElement('canvas');
+            canvas.width = detectionCanvas.width;
+            canvas.height = detectionCanvas.height;
+            const ctx = canvas.getContext('2d');
+
+            // Draw the current video frame on a temporary canvas
+            ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);
+
+            // Store the captured frame as data URL - use lower quality for better performance
+            capturedFrame = canvas.toDataURL('image/jpeg', 0.7);
+            return true;
+        }
+
+        function detectLoop() {
+            if (!detectionActive) return;
+
+            // Calculate FPS
+            frameCount++;
+            const now = performance.now();
+            const elapsed = now - lastFpsUpdateTime;
+
+            if (elapsed >= 1000) { // Update FPS once per second
+                const fps = Math.round((frameCount / elapsed) * 1000);
+                fpsCounter.textContent = `${fps} FPS`;
+                frameCount = 0;
+                lastFpsUpdateTime = now;
+            }
+
+            // Update the video display without clearing the bounding boxes
+            const ctx = detectionCanvas.getContext('2d');
+            ctx.drawImage(screenVideo, 0, 0, detectionCanvas.width, detectionCanvas.height);
+
+            // Check if we should send a new detection request
+            if (!detectionInProgress && now - lastDetectionTime >= MIN_DETECTION_INTERVAL) {
+                if (captureVideoFrame()) {
+                    lastDetectionTime = now;
+                    detectObjects();
+                }
+            }
+
+            // Continue the loop
+            animationFrameId = requestAnimationFrame(detectLoop);
+        }
+
+        async function detectObjects() {
+            if (!capturedFrame || detectionInProgress) {
+                return;
+            }
+
+            try {
+                detectionInProgress = true;
+
+                // Send the captured frame to your Flask backend
+                const response = await fetch('/detect', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        image: capturedFrame
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}`);
+                }
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Display detection results
+                    displayDetectionResults(result);
+
+                    // Store the latest detections to be drawn in the detectLoop
+                    latestDetections = result.detections;
+
+                    // Check alarm status from server
+                    handleAlarmStatus(result.alarm);
+                } else {
+                    throw new Error(result.error || 'Detection failed');
+                }
+
+            } catch (error) {
+                console.error('Error in detection:', error);
+                statusElement.textContent = `Error: ${error.message}`;
+            } finally {
+                detectionInProgress = false;
+            }
+        }
+
+        // Add a global variable to store latest detections
+        let latestDetections = [];
+
+        function detectLoop() {
+            if (!detectionActive) return;
+
+            // Calculate FPS
+            frameCount++;
+            const now = performance.now();
+            const elapsed = now - lastFpsUpdateTime;
+
+            if (elapsed >= 1000) { // Update FPS once per second
+                const fps = Math.round((frameCount / elapsed) * 1000);
+                fpsCounter.textContent = `${fps} FPS`;
+                frameCount = 0;
+                lastFpsUpdateTime = now;
+            }
+
+            // Clear canvas and update the video display
+            const ctx = detectionCanvas.getContext('2d');
+            ctx.clearRect(0, 0, detectionCanvas.width, detectionCanvas.height);
+            ctx.drawImage(screenVideo, 0, 0, detectionCanvas.width, detectionCanvas.height);
+
+            // Draw detection boxes from the latest results
+            if (latestDetections && latestDetections.length) {
+                drawDetectionBoxes(latestDetections);
+            }
+
+            // Check if we should send a new detection request
+            if (!detectionInProgress && now - lastDetectionTime >= MIN_DETECTION_INTERVAL) {
+                if (captureVideoFrame()) {
+                    lastDetectionTime = now;
+                    detectObjects();
+                }
+            }
+
+            // Continue the loop
+            animationFrameId = requestAnimationFrame(detectLoop);
+        }
+
+        // Add function to handle alarm status
+        function handleAlarmStatus(alarmStatus) {
+            if (alarmStatus.active) {
+                if (!alarmActive) {
+                    triggerAlarm();
+                }
+            } else {
+                if (alarmActive) {
+                    resetAlarm();
+                }
+            }
+        }
+
+        function triggerAlarm() {
+            alarmActive = true;
+            humanAlarm.classList.add('alarm-active');
+
+            // Play alarm sound
+            humanDetectionAudio.play().catch(err => console.log('Audio play error:', err));
+
+            // Update status
+            // statusElement.textContent = 'ALERT: Human detected!';
+        }
+
+        function resetAlarm() {
+            alarmActive = false;
+            humanAlarm.classList.remove('alarm-active');
+            humanDetectionAudio.pause();
+            humanDetectionAudio.currentTime = 0;
+
+            // Reset on server side too
+            fetch('/reset_alarm', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).catch(err => console.log('Error resetting alarm on server:', err));
+        }
+
+        function displayDetectionResults(result) {
+            let html = '<h3>Detection Results</h3>';
+
+            if (result.detections && result.detections.length) {
+                html += '<ul>';
+                result.detections.forEach(detection => {
+                    html += `<li>${detection.class} (${(detection.confidence * 100).toFixed(2)}%)</li>`;
+                });
+                html += '</ul>';
+            } else {
+                html += '<p>No objects detected.</p>';
+            }
+
+            detectionResults.innerHTML = html;
+        }
+
+        function drawDetectionBoxes(detections) {
+            if (!detections || !detections.length) return;
+
+            const canvas = detectionCanvas;
+            const ctx = canvas.getContext('2d');
+
+            // No need to clear or redraw the video frame here, that's done in detectLoop
+
+            // Draw detection boxes
+            detections.forEach(detection => {
+                const { box, class: className, confidence } = detection;
+                const [x1, y1, x2, y2] = box;
+
+                ctx.strokeStyle = 'lime';
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x1, y1, x2-x1, y2-y1);
+
+                // Draw label
+                ctx.fillStyle = 'lime';
+                ctx.font = '16px Arial';
+                const label = `${className} ${(confidence * 100).toFixed(1)}%`;
+                const textWidth = ctx.measureText(label).width;
+
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                ctx.fillRect(x1, y1 - 25, textWidth + 10, 25);
+
+                ctx.fillStyle = 'white';
+                ctx.fillText(label, x1 + 5, y1 - 7);
+            });
+        }
+
+
+<!--        function drawDetectionBoxes(detections) {-->
+<!--            // if (!detections || !detections.length) return;-->
+
+<!--            const canvas = detectionCanvas;-->
+<!--            const ctx = canvas.getContext('2d');-->
+
+<!--            // Clear previous drawings-->
+<!--            ctx.clearRect(0, 0, canvas.width, canvas.height);-->
+
+<!--            // Draw current video frame-->
+<!--            ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);-->
+
+<!--            // Draw detection boxes only for humans-->
+<!--            if (detections && detections.length) {-->
+<!--                detections.forEach(detection => {-->
+<!--                    const { box, class: className, confidence } = detection;-->
+
+<!--                    // Only draw boxes for human/person detections-->
+<!--                    if (className.toLowerCase() === 'person' || className.toLowerCase() === 'human') {-->
+<!--                        const [x1, y1, x2, y2] = box;-->
+
+<!--                        // Red color for humans-->
+<!--                        ctx.strokeStyle = 'red';-->
+<!--                        ctx.lineWidth = 3;-->
+<!--                        ctx.strokeRect(x1, y1, x2-x1, y2-y1);-->
+
+<!--                        // Draw label-->
+<!--                        ctx.font = '16px Arial';-->
+<!--                        const label = `${className} ${(confidence * 100).toFixed(1)}%`;-->
+<!--                        const textWidth = ctx.measureText(label).width;-->
+
+<!--                        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';-->
+<!--                        ctx.fillRect(x1, y1 - 25, textWidth + 10, 25);-->
+
+<!--                        ctx.fillStyle = 'white';-->
+<!--                        ctx.fillText(label, x1 + 5, y1 - 7);-->
+<!--                    }-->
+<!--                });-->
+<!--            }-->
+<!--        }-->
+    </script>
+</body>
+</html>