Hugging Face's logo

Spaces:
joermd
/
test22
Running

App Files Community
joermd commited on
Commit
76b4315
·
verified ·
1 Parent(s): 9017bea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +324 -19
index.html CHANGED
@@ -1,19 +1,324 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Speedy Chat</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'IBM Plex Sans Arabic', sans-serif;
14
+ line-height: 1.6;
15
+ letter-spacing: -0.01em;
16
+ transition: background-color 0.3s, color 0.3s;
17
+ }
18
+
19
+ body.light-mode {
20
+ background-color: #fafafa;
21
+ color: #374151;
22
+ }
23
+
24
+ body.dark-mode {
25
+ background-color: #1a1a1a;
26
+ color: #e5e5e5;
27
+ }
28
+
29
+ .dark-mode header {
30
+ background-color: #2d2d2d;
31
+ border-color: #404040;
32
+ }
33
+
34
+ .dark-mode footer {
35
+ background-color: #2d2d2d;
36
+ border-color: #404040;
37
+ }
38
+
39
+ .dark-mode .message-input {
40
+ background-color: #363636;
41
+ border-color: #404040;
42
+ color: #e5e5e5;
43
+ }
44
+
45
+ .dark-mode .style-select {
46
+ background-color: #363636;
47
+ border-color: #404040;
48
+ color: #e5e5e5;
49
+ }
50
+
51
+ .dark-mode .bot-message {
52
+ background-color: #363636;
53
+ }
54
+
55
+ .message-input:focus {
56
+ outline: none;
57
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
58
+ }
59
+
60
+ .welcome-text {
61
+ font-family: 'Noto Kufi Arabic', sans-serif;
62
+ font-size: 2rem;
63
+ font-weight: 700;
64
+ text-align: center;
65
+ margin: 1.5rem 0;
66
+ letter-spacing: -0.02em;
67
+ }
68
+
69
+ .message {
70
+ opacity: 0;
71
+ transform: translateY(20px);
72
+ animation: fadeIn 0.3s ease forwards;
73
+ }
74
+
75
+ .message p {
76
+ font-size: 1.05rem;
77
+ line-height: 1.7;
78
+ }
79
+
80
+ .typing-animation {
81
+ display: inline-block;
82
+ opacity: 0;
83
+ transform: translateY(10px);
84
+ animation: typeIn 0.1s ease forwards;
85
+ }
86
+
87
+ .style-select {
88
+ appearance: none;
89
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
90
+ background-repeat: no-repeat;
91
+ background-position: left 0.5rem center;
92
+ background-size: 1em;
93
+ }
94
+
95
+ /* Mobile Styles */
96
+ @media (max-width: 640px) {
97
+ .style-select {
98
+ width: 40px;
99
+ overflow: hidden;
100
+ white-space: nowrap;
101
+ padding-right: 0;
102
+ background-position: center;
103
+ }
104
+
105
+ .style-select option {
106
+ padding: 8px;
107
+ }
108
+ }
109
+
110
+ @keyframes typeIn {
111
+ to {
112
+ opacity: 1;
113
+ transform: translateY(0);
114
+ }
115
+ }
116
+
117
+ @keyframes fadeIn {
118
+ to {
119
+ opacity: 1;
120
+ transform: translateY(0);
121
+ }
122
+ }
123
+ </style>
124
+ </head>
125
+ <body class="text-lg light-mode">
126
+ <header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm">
127
+ <div class="flex items-center px-4 py-2">
128
+ <div class="flex items-center flex-1">
129
+ <span class="text-2xl font-bold text-indigo-600">Speedy</span>
130
+ </div>
131
+ <button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2">
132
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
133
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
134
+ </svg>
135
+ </button>
136
+ <button id="clearChat" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors">
137
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
138
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
139
+ </svg>
140
+ </button>
141
+ </div>
142
+ </header>
143
+
144
+ <main class="pt-24 pb-24">
145
+ <div class="max-w-3xl mx-auto px-4">
146
+ <div class="welcome-text">سبيدي هنا لمساعدتك</div>
147
+ <div id="messagesContainer" class="space-y-4"></div>
148
+ </div>
149
+ </main>
150
+
151
+ <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-sm">
152
+ <div class="max-w-3xl mx-auto px-4 py-4">
153
+ <div class="relative">
154
+ <textarea
155
+ id="messageInput"
156
+ class="message-input w-full border border-gray-200 rounded-lg px-4 py-3 pl-32 pr-4 resize-none text-lg"
157
+ rows="1"
158
+ placeholder="اكتب رسالتك هنا..."
159
+ ></textarea>
160
+ <div class="absolute bottom-3 left-2 flex items-center space-x-2 rtl:space-x-reverse">
161
+ <button id="sendMessage" class="bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors">
162
+ <svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
163
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
164
+ </svg>
165
+ </button>
166
+ <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-2 transition-colors">
167
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
168
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
169
+ </svg>
170
+ </a>
171
+ <select id="styleSelect" class="style-select bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200">
172
+ <option value="short">⚡ ردود قصيرة</option>
173
+ <option value="normal" selected>◯ عادي</option>
174
+ <option value="long">↔ ردود مفصلة</option>
175
+ </select>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </footer>
180
+
181
+ <script>
182
+ const API_URL = 'https://xdran65ok359ef-7777.proxy.runpod.net/proxy/8000/chat';
183
+ const messagesContainer = document.getElementById('messagesContainer');
184
+ const messageInput = document.getElementById('messageInput');
185
+ const sendButton = document.getElementById('sendMessage');
186
+ const clearButton = document.getElementById('clearChat');
187
+ const styleSelect = document.getElementById('styleSelect');
188
+ const darkModeToggle = document.getElementById('darkModeToggle');
189
+ let chatHistory = [];
190
+ let currentStyle = 'normal';
191
+
192
+ // Dark mode toggle
193
+ darkModeToggle.addEventListener('click', () => {
194
+ document.body.classList.toggle('dark-mode');
195
+ document.body.classList.toggle('light-mode');
196
+ });
197
+
198
+ styleSelect.addEventListener('change', (e) => {
199
+ currentStyle = e.target.value;
200
+ });
201
+
202
+ function createUserMessage(text) {
203
+ let prefix = '';
204
+ if (currentStyle === 'short') {
205
+ prefix = 'اعطني رد باختصار وسرعة: ';
206
+ } else if (currentStyle === 'long') {
207
+ prefix = 'اعطني رد مفصل وموسع: ';
208
+ }
209
+
210
+ return `
211
+ <div class="message flex justify-end">
212
+ <div class="max-w-[80%]">
213
+ <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm">
214
+ <p class="text-lg">${text}</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ `;
219
+ }
220
+
221
+ function createBotMessage(text, messageId) {
222
+ return `
223
+ <div class="message flex justify-start">
224
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white mt-1 shadow-sm">
225
+ <span class="text-lg font-medium">S</span>
226
+ </div>
227
+ <div class="max-w-[80%] mr-3">
228
+ <div class="bot-message bg-white rounded-lg p-4 shadow-sm">
229
+ <p id="${messageId}" class="text-gray-700"></p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ `;
234
+ }
235
+
236
+ async function typeText(elementId, text) {
237
+ const element = document.getElementById(elementId);
238
+ element.innerHTML = '';
239
+ const words = text.split(' ');
240
+
241
+ for (let i = 0; i < words.length; i++) {
242
+ const span = document.createElement('span');
243
+ span.textContent = words[i] + ' ';
244
+ span.className = 'typing-animation';
245
+ element.appendChild(span);
246
+ await new Promise(resolve => setTimeout(resolve, 50));
247
+ }
248
+ }
249
+
250
+ async function sendMessage() {
251
+ const message = messageInput.value.trim();
252
+ if (!message) return;
253
+
254
+ messageInput.value = '';
255
+ adjustTextareaHeight();
256
+
257
+ const messageId = 'msg-' + Date.now();
258
+ let actualMessage = message;
259
+
260
+ if (currentStyle === 'short') {
261
+ actualMessage = 'اعطني رد باختصار وسرعة: ' + message;
262
+ } else if (currentStyle === 'long') {
263
+ actualMessage = 'اعطني رد مفصل وموسع: ' + message;
264
+ }
265
+
266
+ messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message));
267
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId));
268
+ scrollToBottom();
269
+
270
+ try {
271
+ const response = await fetch(API_URL, {
272
+ method: 'POST',
273
+ headers: { 'Content-Type': 'application/json' },
274
+ body: JSON.stringify({
275
+ message: actualMessage,
276
+ history: chatHistory
277
+ })
278
+ });
279
+
280
+ const data = await response.json();
281
+ await typeText(messageId, data.response);
282
+
283
+ chatHistory.push({
284
+ human: actualMessage,
285
+ assistant: data.response
286
+ });
287
+ } catch (error) {
288
+ document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
289
+ }
290
+ scrollToBottom();
291
+ }
292
+
293
+ function scrollToBottom() {
294
+ window.scrollTo({
295
+ top: document.documentElement.scrollHeight,
296
+ behavior: 'smooth'
297
+ });
298
+ }
299
+
300
+ function adjustTextareaHeight() {
301
+ messageInput.style.height = 'auto';
302
+ messageInput.style.height = messageInput.scrollHeight + 'px';
303
+ }
304
+
305
+ sendButton.addEventListener('click', sendMessage);
306
+ messageInput.addEventListener('keypress', (e) => {
307
+ if (e.key === 'Enter' && !e.shiftKey) {
308
+ e.preventDefault();
309
+ sendMessage();
310
+ }
311
+ });
312
+ messageInput.addEventListener('input', adjustTextareaHeight);
313
+ clearButton.addEventListener('click', () => {
314
+ messagesContainer.innerHTML = '';
315
+ chatHistory = [];
316
+ });
317
+
318
+ // Initial welcome message
319
+ const initialMessageId = 'msg-initial';
320
+ messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
321
+ typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');
322
+ </script>
323
+ </body>
324
+ </html>