Hugging Face's logo

Spaces:
AliSakr9997
/
MicroMicro
Sleeping

App Files Community
AliSakr9997 commited on
Commit
0930008
·
verified ·
1 Parent(s): eb99bc8

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +90 -0
templates/index.html ADDED
@@ -0,0 +1,90 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MicroMind Vision Sentinel</title>
7
+ <style>
8
+ body { font-family: sans-serif; background: #111; color: white; text-align: center; }
9
+ #container { position: relative; display: inline-block; margin-top: 20px; }
10
+ video { border: 2px solid #333; border-radius: 8px; }
11
+ canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
12
+ #status { margin: 10px; font-weight: bold; color: #0f0; }
13
+ #config { color: #888; font-size: 0.9em; }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <h1>👁️ MicroMind Vision Sentinel</h1>
18
+ <div id="status">System Status: CONNECTING...</div>
19
+ <div id="config">Target: Unknown | Conf: 0.0</div>
20
+
21
+ <div id="container">
22
+ <video id="video" width="640" height="480" autoplay playsinline></video>
23
+ <canvas id="canvas" width="640" height="480"></canvas>
24
+ </div>
25
+
26
+ <script>
27
+ const video = document.getElementById('video');
28
+ const canvas = document.getElementById('canvas');
29
+ const ctx = canvas.getContext('2d');
30
+ const statusEl = document.getElementById('status');
31
+ const configEl = document.getElementById('config');
32
+
33
+ // 1. Start Webcam
34
+ navigator.mediaDevices.getUserMedia({ video: true })
35
+ .then(stream => { video.srcObject = stream; })
36
+ .catch(err => { console.error("Camera Error:", err); statusEl.innerText = "CAMERA ERROR"; statusEl.style.color = "red"; });
37
+
38
+ // 2. Processing Loop
39
+ setInterval(() => {
40
+ if (video.readyState === video.HAVE_ENOUGH_DATA) {
41
+ // Draw video frame to hidden canvas to convert to blob
42
+ const tempCanvas = document.createElement('canvas');
43
+ tempCanvas.width = video.videoWidth;
44
+ tempCanvas.height = video.videoHeight;
45
+ tempCanvas.getContext('2d').drawImage(video, 0, 0);
46
+
47
+ tempCanvas.toBlob(blob => {
48
+ const formData = new FormData();
49
+ formData.append('image', blob);
50
+
51
+ // Send to Python Backend
52
+ fetch('/process_frame', { method: 'POST', body: formData })
53
+ .then(res => res.json())
54
+ .then(data => {
55
+ // Update UI
56
+ statusEl.innerText = `STATUS: ${data.status}`;
57
+ statusEl.style.color = data.status === "ARMED" ? "#0f0" : "#fa0";
58
+
59
+ if (data.target) {
60
+ configEl.innerText = `Target: ${data.target.toUpperCase()}`;
61
+ }
62
+
63
+ // Clear previous drawings
64
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
65
+
66
+ // Draw detections
67
+ if (data.detections) {
68
+ data.detections.forEach(det => {
69
+ const [x1, y1, x2, y2] = det.bbox;
70
+ // Scale coordinates if video size differs from canvas
71
+ const scaleX = canvas.width / video.videoWidth;
72
+ const scaleY = canvas.height / video.videoHeight;
73
+
74
+ ctx.strokeStyle = '#00FF00';
75
+ ctx.lineWidth = 3;
76
+ ctx.strokeRect(x1 * scaleX, y1 * scaleY, (x2-x1) * scaleX, (y2-y1) * scaleY);
77
+
78
+ ctx.fillStyle = '#00FF00';
79
+ ctx.font = '16px Arial';
80
+ ctx.fillText(`${det.label} (${det.confidence})`, x1 * scaleX, (y1 * scaleY) - 5);
81
+ });
82
+ }
83
+ })
84
+ .catch(err => console.error("API Error", err));
85
+ }, 'image/jpeg');
86
+ }
87
+ }, 500); // Process every 500ms (2 FPS)
88
+ </script>
89
+ </body>
90
+ </html>