Hugging Face's logo

Spaces:
HI7RAI
/
anycoder-c0dd29b1
Running

App Files Community
HI7RAI commited on
Commit
f13315a
·
verified ·
1 Parent(s): bcc1c40

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +696 -19
index.html CHANGED
@@ -1,19 +1,696 @@
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>GGFU Model Chat Interface</title>
7
+ <style>
8
+ /* --- CSS Variables & Reset --- */
9
+ :root {
10
+ --bg-body: #343541;
11
+ --bg-sidebar: #202123;
12
+ --bg-input: #40414f;
13
+ --text-primary: #ececf1;
14
+ --text-secondary: #c5c5d2;
15
+ --accent-color: #10a37f;
16
+ --accent-hover: #1a7f64;
17
+ --border-color: #4d4d4f;
18
+ --user-bubble: #343541;
19
+ --bot-bubble: #444654;
20
+ --shadow: 0 0 10px rgba(0,0,0,0.1);
21
+ --font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
22
+ --transition: all 0.3s ease;
23
+ }
24
+
25
+ [data-theme="light"] {
26
+ --bg-body: #ffffff;
27
+ --bg-sidebar: #f7f7f8;
28
+ --bg-input: #ffffff;
29
+ --text-primary: #374151;
30
+ --text-secondary: #6b7280;
31
+ --accent-color: #10a37f;
32
+ --accent-hover: #0d8a6a;
33
+ --border-color: #e5e7eb;
34
+ --user-bubble: #ffffff;
35
+ --bot-bubble: #f7f7f8;
36
+ }
37
+
38
+ * {
39
+ box-sizing: border-box;
40
+ margin: 0;
41
+ padding: 0;
42
+ }
43
+
44
+ body {
45
+ font-family: var(--font-family);
46
+ background-color: var(--bg-body);
47
+ color: var(--text-primary);
48
+ height: 100vh;
49
+ display: flex;
50
+ overflow: hidden;
51
+ font-size: 16px;
52
+ line-height: 1.5;
53
+ }
54
+
55
+ /* --- Layout --- */
56
+ .app-container {
57
+ display: flex;
58
+ width: 100%;
59
+ height: 100%;
60
+ position: relative;
61
+ }
62
+
63
+ /* --- Sidebar --- */
64
+ .sidebar {
65
+ width: 260px;
66
+ background-color: var(--bg-sidebar);
67
+ display: flex;
68
+ flex-direction: column;
69
+ padding: 10px;
70
+ transition: transform 0.3s ease;
71
+ z-index: 100;
72
+ border-right: 1px solid var(--border-color);
73
+ }
74
+
75
+ .new-chat-btn {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 10px;
79
+ padding: 12px;
80
+ border: 1px solid var(--border-color);
81
+ border-radius: 5px;
82
+ background: transparent;
83
+ color: var(--text-primary);
84
+ cursor: pointer;
85
+ transition: var(--transition);
86
+ text-align: left;
87
+ font-size: 0.9rem;
88
+ margin-bottom: 20px;
89
+ }
90
+
91
+ .new-chat-btn:hover {
92
+ background-color: rgba(255, 255, 255, 0.05);
93
+ }
94
+
95
+ .history-list {
96
+ flex: 1;
97
+ overflow-y: auto;
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 5px;
101
+ }
102
+
103
+ .history-item {
104
+ padding: 10px;
105
+ border-radius: 5px;
106
+ cursor: pointer;
107
+ color: var(--text-secondary);
108
+ font-size: 0.9rem;
109
+ white-space: nowrap;
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 10px;
115
+ }
116
+
117
+ .history-item:hover {
118
+ background-color: rgba(255, 255, 255, 0.05);
119
+ }
120
+
121
+ .sidebar-footer {
122
+ border-top: 1px solid var(--border-color);
123
+ padding-top: 10px;
124
+ margin-top: 10px;
125
+ }
126
+
127
+ .menu-item {
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 10px;
131
+ padding: 10px;
132
+ cursor: pointer;
133
+ border-radius: 5px;
134
+ color: var(--text-primary);
135
+ font-size: 0.9rem;
136
+ }
137
+
138
+ .menu-item:hover {
139
+ background-color: rgba(255, 255, 255, 0.05);
140
+ }
141
+
142
+ /* --- Main Chat Area --- */
143
+ .main-content {
144
+ flex: 1;
145
+ display: flex;
146
+ flex-direction: column;
147
+ position: relative;
148
+ background-color: var(--bg-body);
149
+ }
150
+
151
+ .header {
152
+ padding: 10px 20px;
153
+ display: flex;
154
+ justify-content: space-between;
155
+ align-items: center;
156
+ border-bottom: 1px solid var(--border-color);
157
+ background-color: var(--bg-body);
158
+ }
159
+
160
+ .model-selector {
161
+ font-weight: 600;
162
+ display: flex;
163
+ align-items: center;
164
+ gap: 5px;
165
+ cursor: pointer;
166
+ padding: 5px 10px;
167
+ border-radius: 5px;
168
+ }
169
+
170
+ .model-selector:hover {
171
+ background-color: rgba(0,0,0,0.05);
172
+ }
173
+
174
+ .mobile-menu-btn {
175
+ display: none;
176
+ background: none;
177
+ border: none;
178
+ color: var(--text-primary);
179
+ cursor: pointer;
180
+ }
181
+
182
+ .anycoder-link {
183
+ font-size: 0.8rem;
184
+ color: var(--text-secondary);
185
+ text-decoration: none;
186
+ transition: color 0.2s;
187
+ }
188
+
189
+ .anycoder-link:hover {
190
+ color: var(--accent-color);
191
+ }
192
+
193
+ .chat-container {
194
+ flex: 1;
195
+ overflow-y: auto;
196
+ padding-bottom: 120px; /* Space for input */
197
+ scroll-behavior: smooth;
198
+ }
199
+
200
+ /* --- Messages --- */
201
+ .message-row {
202
+ display: flex;
203
+ padding: 24px 0;
204
+ border-bottom: 1px solid rgba(0,0,0,0.05);
205
+ width: 100%;
206
+ }
207
+
208
+ .message-row.bot {
209
+ background-color: var(--bot-bubble);
210
+ }
211
+
212
+ .message-content-wrapper {
213
+ display: flex;
214
+ gap: 20px;
215
+ max-width: 800px;
216
+ margin: 0 auto;
217
+ width: 100%;
218
+ padding: 0 20px;
219
+ }
220
+
221
+ .avatar {
222
+ width: 30px;
223
+ height: 30px;
224
+ border-radius: 2px;
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: center;
228
+ flex-shrink: 0;
229
+ }
230
+
231
+ .avatar.user {
232
+ background-color: #5436DA;
233
+ }
234
+
235
+ .avatar.bot {
236
+ background-color: var(--accent-color);
237
+ }
238
+
239
+ .message-text {
240
+ flex: 1;
241
+ font-size: 1rem;
242
+ line-height: 1.6;
243
+ word-wrap: break-word;
244
+ }
245
+
246
+ .message-text p {
247
+ margin-bottom: 10px;
248
+ }
249
+
250
+ .message-text p:last-child {
251
+ margin-bottom: 0;
252
+ }
253
+
254
+ /* Code Block Styling */
255
+ pre {
256
+ background-color: #000;
257
+ color: #fff;
258
+ padding: 15px;
259
+ border-radius: 5px;
260
+ overflow-x: auto;
261
+ margin: 10px 0;
262
+ font-family: 'Courier New', Courier, monospace;
263
+ font-size: 0.9rem;
264
+ }
265
+
266
+ code {
267
+ font-family: 'Courier New', Courier, monospace;
268
+ background-color: rgba(0,0,0,0.1);
269
+ padding: 2px 4px;
270
+ border-radius: 3px;
271
+ }
272
+
273
+ pre code {
274
+ background-color: transparent;
275
+ padding: 0;
276
+ }
277
+
278
+ /* --- Input Area --- */
279
+ .input-container {
280
+ position: absolute;
281
+ bottom: 0;
282
+ left: 0;
283
+ width: 100%;
284
+ background-image: linear-gradient(180deg, rgba(53,53,65,0), var(--bg-body) 20%);
285
+ padding: 20px;
286
+ display: flex;
287
+ justify-content: center;
288
+ }
289
+
290
+ .input-box-wrapper {
291
+ position: relative;
292
+ width: 100%;
293
+ max-width: 800px;
294
+ background-color: var(--bg-input);
295
+ border: 1px solid var(--border-color);
296
+ border-radius: 12px;
297
+ box-shadow: var(--shadow);
298
+ display: flex;
299
+ flex-direction: column;
300
+ }
301
+
302
+ textarea {
303
+ width: 100%;
304
+ background: transparent;
305
+ border: none;
306
+ color: var(--text-primary);
307
+ font-family: inherit;
308
+ font-size: 1rem;
309
+ padding: 12px 45px 12px 15px; /* Right padding for button */
310
+ resize: none;
311
+ max-height: 200px;
312
+ outline: none;
313
+ overflow-y: hidden;
314
+ border-radius: 12px;
315
+ }
316
+
317
+ .send-btn {
318
+ position: absolute;
319
+ bottom: 8px;
320
+ right: 8px;
321
+ background-color: transparent;
322
+ border: none;
323
+ color: var(--text-secondary);
324
+ padding: 5px;
325
+ border-radius: 5px;
326
+ cursor: pointer;
327
+ transition: var(--transition);
328
+ }
329
+
330
+ .send-btn:hover {
331
+ background-color: var(--bg-body);
332
+ color: var(--accent-color);
333
+ }
334
+
335
+ .send-btn.active {
336
+ color: var(--accent-color);
337
+ }
338
+
339
+ .disclaimer {
340
+ text-align: center;
341
+ font-size: 0.75rem;
342
+ color: var(--text-secondary);
343
+ margin-top: 10px;
344
+ opacity: 0.7;
345
+ }
346
+
347
+ /* --- Typing Indicator --- */
348
+ .typing-indicator {
349
+ display: flex;
350
+ align-items: center;
351
+ gap: 5px;
352
+ padding: 10px 0;
353
+ }
354
+
355
+ .dot {
356
+ width: 8px;
357
+ height: 8px;
358
+ background-color: var(--text-secondary);
359
+ border-radius: 50%;
360
+ animation: bounce 1.4s infinite ease-in-out both;
361
+ }
362
+
363
+ .dot:nth-child(1) { animation-delay: -0.32s; }
364
+ .dot:nth-child(2) { animation-delay: -0.16s; }
365
+
366
+ @keyframes bounce {
367
+ 0%, 80%, 100% { transform: scale(0); }
368
+ 40% { transform: scale(1); }
369
+ }
370
+
371
+ /* --- Responsive Design --- */
372
+ @media (max-width: 768px) {
373
+ .sidebar {
374
+ position: absolute;
375
+ height: 100%;
376
+ transform: translateX(-100%);
377
+ box-shadow: 2px 0 10px rgba(0,0,0,0.5);
378
+ }
379
+
380
+ .sidebar.open {
381
+ transform: translateX(0);
382
+ }
383
+
384
+ .mobile-menu-btn {
385
+ display: block;
386
+ }
387
+
388
+ .message-content-wrapper {
389
+ padding: 0 10px;
390
+ gap: 10px;
391
+ }
392
+ }
393
+
394
+ /* Icons */
395
+ svg {
396
+ width: 20px;
397
+ height: 20px;
398
+ fill: currentColor;
399
+ }
400
+ </style>
401
+ </head>
402
+ <body>
403
+
404
+ <div class="app-container">
405
+ <!-- Sidebar -->
406
+ <aside class="sidebar" id="sidebar">
407
+ <button class="new-chat-btn" onclick="startNewChat()">
408
+ <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
409
+ New chat
410
+ </button>
411
+
412
+ <div class="history-list" id="historyList">
413
+ <!-- History items will be injected here -->
414
+ <div class="history-item">
415
+ <svg viewBox="0 0 24 24" style="margin-right: 5px;"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>
416
+ Previous Conversation 1
417
+ </div>
418
+ <div class="history-item">
419
+ <svg viewBox="0 0 24 24" style="margin-right: 5px;"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>
420
+ GGFU Code Generation
421
+ </div>
422
+ </div>
423
+
424
+ <div class="sidebar-footer">
425
+ <div class="menu-item" onclick="clearChat()">
426
+ <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
427
+ Clear conversations
428
+ </div>
429
+ <div class="menu-item" onclick="toggleTheme()">
430
+ <svg viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
431
+ <span id="themeText">Light mode</span>
432
+ </div>
433
+ </div>
434
+ </aside>
435
+
436
+ <!-- Main Content -->
437
+ <main class="main-content">
438
+ <header class="header">
439
+ <button class="mobile-menu-btn" onclick="toggleSidebar()">
440
+ <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
441
+ </button>
442
+ <div class="model-selector">
443
+ GGFU-4 <span style="font-size: 0.8em; opacity: 0.7;">▼</span>
444
+ </div>
445
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
446
+ Built with anycoder
447
+ </a>
448
+ </header>
449
+
450
+ <div class="chat-container" id="chatContainer">
451
+ <!-- Welcome Message -->
452
+ <div class="message-row bot">
453
+ <div class="message-content-wrapper">
454
+ <div class="avatar bot">
455
+ <svg viewBox="0 0 24 24" style="fill: white;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
456
+ </div>
457
+ <div class="message-text">
458
+ <p>Hello! I am GGFU, a simulated AI model. How can I help you today?</p>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="input-container">
465
+ <div class="input-box-wrapper">
466
+ <textarea id="userInput" rows="1" placeholder="Send a message..." oninput="autoResize(this)" onkeydown="handleEnter(event)"></textarea>
467
+ <button class="send-btn" id="sendBtn" onclick="sendMessage()">
468
+ <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
469
+ </button>
470
+ </div>
471
+ <div class="disclaimer">
472
+ GGFU may produce inaccurate information about people, places, or facts.
473
+ </div>
474
+ </div>
475
+ </main>
476
+ </div>
477
+
478
+ <script>
479
+ /* --- State & Configuration --- */
480
+ const chatContainer = document.getElementById('chatContainer');
481
+ const userInput = document.getElementById('userInput');
482
+ const sendBtn = document.getElementById('sendBtn');
483
+ const sidebar = document.getElementById('sidebar');
484
+
485
+ let isGenerating = false;
486
+ let isDarkMode = true;
487
+
488
+ /* --- Event Listeners --- */
489
+ userInput.addEventListener('input', () => {
490
+ sendBtn.classList.toggle('active', userInput.value.trim().length > 0);
491
+ });
492
+
493
+ /* --- Core Functions --- */
494
+
495
+ function autoResize(textarea) {
496
+ textarea.style.height = 'auto';
497
+ textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
498
+ }
499
+
500
+ function handleEnter(e) {
501
+ if (e.key === 'Enter' && !e.shiftKey) {
502
+ e.preventDefault();
503
+ sendMessage();
504
+ }
505
+ }
506
+
507
+ function toggleSidebar() {
508
+ sidebar.classList.toggle('open');
509
+ }
510
+
511
+ function toggleTheme() {
512
+ isDarkMode = !isDarkMode;
513
+ document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
514
+ document.getElementById('themeText').textContent = isDarkMode ? 'Light mode' : 'Dark mode';
515
+ }
516
+
517
+ function scrollToBottom() {
518
+ chatContainer.scrollTop = chatContainer.scrollHeight;
519
+ }
520
+
521
+ function startNewChat() {
522
+ // Remove all messages except the first welcome message (simplified for demo)
523
+ // In a real app, this would reset state and save current chat to history
524
+ const messages = document.querySelectorAll('.message-row');
525
+ messages.forEach((msg, index) => {
526
+ if (index > 0) msg.remove();
527
+ });
528
+ if (window.innerWidth <= 768) toggleSidebar();
529
+ }
530
+
531
+ function clearChat() {
532
+ const messages = document.querySelectorAll('.message-row');
533
+ messages.forEach((msg, index) => {
534
+ msg.remove();
535
+ });
536
+ // Re-add welcome message
537
+ const welcomeHTML = `
538
+ <div class="message-row bot">
539
+ <div class="message-content-wrapper">
540
+ <div class="avatar bot">
541
+ <svg viewBox="0 0 24 24" style="fill: white;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
542
+ </div>
543
+ <div class="message-text">
544
+ <p>Chat cleared. Ready for a new topic!</p>
545
+ </div>
546
+ </div>
547
+ </div>`;
548
+ chatContainer.innerHTML = welcomeHTML;
549
+ if (window.innerWidth <= 768) toggleSidebar();
550
+ }
551
+
552
+ /* --- Message Handling --- */
553
+
554
+ function appendMessage(role, text) {
555
+ const row = document.createElement('div');
556
+ row.className = `message-row ${role}`;
557
+
558
+ const avatarSVG = role === 'user'
559
+ ? '<svg viewBox="0 0 24 24" style="fill: white;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
560
+ : '<svg viewBox="0 0 24 24" style="fill: white;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>';
561
+
562
+ row.innerHTML = `
563
+ <div class="message-content-wrapper">
564
+ <div class="avatar ${role}">${avatarSVG}</div>
565
+ <div class="message-text">${role === 'user' ? escapeHtml(text) : ''}</div>
566
+ </div>
567
+ `;
568
+
569
+ chatContainer.appendChild(row);
570
+ scrollToBottom();
571
+ return row.querySelector('.message-text');
572
+ }
573
+
574
+ function escapeHtml(text) {
575
+ const div = document.createElement('div');
576
+ div.textContent = text;
577
+ return div.innerHTML;
578
+ }
579
+
580
+ /* --- Simulation Logic --- */
581
+
582
+ function sendMessage() {
583
+ const text = userInput.value.trim();
584
+ if (!text || isGenerating) return;
585
+
586
+ // Add User Message
587
+ appendMessage('user', text);
588
+ userInput.value = '';
589
+ userInput.style.height = 'auto';
590
+ sendBtn.classList.remove('active');
591
+
592
+ // Simulate Bot State
593
+ isGenerating = true;
594
+ const loadingRow = document.createElement('div');
595
+ loadingRow.className = 'message-row bot';
596
+ loadingRow.innerHTML = `
597
+ <div class="message-content-wrapper">
598
+ <div class="avatar bot">
599
+ <svg viewBox="0 0 24 24" style="fill: white;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
600
+ </div>
601
+ <div class="message-text">
602
+ <div class="typing-indicator">
603
+ <div class="dot"></div>
604
+ <div class="dot"></div>
605
+ <div class="dot"></div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ `;
610
+ chatContainer.appendChild(loadingRow);
611
+ scrollToBottom();
612
+
613
+ // Simulate Network Delay & Response Generation
614
+ setTimeout(() => {
615
+ loadingRow.remove();
616
+ const messageElement = appendMessage('bot', '');
617
+ const responseText = generateSimulatedResponse(text);
618
+ typeWriter(responseText, messageElement);
619
+ }, 1000 + Math.random() * 1000);
620
+ }
621
+
622
+ function generateSimulatedResponse(input) {
623
+ const lowerInput = input.toLowerCase();
624
+
625
+ // Simple heuristic logic for simulation
626
+ if (lowerInput.includes('hello') || lowerInput.includes('hi')) {
627
+ return "Hello! I'm the GGFU simulation model. I'm ready to assist you with coding, writing, or analysis.";
628
+ }
629
+ if (lowerInput.includes('code') || lowerInput.includes('function') || lowerInput.includes('html')) {
630
+ return "Here is a simple example of a JavaScript function you might find useful:\n\n```javascript\nfunction greet(name) {\n return `Hello, ${name}!`;\n}\n\nconsole.log(greet('User'));\n```\n\nLet me know if you need any specific logic implemented!";
631
+ }
632
+ if (lowerInput.includes('removr')) {
633
+ return "The Removr simulation is active. I am processing your request to simulate real-time interactions as per the GGFU model parameters.";
634
+ }
635
+ if (lowerInput.includes('who are you')) {
636
+ return "I am a simulated AI interface designed to demonstrate advanced CSS and JavaScript capabilities in a single HTML file.";
637
+ }
638
+
639
+ // Generic lorem ipsum generator for other queries
640
+ return "That's an interesting point. As a simulated model, I can tell you that modern web development relies heavily on three pillars: **HTML** for structure, **CSS** for styling, and **JavaScript** for interactivity. \n\nIs there anything specific about these technologies you'd like to explore?";
641
+ }
642
+
643
+ function typeWriter(text, element) {
644
+ let index = 0;
645
+ // Simple parsing for code blocks to render them correctly progressively
646
+ // For a real simulation, we'd parse markdown tokens, but here we just stream text
647
+ // and do a post-process or simple check.
648
+
649
+ // Check if response contains code block
650
+ const hasCode = text.includes('```');
651
+
652
+ function type() {
653
+ if (index < text.length) {
654
+ // Handle newline
655
+ if (text.charAt(index) === '\n') {
656
+ element.innerHTML += '<br>';
657
+ } else {
658
+ element.innerHTML += text.charAt(index);
659
+ }
660
+
661
+ index++;
662
+ scrollToBottom();
663
+
664
+ // Random typing speed variation
665
+ setTimeout(type, 10 + Math.random() * 20);
666
+ } else {
667
+ // Finished typing
668
+ if (hasCode) {
669
+ // Apply basic formatting after typing is done for simplicity in this demo
670
+ formatMarkdown(element);
671
+ }
672
+ isGenerating = false;
673
+ }
674
+ }
675
+ type();
676
+ }
677
+
678
+ function formatMarkdown(element) {
679
+ let html = element.innerHTML;
680
+
681
+ // Replace ```code``` with <pre><code>code</code></pre>
682
+ // Note: This is a very basic regex for demonstration
683
+ html = html.replace(/```(.*?)\n([\s\S]*?)```/g, function(match, lang, code) {
684
+ return `<pre><code>${code.trim()}</code></pre>`;
685
+ });
686
+
687
+ // Bold **text**
688
+ html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
689
+
690
+ element.innerHTML = html;
691
+ }
692
+
693
+ </script>
694
+
695
+ </body>
696
+ </html>