Hugging Face's logo

Spaces:
joermd
/
mr.remon
Running

App Files Community
joermd commited on
Commit
edcedb9
·
verified ·
1 Parent(s): e31d1f9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +262 -261
index.html CHANGED
@@ -1,284 +1,285 @@
1
  <!DOCTYPE html>
2
  <html dir="rtl" lang="ar">
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
- :root {
10
- --primary-color: #1a237e;
11
- --secondary-color: #283593;
12
- --accent-color: #3949ab;
13
- --background-light: #e8eaf6;
14
- --text-color: #121212;
15
- }
16
-
17
- body {
18
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19
- margin: 0;
20
- padding: 20px;
21
- background-color: #f0f2f5;
22
- }
23
- .chat-container {
24
- max-width: 800px;
25
- margin: 0 auto;
26
- background: white;
27
- border-radius: 15px;
28
- box-shadow: 0 2px 15px rgba(0,0,0,0.1);
29
- padding: 20px;
30
- }
31
- .header {
32
- text-align: center;
33
- margin-bottom: 20px;
34
- padding: 15px;
35
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
36
- color: white;
37
- border-radius: 10px;
38
- position: relative;
39
- }
40
- .header h1 {
41
- margin: 0;
42
- font-size: 24px;
43
- }
44
- .customer-service-icon {
45
- position: absolute;
46
- left: 20px;
47
- top: 50%;
48
- transform: translateY(-50%);
49
- font-size: 2.5em;
50
- color: #fff;
51
- }
52
- .chat-box {
53
- height: 400px;
54
- overflow-y: auto;
55
- border: 1px solid #ddd;
56
- padding: 15px;
57
- margin-bottom: 20px;
58
- border-radius: 8px;
59
- background-color: var(--background-light);
60
- }
61
- .input-container {
62
- display: flex;
63
- gap: 10px;
64
- margin-bottom: 10px;
65
- }
66
- input {
67
- flex: 1;
68
- padding: 12px;
69
- border: 2px solid var(--primary-color);
70
- border-radius: 8px;
71
- font-size: 16px;
72
- background-color: white;
73
- }
74
- button {
75
- padding: 12px 25px;
76
- background-color: var(--primary-color);
77
- color: white;
78
- border: none;
79
- border-radius: 8px;
80
- cursor: pointer;
81
- font-weight: bold;
82
- transition: background-color 0.3s ease;
83
- }
84
- button:hover {
85
- background-color: var(--accent-color);
86
- }
87
- button:disabled {
88
- background-color: #cccccc;
89
- cursor: not-allowed;
90
- }
91
- .message {
92
- margin-bottom: 12px;
93
- padding: 12px;
94
- border-radius: 8px;
95
- max-width: 80%;
96
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
97
- white-space: pre-wrap;
98
- }
99
- .user-message {
100
- background-color: #fff;
101
- margin-left: 20%;
102
- border-right: 4px solid var(--accent-color);
103
- }
104
- .bot-message {
105
- background-color: #fff;
106
- margin-right: 20%;
107
- border-left: 4px solid var(--primary-color);
108
- }
109
- .faq-container {
110
- display: grid;
111
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
112
- gap: 10px;
113
- margin-bottom: 15px;
114
- }
115
- .faq-button {
116
- background-color: var(--background-light);
117
- border: 1px solid var(--primary-color);
118
- padding: 10px;
119
- border-radius: 5px;
120
- cursor: pointer;
121
- transition: all 0.3s ease;
122
- font-weight: bold;
123
- color: var(--primary-color);
124
- }
125
- .faq-button:hover {
126
- background-color: var(--primary-color);
127
- color: white;
128
- }
129
- .typing-indicator {
130
- display: none;
131
- margin-bottom: 12px;
132
- padding: 12px;
133
- border-radius: 8px;
134
- max-width: 80%;
135
- margin-right: 20%;
136
- background-color: #f0f0f0;
137
- }
138
- </style>
 
