huggingface ribet

.gitignore

@@ -0,0 +1 @@
+.idea

.idea/copilot.data.migration.ask.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.10 (squadrone)" />
+  </component>
+</project>

.idea/squadrone-huggingface.iml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+</module>

.idea/workspace.xml

@@ -4,7 +4,26 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82a48ce3-b0fe-4383-a5c5-1857889128ea" name="Changes" comment="" />
+    <list default="true" id="82a48ce3-b0fe-4383-a5c5-1857889128ea" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/copilot.data.migration.ask.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/copilot.data.migration.ask2agent.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/squadrone-huggingface.iml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/model/best_26102025.pt" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/static/share_screen.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/static/style.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Dockerfile" beforeDir="false" afterPath="$PROJECT_DIR$/Dockerfile" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app2.py" beforeDir="false" afterPath="$PROJECT_DIR$/app2.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best (1).pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best.pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best2.pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best5.pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best_100.pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/model/best_4.pt" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/requirements.txt" beforeDir="false" afterPath="$PROJECT_DIR$/requirements.txt" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/screen_share.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/screen_share.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -20,9 +39,9 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 3
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 3
+}</component>
   <component name="ProjectId" id="33zr2jYSXA7j2m2NetACLNED8HB" />
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
@@ -34,21 +53,24 @@
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "RunOnceActivity.git.unshallow": "true",
     "git-widget-placeholder": "main",
-    "last_opened_file_path": "/Users/rizkynindra.sukma/PycharmProjects/squadrone"
+    "last_opened_file_path": "D:/SIDE/MACHINE LEARNING PROJECT/squadrone-huggingface"
   }
 }]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="D:\SIDE\MACHINE LEARNING PROJECT\squadrone-huggingface" />
+      <recent name="D:\SIDE\MACHINE LEARNING PROJECT\squadrone-huggingface\model" />
       <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" />
+        <option value="bundled-python-sdk-a5bc9544c897-aa17d162503b-com.jetbrains.pycharm.community.sharedIndexes.bundled-PC-243.23654.177" />
       </set>
     </attachedChunks>
   </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="82a48ce3-b0fe-4383-a5c5-1857889128ea" name="Changes" comment="" />

Dockerfile

@@ -24,4 +24,5 @@ EXPOSE 7860
 ENV PORT=7860
 
 # Run Flask app
-CMD ["python", "app2.py"]
+# CMD ["python", "app2.py"]
+CMD ["waitress-serve", "--port=7860", "app2:app"]

app2.py

@@ -7,6 +7,15 @@ import io
 from PIL import Image
 import time
 import torch
+import logging
+from datetime import datetime
+
+# Configure logging for manusia detection
+logging.basicConfig(
+    filename='manusia_detection.log',
+    level=logging.INFO,
+    format='%(asctime)s - %(message)s'
+)
 
 print(f"PyTorch CUDA available: {torch.cuda.is_available()}")
 print(f"CUDA device count: {torch.cuda.device_count()}")
@@ -14,13 +23,14 @@ if torch.cuda.is_available():
     print(f"CUDA device name: {torch.cuda.get_device_name(0)}")
 
 app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024  # Limit uploads to 5MB
 
 @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')
+model = YOLO('model/best_26102025.pt')
 
 #use GPU
 # model.to('cuda')
@@ -35,13 +45,13 @@ human_detection_state = {
     'first_detected_at': None,
     'is_alarm_active': False,
     'last_detection_time': 0,
-    'detection_threshold': 2.0  # 2 seconds
+    'detection_threshold': 0.05  # 1 seconds
 }
 
 
 @app.route('/')
 def index():
-    return render_template('screen_share_bck.html')
+    return render_template('screen_share.html')
 
 
 @app.route('/detect', methods=['POST'])
@@ -87,8 +97,13 @@ def detect():
                 x1, y1, x2, y2 = map(int, box)
                 class_name = model.names[int(cls)]
 
+                # save to log if manusia detected
+                if class_name.lower() == 'manusia':
+                    detection_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+                    logging.info(f"Detected 'manusia' at {detection_time} with confidence {score:.4f}")
+
                 # Check if this is a human/person detection
