Hugging Face's logo

Spaces:
Codeine
/
undefined
Running

App Files Community
Codeine commited on
Commit
35a128e
·
verified ·
1 Parent(s): 7583f7b

We work with PYTHON script!

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +403 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐨
4
- colorFrom: red
5
- colorTo: gray
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: undefined
3
+ colorFrom: green
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,404 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CamPulse - Camera Control Hub</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <style>
14
+ .vanta-bg {
15
+ position: fixed;
16
+ top: 0;
17
+ left: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ z-index: -1;
21
+ opacity: 0.15;
22
+ }
23
+ .glass-card {
24
+ background: rgba(15, 23, 42, 0.7);
25
+ backdrop-filter: blur(10px);
26
+ border: 1px solid rgba(255, 255, 255, 0.1);
27
+ }
28
+ .camera-feed {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .camera-feed:hover {
32
+ transform: scale(1.02);
33
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ }
35
+ .ptz-button {
36
+ transition: all 0.2s ease;
37
+ }
38
+ .ptz-button:hover {
39
+ transform: translateY(-2px);
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
41
+ }
42
+ .status-indicator {
43
+ width: 10px;
44
+ height: 10px;
45
+ border-radius: 50%;
46
+ display: inline-block;
47
+ margin-right: 8px;
48
+ }
49
+ .connected {
50
+ background-color: #10B981;
51
+ }
52
+ .disconnected {
53
+ background-color: #EF4444;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-slate-900 text-slate-100 min-h-screen">
58
+ <div id="vanta-bg" class="vanta-bg"></div>
59
+
60
+ <div class="container mx-auto px-4 py-8">
61
+ <!-- Header -->
62
+ <header class="flex justify-between items-center mb-8">
63
+ <div>
64
+ <h1 class="text-3xl font-bold text-sky-400 flex items-center">
65
+ <i data-feather="video" class="mr-3"></i> CamPulse
66
+ </h1>
67
+ <p class="text-slate-400">Multi-camera PTZ control hub</p>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <button id="theme-toggle" class="p-2 rounded-full bg-slate-800 hover:bg-slate-700 transition">
71
+ <i data-feather="moon"></i>
72
+ </button>
73
+ <div class="relative">
74
+ <button id="settings-btn" class="p-2 rounded-full bg-sky-600 hover:bg-sky-500 transition">
75
+ <i data-feather="settings"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Main Content -->
82
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
83
+ <!-- Camera Feed Section -->
84
+ <div class="lg:col-span-2">
85
+ <div class="glass-card rounded-xl p-4 mb-6">
86
+ <div class="flex justify-between items-center mb-4">
87
+ <h2 class="text-xl font-semibold flex items-center">
88
+ <i data-feather="camera" class="mr-2"></i> Live Feed
89
+ </h2>
90
+ <div class="flex space-x-2">
91
+ <button class="bg-emerald-600 hover:bg-emerald-500 px-3 py-1 rounded-lg text-sm flex items-center">
92
+ <i data-feather="maximize-2" class="mr-1" style="width: 14px; height: 14px;"></i> Fullscreen
93
+ </button>
94
+ <button class="bg-red-600 hover:bg-red-500 px-3 py-1 rounded-lg text-sm flex items-center">
95
+ <i data-feather="circle" class="mr-1" style="width: 14px; height: 14px;"></i> Record
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="relative bg-black rounded-lg overflow-hidden aspect-video flex items-center justify-center">
101
+ <div class="absolute inset-0 flex items-center justify-center">
102
+ <i data-feather="camera-off" class="text-slate-500" style="width: 48px; height: 48px;"></i>
103
+ </div>
104
+ <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 px-2 py-1 rounded text-sm">
105
+ <span class="status-indicator connected"></span>
106
+ Camera 1 - 192.168.1.178
107
+ </div>
108
+ </div>
109
+
110
+ <div class="mt-4 grid grid-cols-3 gap-4">
111
+ <div class="camera-feed bg-slate-800 rounded-lg aspect-video flex items-center justify-center cursor-pointer border-2 border-sky-500">
112
+ <i data-feather="camera" class="text-slate-500" style="width: 24px; height: 24px;"></i>
113
+ </div>
114
+ <div class="camera-feed bg-slate-800 rounded-lg aspect-video flex items-center justify-center cursor-pointer">
115
+ <i data-feather="camera" class="text-slate-500" style="width: 24px; height: 24px;"></i>
116
+ </div>
117
+ <div class="camera-feed bg-slate-800 rounded-lg aspect-video flex items-center justify-center cursor-pointer">
118
+ <i data-feather="camera" class="text-slate-500" style="width: 24px; height: 24px;"></i>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- PTZ Controls -->
124
+ <div class="glass-card rounded-xl p-4">
125
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
126
+ <i data-feather="navigation" class="mr-2"></i> PTZ Controls
127
+ </h2>
128
+
129
+ <div class="flex justify-center">
130
+ <div class="grid grid-cols-3 gap-4">
131
+ <!-- Empty cell -->
132
+ <div></div>
133
+ <!-- Up -->
134
+ <button class="ptz-button bg-sky-600 hover:bg-sky-500 w-16 h-16 rounded-full flex items-center justify-center">
135
+ <i data-feather="arrow-up" style="width: 24px; height: 24px;"></i>
136
+ </button>
137
+ <!-- Empty cell -->
138
+ <div></div>
139
+
140
+ <!-- Left -->
141
+ <button class="ptz-button bg-sky-600 hover:bg-sky-500 w-16 h-16 rounded-full flex items-center justify-center">
142
+ <i data-feather="arrow-left" style="width: 24px; height: 24px;"></i>
143
+ </button>
144
+ <!-- Center -->
145
+ <button class="ptz-button bg-sky-700 hover:bg-sky-600 w-16 h-16 rounded-full flex items-center justify-center">
146
+ <i data-feather="target" style="width: 24px; height: 24px;"></i>
147
+ </button>
148
+ <!-- Right -->
149
+ <button class="ptz-button bg-sky-600 hover:bg-sky-500 w-16 h-16 rounded-full flex items-center justify-center">
150
+ <i data-feather="arrow-right" style="width: 24px; height: 24px;"></i>
151
+ </button>
152
+
153
+ <!-- Empty cell -->
154
+ <div></div>
155
+ <!-- Down -->
156
+ <button class="ptz-button bg-sky-600 hover:bg-sky-500 w-16 h-16 rounded-full flex items-center justify-center">
157
+ <i data-feather="arrow-down" style="width: 24px; height: 24px;"></i>
158
+ </button>
159
+ <!-- Empty cell -->
160
+ <div></div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="mt-6">
165
+ <div class="flex justify-between items-center mb-2">
166
+ <span class="text-sm">Zoom Control</span>
167
+ <span class="text-sm text-slate-400">1.0x</span>
168
+ </div>
169
+ <input type="range" min="1" max="8" step="0.1" value="1" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
170
+
171
+ <div class="flex justify-between mt-4">
172
+ <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm flex items-center">
173
+ <i data-feather="zoom-in" class="mr-1" style="width: 16px; height: 16px;"></i> Zoom In
174
+ </button>
175
+ <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm flex items-center">
176
+ <i data-feather="zoom-out" class="mr-1" style="width: 16px; height: 16px;"></i> Zoom Out
177
+ </button>
178
+ <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm flex items-center">
179
+ <i data-feather="refresh-ccw" class="mr-1" style="width: 16px; height: 16px;"></i> Reset
180
+ </button>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Right Panel -->
187
+ <div class="space-y-6">
188
+ <!-- Camera Settings -->
189
+ <div class="glass-card rounded-xl p-4">
190
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
191
+ <i data-feather="sliders" class="mr-2"></i> Camera Settings
192
+ </h2>
193
+
194
+ <div class="space-y-4">
195
+ <div>
196
+ <label class="block text-sm mb-1">Resolution</label>
197
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
198
+ <option>640x360</option>
199
+ <option selected>1280x720</option>
200
+ <option>1920x1080</option>
201
+ <option>2560x1440</option>
202
+ </select>
203
+ </div>
204
+
205
+ <div>
206
+ <label class="block text-sm mb-1">Frame Rate</label>
207
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
208
+ <option>5 FPS</option>
209
+ <option>10 FPS</option>
210
+ <option selected>12 FPS</option>
211
+ <option>15 FPS</option>
212
+ <option>20 FPS</option>
213
+ <option>25 FPS</option>
214
+ <option>30 FPS</option>
215
+ </select>
216
+ </div>
217
+
218
+ <div>
219
+ <label class="block text-sm mb-1">Bitrate</label>
220
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
221
+ <option>512 Kbps</option>
222
+ <option>1024 Kbps</option>
223
+ <option selected>2048 Kbps</option>
224
+ <option>4096 Kbps</option>
225
+ <option>8192 Kbps</option>
226
+ </select>
227
+ </div>
228
+
229
+ <div class="pt-2">
230
+ <div class="flex items-center justify-between mb-2">
231
+ <span class="text-sm">White Light</span>
232
+ <label class="relative inline-flex items-center cursor-pointer">
233
+ <input type="checkbox" class="sr-only peer">
234
+ <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
235
+ </label>
236
+ </div>
237
+
238
+ <div class="flex items-center justify-between mb-2">
239
+ <span class="text-sm">IR Light</span>
240
+ <label class="relative inline-flex items-center cursor-pointer">
241
+ <input type="checkbox" class="sr-only peer">
242
+ <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
243
+ </label>
244
+ </div>
245
+
246
+ <div class="flex items-center justify-between">
247
+ <span class="text-sm">Day/Night Mode</span>
248
+ <label class="relative inline-flex items-center cursor-pointer">
249
+ <input type="checkbox" checked class="sr-only peer">
250
+ <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
251
+ </label>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Camera Management -->
258
+ <div class="glass-card rounded-xl p-4">
259
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
260
+ <i data-feather="list" class="mr-2"></i> Camera Management
261
+ </h2>
262
+
263
+ <div class="space-y-4">
264
+ <div>
265
+ <label class="block text-sm mb-1">Add New Camera</label>
266
+ <input type="text" placeholder="Camera IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm mb-2">
267
+ <input type="text" placeholder="Camera Name" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm mb-3">
268
+ <button class="w-full bg-sky-600 hover:bg-sky-500 py-2 rounded-lg text-sm flex items-center justify-center">
269
+ <i data-feather="plus" class="mr-1" style="width: 16px; height: 16px;"></i> Add Camera
270
+ </button>
271
+ </div>
272
+
273
+ <div class="border-t border-slate-700 pt-4">
274
+ <h3 class="text-sm font-semibold mb-2">Connected Cameras</h3>
275
+ <div class="space-y-2">
276
+ <div class="flex items-center justify-between bg-slate-800 p-3 rounded-lg border border-sky-500">
277
+ <div class="flex items-center">
278
+ <span class="status-indicator connected"></span>
279
+ <span>Camera 1</span>
280
+ </div>
281
+ <button class="text-red-500 hover:text-red-400">
282
+ <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
283
+ </button>
284
+ </div>
285
+ <div class="flex items-center justify-between bg-slate-800 p-3 rounded-lg">
286
+ <div class="flex items-center">
287
+ <span class="status-indicator connected"></span>
288
+ <span>Camera 2</span>
289
+ </div>
290
+ <button class="text-red-500 hover:text-red-400">
291
+ <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
292
+ </button>
293
+ </div>
294
+ <div class="flex items-center justify-between bg-slate-800 p-3 rounded-lg">
295
+ <div class="flex items-center">
296
+ <span class="status-indicator disconnected"></span>
297
+ <span>Camera 3</span>
298
+ </div>
299
+ <button class="text-red-500 hover:text-red-400">
300
+ <i data-feather="trash-2" style="width: 16px; height: 16px;"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Status Bar -->
311
+ <div class="glass-card rounded-lg p-3 mt-6 text-sm flex items-center">
312
+ <i data-feather="info" class="mr-2" style="width: 16px; height: 16px;"></i>
313
+ <span>System ready. Connected to 2 of 3 cameras.</span>
314
+ </div>
315
+ </div>
316
+ <script>
317
+ // Initialize Vanta.js background
318
+ VANTA.GLOBE({
319
+ el: "#vanta-bg",
320
+ mouseControls: true,
321
+ touchControls: true,
322
+ gyroControls: false,
323
+ minHeight: 200.00,
324
+ minWidth: 200.00,
325
+ scale: 1.00,
326
+ scaleMobile: 1.00,
327
+ color: 0x3b82f6,
328
+ backgroundColor: 0x0f172a,
329
+ size: 0.8
330
+ });
331
+
332
+ // Theme toggle
333
+ const themeToggle = document.getElementById('theme-toggle');
334
+ const htmlElement = document.documentElement;
335
+
336
+ themeToggle.addEventListener('click', () => {
337
+ if (htmlElement.classList.contains('dark')) {
338
+ htmlElement.classList.remove('dark');
339
+ htmlElement.classList.add('light');
340
+ feather.replace();
341
+ themeToggle.innerHTML = feather.icons['sun'].toSvg();
342
+ } else {
343
+ htmlElement.classList.remove('light');
344
+ htmlElement.classList.add('dark');
345
+ feather.replace();
346
+ themeToggle.innerHTML = feather.icons['moon'].toSvg();
347
+ }
348
+ });
349
+
350
+ // Camera feed selection
351
+ const cameraFeeds = document.querySelectorAll('.camera-feed');
352
+ const mainFeed = document.querySelector('.relative.bg-black.rounded-lg');
353
+
354
+ cameraFeeds.forEach((feed, index) => {
355
+ feed.addEventListener('click', () => {
356
+ // Remove active border from all feeds
357
+ cameraFeeds.forEach(f => f.classList.remove('border-2', 'border-sky-500'));
358
+
359
+ // Add active border to clicked feed
360
+ feed.classList.add('border-2', 'border-sky-500');
361
+
362
+ // Update main feed status (simulated)
363
+ const statusDiv = mainFeed.querySelector('.absolute.bottom-4.left-4');
364
+ statusDiv.innerHTML = `
365
+ <span class="status-indicator connected"></span>
366
+ Camera ${index + 1} - 192.168.1.${178 + index}
367
+ `;
368
+ });
369
+ });
370
+
371
+ // PTZ control animations
372
+ const ptzButtons = document.querySelectorAll('.ptz-button');
373
+ ptzButtons.forEach(button => {
374
+ button.addEventListener('click', () => {
375
+ anime({
376
+ targets: button,
377
+ scale: [1, 0.9, 1],
378
+ duration: 200,
379
+ easing: 'easeInOutQuad'
380
+ });
381
+ });
382
+ });
383
+
384
+ // Zoom control animation
385
+ const zoomSlider = document.querySelector('input[type="range"]');
386
+ const zoomValue = document.querySelector('.text-sm.text-slate-400');
387
+
388
+ zoomSlider.addEventListener('input', () => {
389
+ const zoomLevel = zoomSlider.value;
390
+ zoomValue.textContent = `${zoomLevel}x`;
391
+
392
+ anime({
393
+ targets: zoomValue,
394
+ scale: [1, 1.2, 1],
395
+ duration: 300,
396
+ easing: 'easeInOutQuad'
397
+ });
398
+ });
399
+
400
+ // Initialize feather icons
401
+ feather.replace();
402
+ </script>
403
+ </body>
404
  </html>