Hugging Face's logo

Spaces:
kamioll999
/
status
Running

App Files Community
kamioll999 commited on
Commit
8649165
·
verified ·
1 Parent(s): fbaae05

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +413 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Status
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: status
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,413 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Person Detection Camera Control</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
9
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
10
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/react-webcam@6.0.1/dist/react-webcam.min.js"></script>
12
+ <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
13
+ <style>
14
+ .detection-box {
15
+ position: absolute;
16
+ border: 3px solid #3B82F6;
17
+ background-color: rgba(59, 130, 246, 0.2);
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: flex-end;
21
+ }
22
+ .detection-label {
23
+ color: white;
24
+ background-color: #3B82F6;
25
+ padding: 2px 5px;
26
+ font-size: 12px;
27
+ border-radius: 4px;
28
+ margin-bottom: 5px;
29
+ }
30
+ .video-container {
31
+ position: relative;
32
+ display: inline-block;
33
+ }
34
+ .processing-overlay {
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ right: 0;
39
+ bottom: 0;
40
+ background-color: rgba(0, 0, 0, 0.7);
41
+ display: flex;
42
+ justify-content: center;
43
+ align-items: center;
44
+ color: white;
45
+ font-size: 1.5rem;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-100">
50
+ <div id="root"></div>
51
+
52
+ <script type="text/babel">
53
+ const { useState, useEffect, useRef, useCallback } = React;
54
+ const Webcam = ReactWebcam.default;
55
+
56
+ function App() {
57
+ const [devices, setDevices] = useState([]);
58
+ const [selectedDevice, setSelectedDevice] = useState(null);
59
+ const [isDetecting, setIsDetecting] = useState(false);
60
+ const [detections, setDetections] = useState([]);
61
+ const [fps, setFps] = useState(0);
62
+ const [isProcessing, setIsProcessing] = useState(false);
63
+ const [opencvReady, setOpencvReady] = useState(false);
64
+ const [settings, setSettings] = useState({
65
+ confidenceThreshold: 0.5,
66
+ detectionInterval: 100,
67
+ showFps: true,
68
+ mirrorView: true
69
+ });
70
+
71
+ const webcamRef = useRef(null);
72
+ const canvasRef = useRef(null);
73
+ const frameCountRef = useRef(0);
74
+ const lastFpsUpdateRef = useRef(0);
75
+ const detectionIntervalRef = useRef(null);
76
+ const processingRef = useRef(false);
77
+
78
+ // Initialize OpenCV
79
+ window.onOpenCvReady = function() {
80
+ console.log('OpenCV.js is ready');
81
+ setOpencvReady(true);
82
+ };
83
+
84
+ // Handle device selection
85
+ const handleDevices = useCallback((mediaDevices) => {
86
+ const videoDevices = mediaDevices.filter(({ kind }) => kind === "videoinput");
87
+ setDevices(videoDevices);
88
+ if (videoDevices.length > 0 && !selectedDevice) {
89
+ setSelectedDevice(videoDevices[0].deviceId);
90
+ }
91
+ }, [selectedDevice]);
92
+
93
+ useEffect(() => {
94
+ navigator.mediaDevices.enumerateDevices().then(handleDevices);
95
+ }, [handleDevices]);
96
+
97
+ // FPS counter
98
+ useEffect(() => {
99
+ const timer = setInterval(() => {
100
+ const now = Date.now();
101
+ const secondsPassed = (now - lastFpsUpdateRef.current) / 1000;
102
+ if (secondsPassed >= 1) {
103
+ setFps(Math.round(frameCountRef.current / secondsPassed));
104
+ frameCountRef.current = 0;
105
+ lastFpsUpdateRef.current = now;
106
+ }
107
+ }, 500);
108
+ return () => clearInterval(timer);
109
+ }, []);
110
+
111
+ // Person detection using OpenCV
112
+ const detectPersons = useCallback(async () => {
113
+ if (!webcamRef.current || !canvasRef.current || processingRef.current || !opencvReady) return;
114
+
115
+ processingRef.current = true;
116
+ setIsProcessing(true);
117
+ frameCountRef.current++;
118
+
119
+ try {
120
+ const video = webcamRef.current.video;
121
+ const canvas = canvasRef.current;
122
+
123
+ if (video && video.readyState === video.HAVE_ENOUGH_DATA) {
124
+ // Set canvas dimensions to match video
125
+ canvas.width = video.videoWidth;
126
+ canvas.height = video.videoHeight;
127
+
128
+ // Draw video frame to canvas
129
+ const ctx = canvas.getContext('2d');
130
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
131
+
132
+ // Get image data from canvas
133
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
134
+
135
+ // Convert to OpenCV format
136
+ const src = cv.matFromImageData(imageData);
137
+ const gray = new cv.Mat();
138
+ const faces = new cv.RectVector();
139
+ const faceCascade = new cv.CascadeClassifier();
140
+
141
+ // Load pre-trained model (in a real app, you'd load a proper model)
142
+ // This is a simplified example - actual person detection would require proper models
143
+ faceCascade.load('haarcascade_frontalface_default.xml'); // Simplified example
144
+
145
+ // Convert to grayscale (face detection typically uses grayscale)
146
+ cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
147
+
148
+ // Detect faces (simplified person detection)
149
+ faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0);
150
+
151
+ // Process detections
152
+ const newDetections = [];
153
+ for (let i = 0; i < faces.size(); ++i) {
154
+ const face = faces.get(i);
155
+ newDetections.push({
156
+ x: face.x,
157
+ y: face.y,
158
+ width: face.width,
159
+ height: face.height,
160
+ confidence: 0.7, // Simplified confidence
161
+ label: 'Person'
162
+ });
163
+ }
164
+
165
+ setDetections(newDetections);
166
+
167
+ // Clean up
168
+ src.delete();
169
+ gray.delete();
170
+ faces.delete();
171
+ faceCascade.delete();
172
+ }
173
+ } catch (error) {
174
+ console.error('Detection error:', error);
175
+ } finally {
176
+ processingRef.current = false;
177
+ setIsProcessing(false);
178
+ }
179
+ }, [opencvReady]);
180
+
181
+ // Start/stop detection
182
+ useEffect(() => {
183
+ if (isDetecting) {
184
+ detectionIntervalRef.current = setInterval(detectPersons, settings.detectionInterval);
185
+ } else {
186
+ if (detectionIntervalRef.current) {
187
+ clearInterval(detectionIntervalRef.current);
188
+ detectionIntervalRef.current = null;
189
+ }
190
+ }
191
+ return () => {
192
+ if (detectionIntervalRef.current) {
193
+ clearInterval(detectionIntervalRef.current);
194
+ }
195
+ };
196
+ }, [isDetecting, settings.detectionInterval, detectPersons]);
197
+
198
+ // Toggle detection
199
+ const toggleDetection = () => {
200
+ setIsDetecting(!isDetecting);
201
+ };
202
+
203
+ // Handle device change
204
+ const handleDeviceChange = (event) => {
205
+ setSelectedDevice(event.target.value);
206
+ };
207
+
208
+ // Update settings
209
+ const handleSettingChange = (key, value) => {
210
+ setSettings(prev => ({
211
+ ...prev,
212
+ [key]: value
213
+ }));
214
+ };
215
+
216
+ return (
217
+ <div className="min-h-screen p-6">
218
+ <header className="mb-8">
219
+ <h1 className="text-3xl font-bold text-gray-800">Person Detection Camera Control</h1>
220
+ <p className="text-gray-600">Monitor and detect persons using your laptop camera</p>
221
+ </header>
222
+
223
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
224
+ {/* Video Preview Section */}
225
+ <div className="lg:col-span-2">
226
+ <div className="bg-white rounded-xl shadow-md overflow-hidden">
227
+ <div className="p-4 bg-gray-50 border-b">
228
+ <h2 className="text-xl font-semibold text-gray-700">Camera Preview</h2>
229
+ </div>
230
+ <div className="p-4">
231
+ <div className="video-container">
232
+ {isProcessing && (
233
+ <div className="processing-overlay">
234
+ <div className="animate-pulse">Processing...</div>
235
+ </div>
236
+ )}
237
+ <Webcam
238
+ audio={false}
239
+ ref={webcamRef}
240
+ screenshotFormat="image/jpeg"
241
+ videoConstraints={{
242
+ deviceId: selectedDevice,
243
+ width: 1280,
244
+ height: 720
245
+ }}
246
+ mirrored={settings.mirrorView}
247
+ className="rounded-lg w-full h-auto"
248
+ />
249
+ <canvas ref={canvasRef} className="hidden" />
250
+ {detections.map((detection, index) => (
251
+ <div
252
+ key={index}
253
+ className="detection-box"
254
+ style={{
255
+ left: `${detection.x}px`,
256
+ top: `${detection.y}px`,
257
+ width: `${detection.width}px`,
258
+ height: `${detection.height}px`
259
+ }}
260
+ >
261
+ <span className="detection-label">
262
+ {detection.label} ({Math.round(detection.confidence * 100)}%)
263
+ </span>
264
+ </div>
265
+ ))}
266
+ {settings.showFps && (
267
+ <div className="absolute top-2 left-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm">
268
+ FPS: {fps}
269
+ </div>
270
+ )}
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ {/* Control Panel Section */}
277
+ <div className="lg:col-span-1">
278
+ <div className="bg-white rounded-xl shadow-md overflow-hidden">
279
+ <div className="p-4 bg-gray-50 border-b">
280
+ <h2 className="text-xl font-semibold text-gray-700">Control Panel</h2>
281
+ </div>
282
+ <div className="p-4 space-y-6">
283
+ {/* Device Selection */}
284
+ <div>
285
+ <label className="block text-sm font-medium text-gray-700 mb-1">Camera Device</label>
286
+ <select
287
+ value={selectedDevice || ''}
288
+ onChange={handleDeviceChange}
289
+ className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
290
+ >
291
+ {devices.map((device) => (
292
+ <option key={device.deviceId} value={device.deviceId}>
293
+ {device.label || `Camera ${device.deviceId.slice(-4)}`}
294
+ </option>
295
+ ))}
296
+ </select>
297
+ </div>
298
+
299
+ {/* Detection Controls */}
300
+ <div>
301
+ <label className="block text-sm font-medium text-gray-700 mb-1">Person Detection</label>
302
+ <button
303
+ onClick={toggleDetection}
304
+ className={`w-full px-4 py-2 rounded-md font-medium ${isDetecting ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-blue-600 hover:bg-blue-700 text-white'}`}
305
+ >
306
+ {isDetecting ? 'Stop Detection' : 'Start Detection'}
307
+ </button>
308
+ <p className="mt-1 text-xs text-gray-500">
309
+ {opencvReady ? 'OpenCV is ready' : 'Loading OpenCV...'}
310
+ </p>
311
+ </div>
312
+
313
+ {/* Settings */}
314
+ <div className="space-y-4">
315
+ <h3 className="text-sm font-medium text-gray-700">Detection Settings</h3>
316
+
317
+ <div>
318
+ <label className="flex items-center">
319
+ <input
320
+ type="checkbox"
321
+ checked={settings.showFps}
322
+ onChange={(e) => handleSettingChange('showFps', e.target.checked)}
323
+ className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
324
+ />
325
+ <span className="ml-2 text-sm text-gray-700">Show FPS Counter</span>
326
+ </label>
327
+ </div>
328
+
329
+ <div>
330
+ <label className="flex items-center">
331
+ <input
332
+ type="checkbox"
333
+ checked={settings.mirrorView}
334
+ onChange={(e) => handleSettingChange('mirrorView', e.target.checked)}
335
+ className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
336
+ />
337
+ <span className="ml-2 text-sm text-gray-700">Mirror View</span>
338
+ </label>
339
+ </div>
340
+
341
+ <div>
342
+ <label className="block text-sm font-medium text-gray-700 mb-1">
343
+ Confidence Threshold: {settings.confidenceThreshold.toFixed(1)}
344
+ </label>
345
+ <input
346
+ type="range"
347
+ min="0.1"
348
+ max="1"
349
+ step="0.1"
350
+ value={settings.confidenceThreshold}
351
+ onChange={(e) => handleSettingChange('confidenceThreshold', parseFloat(e.target.value))}
352
+ className="w-full"
353
+ />
354
+ </div>
355
+
356
+ <div>
357
+ <label className="block text-sm font-medium text-gray-700 mb-1">
358
+ Detection Interval: {settings.detectionInterval}ms
359
+ </label>
360
+ <input
361
+ type="range"
362
+ min="50"
363
+ max="1000"
364
+ step="50"
365
+ value={settings.detectionInterval}
366
+ onChange={(e) => handleSettingChange('detectionInterval', parseInt(e.target.value))}
367
+ className="w-full"
368
+ />
369
+ </div>
370
+ </div>
371
+
372
+ {/* Detection Stats */}
373
+ <div className="bg-gray-50 p-3 rounded-lg">
374
+ <h3 className="text-sm font-medium text-gray-700 mb-2">Detection Statistics</h3>
375
+ <div className="grid grid-cols-2 gap-2">
376
+ <div>
377
+ <p className="text-xs text-gray-500">Current FPS</p>
378
+ <p className="font-medium">{fps}</p>
379
+ </div>
380
+ <div>
381
+ <p className="text-xs text-gray-500">Persons Detected</p>
382
+ <p className="font-medium">{detections.length}</p>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ {/* Status Bar */}
392
+ <div className="mt-6 bg-white rounded-xl shadow-md overflow-hidden">
393
+ <div className="px-4 py-2 flex items-center justify-between">
394
+ <div className="flex items-center space-x-2">
395
+ <div className={`h-3 w-3 rounded-full ${isDetecting ? 'bg-green-500' : 'bg-gray-300'}`}></div>
396
+ <span className="text-sm text-gray-600">
397
+ {isDetecting ? 'Detecting persons' : 'Detection paused'}
398
+ </span>
399
+ </div>
400
+ <div className="text-sm text-gray-500">
401
+ {new Date().toLocaleString()}
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ );
407
+ }
408
+
409
+ const root = ReactDOM.createRoot(document.getElementById('root'));
410
+ root.render(<App />);
411
+ </script>
412
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kamioll999/status" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
413
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ use react and tailwind to develop webapp to control video outpout from camera build in laptop and use opencv framwework to integrate person detection algorythms