139
  </head>
140
  <body>
141
- <div class="chat-container">
142
- <div class="header">
143
- <i class="fas fa-headset customer-service-icon"></i>
144
- <h1>مكتبة أستاذ ريمون</h1>
145
- <p>خدمة العملاء - متوفرين على مدار الساعة</p>
146
- </div>
147
- <div class="faq-container">
148
- <button class="faq-button" onclick="askFAQ('اسعار الورق')">
149
- <i class="fas fa-file-alt"></i> أسعار الورق
150
- </button>
151
- <button class="faq-button" onclick="askFAQ('تحدث عن مكتبتك التي اسمها مكتبة استاذ ريمون')">
152
- <i class="fas fa-store"></i> عن المكتبة
153
- </button>
154
- <button class="faq-button" onclick="askFAQ('قائمة المنتجات')">
155
- <i class="fas fa-list"></i> قائمة المنتجات
156
- </button>
157
- <button class="faq-button" onclick="askFAQ('عروضكم')">
158
- <i class="fas fa-percentage"></i> العروض
159
- </button>
160
- <button class="faq-button" onclick="askFAQ('طرق الدفع')">
161
- <i class="fas fa-credit-card"></i> طرق الدفع
162
- </button>
163
- </div>
164
- <div class="chat-box" id="chatBox">
165
- <div class="typing-indicator" id="typingIndicator">جاري الكتابة...</div>
166
- </div>
167
- <div class="input-container">
168
- <input type="text" id="userInput" placeholder="اكتب سؤالك هنا..." onkeypress="handleKeyPress(event)">
169
- <button id="sendButton" onclick="sendMessage()">
170
- <i class="fas fa-paper-plane"></i> إرسال
171
- </button>
172
- </div>
173
  </div>
 
 
 
 
 
 
 
 
 
 
174
 
175
- <script>
176
- const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/4000/chat/stream';
177
- let isWaitingForResponse = false;
178
 
179
- function handleKeyPress(event) {
180
- if (event.key === 'Enter' && !isWaitingForResponse) {
181
- sendMessage();
182
- }
183
- }
184
 
185
- function askFAQ(question) {
186
- if (!isWaitingForResponse) {
187
- addMessage(question, 'user-message');
188
- sendToAPI(question);
189
- }
190
- }
191
 
192
- async function sendMessage() {
193
- if (isWaitingForResponse) return;
194
 
195
- const input = document.getElementById('userInput');
196
- const message = input.value.trim();
197
-
198
- if (message) {
199
- addMessage(message, 'user-message');
200
- input.value = '';
201
- await sendToAPI(message);
202
- }
203
- }
204
-
205
- async function sendToAPI(message) {
206
- const sendButton = document.getElementById('sendButton');
207
- const userInput = document.getElementById('userInput');
208
- const typingIndicator = document.getElementById('typingIndicator');
209
 
210
- try {
211
- isWaitingForResponse = true;
212
- sendButton.disabled = true;
213
- userInput.disabled = true;
214
- typingIndicator.style.display = 'block';
215
 
216
- const response = await fetch(API_URL, {
217
- method: 'POST',
218
- headers: {
219
- 'Content-Type': 'application/json',
220
- },
221
- body: JSON.stringify({
222
- message: message
223
- })
224
- });
225
 
226
- if (!response.ok) {
227
- throw new Error(`HTTP error! status: ${response.status}`);
228
- }
 
 
 
 
 
 
229
 
230
- const reader = response.body.getReader();
231
- let accumulatedResponse = '';
 
232
 
233
- while (true) {
234
- const {value, done} = await reader.read();
235
- if (done) break;
236
-
237
- const chunk = new TextDecoder().decode(value);
238
- accumulatedResponse += chunk;
239
 
240
- // Update the chat with the accumulated response
241
- updateLastBotMessage(accumulatedResponse);
242
- }
 
 
 
243
 
244
- } catch (error) {
245
- console.error('Error:', error);
246
- addMessage('عذراً، حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.', 'bot-message');
247
- } finally {
248
- isWaitingForResponse = false;
249
- sendButton.disabled = false;
250
- userInput.disabled = false;
251
- typingIndicator.style.display = 'none';
252
- }
253
  }
