Hugging Face's logo

Spaces:
levulinh
/
chat-assistant
Running

App Files Community
levulinh commited on
Commit
2cced2e
·
verified ·
1 Parent(s): 08f715c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +861 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat Assistant
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: indigo
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: chat-assistant
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,861 @@
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>AI Chat Assistant</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
+ <style>
10
+ :root {
11
+ --primary-color: #5438dc;
12
+ --secondary-color: #6c5ce7;
13
+ --text-color: #2d3436;
14
+ --light-color: #f5f6fa;
15
+ --dark-color: #2d3436;
16
+ --success-color: #00b894;
17
+ --warning-color: #fdcb6e;
18
+ --error-color: #d63031;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ body {
29
+ background-color: #f9f9f9;
30
+ color: var(--text-color);
31
+ line-height: 1.6;
32
+ display: flex;
33
+ flex-direction: column;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
+ padding: 20px;
41
+ display: flex;
42
+ flex-direction: column;
43
+ flex-grow: 1;
44
+ }
45
+
46
+ header {
47
+ padding: 20px 0;
48
+ text-align: center;
49
+ border-bottom: 1px solid #eee;
50
+ margin-bottom: 20px;
51
+ }
52
+
53
+ h1 {
54
+ color: var(--primary-color);
55
+ font-size: 2.5rem;
56
+ margin-bottom: 10px;
57
+ }
58
+
59
+ .subtitle {
60
+ color: var(--dark-color);
61
+ opacity: 0.8;
62
+ font-size: 1.1rem;
63
+ }
64
+
65
+ .chat-container {
66
+ border-radius: 12px;
67
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
68
+ background-color: white;
69
+ display: flex;
70
+ flex-direction: column;
71
+ flex-grow: 1;
72
+ overflow: hidden;
73
+ position: relative;
74
+ }
75
+
76
+ .chat-header {
77
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
78
+ color: white;
79
+ padding: 15px 20px;
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 10px;
83
+ }
84
+
85
+ .chat-header i {
86
+ font-size: 1.5rem;
87
+ }
88
+
89
+ .chat-header h2 {
90
+ font-size: 1.3rem;
91
+ font-weight: 500;
92
+ }
93
+
94
+ .chat-messages {
95
+ padding: 20px;
96
+ overflow-y: auto;
97
+ flex-grow: 1;
98
+ max-height: 70vh;
99
+ display: flex;
100
+ flex-direction: column;
101
+ gap: 20px;
102
+ }
103
+
104
+ .message {
105
+ max-width: 80%;
106
+ padding: 12px 16px;
107
+ border-radius: 12px;
108
+ line-height: 1.5;
109
+ position: relative;
110
+ animation: fadeIn 0.3s ease-out;
111
+ }
112
+
113
+ @keyframes fadeIn {
114
+ from { opacity: 0; transform: translateY(10px); }
115
+ to { opacity: 1; transform: translateY(0); }
116
+ }
117
+
118
+ .user-message {
119
+ background-color: var(--primary-color);
120
+ color: white;
121
+ align-self: flex-end;
122
+ border-bottom-right-radius: 4px;
123
+ }
124
+
125
+ .ai-message {
126
+ background-color: #f1f3fe;
127
+ color: var(--text-color);
128
+ align-self: flex-start;
129
+ border-bottom-left-radius: 4px;
130
+ }
131
+
132
+ .message-info {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: 8px;
136
+ margin-bottom: 5px;
137
+ font-size: 0.85rem;
138
+ opacity: 0.7;
139
+ }
140
+
141
+ .user-message .message-info {
142
+ color: rgba(255, 255, 255, 0.8);
143
+ justify-content: flex-end;
144
+ }
145
+
146
+ .ai-message .message-info {
147
+ color: rgba(45, 52, 54, 0.7);
148
+ }
149
+
150
+ .typing-indicator {
151
+ display: flex;
152
+ padding: 12px 16px;
153
+ background-color: #f1f3fe;
154
+ border-radius: 12px;
155
+ align-self: flex-start;
156
+ margin-bottom: 20px;
157
+ border-bottom-left-radius: 4px;
158
+ }
159
+
160
+ .typing-dot {
161
+ width: 8px;
162
+ height: 8px;
163
+ background-color: var(--primary-color);
164
+ border-radius: 50%;
165
+ margin: 0 2px;
166
+ animation: typingAnimation 1.4s infinite ease-in-out;
167
+ }
168
+
169
+ .typing-dot:nth-child(1) {
170
+ animation-delay: 0s;
171
+ }
172
+
173
+ .typing-dot:nth-child(2) {
174
+ animation-delay: 0.2s;
175
+ }
176
+
177
+ .typing-dot:nth-child(3) {
178
+ animation-delay: 0.4s;
179
+ }
180
+
181
+ @keyframes typingAnimation {
182
+ 0%, 60%, 100% {
183
+ transform: translateY(0);
184
+ }
185
+ 30% {
186
+ transform: translateY(-5px);
187
+ }
188
+ }
189
+
190
+ .chat-input-container {
191
+ padding: 15px;
192
+ background-color: white;
193
+ border-top: 1px solid #eee;
194
+ display: flex;
195
+ gap: 10px;
196
+ position: relative;
197
+ }
198
+
199
+ .chat-textarea {
200
+ flex-grow: 1;
201
+ border: 1px solid #ddd;
202
+ border-radius: 24px;
203
+ padding: 12px 20px;
204
+ resize: none;
205
+ font-size: 1rem;
206
+ outline: none;
207
+ transition: border 0.3s;
208
+ max-height: 150px;
209
+ min-height: 50px;
210
+ }
211
+
212
+ .chat-textarea:focus {
213
+ border-color: var(--primary-color);
214
+ box-shadow: 0 0 0 2px rgba(84, 56, 220, 0.2);
215
+ }
216
+
217
+ .send-button {
218
+ background-color: var(--primary-color);
219
+ color: white;
220
+ border: none;
221
+ border-radius: 50%;
222
+ width: 50px;
223
+ height: 50px;
224
+ display: flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ cursor: pointer;
228
+ transition: background-color 0.3s, transform 0.2s;
229
+ }
230
+
231
+ .send-button:hover {
232
+ background-color: var(--secondary-color);
233
+ }
234
+
235
+ .send-button:active {
236
+ transform: scale(0.95);
237
+ }
238
+
239
+ .send-button i {
240
+ font-size: 1.2rem;
241
+ }
242
+
243
+ footer {
244
+ text-align: center;
245
+ padding: 20px;
246
+ color: var(--dark-color);
247
+ opacity: 0.7;
248
+ font-size: 0.9rem;
249
+ }
250
+
251
+ .api-key-container {
252
+ margin-bottom: 20px;
253
+ padding: 15px;
254
+ background-color: white;
255
+ border-radius: 8px;
256
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
257
+ display: flex;
258
+ gap: 10px;
259
+ }
260
+
261
+ .api-key-input {
262
+ flex-grow: 1;
263
+ border: 1px solid #ddd;
264
+ border-radius: 6px;
265
+ padding: 10px 15px;
266
+ font-size: 1rem;
267
+ outline: none;
268
+ }
269
+
270
+ .api-key-input:focus {
271
+ border-color: var(--primary-color);
272
+ }
273
+
274
+ .save-key-button {
275
+ background-color: var(--primary-color);
276
+ color: white;
277
+ border: none;
278
+ border-radius: 6px;
279
+ padding: 10px 20px;
280
+ cursor: pointer;
281
+ transition: background-color 0.3s;
282
+ }
283
+
284
+ .save-key-button:hover {
285
+ background-color: var(--secondary-color);
286
+ }
287
+
288
+ .model-selector {
289
+ margin-bottom: 20px;
290
+ padding: 10px 15px;
291
+ border-radius: 6px;
292
+ background-color: white;
293
+ border: 1px solid #ddd;
294
+ outline: none;
295
+ width: 100%;
296
+ max-width: 300px;
297
+ font-size: 1rem;
298
+ }
299
+
300
+ .model-selector:focus {
301
+ border-color: var(--primary-color);
302
+ }
303
+
304
+ .settings-panel {
305
+ display: flex;
306
+ flex-wrap: wrap;
307
+ gap: 15px;
308
+ margin-bottom: 20px;
309
+ }
310
+
311
+ .setting-group {
312
+ background-color: white;
313
+ padding: 15px;
314
+ border-radius: 8px;
315
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
316
+ flex-grow: 1;
317
+ min-width: 200px;
318
+ }
319
+
320
+ .setting-group h3 {
321
+ margin-bottom: 10px;
322
+ color: var(--primary-color);
323
+ font-size: 1rem;
324
+ }
325
+
326
+ .slider-container {
327
+ width: 100%;
328
+ }
329
+
330
+ .slider-container label {
331
+ display: block;
332
+ margin-bottom: 5px;
333
+ font-size: 0.9rem;
334
+ color: var(--text-color);
335
+ }
336
+
337
+ .slider-container input[type="range"] {
338
+ width: 100%;
339
+ -webkit-appearance: none;
340
+ height: 6px;
341
+ border-radius: 3px;
342
+ background: #ddd;
343
+ outline: none;
344
+ }
345
+
346
+ .slider-container input[type="range"]::-webkit-slider-thumb {
347
+ -webkit-appearance: none;
348
+ appearance: none;
349
+ width: 18px;
350
+ height: 18px;
351
+ border-radius: 50%;
352
+ background: var(--primary-color);
353
+ cursor: pointer;
354
+ transition: background .15s ease-in-out;
355
+ }
356
+
357
+ .slider-value {
358
+ text-align: right;
359
+ font-size: 0.85rem;
360
+ color: var(--dark-color);
361
+ opacity: 0.7;
362
+ }
363
+
364
+ .clear-chat-button {
365
+ background-color: #f5f6fa;
366
+ color: var(--error-color);
367
+ border: 1px solid var(--error-color);
368
+ border-radius: 6px;
369
+ padding: 10px 20px;
370
+ cursor: pointer;
371
+ transition: all 0.3s;
372
+ margin-left: auto;
373
+ display: block;
374
+ }
375
+
376
+ .clear-chat-button:hover {
377
+ background-color: var(--error-color);
378
+ color: white;
379
+ }
380
+
381
+ /* Markdown styling */
382
+ .message-content {
383
+ overflow-x: auto;
384
+ }
385
+
386
+ .message-content h1,
387
+ .message-content h2,
388
+ .message-content h3,
389
+ .message-content h4,
390
+ .message-content h5,
391
+ .message-content h6 {
392
+ margin-top: 1em;
393
+ margin-bottom: 0.5em;
394
+ font-weight: bold;
395
+ }
396
+
397
+ .message-content h1 {
398
+ font-size: 1.5em;
399
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
400
+ padding-bottom: 0.3em;
401
+ }
402
+
403
+ .message-content h2 {
404
+ font-size: 1.3em;
405
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
406
+ padding-bottom: 0.2em;
407
+ }
408
+
409
+ .message-content h3 {
410
+ font-size: 1.1em;
411
+ }
412
+
413
+ .message-content p {
414
+ margin-bottom: 1em;
415
+ line-height: 1.6;
416
+ }
417
+
418
+ .message-content ul,
419
+ .message-content ol {
420
+ margin-bottom: 1em;
421
+ padding-left: 2em;
422
+ }
423
+
424
+ .message-content ul {
425
+ list-style-type: disc;
426
+ }
427
+
428
+ .message-content ol {
429
+ list-style-type: decimal;
430
+ }
431
+
432
+ .message-content li {
433
+ margin-bottom: 0.5em;
434
+ }
435
+
436
+ .message-content blockquote {
437
+ margin: 1em 0;
438
+ padding: 0 1em;
439
+ border-left: 0.25em solid #dfe2e5;
440
+ color: #6a737d;
441
+ }
442
+
443
+ .message-content pre {
444
+ background-color: #f6f8fa;
445
+ border-radius: 6px;
446
+ padding: 1em;
447
+ overflow: auto;
448
+ margin-bottom: 1em;
449
+ }
450
+
451
+ .message-content code {
452
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
453
+ background-color: rgba(27, 31, 35, 0.05);
454
+ border-radius: 3px;
455
+ padding: 0.2em 0.4em;
456
+ font-size: 0.9em;
457
+ }
458
+
459
+ .message-content pre code {
460
+ background-color: transparent;
461
+ padding: 0;
462
+ border-radius: 0;
463
+ }
464
+
465
+ .message-content table {
466
+ border-collapse: collapse;
467
+ width: 100%;
468
+ margin-bottom: 1em;
469
+ }
470
+
471
+ .message-content th,
472
+ .message-content td {
473
+ border: 1px solid #dfe2e5;
474
+ padding: 6px 13px;
475
+ }
476
+
477
+ .message-content th {
478
+ background-color: #f6f8fa;
479
+ font-weight: bold;
480
+ text-align: left;
481
+ }
482
+
483
+ .message-content tr:nth-child(even) {
484
+ background-color: #f6f8fa;
485
+ }
486
+
487
+ .message-content a {
488
+ color: var(--primary-color);
489
+ text-decoration: none;
490
+ }
491
+
492
+ .message-content a:hover {
493
+ text-decoration: underline;
494
+ }
495
+
496
+ .message-content strong {
497
+ font-weight: bold;
498
+ }
499
+
500
+ .message-content em {
501
+ font-style: italic;
502
+ }
503
+
504
+ .user-message .message-content a {
505
+ color: #b7c2ff;
506
+ }
507
+
508
+ .user-message .message-content a:hover {
509
+ color: #fff;
510
+ }
511
+
512
+ @media (max-width: 768px) {
513
+ .chat-messages {
514
+ padding: 15px;
515
+ }
516
+
517
+ .message {
518
+ max-width: 90%;
519
+ }
520
+
521
+ .api-key-container {
522
+ flex-direction: column;
523
+ }
524
+
525
+ .settings-panel {
526
+ flex-direction: column;
527
+ }
528
+ }
529
+ </style>
530
+ </head>
531
+ <body>
532
+ <div class="container">
533
+ <header>
534
+ <h1>AI Chat Assistant</h1>
535
+ <p class="subtitle">Powered by OpenAI's advanced language models</p>
536
+ </header>
537
+
538
+ <select class="model-selector" id="modelSelector">
539
+ <option value="gpt-4o-mini">GPT-4o-mini</option>
540
+ <option value="gpt-4o">GPT-4o</option>
541
+ </select>
542
+
543
+ <div class="settings-panel">
544
+ <div class="setting-group">
545
+ <h3>Model Settings</h3>
546
+ <div class="slider-container">
547
+ <label for="temperatureSlider">Temperature (Creativity)</label>
548
+ <input type="range" id="temperatureSlider" min="0" max="1" step="0.1" value="0.7">
549
+ <div class="slider-value" id="temperatureValue">0.7</div>
550
+ </div>
551
+ <div class="slider-container">
552
+ <label for="maxTokensSlider">Max Tokens (Response Length)</label>
553
+ <input type="range" id="maxTokensSlider" min="50" max="2000" step="50" value="500">
554
+ <div class="slider-value" id="maxTokensValue">500</div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="api-key-container">
560
+ <input type="password" class="api-key-input" id="apiKeyInput" placeholder="Enter your OpenAI API key">
561
+ <button class="save-key-button" id="saveKeyButton">
562
+ <i class="fas fa-save"></i> Save
563
+ </button>
564
+ </div>
565
+
566
+ <button class="clear-chat-button" id="clearChatButton">
567
+ <i class="fas fa-trash-alt"></i> Clear Chat
568
+ </button>
569
+
570
+ <div class="chat-container">
571
+ <div class="chat-header">
572
+ <i class="fas fa-robot"></i>
573
+ <h2>AI Assistant</h2>
574
+ </div>
575
+ <div class="chat-messages" id="chatMessages">
576
+ <div class="message ai-message">
577
+ <div class="message-info">
578
+ <span><i class="fas fa-robot"></i> AI Assistant</span>
579
+ </div>
580
+ <div class="message-content">
581
+ Hello! I'm your AI assistant. How can I help you today?
582
+ </div>
583
+ </div>
584
+ </div>
585
+ <div class="chat-input-container">
586
+ <textarea class="chat-textarea" id="chatInput" placeholder="Type your message here..." rows="1"></textarea>
587
+ <button class="send-button" id="sendButton">
588
+ <i class="fas fa-paper-plane"></i>
589
+ </button>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <footer>
595
+ <p>AI Chat Assistant &copy; 2023 | Uses OpenAI API to generate responses</p>
596
+ </footer>
597
+
598
+ <script>
599
+ // Configure marked.js
600
+ marked.setOptions({
601
+ breaks: true,
602
+ gfm: true,
603
+ highlight: function(code, lang) {
604
+ return code; // No syntax highlighting but keeps the code block
605
+ }
606
+ });
607
+
608
+ // DOM Elements
609
+ const apiKeyInput = document.getElementById('apiKeyInput');
610
+ const saveKeyButton = document.getElementById('saveKeyButton');
611
+ const chatInput = document.getElementById('chatInput');
612
+ const sendButton = document.getElementById('sendButton');
613
+ const chatMessages = document.getElementById('chatMessages');
614
+ const modelSelector = document.getElementById('modelSelector');
615
+ const temperatureSlider = document.getElementById('temperatureSlider');
616
+ const temperatureValue = document.getElementById('temperatureValue');
617
+ const maxTokensSlider = document.getElementById('maxTokensSlider');
618
+ const maxTokensValue = document.getElementById('maxTokensValue');
619
+ const clearChatButton = document.getElementById('clearChatButton');
620
+
621
+ // Chat history
622
+ let conversationHistory = [
623
+ {
624
+ role: "assistant",
625
+ content: "Hello! I'm your AI assistant. How can I help you today?"
626
+ }
627
+ ];
628
+
629
+ // Load API key from localStorage
630
+ if (localStorage.getItem('openai_api_key')) {
631
+ apiKeyInput.value = localStorage.getItem('openai_api_key');
632
+ }
633
+
634
+ // Load settings from localStorage
635
+ if (localStorage.getItem('model')) {
636
+ modelSelector.value = localStorage.getItem('model');
637
+ }
638
+ if (localStorage.getItem('temperature')) {
639
+ temperatureSlider.value = localStorage.getItem('temperature');
640
+ temperatureValue.textContent = localStorage.getItem('temperature');
641
+ }
642
+ if (localStorage.getItem('max_tokens')) {
643
+ maxTokensSlider.value = localStorage.getItem('max_tokens');
644
+ maxTokensValue.textContent = localStorage.getItem('max_tokens');
645
+ }
646
+
647
+ // Auto-expand textarea as user types
648
+ chatInput.addEventListener('input', () => {
649
+ chatInput.style.height = 'auto';
650
+ chatInput.style.height = (chatInput.scrollHeight) + 'px';
651
+ });
652
+
653
+ // Save API key
654
+ saveKeyButton.addEventListener('click', () => {
655
+ const apiKey = apiKeyInput.value.trim();
656
+ if (!apiKey) {
657
+ alert('Please enter your OpenAI API key');
658
+ return;
659
+ }
660
+ localStorage.setItem('openai_api_key', apiKey);
661
+ showToast('API key saved successfully!', 'success');
662
+ });
663
+
664
+ // Update slider values in real time
665
+ temperatureSlider.addEventListener('input', () => {
666
+ temperatureValue.textContent = temperatureSlider.value;
667
+ localStorage.setItem('temperature', temperatureSlider.value);
668
+ });
669
+
670
+ maxTokensSlider.addEventListener('input', () => {
671
+ maxTokensValue.textContent = maxTokensSlider.value;
672
+ localStorage.setItem('max_tokens', maxTokensSlider.value);
673
+ });
674
+
675
+ modelSelector.addEventListener('change', () => {
676
+ localStorage.setItem('model', modelSelector.value);
677
+ });
678
+
679
+ // Clear chat history
680
+ clearChatButton.addEventListener('click', () => {
681
+ if (confirm('Are you sure you want to clear the chat history?')) {
682
+ conversationHistory = [
683
+ {
684
+ role: "assistant",
685
+ content: "Hello! I'm your AI assistant. How can I help you today?"
686
+ }
687
+ ];
688
+ chatMessages.innerHTML = `
689
+ <div class="message ai-message">
690
+ <div class="message-info">
691
+ <span><i class="fas fa-robot"></i> AI Assistant</span>
692
+ </div>
693
+ <div class="message-content">
694
+ Hello! I'm your AI assistant. How can I help you today?
695
+ </div>
696
+ </div>
697
+ `;
698
+ }
699
+ });
700
+
701
+ // Send message function
702
+ async function sendMessage() {
703
+ const userMessage = chatInput.value.trim();
704
+ if (!userMessage) return;
705
+
706
+ // Check if API key exists
707
+ if (!localStorage.getItem('openai_api_key')) {
708
+ showToast('Please enter your OpenAI API key first', 'error');
709
+ return;
710
+ }
711
+
712
+ // Add user message to chat
713
+ appendMessage('user', userMessage);
714
+ conversationHistory.push({ role: "user", content: userMessage });
715
+
716
+ // Clear input
717
+ chatInput.value = '';
718
+ chatInput.style.height = 'auto';
719
+
720
+ // Show typing indicator
721
+ const typingIndicator = document.createElement('div');
722
+ typingIndicator.className = 'typing-indicator';
723
+ typingIndicator.innerHTML = `
724
+ <div class="typing-dot"></div>
725
+ <div class="typing-dot"></div>
726
+ <div class="typing-dot"></div>
727
+ `;
728
+ chatMessages.appendChild(typingIndicator);
729
+ chatMessages.scrollTop = chatMessages.scrollHeight;
730
+
731
+ try {
732
+ // Call OpenAI API
733
+ const response = await fetch('https://api.openai.com/v1/chat/completions', {
734
+ method: 'POST',
735
+ headers: {
736
+ 'Content-Type': 'application/json',
737
+ 'Authorization': `Bearer ${localStorage.getItem('openai_api_key')}`
738
+ },
739
+ body: JSON.stringify({
740
+ model: modelSelector.value,
741
+ messages: conversationHistory,
742
+ temperature: parseFloat(temperatureSlider.value),
743
+ max_tokens: parseInt(maxTokensSlider.value)
744
+ })
745
+ });
746
+
747
+ // Remove typing indicator
748
+ chatMessages.removeChild(typingIndicator);
749
+
750
+ if (!response.ok) {
751
+ const errorData = await response.json();
752
+ throw new Error(errorData.error?.message || 'Failed to get response from OpenAI');
753
+ }
754
+
755
+ const data = await response.json();
756
+ const aiResponse = data.choices[0].message.content;
757
+
758
+ // Add AI response to chat (rendered as Markdown)
759
+ appendMessage('assistant', aiResponse);
760
+ conversationHistory.push({ role: "assistant", content: aiResponse });
761
+ } catch (error) {
762
+ chatMessages.removeChild(typingIndicator);
763
+ console.error('Error:', error);
764
+ showToast(error.message, 'error');
765
+ appendMessage('assistant', `Sorry, I'm having trouble responding. ${error.message}`);
766
+ }
767
+ }
768
+
769
+ // Append message to chat with Markdown rendering
770
+ function appendMessage(role, content) {
771
+ const messageDiv = document.createElement('div');
772
+ messageDiv.className = `message ${role === 'user' ? 'user-message' : 'ai-message'}`;
773
+
774
+ const icon = role === 'user' ? 'fa-user' : 'fa-robot';
775
+ const name = role === 'user' ? 'You' : 'AI Assistant';
776
+
777
+ messageDiv.innerHTML = `
778
+ <div class="message-info">
779
+ <span><i class="fas ${icon}"></i> ${name}</span>
780
+ </div>
781
+ <div class="message-content">
782
+ ${role === 'assistant' ? marked.parse(content) : escapeHtml(content)}
783
+ </div>
784
+ `;
785
+
786
+ chatMessages.appendChild(messageDiv);
787
+ chatMessages.scrollTop = chatMessages.scrollHeight;
788
+ }
789
+
790
+ // Simple HTML escape function for user messages
791
+ function escapeHtml(unsafe) {
792
+ return unsafe
793
+ .replace(/&/g, "&amp;")
794
+ .replace(/</g, "&lt;")
795
+ .replace(/>/g, "&gt;")
796
+ .replace(/"/g, "&quot;")
797
+ .replace(/'/g, "&#039;");
798
+ }
799
+
800
+ // Show toast notification
801
+ function showToast(message, type) {
802
+ const toast = document.createElement('div');
803
+ toast.className = `toast ${type}`;
804
+ toast.textContent = message;
805
+ document.body.appendChild(toast);
806
+
807
+ setTimeout(() => {
808
+ toast.classList.add('show');
809
+ }, 10);
810
+
811
+ setTimeout(() => {
812
+ toast.classList.remove('show');
813
+ setTimeout(() => {
814
+ document.body.removeChild(toast);
815
+ }, 300);
816
+ }, 3000);
817
+ }
818
+
819
+ // Event listeners for sending messages
820
+ sendButton.addEventListener('click', sendMessage);
821
+ chatInput.addEventListener('keydown', (e) => {
822
+ if (e.key === 'Enter' && !e.shiftKey) {
823
+ e.preventDefault();
824
+ sendMessage();
825
+ }
826
+ });
827
+
828
+ // Add toast styles
829
+ const toastStyles = document.createElement('style');
830
+ toastStyles.textContent = `
831
+ .toast {
832
+ position: fixed;
833
+ bottom: 30px;
834
+ left: 50%;
835
+ transform: translateX(-50%);
836
+ padding: 12px 24px;
837
+ border-radius: 6px;
838
+ color: white;
839
+ font-size: 0.9rem;
840
+ opacity: 0;
841
+ transition: opacity 0.3s ease;
842
+ z-index: 1000;
843
+ }
844
+ .toast.show {
845
+ opacity: 1;
846
+ }
847
+ .toast.success {
848
+ background-color: var(--success-color);
849
+ }
850
+ .toast.error {
851
+ background-color: var(--error-color);
852
+ }
853
+ .toast.warning {
854
+ background-color: var(--warning-color);
855
+ color: var(--dark-color);
856
+ }
857
+ `;
858
+ document.head.appendChild(toastStyles);
859
+ </script>
860
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
861
+ </html>