Hugging Face's logo

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

App Files Community
SECUTOR-INTELEGENCE commited on
Commit
02544c9
·
verified ·
1 Parent(s): 177b05d

https://huggingface.co/spaces/atalaydenknalbant/Yolov13

Browse files
Files changed (4) hide show
  1. camera.html +7 -4
  2. index.html +5 -1
  3. security.html +9 -4
  4. yolov13.html +202 -0
camera.html CHANGED
@@ -27,10 +27,13 @@
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="security.html" class="text-blue-600 hover:text-blue-800 flex items-center">
31
- <i data-feather="shield" class="mr-1"></i> Security
32
- </a>
33
- </div>
 
 
 
34
  </div>
35
 
36
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
 
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="security.html" class="text-blue-600 hover:text-blue-800 flex items-center">
31
+ <i data-feather="shield" class="mr-1"></i> Security
32
+ </a>
33
+ <a href="yolov13.html" class="text-blue-600 hover:text-blue-800 flex items-center">
34
+ <i data-feather="cpu" class="mr-1"></i> YOLOv13
35
+ </a>
36
+ </div>
37
  </div>
38
 
39
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
index.html CHANGED
@@ -91,7 +91,11 @@
91
  <i data-feather="video" class="w-4 h-4 mr-2"></i>
92
  Manage Cameras
93
  </a>
94
- <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
 
 
 
 
95
  <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
96
  Fullscreen
97
  </button>
 
91
  <i data-feather="video" class="w-4 h-4 mr-2"></i>
92
  Manage Cameras
93
  </a>
94
+ <a href="yolov13.html" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
95
+ <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
96
+ YOLOv13 AI
97
+ </a>
98
+ <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
99
  <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
100
  Fullscreen
101
  </button>
security.html CHANGED
@@ -31,10 +31,15 @@
31
  <i data-feather="shield" class="mr-2"></i>
32
  Security & Intrusion Monitoring
33
  </h1>
34
- <a href="index.html" class="text-blue-600 hover:text-blue-800 flex items-center">
35
- <i data-feather="arrow-left" class="mr-1"></i> Back to Dashboard
36
- </a>
37
- </div>
 
 
 
 
 
38
 
39
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
40
  <!-- Security Feeds -->
 
31
  <i data-feather="shield" class="mr-2"></i>
32
  Security & Intrusion Monitoring
33
  </h1>
34
+ <div class="flex space-x-4">
35
+ <a href="index.html" class="text-blue-600 hover:text-blue-800 flex items-center">
36
+ <i data-feather="arrow-left" class="mr-1"></i> Back to Dashboard
37
+ </a>
38
+ <a href="yolov13.html" class="text-blue-600 hover:text-blue-800 flex items-center">
39
+ <i data-feather="cpu" class="mr-1"></i> YOLOv13 AI
40
+ </a>
41
+ </div>
42
+ </div>
43
 
44
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
45
  <!-- Security Feeds -->
yolov13.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 - YOLOv13 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
+ YOLOv13 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/atalaydenknalbant/Yolov13" 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
+ YOLOv13 Demo
42
+ </h2>
43
+ <div class="bg-gray-200 rounded-lg overflow-hidden model-output">
44
+ <img src="http://static.photos/technology/640x360" alt="YOLOv13 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
+ Model Output Preview
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="upload" class="mr-2"></i>
52
+ Upload Image
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="camera" class="mr-2"></i>
56
+ Use Webcam
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
+ Integration Settings
66
+ </h2>
67
+ <div class="space-y-4">
68
+ <div>
69
+ <label class="block text-sm font-medium text-gray-700 mb-1">HuggingFace API Key</label>
70
+ <input type="password" 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
+ </div>
72
+ <div>
73
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Version</label>
74
+ <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">
75
+ <option>YOLOv13-nano</option>
76
+ <option>YOLOv13-small</option>
77
+ <option selected>YOLOv13-medium</option>
78
+ <option>YOLOv13-large</option>
79
+ <option>YOLOv13-xlarge</option>
80
+ </select>
81
+ </div>
82
+ <div>
83
+ <label class="block text-sm font-medium text-gray-700 mb-1">Detection Threshold</label>
84
+ <input type="range" min="50" max="95" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
85
+ <div class="text-right text-sm text-gray-600">80%</div>
86
+ </div>
87
+ <div class="flex items-center">
88
+ <input type="checkbox" id="enableYOLOv13" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
89
+ <label for="enableYOLOv13" class="ml-2 block text-sm text-gray-700">Enable YOLOv13 Processing</label>
90
+ </div>
91
+ <div class="pt-4 border-t border-gray-200">
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
+ Test Connection
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">Precision</span>
111
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
112
+ <i data-feather="target" 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">96.7%</h3>
116
+ <p class="text-xs text-blue-600 mt-1">+2.1% vs YOLOv8</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">Recall</span>
121
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
122
+ <i data-feather="eye" 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">95.2%</h3>
126
+ <p class="text-xs text-purple-600 mt-1">+3.4% 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="clock" 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">42</h3>
136
+ <p class="text-xs text-green-600 mt-1">Real-time processing</p>
137
+ </div>
138
+ <div class="bg-yellow-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-yellow-100 flex items-center justify-center">
142
+ <i data-feather="check-circle" class="w-4 h-4 text-yellow-500"></i>
143
+ </div>
144
+ </div>
145
+ <h3 class="text-2xl font-bold mt-2 text-gray-800">97.8%</h3>
146
+ <p class="text-xs text-yellow-600 mt-1">Best in class</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
+ Documentation & Resources
156
+ </h2>
157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
158
+ <a href="https://huggingface.co/spaces/atalaydenknalbant/Yolov13" 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">HuggingFace Space</h3>
164
+ <p class="text-sm text-gray-600">Official YOLOv13 implementation</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="download" class="text-purple-500"></i>
170
+ </div>
171
+ <div>
172
+ <h3 class="font-medium">API Documentation</h3>
173
+ <p class="text-sm text-gray-600">Integration guide and examples</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="youtube" class="text-green-500"></i>
179
+ </div>
180
+ <div>
181
+ <h3 class="font-medium">Video Tutorial</h3>
182
+ <p class="text-sm text-gray-600">Step-by-step setup guide</p>
183
+ </div>
184
+ </a>
185
+ <a href="#" 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-red-100 flex items-center justify-center mr-4">
187
+ <i data-feather="github" class="text-red-500"></i>
188
+ </div>
189
+ <div>
190
+ <h3 class="font-medium">GitHub Repository</h3>
191
+ <p class="text-sm text-gray-600">Source code and issues</p>
192
+ </div>
193
+ </a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <script>
199
+ feather.replace();
200
+ </script>
201
+ </body>
202
+ </html>