254
 
255
- function addMessage(text, className) {
256
- const chatBox = document.getElementById('chatBox');
257
- const messageDiv = document.createElement('div');
258
- messageDiv.className = `message ${className}`;
259
- messageDiv.textContent = text;
260
- chatBox.insertBefore(messageDiv, document.getElementById('typingIndicator'));
261
- chatBox.scrollTop = chatBox.scrollHeight;
262
- }
 
 
263
 
264
- function updateLastBotMessage(text) {
265
- const chatBox = document.getElementById('chatBox');
266
- let lastBotMessage = chatBox.querySelector('.bot-message:last-of-type');
267
-
268
- if (!lastBotMessage) {
269
- lastBotMessage = document.createElement('div');
270
- lastBotMessage.className = 'message bot-message';
271
- chatBox.insertBefore(lastBotMessage, document.getElementById('typingIndicator'));
272
- }
273
-
274
- lastBotMessage.textContent = text;
275
- chatBox.scrollTop = chatBox.scrollHeight;
276
- }
277
 
278
- // Welcome message
279
- window.onload = function() {
280
- addMessage("مرحباً بك في مكتبة أستاذ ريمون! كيف يمكنني مساعدتك اليوم؟", 'bot-message');
281
- }
282
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  </body>
284
- </html>
 
1
  <!DOCTYPE html>
2
  <html dir="rtl" lang="ar">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>مكتبة أستاذ ريمون - دردشة مباشرة</title>
7
+ <!-- تم تصحيح وسم الربط بإضافة علامة الاقتباس والنهاية -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary-color: #1a237e;
12
+ --secondary-color: #283593;
13
+ --accent-color: #3949ab;
14
+ --background-light: #e8eaf6;
15
+ --text-color: #121212;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20
+ margin: 0;
21
+ padding: 20px;
22
+ background-color: #f0f2f5;
23
+ }
24
+ .chat-container {
25
+ max-width: 800px;
26
+ margin: 0 auto;
27
+ background: white;
28
+ border-radius: 15px;
29
+ box-shadow: 0 2px 15px rgba(0,0,0,0.1);
30
+ padding: 20px;
31
+ }
32
+ .header {
33
+ text-align: center;
34
+ margin-bottom: 20px;
35
+ padding: 15px;
36
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
37
+ color: white;
38
+ border-radius: 10px;
39
+ position: relative;
40
+ }
41
+ .header h1 {
42
+ margin: 0;
43
+ font-size: 24px;
44
+ }
45
+ .customer-service-icon {
46
+ position: absolute;
47
+ left: 20px;
48
+ top: 50%;
49
+ transform: translateY(-50%);
50
+ font-size: 2.5em;
51
+ color: #fff;
52
+ }
53
+ .chat-box {
54
+ height: 400px;
55
+ overflow-y: auto;
56
+ border: 1px solid #ddd;
57
+ padding: 15px;
58
+ margin-bottom: 20px;
59
+ border-radius: 8px;
60
+ background-color: var(--background-light);
61
+ }
62
+ .input-container {
63
+ display: flex;
64
+ gap: 10px;
65
+ margin-bottom: 10px;
66
+ }
67
+ input {
68
+ flex: 1;
69
+ padding: 12px;
70
+ border: 2px solid var(--primary-color);
71
+ border-radius: 8px;
72
+ font-size: 16px;
73
+ background-color: white;
74
+ }
75
+ button {
76
+ padding: 12px 25px;
77
+ background-color: var(--primary-color);
78
+ color: white;
79
+ border: none;
80
+ border-radius: 8px;
81
+ cursor: pointer;
82
+ font-weight: bold;
83
+ transition: background-color 0.3s ease;
84
+ }
85
+ button:hover {
86
+ background-color: var(--accent-color);
87
+ }
88
+ button:disabled {
89
+ background-color: #cccccc;
90
+ cursor: not-allowed;
91
+ }
92
+ .message {
93
+ margin-bottom: 12px;
94
+ padding: 12px;
95
+ border-radius: 8px;
96
+ max-width: 80%;
97
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
98
+ white-space: pre-wrap;
99
+ }
100
+ .user-message {
101
+ background-color: #fff;
102
+ margin-left: 20%;
103
+ border-right: 4px solid var(--accent-color);
104
+ }
105
+ .bot-message {
106
+ background-color: #fff;
107
+ margin-right: 20%;
108
+ border-left: 4px solid var(--primary-color);
109
+ }
110
+ .faq-container {
111
+ display: grid;
112
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
113
+ gap: 10px;
114
+ margin-bottom: 15px;
115
+ }
116
+ .faq-button {
117
+ background-color: var(--background-light);
118
+ border: 1px solid var(--primary-color);
119
+ padding: 10px;
120
+ border-radius: 5px;
121
+ cursor: pointer;
122
+ transition: all 0.3s ease;
123
+ font-weight: bold;
124
+ color: var(--primary-color);
125
+ }
126
+ .faq-button:hover {
127
+ background-color: var(--primary-color);
128
+ color: white;
129
+ }
130
+ .typing-indicator {
131
+ display: none;
132
+ margin-bottom: 12px;
133
+ padding: 12px;
134
+ border-radius: 8px;
135
+ max-width: 80%;
136
+ margin-right: 20%;
137
+ background-color: #f0f0f0;
138
+ }
139
+ </style>
140
  </head>