-                if class_name.lower() in ['person', 'human']:
+                if class_name.lower() == 'manusia':
                     human_detected = True
 
                 detections.append({
@@ -161,4 +176,4 @@ def reset_alarm():
 
 if __name__ == '__main__':
     # Use threaded mode for better performance
-    app.run(debug=True, host='0.0.0.0', port=7860, threaded=True)
+    app.run(debug=True, host='0.0.0.0', port=5000, threaded=True)

model/best.pt

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

model/best2.pt

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

model/best5.pt

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

model/best_100.pt

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

model/{best (1).pt → best_26102025.pt}

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

model/best_4.pt

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

requirements.txt

@@ -1,113 +1,60 @@
-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
-flask
-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-headless
-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
-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
+opencv-python~=4.11.0.86
+numpy~=2.1.1
+defusedxml~=0.7.1
+ipython~=8.12.3
+future~=1.0.0
+pillow~=11.1.0
+pip~=23.2.1
+attrs~=25.1.0
+wheel~=0.41.2
+protobuf~=5.29.3
+filelock~=3.17.0
+torch~=2.6.0
+ultralytics-thop~=2.0.14
+PyYAML~=6.0.2
+typing_extensions~=4.12.2
+MarkupSafe~=3.0.2
+Werkzeug~=3.1.3
+click~=8.1.8
+Jinja2~=3.1.6
+blinker~=1.9.0
+itsdangerous~=2.2.0
+charset-normalizer~=3.4.1
+setuptools~=68.2.0
+pytz~=2025.1
+cffi~=1.17.1
+pyinstaller~=6.12.0
+scipy~=1.15.2
+matplotlib~=3.10.1
+mpmath~=1.3.0
+sympy~=1.13.1
+packaging~=24.2
+platformdirs~=4.3.6
+decorator~=5.2.1
+ultralytics~=8.3.85
+tqdm~=4.67.1
+torchvision~=0.21.0
+psutil~=7.0.0
+colorama~=0.4.6
+networkx~=3.4.2
+urllib3~=2.3.0
+fsspec~=2025.3.0
+requests~=2.32.3
+pyarrow~=19.0.1
+pandas~=2.2.3
+altair~=5.5.0
+gevent~=24.11.1
+pywin32~=308
+certifi~=2025.1.31
+six~=1.17.0
+python-dateutil~=2.9.0.post0
+idna~=3.10
+contourpy~=1.3.1
+fonttools~=4.56.0
+pyparsing~=3.2.1
+cycler~=0.12.1
+tornado~=6.4.2
+kiwisolver~=1.4.8
+Pygments~=2.19.1
+lap~=0.5.12
+Flask~=3.1.2

static/share_screen.js

@@ -0,0 +1,304 @@
+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');
+const toggleBoundingBoxButton = document.getElementById('toggleBoundingBoxButton');
+
+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;
+let alarmTimeoutId = null;
+let showAllBoundingBoxes = false;
+let latestDetections = [];
+
+toggleBoundingBoxButton.addEventListener('click', function() {
+    showAllBoundingBoxes = !showAllBoundingBoxes;
+    this.textContent = showAllBoundingBoxes ? 'Show Only "manusia"' : 'Show All';
+});
+
+const humanDetectionAudio = new Audio('/audio/Danger Alarm.mp3');
+const MIN_DETECTION_INTERVAL = 100; // ms between detection requests
+
+startButton.addEventListener('click', async () => {
+    try {
+        statusElement.textContent = 'Requesting screen access...';
+
+        mediaStream = await navigator.mediaDevices.getDisplayMedia({
+            video: { cursor: "always" },
+            audio: false
+        });
+
+        screenVideo.srcObject = mediaStream;
+
+        screenVideo.onloadedmetadata = () => {
+            detectionCanvas.width = screenVideo.videoWidth;
+            detectionCanvas.height = screenVideo.videoHeight;
+        };
+
+        startButton.disabled = true;
+        stopButton.disabled = false;
+        startDetectionButton.disabled = false;
+        toggleBoundingBoxButton.disabled = false;
+
+        statusElement.textContent = 'Screen sharing active';
+
+        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;
+    toggleBoundingBoxButton.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;
+    toggleBoundingBoxButton.disabled = false;
+    statusElement.textContent = 'Real-time detection active';
+
+    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;
+    }
+
+    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');
+    ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height);
+    capturedFrame = canvas.toDataURL('image/jpeg', 0.7);
+    return true;
+}
+
+async function detectObjects() {
+    if (!capturedFrame || detectionInProgress) {
+        return;
+    }
+
+    try {
+        detectionInProgress = true;
+
+        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) {
+            displayDetectionResults(result);
+            latestDetections = result.detections;
+            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;
+    }
+}
+
+function detectLoop() {
+    if (!detectionActive) return;
+
+    frameCount++;
+    const now = performance.now();
+    const elapsed = now - lastFpsUpdateTime;
+
+    if (elapsed >= 1000) {
+        const fps = Math.round((frameCount / elapsed) * 1000);
+        fpsCounter.textContent = `${fps} FPS`;
+        frameCount = 0;
+        lastFpsUpdateTime = now;
+    }
+
+    const ctx = detectionCanvas.getContext('2d');
+    ctx.clearRect(0, 0, detectionCanvas.width, detectionCanvas.height);
+    ctx.drawImage(screenVideo, 0, 0, detectionCanvas.width, detectionCanvas.height);
+
+    if (latestDetections && latestDetections.length) {
+        drawDetectionBoxes(latestDetections);
+    }
+
+    if (!detectionInProgress && now - lastDetectionTime >= MIN_DETECTION_INTERVAL) {
+        if (captureVideoFrame()) {
+            lastDetectionTime = now;
+            detectObjects();
+        }
+    }
+
+    animationFrameId = requestAnimationFrame(detectLoop);
+}
+
+function handleAlarmStatus(alarmStatus) {
+    if (alarmStatus.active) {
+        if (!alarmActive) {
+            triggerAlarm();
+        }
+    } else {
+        if (alarmActive) {
+            resetAlarm();
+        }
+    }
+}
+
+function triggerAlarm() {
+    if (alarmActive) return;
+    alarmActive = true;
+    humanAlarm.classList.add('alarm-active');
+    humanDetectionAudio.currentTime = 0;
+    humanDetectionAudio.play().catch(err => console.log('Audio play error:', err));
+
+    // stop alarm after 3 seconds
+    if (alarmTimeoutId) clearTimeout(alarmTimeoutId);
+    alarmTimeoutId = setTimeout(() => {
+        resetAlarm();
+    }, 3000);
+}
+
+function resetAlarm() {
+    alarmActive = false;
+    humanAlarm.classList.remove('alarm-active');
+    humanDetectionAudio.pause();
+    humanDetectionAudio.currentTime = 0;
+    if (alarmTimeoutId) {
+        clearTimeout(alarmTimeoutId);
+        alarmTimeoutId = null;
+    }
+
+    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>';
+
+    const manusiaDetections = result.detections
+        ? result.detections.filter(detection => detection.class === 'manusia')
+        : [];
+
+    const now = new Date();
+    const pad = n => n.toString().padStart(2, '0');
+    const detection_time = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+
+
+    if (manusiaDetections.length) {
+        html += '<ul>';
+        manusiaDetections.forEach(detection => {
+            html += `Detected <strong>${detection.class} at ${detection_time} with confidence (${(detection.confidence * 100).toFixed(2)}%)</strong>`;
+        });
+        html += '</ul>';
+    } else {
+        html += '<p>No manusia detected.</p>';
+    }
+
+    detectionResults.innerHTML = html;
+}
+
+function drawDetectionBoxes(detections) {
+    if (!detections || !detections.length) return;
+
+    const canvas = detectionCanvas;
+    const ctx = canvas.getContext('2d');
+
+    detections.forEach(detection => {
+        if (showAllBoundingBoxes || detection.class === 'manusia') {
+            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);
+
+            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);
+        }
+    });
+}

