Hugging Face's logo

Spaces:
Raiss22
/
raiss
Running

App Files Community
Raiss22 commited on
Commit
e27c7f2
·
verified ·
1 Parent(s): 0837fad

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +226 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Raiss
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: raiss
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,226 @@
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>مساعد الذكاء الاصطناعي</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom scrollbar */
11
+ .custom-scrollbar::-webkit-scrollbar {
12
+ width: 6px;
13
+ }
14
+ .custom-scrollbar::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ .custom-scrollbar::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 3px;
20
+ }
21
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Chat bubble animation */
26
+ @keyframes fadeIn {
27
+ from { opacity: 0; transform: translateY(10px); }
28
+ to { opacity: 1; transform: translateY(0); }
29
+ }
30
+ .chat-message {
31
+ animation: fadeIn 0.3s ease-out;
32
+ }
33
+
34
+ /* Typing indicator animation */
35
+ @keyframes blink {
36
+ 0%, 100% { opacity: 1; }
37
+ 50% { opacity: 0.5; }
38
+ }
39
+ .typing-dot {
40
+ animation: blink 1.5s infinite;
41
+ }
42
+ .typing-dot:nth-child(2) {
43
+ animation-delay: 0.2s;
44
+ }
45
+ .typing-dot:nth-child(3) {
46
+ animation-delay: 0.4s;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-50 h-screen flex flex-col">
51
+ <!-- Header -->
52
+ <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between">
53
+ <div class="flex items-center space-x-2">
54
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold">AI</div>
55
+ <h1 class="text-lg font-semibold text-gray-800">مساعد الذكاء الاصطناعي</h1>
56
+ </div>
57
+ <div class="flex items-center space-x-3">
58
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
59
+ <i class="fas fa-ellipsis-vertical"></i>
60
+ </button>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Chat container -->
65
+ <div class="flex-1 overflow-hidden flex flex-col">
66
+ <!-- Chat messages -->
67
+ <div id="chat-messages" class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4 rtl">
68
+ <!-- Welcome message -->
69
+ <div class="chat-message">
70
+ <div class="flex items-start">
71
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div>
72
+ <div class="flex-1">
73
+ <div class="bg-white p-4 rounded-lg shadow-sm max-w-3xl">
74
+ <p class="text-gray-800">مرحبًا! أنا مساعدك الذكي. كيف يمكنني مساعدتك اليوم؟</p>
75
+ <div class="mt-2 flex flex-wrap gap-2">
76
+ <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">اقترح وصفة طعام</button>
77
+ <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">اشرح لي الذكاء الاصطناعي</button>
78
+ <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">ساعدني في البرمجة</button>
79
+ </div>
80
+ </div>
81
+ <div class="text-xs text-gray-500 mt-1 mr-1">اليوم على الساعة <span id="current-time"></span></div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Typing indicator (hidden by default) -->
88
+ <div id="typing-indicator" class="hidden px-4 pb-3">
89
+ <div class="flex items-start">
90
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div>
91
+ <div class="bg-white p-3 rounded-lg shadow-sm">
92
+ <div class="flex space-x-1">
93
+ <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div>
94
+ <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div>
95
+ <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Input area -->
102
+ <div class="border-t border-gray-200 bg-white p-3">
103
+ <form id="chat-form" class="flex items-end space-x-2">
104
+ <button type="submit" id="send-button" class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 text-white flex items-center justify-center hover:opacity-90 transition disabled:opacity-50" disabled>
105
+ <i class="fas fa-paper-plane"></i>
106
+ </button>
107
+ <div class="flex-1 bg-gray-100 rounded-lg flex items-end">
108
+ <textarea id="message-input" rows="1" placeholder="اكتب رسالتك هنا..." class="flex-1 bg-transparent p-3 max-h-32 resize-none outline-none text-gray-700 rtl"></textarea>
109
+ <button type="button" class="p-2 text-gray-500 hover:text-gray-700">
110
+ <i class="fas fa-paperclip"></i>
111
+ </button>
112
+ </div>
113
+ </form>
114
+ <p class="text-xs text-gray-500 mt-2 text-center">قد يقدم المساعد معلومات غير دقيقة عن الأشخاص، الأماكن أو الحقائق.</p>
115
+ </div>
116
+ </div>
117
+
118
+ <script>
119
+ // Set current time
120
+ const now = new Date();
121
+ const timeString = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' });
122
+ document.getElementById('current-time').textContent = timeString;
123
+
124
+ // Auto-resize textarea
125
+ const textarea = document.getElementById('message-input');
126
+ textarea.addEventListener('input', function() {
127
+ this.style.height = 'auto';
128
+ this.style.height = (this.scrollHeight) + 'px';
129
+
130
+ // Enable/disable send button
131
+ document.getElementById('send-button').disabled = this.value.trim() === '';
132
+ });
133
+
134
+ // Handle form submission
135
+ const chatForm = document.getElementById('chat-form');
136
+ const chatMessages = document.getElementById('chat-messages');
137
+
138
+ chatForm.addEventListener('submit', function(e) {
139
+ e.preventDefault();
140
+ const message = textarea.value.trim();
141
+ if (message === '') return;
142
+
143
+ // Add user message
144
+ addMessage(message, 'user');
145
+ textarea.value = '';
146
+ textarea.style.height = 'auto';
147
+ document.getElementById('send-button').disabled = true;
148
+
149
+ // Show typing indicator
150
+ document.getElementById('typing-indicator').classList.remove('hidden');
151
+ chatMessages.scrollTop = chatMessages.scrollHeight;
152
+
153
+ // Simulate AI response after a delay
154
+ setTimeout(() => {
155
+ document.getElementById('typing-indicator').classList.add('hidden');
156
+ const responses = [
157
+ `أنا أفهم سؤالك حول "${message}". اسمح لي أن أقدم لك المعلومات التالية حول هذا الموضوع...`,
158
+ `سؤال مثير للاهتمام! دعني أفكر في "${message}" للحظة...`,
159
+ `سأكون سعيدًا بمساعدتك بخصوص "${message}". إليك بعض المعلومات التي قد تكون مفيدة...`,
160
+ `بخصوص "${message}"، لدي هذه التفاصيل التي قد تجيب على سؤالك...`,
161
+ `شكرًا لسؤالك عن "${message}". المعلومات المتوفرة لدي تشير إلى أن...`,
162
+ `لقد بحثت عن "${message}" وهذه هي النتائج التي توصلت إليها...`,
163
+ `سؤالك مهم. فيما يلي تحليلي لموضوع "${message}"...`,
164
+ `فهمت أنك تريد معرفة المزيد عن "${message}". اسمح لي أن أشرح لك...`
165
+ ];
166
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
167
+ addMessage(randomResponse, 'ai');
168
+ }, 1500 + Math.random() * 2000);
169
+ });
170
+
171
+ // Handle suggestion buttons
172
+ document.querySelectorAll('.suggestion-btn').forEach(button => {
173
+ button.addEventListener('click', function() {
174
+ textarea.value = this.textContent;
175
+ textarea.dispatchEvent(new Event('input'));
176
+ textarea.focus();
177
+ });
178
+ });
179
+
180
+ // Add a new message to the chat
181
+ function addMessage(content, sender) {
182
+ const now = new Date();
183
+ const timeString = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' });
184
+
185
+ const messageDiv = document.createElement('div');
186
+ messageDiv.className = 'chat-message';
187
+
188
+ if (sender === 'user') {
189
+ messageDiv.innerHTML = `
190
+ <div class="flex items-start justify-end">
191
+ <div class="flex-1 max-w-3xl">
192
+ <div class="bg-blue-500 text-white p-4 rounded-lg shadow-sm mr-auto">
193
+ <p>${content}</p>
194
+ </div>
195
+ <div class="text-xs text-gray-500 mt-1 ml-1 text-left">${timeString}</div>
196
+ </div>
197
+ </div>
198
+ `;
199
+ } else {
200
+ messageDiv.innerHTML = `
201
+ <div class="flex items-start">
202
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div>
203
+ <div class="flex-1">
204
+ <div class="bg-white p-4 rounded-lg shadow-sm max-w-3xl">
205
+ <p class="text-gray-800">${content}</p>
206
+ </div>
207
+ <div class="text-xs text-gray-500 mt-1 mr-1">${timeString}</div>
208
+ </div>
209
+ </div>
210
+ `;
211
+ }
212
+
213
+ chatMessages.appendChild(messageDiv);
214
+ chatMessages.scrollTop = chatMessages.scrollHeight;
215
+ }
216
+
217
+ // Allow Enter to send (Shift+Enter for new line)
218
+ textarea.addEventListener('keydown', function(e) {
219
+ if (e.key === 'Enter' && !e.shiftKey) {
220
+ e.preventDefault();
221
+ chatForm.dispatchEvent(new Event('submit'));
222
+ }
223
+ });
224
+ </script>
225
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Raiss22/raiss" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
226
+ </html>