141
  <body>
142
+ <div class="chat-container">
143
+ <div class="header">
144
+ <i class="fas fa-headset customer-service-icon"></i>
145
+ <h1>مكتبة أستاذ ريمون</h1>
146
+ <p>خدمة العملاء - متوفرين على مدار الساعة</p>
147
+ </div>
148
+ <div class="faq-container">
149
+ <button class="faq-button" onclick="askFAQ('اسعار الورق')">
150
+ <i class="fas fa-file-alt"></i> أسعار الورق
151
+ </button>
152
+ <button class="faq-button" onclick="askFAQ('تحدث عن مكتبتك التي اسمها مكتبة استاذ ريمون')">
153
+ <i class="fas fa-store"></i> عن المكتبة
154
+ </button>
155
+ <button class="faq-button" onclick="askFAQ('قائمة المنتجات')">
156
+ <i class="fas fa-list"></i> قائمة المنتجات
157
+ </button>
158
+ <button class="faq-button" onclick="askFAQ('عروضكم')">
159
+ <i class="fas fa-percentage"></i> العروض
160
+ </button>
161
+ <button class="faq-button" onclick="askFAQ('طرق الدفع')">
162
+ <i class="fas fa-credit-card"></i> طرق الدفع
163
+ </button>
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
+ <div class="chat-box" id="chatBox">
166
+ <div class="typing-indicator" id="typingIndicator">جاري الكتابة...</div>
167
+ </div>
168
+ <div class="input-container">
169
+ <input type="text" id="userInput" placeholder="اكتب سؤالك هنا..." onkeypress="handleKeyPress(event)">
170
+ <button id="sendButton" onclick="sendMessage()">
171
+ <i class="fas fa-paper-plane"></i> إرسال
172
+ </button>
173
+ </div>
174
+ </div>
175
 
176
+ <script>
177
+ const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/4000/chat/stream';
178
+ let isWaitingForResponse = false;
179
 