static/style.css

@@ -0,0 +1,101 @@
+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;
+}

templates/screen_share.html

@@ -3,531 +3,39 @@
 <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>
+    <title>Squadron</title>
+    <link rel="stylesheet" href="/static/style.css">
+
 </head>
 <body>
     <div class="container">
-        <h1>Squadrone v1.0.1</h1>
+        <h1>Squadron v1.0.2</h1>
 
         <div class="controls">
-            <button id="startButton">Start Screen Share</button>
-            <button id="stopButton" disabled>Stop Screen Share</button>
+            <button id="startButton">Start Share Screen</button>
+            <button id="stopButton" disabled>Stop Share Screen</button>
             <button id="startDetectionButton" disabled>Start Detection</button>
             <button id="pauseDetectionButton" disabled>Pause Detection</button>
+            <button id="toggleBoundingBoxButton" disabled>Show All Object</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>
+        <video id="screenVideo" autoplay playsinline muted></video>
             <canvas id="detectionCanvas"></canvas>
             <div id="fpsCounter" class="fps-counter">0 FPS</div>
         </div>
 
+        <!-- Alarm sound -->
+        <div class="alarm" id="humanAlarm">ALERT: Human detected for extended period!</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>
+    <script src="/static/share_screen.js"></script>
 </body>
 </html>