Hugging Face's logo

Spaces:
PrometheusGroup
/
my-chat
Running

App Files Community
PrometheusGroup commited on
Commit
1aea2a2
·
verified ·
1 Parent(s): 74a4acc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +346 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Chat
3
- emoji: 🌖
4
- colorFrom: red
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: my-chat
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: red
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,346 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChatterBox - Online Messaging App</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
+ /* Message typing animation */
26
+ @keyframes typing {
27
+ from { width: 0 }
28
+ to { width: 100% }
29
+ }
30
+
31
+ .typing-indicator::after {
32
+ content: '...';
33
+ display: inline-block;
34
+ width: 0;
35
+ animation: typing 1.5s steps(3, end) infinite;
36
+ overflow: hidden;
37
+ vertical-align: bottom;
38
+ }
39
+
40
+ /* Message bubble animation */
41
+ @keyframes messageAppear {
42
+ from {
43
+ opacity: 0;
44
+ transform: translateY(10px);
45
+ }
46
+ to {
47
+ opacity: 1;
48
+ transform: translateY(0);
49
+ }
50
+ }
51
+
52
+ .message-animation {
53
+ animation: messageAppear 0.3s ease-out forwards;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-100 h-screen flex items-center justify-center">
58
+ <div class="w-full max-w-4xl h-[90vh] bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col">
59
+ <!-- Header -->
60
+ <div class="bg-indigo-600 text-white p-4 flex items-center justify-between">
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
63
+ <i class="fas fa-comments text-xl"></i>
64
+ </div>
65
+ <h1 class="text-xl font-bold">ChatterBox</h1>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button class="p-2 rounded-full hover:bg-indigo-500 transition">
69
+ <i class="fas fa-search"></i>
70
+ </button>
71
+ <button class="p-2 rounded-full hover:bg-indigo-500 transition">
72
+ <i class="fas fa-ellipsis-v"></i>
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Chat area -->
78
+ <div class="flex-1 flex overflow-hidden">
79
+ <!-- Sidebar -->
80
+ <div class="w-1/3 border-r border-gray-200 bg-gray-50 flex flex-col">
81
+ <div class="p-3 border-b border-gray-200">
82
+ <div class="relative">
83
+ <input type="text" placeholder="Search conversations..."
84
+ class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-300">
85
+ <i class="fas fa-search absolute left-3 top-2.5 text-gray-500"></i>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="flex-1 overflow-y-auto custom-scrollbar">
90
+ <!-- Conversation list -->
91
+ <div class="space-y-1 p-2">
92
+ <!-- Active conversation -->
93
+ <div class="bg-indigo-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3">
94
+ <div class="relative">
95
+ <div class="w-10 h-10 rounded-full bg-indigo-300 flex items-center justify-center">
96
+ <i class="fas fa-user text-indigo-700"></i>
97
+ </div>
98
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
99
+ </div>
100
+ <div class="flex-1 min-w-0">
101
+ <h3 class="font-semibold text-indigo-900 truncate">John Doe</h3>
102
+ <p class="text-sm text-gray-600 truncate">Hey, how are you doing?</p>
103
+ </div>
104
+ <div class="text-xs text-gray-500">2 min</div>
105
+ </div>
106
+
107
+ <!-- Other conversations -->
108
+ <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3">
109
+ <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center">
110
+ <i class="fas fa-user text-pink-600"></i>
111
+ </div>
112
+ <div class="flex-1 min-w-0">
113
+ <h3 class="font-semibold truncate">Jane Smith</h3>
114
+ <p class="text-sm text-gray-600 truncate">Meeting at 3pm tomorrow</p>
115
+ </div>
116
+ <div class="text-xs text-gray-500">1h</div>
117
+ </div>
118
+
119
+ <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3">
120
+ <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center">
121
+ <i class="fas fa-user text-blue-600"></i>
122
+ </div>
123
+ <div class="flex-1 min-w-0">
124
+ <h3 class="font-semibold truncate">Team Group</h3>
125
+ <p class="text-sm text-gray-600 truncate">Alex: I'll send the files</p>
126
+ </div>
127
+ <div class="text-xs text-gray-500">5h</div>
128
+ </div>
129
+
130
+ <!-- More conversations -->
131
+ <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3">
132
+ <div class="w-10 h-10 rounded-full bg-green-200 flex items-center justify-center">
133
+ <i class="fas fa-user text-green-600"></i>
134
+ </div>
135
+ <div class="flex-1 min-w-0">
136
+ <h3 class="font-semibold truncate">Mom</h3>
137
+ <p class="text-sm text-gray-600 truncate">Call me when you're free</p>
138
+ </div>
139
+ <div class="text-xs text-gray-500">Yesterday</div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- User profile -->
145
+ <div class="p-3 border-t border-gray-200 flex items-center space-x-3 bg-white">
146
+ <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center">
147
+ <i class="fas fa-user text-purple-600"></i>
148
+ </div>
149
+ <div class="flex-1 min-w-0">
150
+ <h3 class="font-semibold truncate">You</h3>
151
+ <p class="text-xs text-gray-500 truncate">Online</p>
152
+ </div>
153
+ <button class="p-2 rounded-full hover:bg-gray-100">
154
+ <i class="fas fa-cog text-gray-500"></i>
155
+ </button>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Main chat -->
160
+ <div class="flex-1 flex flex-col">
161
+ <!-- Chat header -->
162
+ <div class="p-3 border-b border-gray-200 flex items-center space-x-3">
163
+ <div class="relative">
164
+ <div class="w-10 h-10 rounded-full bg-indigo-300 flex items-center justify-center">
165
+ <i class="fas fa-user text-indigo-700"></i>
166
+ </div>
167
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
168
+ </div>
169
+ <div class="flex-1">
170
+ <h3 class="font-semibold">John Doe</h3>
171
+ <p class="text-xs text-gray-500">Online</p>
172
+ </div>
173
+ <div class="flex space-x-2">
174
+ <button class="p-2 rounded-full hover:bg-gray-100">
175
+ <i class="fas fa-phone text-gray-600"></i>
176
+ </button>
177
+ <button class="p-2 rounded-full hover:bg-gray-100">
178
+ <i class="fas fa-video text-gray-600"></i>
179
+ </button>
180
+ <button class="p-2 rounded-full hover:bg-gray-100">
181
+ <i class="fas fa-info-circle text-gray-600"></i>
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Messages -->
187
+ <div class="flex-1 p-4 overflow-y-auto custom-scrollbar bg-gray-50" id="messagesContainer">
188
+ <!-- Date divider -->
189
+ <div class="flex items-center my-4">
190
+ <div class="flex-1 border-t border-gray-300"></div>
191
+ <span class="px-3 text-sm text-gray-500">Today</span>
192
+ <div class="flex-1 border-t border-gray-300"></div>
193
+ </div>
194
+
195
+ <!-- Messages will be added here by JavaScript -->
196
+ </div>
197
+
198
+ <!-- Message input -->
199
+ <div class="p-3 border-t border-gray-200 bg-white">
200
+ <div class="flex items-center space-x-2">
201
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
202
+ <i class="fas fa-paperclip"></i>
203
+ </button>
204
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
205
+ <i class="fas fa-image"></i>
206
+ </button>
207
+ <div class="flex-1 relative">
208
+ <input type="text" id="messageInput" placeholder="Type a message..."
209
+ class="w-full bg-gray-100 rounded-full py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-300">
210
+ <button class="absolute right-2 top-1.5 text-gray-500 hover:text-indigo-600">
211
+ <i class="far fa-smile"></i>
212
+ </button>
213
+ </div>
214
+ <button id="sendButton" class="p-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
215
+ <i class="fas fa-paper-plane"></i>
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <script>
224
+ document.addEventListener('DOMContentLoaded', function() {
225
+ const messagesContainer = document.getElementById('messagesContainer');
226
+ const messageInput = document.getElementById('messageInput');
227
+ const sendButton = document.getElementById('sendButton');
228
+
229
+ // Sample messages data
230
+ const messages = [
231
+ {
232
+ sender: 'other',
233
+ text: 'Hey there! How are you doing?',
234
+ time: '10:30 AM'
235
+ },
236
+ {
237
+ sender: 'me',
238
+ text: 'I\'m good, thanks! Just working on some projects.',
239
+ time: '10:32 AM'
240
+ },
241
+ {
242
+ sender: 'other',
243
+ text: 'That sounds interesting. What kind of projects?',
244
+ time: '10:33 AM'
245
+ },
246
+ {
247
+ sender: 'other',
248
+ text: 'I was thinking we could collaborate on something if you\'re interested.',
249
+ time: '10:33 AM'
250
+ }
251
+ ];
252
+
253
+ // Display initial messages
254
+ messages.forEach((message, index) => {
255
+ addMessage(message.sender, message.text, message.time, index * 100);
256
+ });
257
+
258
+ // Send message function
259
+ function sendMessage() {
260
+ const text = messageInput.value.trim();
261
+ if (text) {
262
+ addMessage('me', text, getCurrentTime(), 0);
263
+ messageInput.value = '';
264
+
265
+ // Simulate reply after 1-3 seconds
266
+ setTimeout(() => {
267
+ const replies = [
268
+ "That's interesting!",
269
+ "I see what you mean.",
270
+ "Let me think about that...",
271
+ "Sounds good to me!",
272
+ "What else is on your mind?"
273
+ ];
274
+ const randomReply = replies[Math.floor(Math.random() * replies.length)];
275
+ addMessage('other', randomReply, getCurrentTime(), 0);
276
+ }, 1000 + Math.random() * 2000);
277
+ }
278
+ }
279
+
280
+ // Add message to the chat
281
+ function addMessage(sender, text, time, delay) {
282
+ const messageDiv = document.createElement('div');
283
+ messageDiv.className = `flex ${sender === 'me' ? 'justify-end' : 'justify-start'} mb-3 opacity-0 message-animation`;
284
+ messageDiv.style.animationDelay = `${delay}ms`;
285
+
286
+ messageDiv.innerHTML = `
287
+ <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${sender === 'me' ? 'bg-indigo-600 text-white rounded-tr-none' : 'bg-white text-gray-800 rounded-tl-none shadow'}">
288
+ <div class="text-sm">${text}</div>
289
+ <div class="text-right mt-1">
290
+ <span class="text-xs ${sender === 'me' ? 'text-indigo-200' : 'text-gray-500'}">${time}</span>
291
+ ${sender === 'me' ? '<i class="fas fa-check-double ml-1 text-xs text-indigo-200"></i>' : ''}
292
+ </div>
293
+ </div>
294
+ `;
295
+
296
+ messagesContainer.appendChild(messageDiv);
297
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
298
+ }
299
+
300
+ // Get current time in HH:MM AM/PM format
301
+ function getCurrentTime() {
302
+ const now = new Date();
303
+ let hours = now.getHours();
304
+ const minutes = now.getMinutes().toString().padStart(2, '0');
305
+ const ampm = hours >= 12 ? 'PM' : 'AM';
306
+ hours = hours % 12;
307
+ hours = hours ? hours : 12; // the hour '0' should be '12'
308
+ return `${hours}:${minutes} ${ampm}`;
309
+ }
310
+
311
+ // Event listeners
312
+ sendButton.addEventListener('click', sendMessage);
313
+ messageInput.addEventListener('keypress', function(e) {
314
+ if (e.key === 'Enter') {
315
+ sendMessage();
316
+ }
317
+ });
318
+
319
+ // Simulate typing indicator
320
+ function showTypingIndicator() {
321
+ const typingDiv = document.createElement('div');
322
+ typingDiv.className = 'flex justify-start mb-3';
323
+ typingDiv.innerHTML = `
324
+ <div class="px-4 py-2 rounded-lg bg-white text-gray-800 rounded-tl-none shadow">
325
+ <div class="text-sm typing-indicator">Typing</div>
326
+ </div>
327
+ `;
328
+ messagesContainer.appendChild(typingDiv);
329
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
330
+
331
+ // Remove after 2 seconds
332
+ setTimeout(() => {
333
+ typingDiv.remove();
334
+ }, 2000);
335
+ }
336
+
337
+ // Randomly show typing indicator every 10-20 seconds
338
+ setInterval(() => {
339
+ if (Math.random() > 0.7) { // 30% chance to show typing
340
+ showTypingIndicator();
341
+ }
342
+ }, 10000 + Math.random() * 10000);
343
+ });
344
+ </script>
345
+ <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=PrometheusGroup/my-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
346
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ create a basic online messaging app
2
+ will this run on any web server?
3
+ how do i host this?