Hugging Face's logo

Spaces:
Athspi
/
athspi
Running

App Files Community
Athspi commited on
Commit
0b3e78c
·
verified ·
1 Parent(s): 3ebc508

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +332 -0
static/index.html ADDED
@@ -0,0 +1,332 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- static/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <title>AI Chat with Gemini</title>
8
+ <style>
9
+ /* Your existing CSS styles here */
10
+ :root {
11
+ --background-color: #212121;
12
+ --input-area-color: #212121;
13
+ --user-bubble-color: #303030;
14
+ --ai-bubble-color: #2a2a2a;
15
+ --text-color: #e0e0e0;
16
+ --placeholder-color: #888888;
17
+ --icon-color: #b0b0b0;
18
+ --send-button-color: #4CAF50;
19
+ --border-color: #333333;
20
+ }
21
+
22
+ * {
23
+ box-sizing: border-box;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ html, body {
29
+ height: 100%;
30
+ overflow: hidden;
31
+ }
32
+
33
+ body {
34
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
35
+ background-color: var(--background-color);
36
+ color: var(--text-color);
37
+ display: flex;
38
+ flex-direction: column;
39
+ height: 100%;
40
+ }
41
+
42
+ .chat-container {
43
+ display: flex;
44
+ flex-direction: column;
45
+ height: 100%;
46
+ width: 100%;
47
+ max-width: 800px;
48
+ margin: 0 auto;
49
+ }
50
+
51
+ .chat-area {
52
+ flex-grow: 1;
53
+ overflow-y: auto;
54
+ padding: 20px 16px;
55
+ display: flex;
56
+ flex-direction: column;
57
+ }
58
+
59
+ .welcome-screen {
60
+ text-align: center;
61
+ margin: auto;
62
+ color: var(--placeholder-color);
63
+ }
64
+
65
+ .welcome-screen h2 {
66
+ font-size: 1.8rem;
67
+ font-weight: 400;
68
+ margin-bottom: 10px;
69
+ }
70
+
71
+ .welcome-screen.hidden {
72
+ display: none;
73
+ }
74
+
75
+ .message {
76
+ max-width: 85%;
77
+ padding: 12px 16px;
78
+ border-radius: 18px;
79
+ margin-bottom: 12px;
80
+ word-wrap: break-word;
81
+ line-height: 1.5;
82
+ font-size: 1rem;
83
+ }
84
+
85
+ .user-message {
86
+ background-color: var(--user-bubble-color);
87
+ align-self: flex-end;
88
+ border-bottom-right-radius: 4px;
89
+ }
90
+
91
+ .ai-message {
92
+ background-color: var(--ai-bubble-color);
93
+ align-self: flex-start;
94
+ border-bottom-left-radius: 4px;
95
+ }
96
+
97
+ .typing-indicator {
98
+ display: flex;
99
+ align-items: center;
100
+ padding: 12px 16px;
101
+ }
102
+ .typing-indicator span {
103
+ height: 8px;
104
+ width: 8px;
105
+ background-color: var(--icon-color);
106
+ border-radius: 50%;
107
+ display: inline-block;
108
+ margin: 0 2px;
109
+ animation: bounce 1.4s infinite both;
110
+ }
111
+ .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
112
+ .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
113
+
114
+ @keyframes bounce {
115
+ 0%, 80%, 100% { transform: scale(0); }
116
+ 40% { transform: scale(1.0); }
117
+ }
118
+
119
+ .input-area {
120
+ display: flex;
121
+ align-items: flex-end;
122
+ padding: 10px 16px;
123
+ border-top: 1px solid var(--border-color);
124
+ background-color: var(--input-area-color);
125
+ flex-shrink: 0;
126
+ }
127
+
128
+ .input-wrapper {
129
+ display: flex;
130
+ align-items: center;
131
+ width: 100%;
132
+ background-color: var(--user-bubble-color);
133
+ border-radius: 24px;
134
+ padding: 4px;
135
+ }
136
+
137
+ .input-area textarea {
138
+ flex-grow: 1;
139
+ border: none;
140
+ background: transparent;
141
+ color: var(--text-color);
142
+ resize: none;
143
+ font-size: 1rem;
144
+ line-height: 1.5;
145
+ max-height: 120px;
146
+ overflow-y: auto;
147
+ padding: 8px 12px;
148
+ font-family: inherit;
149
+ }
150
+
151
+ .input-area textarea:focus {
152
+ outline: none;
153
+ }
154
+
155
+ .input-area textarea::placeholder {
156
+ color: var(--placeholder-color);
157
+ }
158
+
159
+ .input-area .icon-button {
160
+ background: none;
161
+ border: none;
162
+ padding: 8px;
163
+ cursor: pointer;
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ }
168
+
169
+ .input-area .icon-button svg {
170
+ width: 24px;
171
+ height: 24px;
172
+ fill: var(--icon-color);
173
+ }
174
+
175
+ .send-button {
176
+ background-color: var(--send-button-color);
177
+ border-radius: 50%;
178
+ padding: 8px;
179
+ transition: background-color 0.2s;
180
+ }
181
+
182
+ .send-button.disabled {
183
+ background-color: #555;
184
+ cursor: not-allowed;
185
+ }
186
+
187
+ .send-button.disabled svg {
188
+ fill: #888;
189
+ }
190
+
191
+ .send-button svg {
192
+ fill: white;
193
+ width: 24px;
194
+ height: 24px;
195
+ }
196
+ </style>
197
+ </head>
198
+ <body>
199
+ <div class="chat-container">
200
+ <main class="chat-area">
201
+ <div class="welcome-screen">
202
+ <h2>What can I help with?</h2>
203
+ </div>
204
+ </main>
205
+
206
+ <footer class="input-area">
207
+ <form id="chat-form" class="input-wrapper">
208
+ <button type="button" class="icon-button">
209
+ <svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H10v9.5a2.5 2.5 0 0 0 5 0V5c-1.38 0-2.5 1.12-2.5 2.5v10.5c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5V5a4 4 0 0 1 8 0v11.5c-1.1 0-2-.9-2-2V6h-1.5z"></path></svg>
210
+ </button>
211
+ <textarea id="message-input" placeholder="Ask anything" rows="1"></textarea>
212
+ <button type="submit" id="send-button" class="icon-button send-button disabled">
213
+ <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"></path></svg>
214
+ </button>
215
+ </form>
216
+ </footer>
217
+ </div>
218
+
219
+ <script>
220
+ document.addEventListener('DOMContentLoaded', () => {
221
+ const chatForm = document.getElementById('chat-form');
222
+ const messageInput = document.getElementById('message-input');
223
+ const chatArea = document.querySelector('.chat-area');
224
+ const welcomeScreen = document.querySelector('.welcome-screen');
225
+ const sendButton = document.getElementById('send-button');
226
+
227
+ // Auto-resize textarea
228
+ const adjustTextareaHeight = () => {
229
+ messageInput.style.height = 'auto';
230
+ messageInput.style.height = `${messageInput.scrollHeight}px`;
231
+ updateSendButtonState();
232
+ };
233
+
234
+ // Update send button state
235
+ const updateSendButtonState = () => {
236
+ if (messageInput.value.trim() === '') {
237
+ sendButton.classList.add('disabled');
238
+ sendButton.disabled = true;
239
+ } else {
240
+ sendButton.classList.remove('disabled');
241
+ sendButton.disabled = false;
242
+ }
243
+ };
244
+
245
+ // Scroll to bottom of chat
246
+ const scrollToBottom = () => {
247
+ chatArea.scrollTop = chatArea.scrollHeight;
248
+ };
249
+
250
+ // Add message to chat
251
+ const addMessage = (message, sender) => {
252
+ if (!welcomeScreen.classList.contains('hidden')) {
253
+ welcomeScreen.classList.add('hidden');
254
+ }
255
+
256
+ const messageElement = document.createElement('div');
257
+ messageElement.classList.add('message', `${sender}-message`);
258
+ messageElement.textContent = message;
259
+ chatArea.appendChild(messageElement);
260
+ scrollToBottom();
261
+ };
262
+
263
+ // Show typing indicator
264
+ const showTypingIndicator = () => {
265
+ const indicatorElement = document.createElement('div');
266
+ indicatorElement.classList.add('message', 'ai-message', 'typing-indicator');
267
+ indicatorElement.innerHTML = '<span></span><span></span><span></span>';
268
+ chatArea.appendChild(indicatorElement);
269
+ scrollToBottom();
270
+ return indicatorElement;
271
+ };
272
+
273
+ // Get AI response from backend
274
+ const getAIResponse = async (userMessage) => {
275
+ const indicator = showTypingIndicator();
276
+
277
+ try {
278
+ const response = await fetch('/chat', {
279
+ method: 'POST',
280
+ headers: {
281
+ 'Content-Type': 'application/json',
282
+ },
283
+ body: JSON.stringify({ message: userMessage })
284
+ });
285
+
286
+ const data = await response.json();
287
+
288
+ if (data.error) {
289
+ throw new Error(data.error);
290
+ }
291
+
292
+ chatArea.removeChild(indicator);
293
+ addMessage(data.response, 'ai');
294
+
295
+ } catch (error) {
296
+ chatArea.removeChild(indicator);
297
+ addMessage("Sorry, I encountered an error. Please try again.", 'ai');
298
+ console.error("Error:", error);
299
+ }
300
+ };
301
+
302
+ // Handle form submission
303
+ chatForm.addEventListener('submit', async (e) => {
304
+ e.preventDefault();
305
+ const message = messageInput.value.trim();
306
+
307
+ if (message) {
308
+ addMessage(message, 'user');
309
+ messageInput.value = '';
310
+ adjustTextareaHeight();
311
+
312
+ await getAIResponse(message);
313
+ }
314
+ });
315
+
316
+ // Handle Enter key
317
+ messageInput.addEventListener('keydown', (e) => {
318
+ if (e.key === 'Enter' && !e.shiftKey) {
319
+ e.preventDefault();
320
+ chatForm.dispatchEvent(new Event('submit'));
321
+ }
322
+ });
323
+
324
+ // Textarea input events
325
+ messageInput.addEventListener('input', adjustTextareaHeight);
326
+
327
+ // Initial setup
328
+ updateSendButtonState();
329
+ });
330
+ </script>
331
+ </body>
332
+ </html>