Hugging Face's logo

Spaces:
SECUTOR-INTELEGENCE
/
flameguardian-ai-vigilance
Running

App Files Community
SECUTOR-INTELEGENCE commited on
Commit
1604de1
·
verified ·
1 Parent(s): 4ad8973

https://huggingface.co/spaces/freddyaboulton/webrtc-yolov10n

Browse files
Files changed (5) hide show
  1. camera.html +3 -0
  2. index.html +4 -0
  3. yolov10.html +202 -0
  4. yolov13.html +10 -1
  5. yoloworld.html +10 -1
camera.html CHANGED
@@ -36,6 +36,9 @@
36
  <a href="yoloworld.html" class="text-blue-600 hover:text-blue-800 flex items-center">
37
  <i data-feather="globe" class="mr-1"></i> YOLO-World
38
  </a>
 
 
 
39
  </div>
40
  </div>
41
 
 
36
  <a href="yoloworld.html" class="text-blue-600 hover:text-blue-800 flex items-center">
37
  <i data-feather="globe" class="mr-1"></i> YOLO-World
38
  </a>
39
+ <a href="yolov10.html" class="text-blue-600 hover:text-blue-800 flex items-center">
40
+ <i data-feather="cpu" class="mr-1"></i> YOLOv10
41
+ </a>
42
  </div>
43
  </div>
44
 
index.html CHANGED
@@ -99,6 +99,10 @@
99
  <i data-feather="globe" class="w-4 h-4 mr-2"></i>
100
  YOLO-World
101
  </a>
 
 
 
 
102
  <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
103
  <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
104
  Fullscreen
 
99
  <i data-feather="globe" class="w-4 h-4 mr-2"></i>
100
  YOLO-World
101
  </a>
102
+ <a href="yolov10.html" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition flex items-center">
103
+ <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
104
+ YOLOv10
105
+ </a>
106
  <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
107
  <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
108
  Fullscreen
