Hugging Face's logo

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

App Files Community
SECUTOR-INTELEGENCE commited on
Commit
ae98c14
·
verified ·
1 Parent(s): a0deafd

tous sous controle de cette ia.import os

Browse files

from openai import OpenAI

client = OpenAI(
base_url="https://router.huggingface.co/v1",
api_key=os.environ["HF_TOKEN"],
)

stream = client.chat.completions.create(
model="Qwen/Qwen3-VL-235B-A22B-Thinking",
messages=[
{
"role": "user",
"content": [
{
"type": "text",
"text": "Describe this image in one sentence."
},
{
"type": "image_url",
"image_url": {
"url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
}
}
]
}
],
stream=True,
)

for chunk in stream:
print(chunk.choices[0].delta.content, end="")

Files changed (5) hide show
  1. ai-control.html +184 -0
  2. camera.html +7 -4
  3. index.html +5 -1
  4. security.html +3 -0
  5. yolov10.html +4 -1
ai-control.html ADDED
@@ -0,0 +1,184 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - AI Integration Control</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
+ .ai-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="brain" class="mr-2"></i>
24
+ AI Integration Control
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
+ </div>
31
+ </div>
32
+
33
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
34
+ <!-- AI Control Panel -->
35
+ <div class="bg-white rounded-xl shadow-md p-6">
36
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
37
+ <i data-feather="cpu" class="mr-2"></i>
38
+ AI Model Control
39
+ </h2>
40
+ <div class="space-y-4">
41
+ <div>
42
+ <label class="block text-sm font-medium text-gray-700 mb-1">AI Model Selection</label>
43
+ <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">
44
+ <option>Qwen3-VL-235B-A22B-Thinking</option>
45
+ <option>GPT-4 Vision</option>
46
+ <option>Claude 3 Opus</option>
47
+ <option>Gemini Pro Vision</option>
48
+ </select>
49
+ </div>
50
+ <div>
51
+ <label class="block text-sm font-medium text-gray-700 mb-1">HuggingFace API Key</label>
52
+ <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" placeholder="hf_xxxxxxxxxxxxxxxx">
53
+ </div>
54
+ <div>
55
+ <label class="block text-sm font-medium text-gray-700 mb-1">OpenAI-Compatible Endpoint</label>
56
+ <input type="text" 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" value="https://router.huggingface.co/v1">
57
+ </div>
58
+ <div class="flex items-center">
59
+ <input type="checkbox" id="enableAI" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
60
+ <label for="enableAI" class="ml-2 block text-sm text-gray-700">Enable AI Processing</label>
61
+ </div>
62
+ <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">
63
+ <i data-feather="refresh-cw" class="mr-2"></i>
64
+ Initialize AI Connection
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Live AI Output -->
70
+ <div class="bg-white rounded-xl shadow-md p-6">
71
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
72
+ <i data-feather="eye" class="mr-2"></i>
73
+ AI Vision Output
74
+ </h2>
75
+ <div class="bg-gray-200 rounded-lg overflow-hidden ai-output">
76
+ <img src="http://static.photos/technology/640x360" alt="AI Vision Output" class="w-full h-full object-cover">
77
+ <div class="bg-black/50 text-white px-2 py-1 absolute bottom-2 left-2 rounded text-xs">
78
+ AI Analysis Output
79
+ </div>
80
+ </div>
81
+ <div class="mt-4 p-4 bg-gray-100 rounded-lg">
82
+ <h3 class="font-medium text-gray-800 mb-2">AI Response:</h3>
83
+ <p class="text-sm text-gray-600">The Statue of Liberty stands on Liberty Island in New York Harbor, a monumental sculpture gifted by France to the United States.</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- API Configuration -->
89
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
90
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
91
+ <i data-feather="settings" class="mr-2"></i>
92
+ API Configuration
93
+ </h2>
94
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
95
+ <div>
96
+ <h3 class="font-medium text-gray-800 mb-3">OpenAI-Compatible API</h3>
97
+ <div class="space-y-4">
98
+ <div>
99
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
100
+ <input type="text" 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" value="https://router.huggingface.co/v1">
101
+ </div>
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
104
+ <input type="text" 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" value="Qwen/Qwen3-VL-235B-A22B-Thinking">
105
+ </div>
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
108
+ <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" placeholder="Enter your API key">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div>
113
+ <h3 class="font-medium text-gray-800 mb-3">Stream Settings</h3>
114
+ <div class="space-y-4">
115
+ <div>
116
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
117
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
118
+ <div class="text-right text-sm text-gray-600">0.7</div>
119
+ </div>
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
122
+ <input type="number" 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" value="1000">
123
+ </div>
124
+ <div class="flex items-center">
125
+ <input type="checkbox" id="enableStream" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
126
+ <label for="enableStream" class="ml-2 block text-sm text-gray-700">Enable Streaming</label>
127
+ </div>
128
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">
129
+ <i data-feather="play" class="inline mr-2"></i>
130
+ Test Connection
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Code Example -->
138
+ <div class="bg-white rounded-xl shadow-md p-6">
139
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
140
+ <i data-feather="code" class="mr-2"></i>
141
+ Integration Code Example
142
+ </h2>
143
+ <div class="bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto">
144
+ <pre><code>import os
145
+ from openai import OpenAI
146
+
147
+ client = OpenAI(
148
+ base_url="https://router.huggingface.co/v1",
149
+ api_key=os.environ["HF_TOKEN"],
150
+ )
151
+
152
+ stream = client.chat.completions.create(
153
+ model="Qwen/Qwen3-VL-235B-A22B-Thinking",
154
+ messages=[
155
+ {
156
+ "role": "user",
157
+ "content": [
158
+ {
159
+ "type": "text",
160
+ "text": "Describe this image in one sentence."
161
+ },
162
+ {
163
+ "type": "image_url",
164
+ "image_url": {
165
+ "url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
166
+ }
167
+ }
168
+ ]
169
+ }
170
+ ],
171
+ stream=True,
172
+ )
173
+
174
+ for chunk in stream:
175
+ print(chunk.choices[0].delta.content, end="")</code></pre>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <script>
181
+ feather.replace();
182
+ </script>
183
+ </body>
184
+ </html>
camera.html CHANGED
@@ -23,10 +23,10 @@
23
  <i data-feather="video" class="mr-2"></i>
