Hugging Face's logo

Spaces:
AI4U2
/
anycoder-6f27afd0
Running

App Files Community
AI4U2 commited on
Commit
085d65b
·
verified ·
1 Parent(s): 51b975a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +602 -19
index.html CHANGED
@@ -1,19 +1,602 @@
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>LocalAI Nexus - Hot Chat & Generate</title>
7
+ <!-- Phosphor Icons -->
8
+ <script src="https://unpkg.com/@phosphor-icons/web@2.1.1/dist/phosphor.min.js"></script>
9
+ <style>
10
+ :root {
11
+ --bg-dark: #09090b;
12
+ --bg-panel: #161618;
13
+ --bg-input: #202023;
14
+ --accent-primary: #8b5cf6;
15
+ --accent-secondary: #ec4899;
16
+ --text-main: #e2e2e2;
17
+ --text-muted: #88888b;
18
+ --border: #2e2e31;
19
+ --glow: 0 0 20px rgba(139, 92, 246, 0.15);
20
+ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
21
+ }
22
+
23
+ * {
24
+ box-sizing: box-sizing;
25
+ margin: 0;
26
+ padding: 0;
27
+ scrollbar-width: thin;
28
+ scrollbar-color: var(--accent-primary) var(--bg-dark);
29
+ }
30
+
31
+ body {
32
+ background-color: var(--bg-dark);
33
+ color: var(--text-main);
34
+ font-family: var(--font-family);
35
+ height: 100vh;
36
+ display: flex;
37
+ overflow: hidden;
38
+ }
39
+
40
+ /* --- Sidebar --- */
41
+ .sidebar {
42
+ width: 280px;
43
+ background: var(--bg-panel);
44
+ border-right: 1px solid var(--border);
45
+ display: flex;
46
+ flex-direction: column;
47
+ padding: 1.5rem;
48
+ transition: transform 0.3s ease;
49
+ z-index: 10;
50
+ }
51
+
52
+ .brand {
53
+ font-size: 1.2rem;
54
+ font-weight: 700;
55
+ color: var(--text-main);
56
+ margin-bottom: 2rem;
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ }
61
+
62
+ .brand i { color: var(--accent-primary); }
63
+
64
+ .system-status {
65
+ background: rgba(255, 255, 255, 0.03);
66
+ border: 1px solid var(--border);
67
+ padding: 1rem;
68
+ border-radius: 8px;
69
+ margin-bottom: 2rem;
70
+ font-size: 0.8rem;
71
+ }
72
+
73
+ .status-row {
74
+ display: flex;
75
+ justify-content: space-between;
76
+ margin-bottom: 0.5rem;
77
+ }
78
+
79
+ .status-val { color: var(--accent-secondary); font-weight: bold; }
80
+
81
+ .history-list {
82
+ flex-grow: 1;
83
+ overflow-y: auto;
84
+ }
85
+
86
+ .history-item {
87
+ padding: 10px;
88
+ border-radius: 6px;
89
+ color: var(--text-muted);
90
+ cursor: pointer;
91
+ transition: 0.2s;
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 8px;
95
+ font-size: 0.9rem;
96
+ }
97
+
98
+ .history-item:hover {
99
+ background: rgba(255, 255, 255, 0.05);
100
+ color: var(--text-main);
101
+ }
102
+
103
+ /* --- Main Chat Area --- */
104
+ .main-chat {
105
+ flex-grow: 1;
106
+ display: flex;
107
+ flex-direction: column;
108
+ position: relative;
109
+ }
110
+
111
+ .chat-container {
112
+ flex-grow: 1;
113
+ padding: 2rem;
114
+ overflow-y: auto;
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: 1.5rem;
118
+ max-width: 900px;
119
+ width: 100%;
120
+ margin: 0 auto;
121
+ }
122
+
123
+ /* Messages */
124
+ .message {
125
+ display: flex;
126
+ gap: 1rem;
127
+ opacity: 0;
128
+ animation: fadeIn 0.3s forwards;
129
+ }
130
+
131
+ @keyframes fadeIn { to { opacity: 1; } }
132
+
133
+ .message.user {
134
+ justify-content: flex-end;
135
+ }
136
+
137
+ .bubble {
138
+ max-width: 70%;
139
+ padding: 1rem 1.5rem;
140
+ border-radius: 12px;
141
+ line-height: 1.5;
142
+ position: relative;
143
+ }
144
+
145
+ .message.ai .bubble {
146
+ background: transparent;
147
+ border: 1px solid var(--border);
148
+ color: var(--text-main);
149
+ }
150
+
151
+ .message.user .bubble {
152
+ background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
153
+ color: white;
154
+ box-shadow: var(--glow);
155
+ }
156
+
157
+ .message.ai .avatar {
158
+ width: 32px;
159
+ height: 32px;
160
+ background: var(--bg-panel);
161
+ border: 1px solid var(--border);
162
+ border-radius: 6px;
163
+ display: flex;
164
+ align-items: center;
165
+ justify-content: center;
166
+ color: var(--accent-primary);
167
+ }
168
+
169
+ /* Generated Image Styling */
170
+ .generated-image-container {
171
+ margin-top: 10px;
172
+ border-radius: 8px;
173
+ overflow: hidden;
174
+ border: 1px solid var(--border);
175
+ position: relative;
176
+ }
177
+
178
+ .generated-image-container img {
179
+ width: 100%;
180
+ display: block;
181
+ transition: transform 0.3s;
182
+ }
183
+
184
+ .generated-image-container:hover img {
185
+ transform: scale(1.02);
186
+ }
187
+
188
+ /* --- Input Area --- */
189
+ .input-area-wrapper {
190
+ padding: 2rem;
191
+ background: var(--bg-dark);
192
+ border-top: 1px solid var(--border);
193
+ }
194
+
195
+ .input-container {
196
+ max-width: 900px;
197
+ margin: 0 auto;
198
+ background: var(--bg-input);
199
+ border: 1px solid var(--border);
200
+ border-radius: 16px;
201
+ padding: 10px;
202
+ display: flex;
203
+ flex-direction: column;
204
+ box-shadow: var(--glow);
205
+ transition: border-color 0.2s;
206
+ }
207
+
208
+ .input-container:focus-within {
209
+ border-color: var(--accent-primary);
210
+ }
211
+
212
+ .mode-toggle {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 8px;
216
+ padding: 5px 10px;
217
+ font-size: 0.8rem;
218
+ color: var(--text-muted);
219
+ cursor: pointer;
220
+ user-select: none;
221
+ }
222
+
223
+ .mode-toggle.active {
224
+ color: var(--accent-secondary);
225
+ }
226
+
227
+ .switch {
228
+ position: relative;
229
+ display: inline-block;
230
+ width: 20px;
231
+ height: 20px;
232
+ }
233
+
234
+ .switch input { opacity: 0; width: 0; height: 0; }
235
+
236
+ .slider {
237
+ position: absolute;
238
+ cursor: pointer;
239
+ top: 0; left: 0; right: 0; bottom: 0;
240
+ background-color: #ccc;
241
+ transition: .4s;
242
+ border-radius: 20px;
243
+ }
244
+
245
+ .slider:before {
246
+ position: absolute;
247
+ content: "";
248
+ height: 16px;
249
+ width: 16px;
250
+ left: 2px;
251
+ bottom: 2px;
252
+ background-color: white;
253
+ transition: .4s;
254
+ border-radius: 50%;
255
+ }
256
+
257
+ input:checked + .slider {
258
+ background-color: var(--accent-secondary);
259
+ }
260
+
261
+ input:checked + .slider:before {
262
+ transform: translateX(0px);
263
+ }
264
+
265
+ .text-input-row {
266
+ display: flex;
267
+ align-items: flex-end;
268
+ gap: 10px;
269
+ padding-top: 5px;
270
+ }
271
+
272
+ textarea {
273
+ flex-grow: 1;
274
+ background: transparent;
275
+ border: none;
276
+ color: var(--text-main);
277
+ resize: none;
278
+ height: 40px;
279
+ font-family: var(--font-family);
280
+ font-size: 1rem;
281
+ outline: none;
282
+ }
283
+
284
+ .action-btn {
285
+ background: var(--bg-panel);
286
+ border: 1px solid var(--border);
287
+ color: var(--text-main);
288
+ width: 40px;
289
+ height: 40px;
290
+ border-radius: 8px;
291
+ cursor: pointer;
292
+ display: flex;
293
+ align-items: center;
294
+ justify-content: center;
295
+ transition: 0.2s;
296
+ }
297
+
298
+ .action-btn:hover {
299
+ background: var(--accent-primary);
300
+ border-color: var(--accent-primary);
301
+ }
302
+
303
+ .action-btn.send {
304
+ background: var(--accent-primary);
305
+ border: none;
306
+ color: white;
307
+ }
308
+
309
+ /* Loading Animation */
310
+ .typing-indicator {
311
+ display: flex;
312
+ gap: 5px;
313
+ padding: 10px;
314
+ }
315
+ .dot {
316
+ width: 6px;
317
+ height: 6px;
318
+ background: var(--text-muted);
319
+ border-radius: 50%;
320
+ animation: bounce 1.4s infinite ease-in-out both;
321
+ }
322
+ .dot:nth-child(1) { animation-delay: -0.32s; }
323
+ .dot:nth-child(2) { animation-delay: -0.16s; }
324
+
325
+ @keyframes bounce {
326
+ 0%, 80%, 100% { transform: scale(0); }
327
+ 40% { transform: scale(1); }
328
+ }
329
+
330
+ /* Responsive */
331
+ @media (max-width: 768px) {
332
+ .sidebar {
333
+ position: absolute;
334
+ transform: translateX(-100%);
335
+ height: 100%;
336
+ box-shadow: 10px 0 20px rgba(0,0,0,0.5);
337
+ }
338
+ .sidebar.open {
339
+ transform: translateX(0);
340
+ }
341
+ .mobile-menu-btn {
342
+ display: block;
343
+ position: absolute;
344
+ top: 15px;
345
+ left: 15px;
346
+ z-index: 20;
347
+ background: var(--bg-panel);
348
+ border: 1px solid var(--border);
349
+ color: white;
350
+ padding: 8px;
351
+ border-radius: 4px;
352
+ }
353
+ }
354
+ @media (min-width: 769px) {
355
+ .mobile-menu-btn { display: none; }
356
+ }
357
+
358
+ /* Header Link */
359
+ .top-link {
360
+ position: absolute;
361
+ top: 20px;
362
+ right: 20px;
363
+ z-index: 100;
364
+ background: rgba(0,0,0,0.5);
365
+ padding: 8px 12px;
366
+ border-radius: 8px;
367
+ border: 1px solid var(--border);
368
+ font-size: 0.8rem;
369
+ color: var(--text-muted);
370
+ text-decoration: none;
371
+ transition: 0.2s;
372
+ }
373
+ .top-link:hover {
374
+ color: var(--accent-primary);
375
+ border-color: var(--accent-primary);
376
+ }
377
+ </style>
378
+ </head>
379
+ <body>
380
+
381
+ <!-- Mobile Menu Toggle -->
382
+ <button class="mobile-menu-btn" onclick="toggleSidebar()">
383
+ <i class="ph ph-list"></i>
384
+ </button>
385
+
386
+ <!-- Built with Link -->
387
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="top-link">
388
+ Built with anycoder
389
+ </a>
390
+
391
+ <!-- Sidebar -->
392
+ <aside class="sidebar" id="sidebar">
393
+ <div class="brand">
394
+ <i class="ph-fill ph-brain"></i> LocalAI Nexus
395
+ </div>
396
+
397
+ <div class="system-status">
398
+ <div class="status-row">
399
+ <span>GPU Status</span>
400
+ <span class="status-val">RTX 4090</span>
401
+ </div>
402
+ <div class="status-row">
403
+ <span>VRAM Usage</span>
404
+ <span class="status-val">12GB / 24GB</span>
405
+ </div>
406
+ <div class="status-row">
407
+ <span>Model</span>
408
+ <span class="status-val">Llama-3-8B</span>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="history-list">
413
+ <div class="history-item"><i class="ph ph-chat-circle-text"></i> Cyberpunk City</div>
414
+ <div class="history-item"><i class="ph ph-image"></i> Portrait of Cat</div>
415
+ <div class="history-item"><i class="ph ph-code"></i> Python Script</div>
416
+ <div class="history-item"><i class="ph ph-chat-circle-text"></i> Philosophy</div>
417
+ </div>
418
+ </aside>
419
+
420
+ <!-- Main Chat -->
421
+ <main class="main-chat">
422
+ <div class="chat-container" id="chat-container">
423
+ <!-- Initial Greeting -->
424
+ <div class="message ai">
425
+ <div class="avatar"><i class="ph ph-brain"></i></div>
426
+ <div class="bubble">
427
+ System initialized. I am running locally on your machine. I can generate text or create images based on your prompts. What would you like to create today?
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Input Area -->
433
+ <div class="input-area-wrapper">
434
+ <div class="input-container">
435
+ <!-- Mode Toggle -->
436
+ <div class="mode-toggle" id="mode-toggle" onclick="toggleMode()">
437
+ <label class="switch">
438
+ <input type="checkbox" id="image-mode-check">
439
+ <span class="slider"></span>
440
+ </label>
441
+ <span>Image Generation Mode</span>
442
+ </div>
443
+
444
+ <!-- Text Input -->
445
+ <div class="text-input-row">
446
+ <textarea id="user-input" placeholder="Type a message..." onkeydown="handleEnter(event)"></textarea>
447
+ <button class="action-btn send" onclick="sendMessage()">
448
+ <i class="ph ph-paper-plane-right"></i>
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </main>
454
+
455
+ <script>
456
+ let isImageMode = false;
457
+ const chatContainer = document.getElementById('chat-container');
458
+ const userInput = document.getElementById('user-input');
459
+ const modeToggle = document.getElementById('mode-toggle');
460
+ const imageCheck = document.getElementById('image-mode-check');
461
+
462
+ // Sidebar Toggle
463
+ function toggleSidebar() {
464
+ document.getElementById('sidebar').classList.toggle('open');
465
+ }
466
+
467
+ // Toggle Mode
468
+ function toggleMode() {
469
+ isImageMode = !isImageMode;
470
+ imageCheck.checked = isImageMode;
471
+
472
+ if(isImageMode) {
473
+ modeToggle.classList.add('active');
474
+ userInput.placeholder = "Describe the image you want to generate...";
475
+ } else {
476
+ modeToggle.classList.remove('active');
477
+ userInput.placeholder = "Type a message...";
478
+ }
479
+ }
480
+
481
+ // Handle Enter Key
482
+ function handleEnter(e) {
483
+ if(e.key === 'Enter' && !e.shiftKey) {
484
+ e.preventDefault();
485
+ sendMessage();
486
+ }
487
+ }
488
+
489
+ // Send Message Logic
490
+ function sendMessage() {
491
+ const text = userInput.value.trim();
492
+ if(!text) return;
493
+
494
+ // 1. Add User Message
495
+ addMessage(text, 'user');
496
+ userInput.value = '';
497
+
498
+ // 2. Show Loading State
499
+ const loadingId = addLoadingIndicator();
500
+
501
+ // 3. Simulate AI Delay and Response
502
+ setTimeout(() => {
503
+ removeLoadingIndicator(loadingId);
504
+
505
+ if (isImageMode) {
506
+ generateMockImage(text);
507
+ } else {
508
+ generateMockText(text);
509
+ }
510
+ }, 1500 + Math.random() * 1000);
511
+ }
512
+
513
+ // UI: Add Message Bubble
514
+ function addMessage(content, type, isImage = false) {
515
+ const msgDiv = document.createElement('div');
516
+ msgDiv.className = `message ${type}`;
517
+
518
+ if (type === 'ai') {
519
+ msgDiv.innerHTML = `
520
+ <div class="avatar"><i class="ph ph-brain"></i></div>
521
+ <div class="bubble">${content}</div>
522
+ `;
523
+ } else {
524
+ msgDiv.innerHTML = `
525
+ <div class="bubble">${content}</div>
526
+ `;
527
+ }
528
+
529
+ chatContainer.appendChild(msgDiv);
530
+ scrollToBottom();
531
+ }
532
+
533
+ // UI: Add Loading Indicator
534
+ function addLoadingIndicator() {
535
+ const id = 'loading-' + Date.now();
536
+ const msgDiv = document.createElement('div');
537
+ msgDiv.className = 'message ai';
538
+ msgDiv.id = id;
539
+ msgDiv.innerHTML = `
540
+ <div class="avatar"><i class="ph ph-brain"></i></div>
541
+ <div class="bubble">
542
+ <div class="typing-indicator">
543
+ <div class="dot"></div>
544
+ <div class="dot"></div>
545
+ <div class="dot"></div>
546
+ </div>
547
+ </div>
548
+ `;
549
+ chatContainer.appendChild(msgDiv);
550
+ scrollToBottom();
551
+ return id;
552
+ }
553
+
554
+ function removeLoadingIndicator(id) {
555
+ const el = document.getElementById(id);
556
+ if(el) el.remove();
557
+ }
558
+
559
+ function scrollToBottom() {
560
+ chatContainer.scrollTop = chatContainer.scrollHeight;
561
+ }
562
+
563
+ // --- Mock AI Logic ---
564
+
565
+ function generateMockText(text) {
566
+ // Simple heuristic responses
567
+ let response = "I've processed your request locally. ";
568
+ if(text.toLowerCase().includes("hello")) response += "Greetings! The local node is ready.";
569
+ else if(text.toLowerCase().includes("code")) response += "I can certainly help you write code. Please specify the language.";
570
+ else if(text.toLowerCase().includes("image") && !isImageMode) response += "You can switch to Image Mode using the toggle below to generate visuals.";
571
+ else response += "That's an interesting topic. My local GPU is processing the context...";
572
+
573
+ addMessage(response, 'ai');
574
+ }
575
+
576
+ function generateMockImage(prompt) {
577
+ // We use picsum.photos to simulate generation because we can't actually run Stable Diffusion in pure JS without a backend
578
+ // We add a random seed to make it look different every time
579
+ const seed = Math.floor(Math.random() * 1000);
580
+ const imageUrl = `https://picsum.photos/seed/${seed}/600/400`;
581
+
582
+ const msgDiv = document.createElement('div');
583
+ msgDiv.className = 'message ai';
584
+ msgDiv.innerHTML = `
585
+ <div class="avatar"><i class="ph ph-brain"></i></div>
586
+ <div class="bubble">
587
+ <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px;">Generated locally based on: "${prompt}"</div>
588
+ <div class="generated-image-container">
589
+ <img src="${imageUrl}" alt="Generated Image" loading="lazy">
590
+ </div>
591
+ <div style="margin-top: 8px; font-size: 0.8rem; display: flex; gap: 10px;">
592
+ <span><i class="ph ph-download-simple"></i> Save</span>
593
+ <span><i class="ph ph-share-network"></i> Share</span>
594
+ </div>
595
+ </div>
596
+ `;
597
+ chatContainer.appendChild(msgDiv);
598
+ scrollToBottom();
599
+ }
600
+ </script>
601
+ </body>
602
+ </html>