Hugging Face's logo

Spaces:
joermd
/
test
Running

App Files Community
joermd commited on
Commit
9cc77fb
·
verified ·
1 Parent(s): 5aef73d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +339 -36
index.html CHANGED
@@ -1,49 +1,352 @@
1
- <!-- templates/index.html -->
2
  <!DOCTYPE html>
3
  <html lang="ar" dir="rtl">
4
  <head>
5
- <!-- Previous head content remains the same -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
  <body>
8
- <!-- Previous body content remains the same until the script section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  <script>
10
- let isSending = false;
11
- async function sendMessage() {
12
- if (isSending) return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
 
14
- var input = document.getElementById('message-input');
15
- var message = input.value.trim();
16
- if (message !== '') {
17
- isSending = true;
18
-
19
- appendMessage('user-message', message);
20
- input.value = '';
21
-
22
- document.getElementById('loading').classList.add('visible');
23
- try {
24
- const response = await fetch('/message', { // Updated endpoint
25
- method: 'POST',
26
- headers: {
27
- 'Content-Type': 'application/json',
28
- },
29
- body: JSON.stringify({ message: message })
30
- });
31
- if (response.ok) {
32
- const data = await response.json();
33
- appendMessage('bot-message', data.response);
34
- } else {
35
- appendMessage('bot-message', 'عذراً، حدث خطأ في معالجة رسالتك.');
36
- }
37
- } catch (error) {
38
- appendMessage('bot-message', 'عذراً، حدث خطأ في الاتصال.');
39
- } finally {
40
- document.getElementById('loading').classList.remove('visible');
41
- isSending = false;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
  }
45
-
46
- // Rest of the JavaScript functions remain the same
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </script>
48
  </body>
49
  </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="ar" dir="rtl">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>سبيدي - المساعد الذكي</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ body {
17
+ background-color: #f0f2f5;
18
+ height: 100vh;
19
+ display: flex;
20
+ flex-direction: column;
21
+ }
22
+
23
+ .chat-header {
24
+ background-color: #ffffff;
25
+ padding: 15px 20px;
26
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: space-between;
30
+ }
31
+
32
+ .chat-header h1 {
33
+ color: #1a1a1a;
34
+ font-size: 1.5rem;
35
+ display: flex;
36
+ align-items: center;
37
+ gap: 10px;
38
+ }
39
+
40
+ .chat-header .bot-status {
41
+ background-color: #4CAF50;
42
+ padding: 5px 10px;
43
+ border-radius: 15px;
44
+ color: white;
45
+ font-size: 0.8rem;
46
+ }
47
+
48
+ .chat-container {
49
+ flex: 1;
50
+ padding: 20px;
51
+ overflow-y: auto;
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: 15px;
55
+ }
56
+
57
+ .message {
58
+ max-width: 80%;
59
+ padding: 12px 16px;
60
+ border-radius: 15px;
61
+ position: relative;
62
+ animation: fadeIn 0.3s ease-in-out;
63
+ }
64
+
65
+ @keyframes fadeIn {
66
+ from { opacity: 0; transform: translateY(10px); }
67
+ to { opacity: 1; transform: translateY(0); }
68
+ }
69
+
70
+ .user-message {
71
+ background-color: #0084ff;
72
+ color: white;
73
+ margin-left: auto;
74
+ border-bottom-right-radius: 5px;
75
+ }
76
+
77
+ .bot-message {
78
+ background-color: #f0f0f0;
79
+ color: #1a1a1a;
80
+ margin-right: auto;
81
+ border-bottom-left-radius: 5px;
82
+ }
83
+
84
+ .message-time {
85
+ font-size: 0.7rem;
86
+ opacity: 0.7;
87
+ margin-top: 5px;
88
+ text-align: left;
89
+ }
90
+
91
+ .input-area {
92
+ background-color: #ffffff;
93
+ padding: 15px 20px;
94
+ box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
95
+ }
96
+
97
+ .input-container {
98
+ display: flex;
99
+ gap: 10px;
100
+ max-width: 1200px;
101
+ margin: 0 auto;
102
+ }
103
+
104
+ .message-input {
105
+ flex: 1;
106
+ padding: 12px;
107
+ border: 1px solid #ddd;
108
+ border-radius: 20px;
109
+ outline: none;
110
+ font-size: 1rem;
111
+ transition: border-color 0.3s;
112
+ }
113
+
114
+ .message-input:focus {
115
+ border-color: #0084ff;
116
+ }
117
+
118
+ .send-button {
119
+ background-color: #0084ff;
120
+ color: white;
121
+ border: none;
122
+ border-radius: 50%;
123
+ width: 45px;
124
+ height: 45px;
125
+ cursor: pointer;
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ transition: background-color 0.3s;
130
+ }
131
+
132
+ .send-button:hover {
133
+ background-color: #0073e6;
134
+ }
135
+
136
+ .send-button:disabled {
137
+ background-color: #cccccc;
138
+ cursor: not-allowed;
139
+ }
140
+
141
+ .suggestions {
142
+ display: flex;
143
+ gap: 10px;
144
+ margin-top: 10px;
145
+ flex-wrap: wrap;
146
+ justify-content: center;
147
+ }
148
+
149
+ .suggestion-chip {
150
+ background-color: #e8f0fe;
151
+ color: #1a73e8;
152
+ padding: 8px 16px;
153
+ border-radius: 16px;
154
+ cursor: pointer;
155
+ font-size: 0.9rem;
156
+ transition: background-color 0.3s;
157
+ border: none;
158
+ }
159
+
160
+ .suggestion-chip:hover {
161
+ background-color: #d2e3fc;
162
+ }
163
+
164
+ .typing-indicator {
165
+ display: none;
166
+ padding: 12px 16px;
167
+ background-color: #f0f0f0;
168
+ border-radius: 15px;
169
+ margin-right: auto;
170
+ color: #666;
171
+ font-size: 0.9rem;
172
+ }
173
+
174
+ .typing-indicator.visible {
175
+ display: inline-block;
176
+ }
177
+
178
+ .error-message {
179
+ background-color: #ffebee;
180
+ color: #c62828;
181
+ padding: 12px 16px;
182
+ border-radius: 15px;
183
+ margin-right: auto;
184
+ max-width: 80%;
185
+ font-size: 0.9rem;
186
+ }
187
+
188
+ </style>
189
  </head>
190
  <body>
191
+ <div class="chat-header">
192
+ <h1>
193
+ <i class="fas fa-robot"></i>
194
+ سبيدي
195
+ <span class="bot-status">متصل</span>
196
+ </h1>
197
+ <div class="header-actions">
198
+ <button onclick="clearChat()" class="suggestion-chip">
199
+ <i class="fas fa-trash"></i>
200
+ مسح المحادثة
201
+ </button>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="chat-container" id="chat-container"></div>
206
+
207
+ <div class="input-area">
208
+ <div class="input-container">
209
+ <input type="text"
210
+ class="message-input"
211
+ id="message-input"
212
+ placeholder="اكتب رسالتك هنا..."
213
+ autocomplete="off">
214
+ <button class="send-button" onclick="sendMessage()" id="send-button">
215
+ <i class="fas fa-paper-plane"></i>
216
+ </button>
217
+ </div>
218
+ <div class="suggestions">
219
+ <button class="suggestion-chip" onclick="sendSuggestion('كيف يمكنني تعلم البرمجة؟')">
220
+ تعلم البرمجة
221
+ </button>
222
+ <button class="suggestion-chip" onclick="sendSuggestion('ما هي أفضل لغة برمجة للمبتدئين؟')">
223
+ أفضل لغة برمجة
224
+ </button>
225
+ <button class="suggestion-chip" onclick="sendSuggestion('ما هي الذكاء الاصطناعي؟')">
226
+ الذكاء الاصطناعي
227
+ </button>
228
+ <button class="suggestion-chip" onclick="sendSuggestion('كيف أبدأ مشروعي الخاص؟')">
229
+ بدء مشروع
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
  <script>
235
+ let isProcessing = false;
236
+
237
+ function getCurrentTime() {
238
+ const now = new Date();
239
+ return now.toLocaleTimeString('ar-SA', {
240
+ hour: '2-digit',
241
+ minute: '2-digit'
242
+ });
243
+ }
244
+
245
+ function appendMessage(message, isUser = false) {
246
+ const chatContainer = document.getElementById('chat-container');
247
+ const messageDiv = document.createElement('div');
248
+ messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
249
+
250
+ const messageContent = document.createElement('div');
251
+ messageContent.textContent = message;
252
+
253
+ const timeDiv = document.createElement('div');
254
+ timeDiv.className = 'message-time';
255
+ timeDiv.textContent = getCurrentTime();
256
 
257
+ messageDiv.appendChild(messageContent);
258
+ messageDiv.appendChild(timeDiv);
259
+
260
+ chatContainer.appendChild(messageDiv);
261
+ chatContainer.scrollTop = chatContainer.scrollHeight;
262
+ }
263
+
264
+ function showTypingIndicator() {
265
+ const chatContainer = document.getElementById('chat-container');
266
+ const typingDiv = document.createElement('div');
267
+ typingDiv.className = 'typing-indicator';
268
+ typingDiv.id = 'typing-indicator';
269
+ typingDiv.innerHTML = 'سبيدي يكتب <i class="fas fa-ellipsis-h"></i>';
270
+ chatContainer.appendChild(typingDiv);
271
+ chatContainer.scrollTop = chatContainer.scrollHeight;
272
+ }
273
+
274
+ function removeTypingIndicator() {
275
+ const typingIndicator = document.getElementById('typing-indicator');
276
+ if (typingIndicator) {
277
+ typingIndicator.remove();
278
+ }
279
+ }
280
+
281
+ async function sendMessage() {
282
+ if (isProcessing) return;
283
+
284
+ const input = document.getElementById('message-input');
285
+ const message = input.value.trim();
286
+ const sendButton = document.getElementById('send-button');
287
+
288
+ if (message === '') return;
289
+
290
+ isProcessing = true;
291
+ sendButton.disabled = true;
292
+ input.value = '';
293
+
294
+ appendMessage(message, true);
295
+ showTypingIndicator();
296
+
297
+ try {
298
+ const response = await fetch('/message', {
299
+ method: 'POST',
300
+ headers: {
301
+ 'Content-Type': 'application/json',
302
+ },
303
+ body: JSON.stringify({ message: message })
304
+ });
305
+
306
+ if (!response.ok) {
307
+ throw new Error('Network response was not ok');
308
  }
309
+
310
+ const data = await response.json();
311
+ removeTypingIndicator();
312
+ appendMessage(data.response);
313
+ } catch (error) {
314
+ removeTypingIndicator();
315
+ const errorDiv = document.createElement('div');
316
+ errorDiv.className = 'error-message';
317
+ errorDiv.textContent = 'عذراً، حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.';
318
+ document.getElementById('chat-container').appendChild(errorDiv);
319
+ } finally {
320
+ isProcessing = false;
321
+ sendButton.disabled = false;
322
+ input.focus();
323
  }
324
  }
325
+
326
+ function sendSuggestion(suggestion) {
327
+ const input = document.getElementById('message-input');
328
+ input.value = suggestion;
329
+ sendMessage();
330
+ }
331
+
332
+ function clearChat() {
333
+ const chatContainer = document.getElementById('chat-container');
334
+ chatContainer.innerHTML = '';
335
+ // إضافة رسالة ترحيبية جديدة
336
+ appendMessage('مرحباً بك! كيف يمكنني مساعدتك اليوم؟');
337
+ }
338
+
339
+ // Event Listeners
340
+ document.getElementById('message-input').addEventListener('keypress', function(e) {
341
+ if (e.key === 'Enter' && !isProcessing) {
342
+ sendMessage();
343
+ }
344
+ });
345
+
346
+ // رسالة الترحيب عند تحميل الصفحة
347
+ window.onload = function() {
348
+ appendMessage('مرحباً بك! كيف يمكنني مساعدتك اليوم؟');
349
+ };
350
  </script>
351
  </body>
352
  </html>