24
  Camera Feeds & Alerts
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="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>
@@ -42,6 +42,9 @@
42
  <a href="yolov11.html" class="text-blue-600 hover:text-blue-800 flex items-center">
43
  <i data-feather="cpu" class="mr-1"></i> YOLOv11
44
  </a>
 
 
 
45
  </div>
46
  </div>
47
 
 
23
  <i data-feather="video" class="mr-2"></i>
24
  Camera Feeds & Alerts
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="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>
 
42
  <a href="yolov11.html" class="text-blue-600 hover:text-blue-800 flex items-center">
43
  <i data-feather="cpu" class="mr-1"></i> YOLOv11
44
  </a>
45
+ <a href="ai-control.html" class="text-blue-600 hover:text-blue-800 flex items-center">
46
+ <i data-feather="brain" class="mr-1"></i> AI Control
47
+ </a>
48
  </div>
49
  </div>
50
 
index.html CHANGED
@@ -107,8 +107,12 @@
107
  <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
108
  YOLOv11
109
  </a>
 
 
 
 
110
  <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
111
- <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
112
  Fullscreen
113
  </button>
114
  </div>
 
107
  <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
108
  YOLOv11
109
  </a>
110
+ <a href="ai-control.html" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
111
+ <i data-feather="brain" class="w-4 h-4 mr-2"></i>
112
+ AI Control
113
+ </a>
114
  <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition flex items-center">
115
+ <i data-feather="maximize" class="w-4 h-4 mr-2"></i>
116
  Fullscreen
117
  </button>
118
  </div>
security.html CHANGED
@@ -41,6 +41,9 @@
41
  <a href="yolov11.html" class="text-blue-600 hover:text-blue-800 flex items-center">
42
  <i data-feather="cpu" class="mr-1"></i> YOLOv11
43
  </a>
 
 
 
44
  </div>
45
  </div>
46
 
 
41
  <a href="yolov11.html" class="text-blue-600 hover:text-blue-800 flex items-center">
42
  <i data-feather="cpu" class="mr-1"></i> YOLOv11
43
  </a>
44
+ <a href="ai-control.html" class="text-blue-600 hover:text-blue-800 flex items-center">
45
+ <i data-feather="brain" class="mr-1"></i> AI Control
46
+ </a>
47
  </div>
48
  </div>
49
 
yolov10.html CHANGED
@@ -30,8 +30,11 @@
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 -->
 
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
+ <a href="ai-control.html" class="text-blue-600 hover:text-blue-800 flex items-center">
34
+ <i data-feather="brain" class="mr-1"></i> AI Control
35
+ </a>
36
  </div>
37
+ </div>
38
 
39
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
40
  <!-- Model Demo -->