180
+ function handleKeyPress(event) {
181
+ if (event.key === 'Enter' && !isWaitingForResponse) {
182
+ sendMessage();
183
+ }
184
+ }
185
 
186
+ function askFAQ(question) {
187
+ if (!isWaitingForResponse) {
188
+ addMessage(question, 'user-message');
189
+ sendToAPI(question);
190
+ }
191
+ }
192
 
193
+ async function sendMessage() {
194
+ if (isWaitingForResponse) return;
195
 
196
+ const input = document.getElementById('userInput');
197
+ const message = input.value.trim();
198
+
199
+ if (message) {
200
+ addMessage(message, 'user-message');
201
+ input.value = '';
202
+ await sendToAPI(message);
203
+ }
204
+ }
 
 
 
 
 
205
 
206
+ async function sendToAPI(message) {
207
+ const sendButton = document.getElementById('sendButton');
208
+ const userInput = document.getElementById('userInput');
209
+ const typingIndicator = document.getElementById('typingIndicator');
 
210
 
211
+ try {
212
+ isWaitingForResponse = true;
213
+ sendButton.disabled = true;
214
+ userInput.disabled = true;
215
+ typingIndicator.style.display = 'block';
 
 
 
 
216
 
217
+ const response = await fetch(API_URL, {
218
+ method: 'POST',
219
+ headers: {
220
+ 'Content-Type': 'application/json',
221
+ },
222
+ body: JSON.stringify({
223
+ message: message
224
+ })
225
+ });
226
 
227
+ if (!response.ok) {
228
+ throw new Error(`HTTP error! status: ${response.status}`);
229
+ }
230
 
231
+ const reader = response.body.getReader();
232
+ let accumulatedResponse = '';
 
 
 
 
233
 
234
+ while (true) {
235
+ const {value, done} = await reader.read();
236
+ if (done) break;
237
+
238
+ const chunk = new TextDecoder().decode(value);
239
+ accumulatedResponse += chunk;
240
 
241
+ // تحديث الرسالة الخاصة بالبوت مع الاستجابة المتراكمة
242
+ updateLastBotMessage(accumulatedResponse);
 
 
 
 
 
 
 
243
  }
244
 
245
+ } catch (error) {
246
+ console.error('Error:', error);
247
+ addMessage('عذراً، حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.', 'bot-message');
248
+ } finally {
249
+ isWaitingForResponse = false;
250
+ sendButton.disabled = false;
251
+ userInput.disabled = false;
252
+ typingIndicator.style.display = 'none';
253
+ }
254
+ }
255
 
256
+ function addMessage(text, className) {
257
+ const chatBox = document.getElementById('chatBox');
258
+ const messageDiv = document.createElement('div');
259
+ messageDiv.className = `message ${className}`;
260
+ messageDiv.textContent = text;
261
+ chatBox.insertBefore(messageDiv, document.getElementById('typingIndicator'));
262
+ chatBox.scrollTop = chatBox.scrollHeight;
263
+ }
 
 
 
 
 
264
 
265
+ function updateLastBotMessage(text) {
266
+ const chatBox = document.getElementById('chatBox');
267
+ let lastBotMessage = chatBox.querySelector('.bot-message:last-of-type');
268
+
269
+ if (!lastBotMessage) {
270
+ lastBotMessage = document.createElement('div');
271
+ lastBotMessage.className = 'message bot-message';
272
+ chatBox.insertBefore(lastBotMessage, document.getElementById('typingIndicator'));
273
+ }
274
+
275
+ lastBotMessage.textContent = text;
276
+ chatBox.scrollTop = chatBox.scrollHeight;
277
+ }
278
+
279
+ // رسالة الترحيب
280
+ window.onload = function() {
281
+ addMessage("مرحباً بك في مكتبة أستاذ ريمون! كيف يمكنني مساعدتك اليوم؟", 'bot-message');
282
+ }
283
+ </script>
284
  </body>
285
+ </html>