Chickaboo commited on
Commit
f164992
1 Parent(s): f5ccbba

Update 1index.html

Browse files
Files changed (1) hide show
  1. 1index.html +480 -0
1index.html CHANGED
@@ -0,0 +1,480 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>GPT-4 Chat Interface</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css">
9
+ <style>
10
+ body {
11
+ font-family: 'Roboto', sans-serif;
12
+ background-color: #f3f4f6;
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ display: flex;
17
+ flex-direction: column;
18
+ min-height: 100vh;
19
+ }
20
+ .container {
21
+ flex: 1;
22
+ display: flex;
23
+ flex-direction: column;
24
+ padding: 20px;
25
+ overflow-y: auto;
26
+ scroll-behavior: smooth;
27
+ }
28
+ .message-container {
29
+ display: flex;
30
+ flex-direction: column;
31
+ gap: 20px;
32
+ align-items: flex-start;
33
+ }
34
+ .message {
35
+ max-width: 80%;
36
+ padding: 15px 20px;
37
+ border-radius: 20px;
38
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
39
+ line-height: 1.6;
40
+ word-wrap: break-word;
41
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
42
+ position: relative;
43
+ background: #fff;
44
+ transition: all 0.3s ease-in-out;
45
+ }
46
+ .message:hover {
47
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
48
+ transform: translateY(-3px);
49
+ }
50
+ .message::after {
51
+ content: '';
52
+ position: absolute;
53
+ bottom: -10px;
54
+ left: 20px;
55
+ width: calc(100% - 40px);
56
+ height: 3px;
57
+ background: linear-gradient(to right, #4c51bf, #5a67d8);
58
+ opacity: 0;
59
+ transition: opacity 0.3s ease-in-out;
60
+ }
61
+ .message:hover::after {
62
+ opacity: 1;
63
+ }
64
+ .user-message {
65
+ background-color: #e0f7fa;
66
+ color: #00796b;
67
+ align-self: flex-end;
68
+ border-radius: 20px 20px 0 20px;
69
+ }
70
+ .bot-message {
71
+ background-color: #4c51bf;
72
+ color: #fff;
73
+ align-self: flex-start;
74
+ border-radius: 20px 20px 20px 0;
75
+ }
76
+ @media (max-width: 768px) {
77
+ .message {
78
+ max-width: 90%;
79
+ padding: 12px 15px;
80
+ border-radius: 15px;
81
+ }
82
+ }
83
+ .input-container {
84
+ position: fixed;
85
+ bottom: 40px;
86
+ left: 40px;
87
+ right: 40px;
88
+ background: linear-gradient(135deg, #f8f8f8 0%, #e4e4e4 100%);
89
+ border-radius: 40px;
90
+ padding: 20px;
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 15px;
94
+ box-shadow: 0 60px 120px rgba(0, 0, 0, 0.3);
95
+ transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
96
+ z-index: 1000;
97
+ backdrop-filter: blur(12px);
98
+ border: 2px solid rgba(255, 255, 255, 0.8);
99
+ overflow: hidden;
100
+ opacity: 0.7;
101
+ filter: blur(1px);
102
+ -webkit-filter: blur(1px);
103
+ }
104
+ .input-container:hover {
105
+ box-shadow: 0 100px 200px rgba(0, 0, 0, 0.5);
106
+ transform: translateY(-1px) scale(1.01);
107
+ opacity: 1;
108
+ filter: blur(0px);
109
+ -webkit-filter: blur(0px);
110
+ }
111
+ .input-container>textarea {
112
+ flex: 1;
113
+ border: none;
114
+ border-radius: 20px;
115
+ padding: 15px;
116
+ font-size: 18px;
117
+ font-weight: 700;
118
+ color: #333;
119
+ background-color: transparent;
120
+ transition: all 0.7s ease;
121
+ outline: none;
122
+ box-shadow: none;
123
+ resize: none;
124
+ }
125
+ .input-container>textarea:focus {
126
+ box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.3);
127
+ }
128
+ .input-container>textarea::placeholder {
129
+ color: #666;
130
+ opacity: 1;
131
+ font-weight: 500;
132
+ }
133
+ .input-container::before {
134
+ content: '';
135
+ position: absolute;
136
+ top: -2px;
137
+ right: -2px;
138
+ bottom: -2px;
139
+ left: -2px;
140
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
141
+ border-radius: inherit;
142
+ z-index: -1;
143
+ transition: opacity 0.8s ease, transform 0.8s ease;
144
+ pointer-events: none;
145
+ }
146
+ .input-container:hover::before {
147
+ opacity: 0;
148
+ transform: scale(1.05);
149
+ }
150
+ @keyframes pulse {
151
+ 0%,
152
+ 100% {
153
+ box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.5);
154
+ }
155
+ 50% {
156
+ box-shadow: 0 0 0 6px rgba(0, 168, 255, 0);
157
+ }
158
+ }
159
+ .input-container:focus-within {
160
+ animation: pulse 2s infinite ease-in-out;
161
+ }
162
+ .input-container>textarea::-webkit-scrollbar {
163
+ width: 8px;
164
+ }
165
+ .input-container>textarea::-webkit-scrollbar-track {
166
+ background: #f0f0f0;
167
+ }
168
+ .input-container>textarea::-webkit-scrollbar-thumb {
169
+ background: #bbb;
170
+ border-radius: 8px;
171
+ border: 2px solid #f0f0f0;
172
+ }
173
+ .input-container>textarea::-webkit-scrollbar-thumb:hover {
174
+ background: #999;
175
+ }
176
+ .input-container>textarea::-webkit-scrollbar-corner {
177
+ background: transparent;
178
+ }
179
+ .message-input {
180
+ flex: 1;
181
+ border: none;
182
+ outline: none;
183
+ font-size: 16px;
184
+ padding: 10px;
185
+ }
186
+ .btn-send {
187
+ background-color: #4c51bf;
188
+ color: #fff;
189
+ border: none;
190
+ border-radius: 10px;
191
+ padding: 10px 10px;
192
+ font-size: 16px;
193
+ cursor: pointer;
194
+ transition: background-color 0.3s;
195
+ }
196
+ .btn-send[disabled] {
197
+ background-color: #ccc;
198
+ cursor: not-allowed;
199
+ }
200
+ .btn-send:hover {
201
+ background-color: #3730a3;
202
+ }
203
+ /* Base styles */
204
+ :root {
205
+ --primary-color: #ffffff;
206
+ --hover-color: #2980b9;
207
+ --dropdown-bg: #ffffff;
208
+ --text-color: #2c3e50;
209
+ --hover-bg-color: #ecf0f1;
210
+ --border-radius: 16px;
211
+ --padding: 16px 32px;
212
+ --transition-duration: 0.4s;
213
+ --arrow-size: 16px;
214
+ --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
215
+ }
216
+ /* Resetting default styles */
217
+ * {
218
+ box-sizing: border-box;
219
+ margin: 0;
220
+ padding: 0;
221
+ font-family: var(--font-family);
222
+ }
223
+ /* Styling the dropdown button with shadow */
224
+ .dropbtn {
225
+ background-color: var(--primary-color);
226
+ color: #2c3e50;
227
+ padding: var(--padding);
228
+ font-size: 18px;
229
+ border: none;
230
+ cursor: pointer;
231
+ border-radius: var(--border-radius);
232
+ outline: none;
233
+ position: relative;
234
+ transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
235
+ padding-right: 50px;
236
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
237
+ }
238
+ .dropbtn::after {
239
+ content: '▲';
240
+ font-size: var(--arrow-size);
241
+ position: absolute;
242
+ right: 16px;
243
+ top: 50%;
244
+ transform: translateY(-50%);
245
+ transition: transform var(--transition-duration), content var(--transition-duration);
246
+ }
247
+ .dropbtn.active::after {
248
+ content: '▼';
249
+ transform: translateY(-50%);
250
+ }
251
+ .dropbtn:hover {
252
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
253
+ }
254
+ .dropdown {
255
+ position: relative;
256
+ display: inline-block;
257
+ }
258
+ .dropdown-content {
259
+ display: none;
260
+ position: absolute;
261
+ background-color: var(--dropdown-bg);
262
+ min-width: 200px;
263
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
264
+ z-index: 1;
265
+ border-radius: var(--border-radius);
266
+ overflow: hidden;
267
+ transition: all var(--transition-duration);
268
+ }
269
+ .dropdown-content a {
270
+ display: flex;
271
+ align-items: center;
272
+ padding: 8px 16px;
273
+ text-decoration: none;
274
+ color: var(--text-color);
275
+ transition: background-color var(--transition-duration);
276
+ }
277
+ .dropdown-content a .icon {
278
+ margin-right: 8px;
279
+ width: 24px;
280
+ height: 24px;
281
+ }
282
+ .dropdown-content a:hover {
283
+ background-color: var(--hover-bg-color);
284
+ }
285
+ .dropdown-content a:hover {
286
+ background-color: var(--hover-bg-color);
287
+ }
288
+ .dropbtn:focus {
289
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
290
+ }
291
+ .dropbtn:focus:not(.active)::after {
292
+ content: '▲';
293
+ }
294
+ .dropbtn.active:focus::after {
295
+ content: '▼';
296
+ }
297
+ /* Markdown styles */
298
+ .message-container h1 {
299
+ font-size: 36px;
300
+ margin-top: 24px;
301
+ margin-bottom: 16px;
302
+ color: #fff;
303
+ /* Change text color to white */
304
+ }
305
+ .message-container h2 {
306
+ font-size: 32px;
307
+ margin-top: 20px;
308
+ margin-bottom: 12px;
309
+ color: #fff;
310
+ /* Change text color to white */
311
+ }
312
+ .message-container h3 {
313
+ font-size: 28px;
314
+ margin-top: 16px;
315
+ margin-bottom: 8px;
316
+ color: #fff;
317
+ /* Change text color to white */
318
+ }
319
+ .message-container ul,
320
+ .message-container ol {
321
+ margin-top: 12px;
322
+ margin-bottom: 12px;
323
+ padding-left: 20px;
324
+ color: #fff;
325
+ /* Change text color to white */
326
+ }
327
+ .message-container li {
328
+ margin-bottom: 6px;
329
+ }
330
+ .message-container pre {
331
+ background-color: #333;
332
+ /* Darken the background for better contrast */
333
+ padding: 16px;
334
+ border-radius: 8px;
335
+ margin-top: 12px;
336
+ margin-bottom: 12px;
337
+ overflow-x: auto;
338
+ color: #fff;
339
+ /* Change text color to white */
340
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
341
+ }
342
+ .message-container pre code {
343
+ display: block;
344
+ padding: 0;
345
+ font-size: 18px;
346
+ color: #fff;
347
+ /* Change text color to white */
348
+ }
349
+ .message-container a {
350
+ color: #007bff;
351
+ text-decoration: none;
352
+ border-bottom: 1px solid transparent;
353
+ transition: border-bottom-color 0.3s;
354
+ }
355
+ .message-container a:hover {
356
+ border-bottom-color: #007bff;
357
+ }
358
+
359
+ /* Support for italic and bold italic */
360
+ .message-container em {
361
+ font-style: italic;
362
+ }
363
+ .message-container strong {
364
+ font-weight: bold;
365
+ }
366
+ .initial-message {
367
+ font-size: 26px;
368
+ color: #fff;
369
+ background-color: #4c51bf;
370
+ padding: 20px;
371
+ border-radius: 12px;
372
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
373
+ text-align: center;
374
+ position: fixed;
375
+ top: 20px;
376
+ left: 50%;
377
+ transform: translateX(-50%);
378
+ z-index: 1000;
379
+ width: 80%;
380
+ max-width: 600px;
381
+ opacity: 0;
382
+ transform: translateY(-20px) translateX(-50%);
383
+ animation: fadeIn 1s forwards;
384
+ }
385
+ @keyframes fadeIn {
386
+ to {
387
+ opacity: 1;
388
+ transform: translateY(0) translateX(-50%);
389
+ }
390
+ }
391
+ </style>
392
+ </head> <div class="container">
393
+ <div class="initial-message">This Space uses the real OpenAI GPT-4o model.</div>
394
+ <div class="message-container"></div>
395
+ </div>
396
+ <div class="container">
397
+ <div class="message-container"></div>
398
+ </div>
399
+ <div class="input-container">
400
+ <textarea type="text" id="user-input" class="message-input" placeholder="Type your message..."></textarea>
401
+ <button id="send-btn" class="btn-send">
402
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
403
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
404
+ </svg>
405
+ </button>
406
+
407
+ <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
408
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
409
+ <script>
410
+ const userInput = document.getElementById('user-input');
411
+ const sendBtn = document.getElementById('send-btn');
412
+ const chatOutput = document.querySelector('.message-container');
413
+ let messages = [];
414
+ async function sendMessage() {
415
+ try {
416
+ sendBtn.disabled = true;
417
+ const response = await fetch('https://gpt4.discord.rocks/ask', {
418
+ method: 'POST',
419
+ headers: {
420
+ 'Content-Type': 'application/json'
421
+ },
422
+ body: JSON.stringify({
423
+ "messages": messages,
424
+ "model": "gpt-4o"
425
+ })
426
+ });
427
+ const data = await response.json();
428
+ sendBtn.disabled = false;
429
+ return data.response;
430
+ } catch (error) {
431
+ console.error('Error sending message:', error);
432
+ sendBtn.disabled = false;
433
+ return 'Error: Failed to send message.';
434
+ }
435
+ }
436
+ function displayMessage(message, role) {
437
+ const messageElement = document.createElement('div');
438
+ messageElement.classList.add('message', `${role}-message`);
439
+ // Parse Markdown syntax
440
+ const markdownParsedMessage = parseMarkdown(message);
441
+ // Set HTML content
442
+ messageElement.innerHTML = markdownParsedMessage;
443
+ chatOutput.appendChild(messageElement);
444
+ chatOutput.scrollTop = chatOutput.scrollHeight;
445
+ }
446
+ function parseMarkdown(message) {
447
+ // Initialize Showdown converter
448
+ const converter = new showdown.Converter({
449
+ // Enable all Markdown extensions
450
+ simplifiedAutoLink: true,
451
+ strikethrough: true,
452
+ tables: true,
453
+ tasklists: true,
454
+ literalMidWordUnderscores: true,
455
+ });
456
+ // Convert Markdown to HTML
457
+ return converter.makeHtml(message);
458
+ }
459
+ sendBtn.addEventListener('click', async () => {
460
+ const message = userInput.value.trim();
461
+ if (message !== '') {
462
+ messages.push({ "role": "user", "content": message });
463
+ displayMessage("> " + message, 'user');
464
+ const botResponse = await sendMessage();
465
+ messages.push({ "role": "assistant", "content": botResponse });
466
+ displayMessage(botResponse, 'bot');
467
+ userInput.value = '';
468
+ }
469
+ });
470
+ userInput.addEventListener('keypress', async (event) => {
471
+ if (event.key === 'Enter') {
472
+ sendBtn.click();
473
+ }
474
+ });
475
+ </script>
476
+
477
+ </body>
478
+
479
+ </html>
480
+