Hugging Face's logo

Spaces:
PrometheusGroup
/
prometheus-forge-ai-hub
Running

App Files Community
PrometheusGroup commited on
Commit
9462420
·
verified ·
1 Parent(s): 18ecbdb

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +873 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Prometheus Forge Ai Hub
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: red
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: prometheus-forge-ai-hub
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,873 @@
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>Forge - AI Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --bg-primary: #0A0A0A;
12
+ --bg-secondary: #101010;
13
+ --bg-tertiary: #151515;
14
+ --text-primary: #E0E0E0;
15
+ --text-secondary: #A0A0A0;
16
+ --text-accent: #C62828;
17
+ --border-color: #1E1E1E;
18
+ --success: #388E3C;
19
+ --warning: #FFA000;
20
+ }
21
+
22
+ body {
23
+ background-color: var(--bg-primary);
24
+ color: var(--text-primary);
25
+ font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
26
+ height: 100vh;
27
+ overflow: hidden;
28
+ line-height: 1.5;
29
+ }
30
+
31
+ .loading-container {
32
+ background-color: var(--bg-primary);
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ height: 100vh;
37
+ width: 100vw;
38
+ position: fixed;
39
+ top: 0;
40
+ left: 0;
41
+ z-index: 9999;
42
+ transition: opacity 0.3s ease;
43
+ }
44
+
45
+ .loading-logo {
46
+ width: 100px;
47
+ opacity: 0.9;
48
+ filter: drop-shadow(0 0 8px rgba(198, 40, 40, 0.3));
49
+ }
50
+
51
+ .loading-text {
52
+ margin-top: 20px;
53
+ letter-spacing: 0.1em;
54
+ font-weight: 300;
55
+ font-size: 0.9rem;
56
+ color: var(--text-secondary);
57
+ }
58
+
59
+ .tab-button {
60
+ transition: all 0.3s ease;
61
+ border-bottom: 2px solid transparent;
62
+ }
63
+
64
+ .tab-button.active {
65
+ border-bottom: 2px solid var(--primary-accent);
66
+ color: var(--primary-accent);
67
+ }
68
+
69
+ .card {
70
+ background-color: var(--bg-tertiary);
71
+ border: 1px solid var(--border-color);
72
+ transition: all 0.2s ease-out;
73
+ }
74
+
75
+ .card:hover {
76
+ border-color: var(--text-accent);
77
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
78
+ }
79
+
80
+ .status-connected {
81
+ background-color: var(--success);
82
+ }
83
+
84
+ .status-disconnected {
85
+ background-color: var(--quaternary-accent);
86
+ }
87
+
88
+ .message-user {
89
+ background-color: var(--bg-secondary);
90
+ border-left: 3px solid var(--border-color);
91
+ }
92
+
93
+ .message-ai {
94
+ background-color: var(--bg-tertiary);
95
+ border-left: 3px solid var(--text-accent);
96
+ }
97
+
98
+ .modal {
99
+ background-color: rgba(0, 0, 0, 0.9);
100
+ backdrop-filter: blur(5px);
101
+ }
102
+
103
+ .tag {
104
+ font-size: 0.75rem;
105
+ padding: 0.2rem 0.5rem;
106
+ border-radius: 4px;
107
+ display: inline-block;
108
+ margin-right: 0.3rem;
109
+ margin-bottom: 0.3rem;
110
+ }
111
+
112
+ .tag-purpose {
113
+ background-color: rgba(185, 28, 28, 0.3);
114
+ color: #F9A825;
115
+ }
116
+
117
+ .tag-finetuned {
118
+ background-color: rgba(249, 168, 37, 0.2);
119
+ color: #FB8C00;
120
+ }
121
+
122
+ .tag-original {
123
+ background-color: rgba(241, 81, 30, 0.2);
124
+ color: #F4511E;
125
+ }
126
+
127
+ .tag-parameters {
128
+ background-color: rgba(229, 57, 53, 0.2);
129
+ color: #E53935;
130
+ }
131
+
132
+ .tag-distilled {
133
+ background-color: rgba(118, 224, 80, 0.2);
134
+ color: #76E050;
135
+ }
136
+
137
+ .code-block {
138
+ background-color: #1E1E1E;
139
+ font-family: 'Courier New', Courier, monospace;
140
+ border-radius: 4px;
141
+ padding: 1rem;
142
+ overflow-x: auto;
143
+ }
144
+
145
+ .code-keyword { color: #569CD6; }
146
+ .code-function { color: #DCDCAA; }
147
+ .code-string { color: #CE9178; }
148
+ .code-number { color: #B5CEA8; }
149
+ .code-comment { color: #6A9955; }
150
+ .code-operator { color: #D4D4D4; }
151
+
152
+ .typing-indicator {
153
+ display: flex;
154
+ align-items: center;
155
+ }
156
+
157
+ .typing-dot {
158
+ width: 8px;
159
+ height: 8px;
160
+ background-color: var(--primary-accent);
161
+ border-radius: 50%;
162
+ margin: 0 2px;
163
+ animation: typingAnimation 1.4s infinite ease-in-out;
164
+ }
165
+
166
+ .typing-dot:nth-child(1) { animation-delay: 0s; }
167
+ .typing-dot:nth-child(2) { animation-delay: 0.2s; }
168
+ .typing-dot:nth-child(3) { animation-delay: 0.4s; }
169
+
170
+ @keyframes typingAnimation {
171
+ 0%, 60%, 100% { transform: translateY(0); }
172
+ 30% { transform: translateY(-5px); }
173
+ }
174
+
175
+ .parameter-slider::-webkit-slider-thumb {
176
+ background: var(--primary-accent);
177
+ }
178
+
179
+ .parameter-slider::-moz-range-thumb {
180
+ background: var(--primary-accent);
181
+ }
182
+
183
+ ::-webkit-scrollbar {
184
+ width: 6px;
185
+ }
186
+
187
+ ::-webkit-scrollbar-track {
188
+ background: rgba(255, 255, 255, 0.05);
189
+ }
190
+
191
+ ::-webkit-scrollbar-thumb {
192
+ background: var(--primary-accent);
193
+ border-radius: 3px;
194
+ }
195
+
196
+ ::-webkit-scrollbar-thumb:hover {
197
+ background: var(--secondary-accent);
198
+ }
199
+ </style>
200
+ </head>
201
+ <body class="h-full flex flex-col">
202
+ <!-- Loading Screen -->
203
+ <div id="loadingScreen" class="loading-container">
204
+ <div class="text-center">
205
+ <img src="logo_black_icon.png" alt="Prometheus Logo" class="loading-logo mb-4 mx-auto">
206
+ <h1 class="text-4xl font-bold text-[#D32F2F] mb-2">PROMETHEUS</h1>
207
+ <p class="text-[#F7FAFC]">Initializing Forge...</p>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Main Application (hidden until loaded) -->
212
+ <div id="appContainer" class="h-full flex flex-col hidden">
213
+ <!-- Header -->
214
+ <header class="bg-black border-b border-[#1E1E1E] py-3 px-4 flex items-center justify-between">
215
+ <div class="flex items-center space-x-3">
216
+ <img src="logo_black_icon.png" alt="Forge Logo" class="h-7 opacity-90">
217
+ <h1 class="text-lg font-medium tracking-wider">FORGE</h1>
218
+ </div>
219
+ <div class="flex items-center space-x-4">
220
+ <div class="flex items-center space-x-2">
221
+ <span class="text-sm">Active Model:</span>
222
+ <span class="font-medium text-[#F9A825]" id="activeModelIndicator">None</span>
223
+ </div>
224
+ <button class="text-sm bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded" id="modelChangeBtn">
225
+ Change
226
+ </button>
227
+ </div>
228
+ </header>
229
+
230
+ <!-- Main Content Area -->
231
+ <div class="flex flex-1 overflow-hidden">
232
+ <!-- Sidebar -->
233
+ <div class="w-16 bg-[#0E0E0E] flex flex-col items-center py-4 border-r border-[#1E1E1E]">
234
+ <button class="tab-button active mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="settings">
235
+ <i class="fas fa-cog text-xl mb-1"></i>
236
+ <span class="text-xs">Settings</span>
237
+ </button>
238
+ <button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="models">
239
+ <i class="fas fa-brain text-xl mb-1"></i>
240
+ <span class="text-xs">Models</span>
241
+ </button>
242
+ <button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="prompts">
243
+ <i class="fas fa-comment-alt text-xl mb-1"></i>
244
+ <span class="text-xs">Prompts</span>
245
+ </button>
246
+ <button class="tab-button mb-6 p-2 rounded-lg flex flex-col items-center" data-tab="chat">
247
+ <i class="fas fa-comments text-xl mb-1"></i>
248
+ <span class="text-xs">Chat</span>
249
+ </button>
250
+ </div>
251
+
252
+ <!-- Tab Content -->
253
+ <div class="flex-1 flex flex-col overflow-hidden">
254
+ <!-- Settings Tab -->
255
+ <div id="settingsTab" class="tab-content p-4 flex-1 overflow-y-auto">
256
+ <h2 class="text-xl font-bold mb-6 text-[#F9A825]">AI Service Configuration</h2>
257
+ <p class="text-sm text-[#A0A0A0] mb-6">Configure your connections to various AI services. Keys can be set via environment variables or entered directly below.</p>
258
+
259
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
260
+ <!-- Gemini Card -->
261
+ <div class="card rounded-lg p-4 cursor-pointer" data-service="gemini">
262
+ <div class="flex items-center mb-3">
263
+ <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
264
+ <i class="fas fa-robot text-[#FB8C00]"></i>
265
+ </div>
266
+ <h3 class="font-bold">Gemini</h3>
267
+ </div>
268
+ <div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div>
269
+ <div class="text-xs mb-4 truncate" id="geminiEndpoint">Not configured</div>
270
+ <div class="flex items-center">
271
+ <span class="status-indicator w-3 h-3 rounded-full mr-2" id="geminiStatus"></span>
272
+ <span class="text-xs" id="geminiStatusText">Not configured</span>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- OpenAI Card -->
277
+ <div class="card rounded-lg p-4 cursor-pointer" data-service="openai">
278
+ <div class="flex items-center mb-3">
279
+ <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
280
+ <i class="fas fa-bolt text-[#F4511E]"></i>
281
+ </div>
282
+ <h3 class="font-bold">OpenAI</h3>
283
+ </div>
284
+ <div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div>
285
+ <div class="text-xs mb-4 truncate" id="openaiEndpoint">Not configured</div>
286
+ <div class="flex items-center">
287
+ <span class="status-indicator w-3 h-3 rounded-full mr-2" id="openaiStatus"></span>
288
+ <span class="text-xs" id="openaiStatusText">Not configured</span>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Ollama Card -->
293
+ <div class="card rounded-lg p-4 cursor-pointer" data-service="ollama">
294
+ <div class="flex items-center mb-3">
295
+ <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
296
+ <i class="fas fa-server text-[#76E050]"></i>
297
+ </div>
298
+ <h3 class="font-bold">Ollama</h3>
299
+ </div>
300
+ <div class="text-xs mb-2 text-[#A0A0A0]">Local Endpoint:</div>
301
+ <div class="text-xs mb-4 truncate" id="ollamaEndpoint">Not configured</div>
302
+ <div class="flex items-center">
303
+ <span class="status-indicator w-3 h-3 rounded-full mr-2" id="ollamaStatus"></span>
304
+ <span class="text-xs" id="ollamaStatusText">Not configured</span>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Hugging Face Card -->
309
+ <div class="card rounded-lg p-4 cursor-pointer" data-service="huggingface">
310
+ <div class="flex items-center mb-3">
311
+ <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
312
+ <i class="fas fa-heart text-[#E53935]"></i>
313
+ </div>
314
+ <h3 class="font-bold">Hugging Face</h3>
315
+ </div>
316
+ <div class="text-xs mb-2 text-[#A0A0A0]">API Endpoint:</div>
317
+ <div class="text-xs mb-4 truncate" id="huggingfaceEndpoint">Not configured</div>
318
+ <div class="flex items-center">
319
+ <span class="status-indicator w-3 h-3 rounded-full mr-2" id="huggingfaceStatus"></span>
320
+ <span class="text-xs" id="huggingfaceStatusText">Not configured</span>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- ComfyUI Card -->
325
+ <div class="card rounded-lg p-4 cursor-pointer" data-service="comfyui">
326
+ <div class="flex items-center mb-3">
327
+ <div class="w-10 h-10 rounded bg-[#1E1E1E] flex items-center justify-center mr-3">
328
+ <i class="fas fa-image text-[#D32F2F]"></i>
329
+ </div>
330
+ <h3 class="font-bold">ComfyUI</h3>
331
+ </div>
332
+ <div class="text-xs mb-2 text-[#A0A0A0]">Local Endpoint:</div>
333
+ <div class="text-xs mb-4 truncate" id="comfyuiEndpoint">Not configured</div>
334
+ <div class="flex items-center">
335
+ <span class="status-indicator w-3 h-3 rounded-full mr-2" id="comfyuiStatus"></span>
336
+ <span class="text-xs" id="comfyuiStatusText">Not configured</span>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Models Tab -->
343
+ <div id="modelsTab" class="tab-content p-4 flex-1 overflow-y-auto hidden">
344
+ <div class="flex justify-between items-center mb-6">
345
+ <h2 class="text-xl font-bold text-[#F9A825]">AI Models</h2>
346
+ <button id="filterBtn" class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-4 py-2 rounded flex items-center">
347
+ <i class="fas fa-filter mr-2"></i>
348
+ <span>Filters</span>
349
+ </button>
350
+ </div>
351
+
352
+ <div class="grid grid-cols-1 gap-4">
353
+ <!-- Example Model Cards -->
354
+ <div class="card rounded-lg p-4">
355
+ <div class="flex justify-between items-start mb-2">
356
+ <h3 class="font-bold">gemini-1.5-flash</h3>
357
+ <button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm">
358
+ Select
359
+ </button>
360
+ </div>
361
+ <p class="text-sm text-[#A0A0A0] mb-3">Lightweight version of Gemini 1.5 optimized for speed with minimal quality loss.</p>
362
+ <div class="flex flex-wrap mb-3">
363
+ <span class="tag tag-purpose">Text & Code</span>
364
+ <span class="tag tag-original">Google</span>
365
+ <span class="tag tag-parameters">32K context</span>
366
+ <span class="tag tag-distilled">Distilled</span>
367
+ </div>
368
+ <div class="flex justify-between text-xs text-[#A0A0A0]">
369
+ <span>API Only</span>
370
+ <span>~1.5GB</span>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="card rounded-lg p-4">
375
+ <div class="flex justify-between items-start mb-2">
376
+ <h3 class="font-bold">gpt-4o-mini</h3>
377
+ <button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm">
378
+ Select
379
+ </button>
380
+ </div>
381
+ <p class="text-sm text-[#A0A0A0] mb-3">Smaller, efficient version of GPT-4 optimized for common tasks.</p>
382
+ <div class="flex flex-wrap mb-3">
383
+ <span class="tag tag-purpose">Chat</span>
384
+ <span class="tag tag-original">OpenAI</span>
385
+ <span class="tag tag-parameters">8K context</span>
386
+ </div>
387
+ <div class="flex justify-between text-xs text-[#A0A0A0]">
388
+ <span>API Only</span>
389
+ <span>~2.1GB</span>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="card rounded-lg p-4">
394
+ <div class="flex justify-between items-start mb-2">
395
+ <h3 class="font-bold">llama3-8b</h3>
396
+ <button class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded text-sm">
397
+ Select
398
+ </button>
399
+ </div>
400
+ <p class="text-sm text-[#A0A0A0] mb-3">Meta's 8 billion parameter model, general purpose.</p>
401
+ <div class="flex flex-wrap mb-3">
402
+ <span class="tag tag-purpose">Text</span>
403
+ <span class="tag tag-original">Meta</span>
404
+ <span class="tag tag-parameters">8K context</span>
405
+ </div>
406
+ <div class="flex justify-between text-xs text-[#A0A0A0]">
407
+ <span>Local/API</span>
408
+ <span>4.1GB</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Prompts Tab -->
415
+ <div id="promptsTab" class="tab-content p-4 flex-1 overflow-y-auto hidden">
416
+ <div class="flex justify-between items-center mb-6">
417
+ <h2 class="text-xl font-bold text-[#F9A825]">System Prompts</h2>
418
+ <button id="addPromptBtn" class="bg-[#1E1E1E] hover:bg-[#2E2E2E] px-4 py-2 rounded flex items-center">
419
+ <i class="fas fa-plus mr-2"></i>
420
+ <span>Add Prompt</span>
421
+ </button>
422
+ </div>
423
+
424
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
425
+ <!-- Example Prompt Cards -->
426
+ <div class="card rounded-lg p-4">
427
+ <div class="flex justify-between items-start mb-3">
428
+ <h3 class="font-bold">General Assistant</h3>
429
+ <div class="flex space-x-2">
430
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
431
+ Edit
432
+ </button>
433
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
434
+ Select
435
+ </button>
436
+ </div>
437
+ </div>
438
+ <p class="text-sm text-[#A0A0A0] mb-2 truncate">You are a helpful, harmless, and honest AI assistant. Provide concise answers and ask for clarification when needed.</p>
439
+ </div>
440
+
441
+ <div class="card rounded-lg p-4">
442
+ <div class="flex justify-between items-start mb-3">
443
+ <h3 class="font-bold">Code Expert</h3>
444
+ <div class="flex space-x-2">
445
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
446
+ Edit
447
+ </button>
448
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
449
+ Select
450
+ </button>
451
+ </div>
452
+ </div>
453
+ <p class="text-sm text-[#A0A0A0] mb-2 truncate">You are an expert programmer in all languages. Provide high-quality, efficient code with explanations. Format code properly.</p>
454
+ </div>
455
+
456
+ <div class="card rounded-lg p-4">
457
+ <div class="flex justify-between items-start mb-3">
458
+ <h3 class="font-bold">Creative Writer</h3>
459
+ <div class="flex space-x-2">
460
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
461
+ Edit
462
+ </button>
463
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
464
+ Select
465
+ </button>
466
+ </div>
467
+ </div>
468
+ <p class="text-sm text-[#A0A0A0] mb-2 truncate">You are a creative writer with a distinctive voice. Generate engaging, original content with rich vocabulary and stylistic flair.</p>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Chat Tab -->
474
+ <div id="chatTab" class="tab-content flex-1 flex flex-col overflow-hidden hidden">
475
+ <!-- Chat Header -->
476
+ <div class="border-b border-[#1E1E1E] p-3 flex justify-between items-center">
477
+ <div class="flex items-center space-x-2">
478
+ <span class="text-sm">System Prompt:</span>
479
+ <span class="font-medium text-[#F9A825]" id="activePromptIndicator">General Assistant</span>
480
+ </div>
481
+ <button id="promptSelectBtn" class="text-sm bg-[#1E1E1E] hover:bg-[#2E2E2E] px-3 py-1 rounded">
482
+ Change
483
+ </button>
484
+ </div>
485
+
486
+ <!-- Chat Messages Area -->
487
+ <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
488
+ <!-- Example messages -->
489
+ <div class="message-user rounded p-4">
490
+ <div class="flex items-center mb-2">
491
+ <div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div>
492
+ <span class="text-sm font-medium">User</span>
493
+ </div>
494
+ <p class="text-sm">Explain quantum computing in simple terms.</p>
495
+ </div>
496
+
497
+ <div class="message-ai rounded p-4">
498
+ <div class="flex items-center mb-2">
499
+ <div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div>
500
+ <span class="text-sm font-medium">Gemini-1.5-flash</span>
501
+ </div>
502
+ <p class="text-sm">Quantum computing is an area of computing focused on developing computer technologies centered around quantum theory principles. Unlike classical computers that use bits (0s or 1s), quantum computers use quantum bits or qubits that can represent and store information in both 0 and 1 simultaneously (superposition).</p>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Chat Input Area -->
507
+ <div class="border-t border-[#1E1E1E] p-3">
508
+ <div class="flex items-end space-x-2">
509
+ <div class="flex-1 bg-[#1E1E1E] rounded-lg p-2">
510
+ <textarea id="chatInput" class="w-full bg-transparent outline-none resize-none text-sm" rows="2" placeholder="Type your message here..."></textarea>
511
+ </div>
512
+ <button id="sendMessageBtn" class="h-10 w-10 rounded-lg bg-[#D32F2F] hover:bg-[#E53935] flex items-center justify-center">
513
+ <i class="fas fa-paper-plane"></i>
514
+ </button>
515
+ </div>
516
+ <div class="flex items-center justify-between mt-2">
517
+ <div class="flex space-x-2">
518
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
519
+ <i class="fas fa-paperclip mr-1"></i>
520
+ <span>Attach</span>
521
+ </button>
522
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded">
523
+ <i class="fas fa-lock"></i>
524
+ </button>
525
+ </div>
526
+ <div class="flex space-x-2">
527
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
528
+ <i class="fas fa-search mr-1"></i>
529
+ <span>Web</span>
530
+ </button>
531
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
532
+ <i class="fas fa-code mr-1"></i>
533
+ <span>Code</span>
534
+ </button>
535
+ <button class="text-xs bg-[#1E1E1E] hover:bg-[#2E2E2E] px-2 py-1 rounded flex items-center">
536
+ <i class="fas fa-cog mr-1"></i>
537
+ <span>Params</span>
538
+ </button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- Modals -->
548
+ <!-- Service Configuration Modal -->
549
+ <div id="serviceConfigModal" class="modal fixed inset-0 z-50 items-center justify-center hidden">
550
+ <div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4">
551
+ <div class="flex justify-between items-center mb-4">
552
+ <h3 class="text-lg font-bold" id="serviceConfigTitle">Configure Service</h3>
553
+ <button id="closeServiceConfigModal" class="text-xl">&times;</button>
554
+ </div>
555
+
556
+ <div class="mb-4">
557
+ <label class="block text-sm mb-2">API Key Configuration</label>
558
+ <div class="bg-[#1E1E1E] rounded-lg p-4 mb-3">
559
+ <p class="text-xs mb-3">Recommended: Set as environment variable</p>
560
+ <div class="bg-black rounded p-3 font-mono text-xs overflow-x-auto">
561
+ <p id="envVarExample">setx SERVICE_API_KEY "your_api_key_here"</p>
562
+ </div>
563
+ </div>
564
+ <div class="flex items-center mb-4">
565
+ <input type="checkbox" id="toggleKeyInput" class="mr-2">
566
+ <label for="toggleKeyInput" class="text-sm">Enter API key directly</label>
567
+ </div>
568
+ <div id="keyInputContainer" class="hidden">
569
+ <input type="password" id="apiKeyInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm mb-2" placeholder="Enter API key">
570
+ <p class="text-xs text-[#A0A0A0]">Note: This will be stored in your browser's local storage</p>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="mb-6">
575
+ <label for="endpointInput" class="block text-sm mb-2">API Endpoint URL</label>
576
+ <input type="text" id="endpointInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm" placeholder="https://api.example.com">
577
+ </div>
578
+
579
+ <div class="flex justify-end space-x-3">
580
+ <button id="testConnectionBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm">
581
+ Test Connection
582
+ </button>
583
+ <button id="saveServiceConfigBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm">
584
+ Save Configuration
585
+ </button>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Model Parameters Modal -->
591
+ <div id="paramsModal" class="modal fixed inset-0 z-50 items-center justify-center hidden">
592
+ <div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-md p-6 mx-4">
593
+ <div class="flex justify-between items-center mb-4">
594
+ <h3 class="text-lg font-bold">Model Parameters</h3>
595
+ <button id="closeParamsModal" class="text-xl">&times;</button>
596
+ </div>
597
+
598
+ <div class="space-y-4">
599
+ <div>
600
+ <label class="block text-sm mb-2">Temperature: <span id="tempValue">0.7</span></label>
601
+ <input type="range" id="tempSlider" min="0" max="1" step="0.1" value="0.7" class="w-full parameter-slider">
602
+ <div class="flex justify-between text-xs text-[#A0A0A0]">
603
+ <span>Precise</span>
604
+ <span>Balanced</span>
605
+ <span>Creative</span>
606
+ </div>
607
+ </div>
608
+
609
+ <div>
610
+ <label class="block text-sm mb-2">Max Tokens: <span id="tokensValue">2048</span></label>
611
+ <input type="range" id="tokensSlider" min="256" max="16384" step="256" value="2048" class="w-full parameter-slider">
612
+ <div class="flex justify-between text-xs text-[#A0A0A0]">
613
+ <span>256</span>
614
+ <span>2048</span>
615
+ <span>8192</span>
616
+ <span>16384</span>
617
+ </div>
618
+ </div>
619
+
620
+ <div>
621
+ <label class="block text-sm mb-2">Context Window: <span id="contextValue">Full (8192)</span></label>
622
+ <input type="range" id="contextSlider" min="1024" max="8192" step="1024" value="8192" class="w-full parameter-slider">
623
+ </div>
624
+
625
+ <div class="flex items-center">
626
+ <input type="checkbox" id="streamToggle" class="mr-2" checked>
627
+ <label for="streamToggle" class="text-sm">Stream Responses</label>
628
+ </div>
629
+ </div>
630
+
631
+ <div class="mt-6 flex justify-end">
632
+ <button id="saveParamsBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm">
633
+ Apply Settings
634
+ </button>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- System Prompt Editor Modal -->
640
+ <div id="promptEditorModal" class="modal fixed inset-0 z-50 items-center justify-center hidden">
641
+ <div class="bg-[#121212] border border-[#1E1E1E] rounded-lg w-full max-w-2xl p-6 mx-4">
642
+ <div class="flex justify-between items-center mb-4">
643
+ <h3 class="text-lg font-bold">Edit System Prompt</h3>
644
+ <button id="closePromptEditorModal" class="text-xl">&times;</button>
645
+ </div>
646
+
647
+ <div class="mb-4">
648
+ <label for="promptNameInput" class="block text-sm mb-2">Prompt Name</label>
649
+ <input type="text" id="promptNameInput" class="w-full bg-[#1E1E1E] rounded p-2 text-sm" placeholder="Creative Writer">
650
+ </div>
651
+
652
+ <div class="mb-4">
653
+ <label for="promptContentInput" class="block text-sm mb-2">Prompt Content</label>
654
+ <textarea id="promptContentInput" class="w-full bg-[#1E1E1E] rounded p-3 text-sm h-40" placeholder="You are an expert creative writer..."></textarea>
655
+ </div>
656
+
657
+ <div class="flex justify-end space-x-3">
658
+ <button id="cancelPromptBtn" class="px-4 py-2 rounded bg-[#1E1E1E] hover:bg-[#2E2E2E] text-sm">
659
+ Cancel
660
+ </button>
661
+ <button id="savePromptBtn" class="px-4 py-2 rounded bg-[#D32F2F] hover:bg-[#E53935] text-sm">
662
+ Save Prompt
663
+ </button>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Typing Indicator -->
669
+ <div id="typingIndicator" class="fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-[#1E1E1E] rounded-full px-4 py-2 hidden">
670
+ <div class="typing-indicator">
671
+ <div class="typing-dot"></div>
672
+ <div class="typing-dot"></div>
673
+ <div class="typing-dot"></div>
674
+ <span class="ml-2 text-sm">AI is thinking...</span>
675
+ </div>
676
+ </div>
677
+
678
+ <script>
679
+ // Simulate loading
680
+ setTimeout(() => {
681
+ document.getElementById('loadingScreen').style.opacity = '0';
682
+ setTimeout(() => {
683
+ document.getElementById('loadingScreen').style.display = 'none';
684
+ document.getElementById('appContainer').classList.remove('hidden');
685
+ }, 500);
686
+ }, 2000);
687
+
688
+ // Tab switching
689
+ const tabButtons = document.querySelectorAll('.tab-button');
690
+ const tabContents = document.querySelectorAll('.tab-content');
691
+
692
+ tabButtons.forEach(button => {
693
+ button.addEventListener('click', () => {
694
+ // Update active tab button
695
+ tabButtons.forEach(btn => btn.classList.remove('active'));
696
+ button.classList.add('active');
697
+
698
+ // Show corresponding content
699
+ const tabName = button.getAttribute('data-tab');
700
+ tabContents.forEach(content => {
701
+ content.classList.add('hidden');
702
+ if (content.id === `${tabName}Tab`) {
703
+ content.classList.remove('hidden');
704
+ }
705
+ });
706
+ });
707
+ });
708
+
709
+ // Service configuration
710
+ const serviceCards = document.querySelectorAll('[data-service]');
711
+ const serviceConfigModal = document.getElementById('serviceConfigModal');
712
+ const closeServiceConfigModal = document.getElementById('closeServiceConfigModal');
713
+ const toggleKeyInput = document.getElementById('toggleKeyInput');
714
+ const keyInputContainer = document.getElementById('keyInputContainer');
715
+
716
+ serviceCards.forEach(card => {
717
+ card.addEventListener('click', () => {
718
+ const service = card.getAttribute('data-service');
719
+ document.getElementById('serviceConfigTitle').textContent = `Configure ${service.charAt(0).toUpperCase() + service.slice(1)}`;
720
+
721
+ // Update environment variable example based on service
722
+ const serviceVar = service.toUpperCase() + '_API_KEY';
723
+ document.getElementById('envVarExample').textContent = `setx ${serviceVar} "your_api_key_here"`;
724
+
725
+ serviceConfigModal.classList.remove('hidden');
726
+ });
727
+ });
728
+
729
+ closeServiceConfigModal.addEventListener('click', () => {
730
+ serviceConfigModal.classList.add('hidden');
731
+ });
732
+
733
+ toggleKeyInput.addEventListener('change', () => {
734
+ keyInputContainer.classList.toggle('hidden', !toggleKeyInput.checked);
735
+ });
736
+
737
+ // Model parameters
738
+ const paramsModal = document.getElementById('paramsModal');
739
+ const closeParamsModal = document.getElementById('closeParamsModal');
740
+ const tempSlider = document.getElementById('tempSlider');
741
+ const tempValue = document.getElementById('tempValue');
742
+ const tokensSlider = document.getElementById('tokensSlider');
743
+ const tokensValue = document.getElementById('tokensValue');
744
+
745
+ document.addEventListener('click', (e) => {
746
+ if (e.target && e.target.textContent === 'Params') {
747
+ paramsModal.classList.remove('hidden');
748
+ }
749
+ });
750
+
751
+ closeParamsModal.addEventListener('click', () => {
752
+ paramsModal.classList.add('hidden');
753
+ });
754
+
755
+ tempSlider.addEventListener('input', () => {
756
+ tempValue.textContent = tempSlider.value;
757
+ });
758
+
759
+ tokensSlider.addEventListener('input', () => {
760
+ tokensValue.textContent = tokensSlider.value;
761
+ });
762
+
763
+ // System prompt editor
764
+ const promptEditorModal = document.getElementById('promptEditorModal');
765
+ const closePromptEditorModal = document.getElementById('closePromptEditorModal');
766
+ const addPromptBtn = document.getElementById('addPromptBtn');
767
+
768
+ addPromptBtn.addEventListener('click', () => {
769
+ promptEditorModal.classList.remove('hidden');
770
+ });
771
+
772
+ closePromptEditorModal.addEventListener('click', () => {
773
+ promptEditorModal.classList.add('hidden');
774
+ });
775
+
776
+ // Chat functionality
777
+ const chatInput = document.getElementById('chatInput');
778
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
779
+ const chatMessages = document.getElementById('chatMessages');
780
+ const typingIndicator = document.getElementById('typingIndicator');
781
+
782
+ sendMessageBtn.addEventListener('click', sendMessage);
783
+
784
+ chatInput.addEventListener('keydown', (e) => {
785
+ if (e.key === 'Enter' && !e.shiftKey) {
786
+ e.preventDefault();
787
+ sendMessage();
788
+ }
789
+ });
790
+
791
+ function sendMessage() {
792
+ const message = chatInput.value.trim();
793
+ if (message) {
794
+ // Add user message
795
+ const userMessage = document.createElement('div');
796
+ userMessage.className = 'message-user rounded p-4';
797
+ userMessage.innerHTML = `
798
+ <div class="flex items-center mb-2">
799
+ <div class="w-6 h-6 rounded-full bg-[#F9A825] flex items-center justify-center text-xs font-bold mr-2">U</div>
800
+ <span class="text-sm font-medium">User</span>
801
+ </div>
802
+ <p class="text-sm">${message}</p>
803
+ `;
804
+ chatMessages.appendChild(userMessage);
805
+
806
+ // Clear input
807
+ chatInput.value = '';
808
+
809
+ // Show typing indicator
810
+ typingIndicator.classList.remove('hidden');
811
+
812
+ // Simulate AI response after delay
813
+ setTimeout(() => {
814
+ typingIndicator.classList.add('hidden');
815
+
816
+ // Add AI response
817
+ const aiMessage = document.createElement('div');
818
+ aiMessage.className = 'message-ai rounded p-4';
819
+ aiMessage.innerHTML = `
820
+ <div class="flex items-center mb-2">
821
+ <div class="w-6 h-6 rounded-full bg-[#F4511E] flex items-center justify-center text-xs font-bold mr-2">AI</div>
822
+ <span class="text-sm font-medium" id="activeModelIndicator">Gemini-1.5-flash</span>
823
+ </div>
824
+ <p class="text-sm">${getDummyResponse(message)}</p>
825
+ `;
826
+ chatMessages.appendChild(aiMessage);
827
+
828
+ // Scroll to bottom
829
+ chatMessages.scrollTop = chatMessages.scrollHeight;
830
+ }, 1500);
831
+ }
832
+ }
833
+
834
+ function getDummyResponse(message) {
835
+ const responses = [
836
+ "I'm analyzing your request about '" + message + "'. Here's what I can tell you...",
837
+ "That's an interesting question regarding '" + message + "'. From my knowledge...",
838
+ "Regarding '" + message + "', the key points to consider are...",
839
+ "Thanks for asking about '" + message + "'. Here's a summary...",
840
+ "The topic '" + message + "' is complex, but I'll break it down simply..."
841
+ ];
842
+ return responses[Math.floor(Math.random() * responses.length)];
843
+ }
844
+
845
+ // Close modals when clicking outside
846
+ document.addEventListener('click', (e) => {
847
+ const modals = ['serviceConfigModal', 'paramsModal', 'promptEditorModal'];
848
+
849
+ modals.forEach(modalId => {
850
+ const modal = document.getElementById(modalId);
851
+ if (modal && !modal.contains(e.target) && !e.target.closest(`[data-target="${modalId}"]`) && !modal.classList.contains('hidden')) {
852
+ modal.classList.add('hidden');
853
+ }
854
+ });
855
+ });
856
+
857
+ // Initialize status indicators
858
+ function initStatusIndicators() {
859
+ const services = ['gemini', 'openai', 'ollama', 'huggingface', 'comfyui'];
860
+ services.forEach(service => {
861
+ document.getElementById(`${service}Status`).classList.add('status-disconnected');
862
+ });
863
+ }
864
+
865
+ // Initialize on load
866
+ window.addEventListener('DOMContentLoaded', () => {
867
+ initStatusIndicators();
868
+ document.getElementById('activeModelIndicator').textContent = 'None';
869
+ document.getElementById('activePromptIndicator').textContent = 'General Assistant';
870
+ });
871
+ </script>
872
+ <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=PrometheusGroup/prometheus-forge-ai-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
873
+ </html>
prompts.txt ADDED
File without changes