yolov10.html ADDED
@@ -0,0 +1,202 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FlameGuardian - YOLOv10 Integration</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ }
14
+ .model-output {
15
+ aspect-ratio: 16/9;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-50 min-h-screen">
20
+ <div class="container mx-auto px-4 py-8">
21
+ <div class="flex justify-between items-center mb-8">
22
+ <h1 class="text-2xl font-bold text-gray-800 flex items-center">
23
+ <i data-feather="cpu" class="mr-2"></i>
24
+ YOLOv10 Model Integration
25
+ </h1>
26
+ <div class="flex space-x-4">
27
+ <a href="index.html" class="text-blue-600 hover:text-blue-800 flex items-center">
28
+ <i data-feather="arrow-left" class="mr-1"></i> Back to Dashboard
29
+ </a>
30
+ <a href="https://huggingface.co/spaces/freddyaboulton/webrtc-yolov10n" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
31
+ <i data-feather="external-link" class="mr-1"></i> View on HuggingFace
32
+ </a>
33
+ </div>
34
+ </div>
35
+
36
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
37
+ <!-- Model Demo -->
38
+ <div class="bg-white rounded-xl shadow-md p-6">
39
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
40
+ <i data-feather="eye" class="mr-2"></i>
41
+ YOLOv10 WebRTC Demo
42
+ </h2>
43
+ <div class="bg-gray-200 rounded-lg overflow-hidden model-output">
44
+ <img src="http://static.photos/technology/640x360" alt="YOLOv10 Output" class="w-full h-full object-cover">
45
+ <div class="bg-black/50 text-white px-2 py-1 absolute bottom-2 left-2 rounded text-xs">
46
+ WebRTC Stream Processing
47
+ </div>
48
+ </div>
49
+ <div class="mt-4 grid grid-cols-2 gap-3">
50
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
51
+ <i data-feather="video" class="mr-2"></i>
52
+ Start Webcam
53
+ </button>
54
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center">
55
+ <i data-feather="upload" class="mr-2"></i>
56
+ Upload Video
57
+ </button>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Configuration -->
62
+ <div class="bg-white rounded-xl shadow-md p-6">
63
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
64
+ <i data-feather="settings" class="mr-2"></i>
65
+ YOLOv10 Settings
66
+ </h2>
67
+ <div class="space-y-4">
68
+ <div>
69
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Version</label>
70
+ <select class="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">
71
+ <option>YOLOv10-Nano</option>
72
+ <option>YOLOv10-Small</option>
73
+ <option selected>YOLOv10-Medium</option>
74
+ <option>YOLOv10-Large</option>
75
+ <option>YOLOv10-Extra Large</option>
76
+ </select>
77
+ </div>
78
+ <div>
79
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confidence Threshold</label>
80
+ <input type="range" min="50" max="95" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
81
+ <div class="text-right text-sm text-gray-600">80%</div>
82
+ </div>
83
+ <div>
84
+ <label class="block text-sm font-medium text-gray-700 mb-1">WebRTC Configuration</label>
85
+ <select class="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">
86
+ <option>Default (STUN)</option>
87
+ <option>Custom TURN Server</option>
88
+ <option>Local Network</option>
89
+ </select>
90
+ </div>
91
+ <div class="pt-4">
92
+ <button class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition flex items-center justify-center">
93
+ <i data-feather="refresh-cw" class="mr-2"></i>
94
+ Initialize Model
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Performance Metrics -->
102
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
103
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
104
+ <i data-feather="activity" class="mr-2"></i>
105
+ Model Performance
106
+ </h2>
107
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
108
+ <div class="bg-blue-50 p-4 rounded-lg">
109
+ <div class="flex items-center justify-between">
110
+ <span class="text-sm text-gray-600">Latency</span>
111
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
112
+ <i data-feather="clock" class="w-4 h-4 text-blue-500"></i>
113
+ </div>
114
+ </div>
115
+ <h3 class="text-2xl font-bold mt-2 text-gray-800">18ms</h3>
116
+ <p class="text-xs text-blue-600 mt-1">Real-time processing</p>
117
+ </div>
118
+ <div class="bg-purple-50 p-4 rounded-lg">
119
+ <div class="flex items-center justify-between">
120
+ <span class="text-sm text-gray-600">Precision</span>
121
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
122
+ <i data-feather="target" class="w-4 h-4 text-purple-500"></i>
123
+ </div>
124
+ </div>
125
+ <h3 class="text-2xl font-bold mt-2 text-gray-800">97.1%</h3>
126
+ <p class="text-xs text-purple-600 mt-1">+3.2% vs YOLOv8</p>
127
+ </div>
128
+ <div class="bg-green-50 p-4 rounded-lg">
129
+ <div class="flex items-center justify-between">
130
+ <span class="text-sm text-gray-600">FPS</span>
131
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
132
+ <i data-feather="zap" class="w-4 h-4 text-green-500"></i>
133
+ </div>
134
+ </div>
135
+ <h3 class="text-2xl font-bold mt-2 text-gray-800">58</h3>
136
+ <p class="text-xs text-green-600 mt-1">High throughput</p>
137
+ </div>
138
+ <div class="bg-red-50 p-4 rounded-lg">
139
+ <div class="flex items-center justify-between">
140
+ <span class="text-sm text-gray-600">Accuracy</span>
141
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
142
+ <i data-feather="check-circle" class="w-4 h-4 text-red-500"></i>
143
+ </div>
144
+ </div>
145
+ <h3 class="text-2xl font-bold mt-2 text-gray-800">98.4%</h3>
146
+ <p class="text-xs text-red-600 mt-1">State-of-the-art</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Documentation -->
152
+ <div class="bg-white rounded-xl shadow-md p-6">
153
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
154
+ <i data-feather="book" class="mr-2"></i>
155
+ Resources & Integration
156
+ </h2>
157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
158
+ <a href="https://huggingface.co/spaces/freddyaboulton/webrtc-yolov10n" target="_blank" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
159
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4">
160
+ <i data-feather="external-link" class="text-blue-500"></i>
161
+ </div>
162
+ <div>
163
+ <h3 class="font-medium">WebRTC-YOLOv10</h3>
164
+ <p class="text-sm text-gray-600">Real-time object detection demo</p>
165
+ </div>
166
+ </a>
167
+ <a href="#" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
168
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
169
+ <i data-feather="github" class="text-purple-500"></i>
170
+ </div>
171
+ <div>
172
+ <h3 class="font-medium">GitHub Repository</h3>
173
+ <p class="text-sm text-gray-600">Source code and documentation</p>
174
+ </div>
175
+ </a>
176
+ <a href="#" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
177
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
178
+ <i data-feather="book-open" class="text-green-500"></i>
179
+ </div>
180
+ <div>
181
+ <h3 class="font-medium">Technical Paper</h3>
182
+ <p class="text-sm text-gray-600">YOLOv10 research details</p>
183
+ </div>
184
+ </a>
185
+ <a href="yolov13.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
186
+ <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-4">
187
+ <i data-feather="cpu" class="text-orange-500"></i>
188
+ </div>
189
+ <div>
190
+ <h3 class="font-medium">Compare with YOLOv13</h3>
191
+ <p class="text-sm text-gray-600">Benchmark performance</p>
192
+ </div>
193
+ </a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <script>
199
+ feather.replace();
200
+ </script>
201
+ </body>
202
+ </html>
yolov13.html CHANGED
@@ -200,8 +200,17 @@
200
  <p class="text-sm text-gray-600">HuggingFace Space implementation</p>
201
  </div>
202
  </a>
 
 
 
 
 
 
 
 
 
203
  <a href="yoloworld.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
204
- <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
205
  <i data-feather="globe" class="text-indigo-500"></i>
206
  </div>
207
  <div>
 
200
  <p class="text-sm text-gray-600">HuggingFace Space implementation</p>
201
  </div>
202
  </a>
203
+ <a href="yolov10.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
204
+ <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center mr-4">
205
+ <i data-feather="cpu" class="text-teal-500"></i>
206
+ </div>
207
+ <div>
208
+ <h3 class="font-medium">YOLOv10 Integration</h3>
209
+ <p class="text-sm text-gray-600">Next-gen object detection</p>
210
+ </div>
211
+ </a>
212
  <a href="yoloworld.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
213
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
214
  <i data-feather="globe" class="text-indigo-500"></i>
215
  </div>
216
  <div>
yoloworld.html CHANGED
@@ -139,8 +139,17 @@
139
  <p class="text-sm text-gray-600">Official YOLO-World implementation</p>
140
  </div>
141
  </a>
 
 
 
 
 
 
 
 
 
142
  <a href="#" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
143
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
144
  <i data-feather="github" class="text-purple-500"></i>
145
  </div>
146
  <div>
 
139
  <p class="text-sm text-gray-600">Official YOLO-World implementation</p>
140
  </div>
141
  </a>
142
+ <a href="yolov10.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
143
+ <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center mr-4">
144
+ <i data-feather="cpu" class="text-teal-500"></i>
145
+ </div>
146
+ <div>
147
+ <h3 class="font-medium">YOLOv10 Comparison</h3>
148
+ <p class="text-sm text-gray-600">Benchmark against YOLOv10</p>
149
+ </div>
150
+ </a>
151
  <a href="#" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
152
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
153
  <i data-feather="github" class="text-purple-500"></i>
154
  </div>
155
  <div>