Hugging Face's logo

Spaces:
Abel222
/
lux
Running

App Files Community
Abel222 commited on
Commit
85e85dd
·
verified ·
1 Parent(s): daee503

The name of the ai is Lux - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +227 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lux
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: gray
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: lux
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,227 @@
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>Lux - AI Assistant</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
+ .chat-message.user {
11
+ animation: slideInLeft 0.3s ease-out;
12
+ }
13
+ .chat-message.ai {
14
+ animation: slideInRight 0.3s ease-out;
15
+ }
16
+ @keyframes slideInLeft {
17
+ from { transform: translateX(-20px); opacity: 0; }
18
+ to { transform: translateX(0); opacity: 1; }
19
+ }
20
+ @keyframes slideInRight {
21
+ from { transform: translateX(20px); opacity: 0; }
22
+ to { transform: translateX(0); opacity: 1; }
23
+ }
24
+ .typing-indicator {
25
+ display: inline-block;
26
+ }
27
+ .typing-indicator span {
28
+ height: 8px;
29
+ width: 8px;
30
+ background: #9CA3AF;
31
+ border-radius: 50%;
32
+ display: inline-block;
33
+ margin: 0 2px;
34
+ animation: bounce 1.5s infinite ease-in-out;
35
+ }
36
+ .typing-indicator span:nth-child(2) {
37
+ animation-delay: 0.2s;
38
+ }
39
+ .typing-indicator span:nth-child(3) {
40
+ animation-delay: 0.4s;
41
+ }
42
+ @keyframes bounce {
43
+ 0%, 60%, 100% { transform: translateY(0); }
44
+ 30% { transform: translateY(-5px); }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-100 min-h-screen">
49
+ <div class="container mx-auto max-w-4xl px-4 py-8">
50
+ <!-- Header -->
51
+ <header class="flex items-center justify-between mb-8">
52
+ <div class="flex items-center space-x-3">
53
+ <div class="bg-indigo-600 text-white p-3 rounded-full">
54
+ <i class="fas fa-robot text-xl"></i>
55
+ </div>
56
+ <h1 class="text-2xl font-bold text-gray-800">Lux</h1>
57
+ </div>
58
+ <div class="text-sm text-gray-500">
59
+ Powered by OpenAI
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Chat Container -->
64
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
65
+ <!-- Chat Header -->
66
+ <div class="bg-indigo-600 text-white px-6 py-4 flex items-center">
67
+ <div class="w-3 h-3 bg-green-400 rounded-full mr-2"></div>
68
+ <div class="flex-1">
69
+ <h2 class="font-semibold">AI Assistant</h2>
70
+ <p class="text-xs opacity-80">Always learning, always helpful</p>
71
+ </div>
72
+ <button class="text-white opacity-70 hover:opacity-100">
73
+ <i class="fas fa-ellipsis-v"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <!-- Messages Area -->
78
+ <div id="chat" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50">
79
+ <!-- Welcome Message -->
80
+ <div class="chat-message ai flex">
81
+ <div class="flex-shrink-0 mr-3">
82
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center">
83
+ <i class="fas fa-robot"></i>
84
+ </div>
85
+ </div>
86
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md lg:max-w-lg">
87
+ <p class="text-gray-800">Hello! I'm Lux, your AI assistant. How can I help you today?</p>
88
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Input Area -->
94
+ <div class="border-t border-gray-200 p-4 bg-white">
95
+ <div class="flex items-center space-x-2">
96
+ <button class="text-gray-500 hover:text-indigo-600 p-2 rounded-full hover:bg-gray-100">
97
+ <i class="fas fa-paperclip"></i>
98
+ </button>
99
+ <input
100
+ id="message"
101
+ type="text"
102
+ placeholder="Type your message here..."
103
+ class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
104
+ onkeypress="if(event.keyCode === 13) sendMessage()"
105
+ >
106
+ <button
107
+ id="sendButton"
108
+ onclick="sendMessage()"
109
+ class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition-colors"
110
+ >
111
+ <i class="fas fa-paper-plane"></i>
112
+ </button>
113
+ </div>
114
+ <p class="text-xs text-gray-500 mt-2 text-center">
115
+ AI may produce inaccurate information. Consider verifying important facts.
116
+ </p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <script>
122
+ let isTyping = false;
123
+
124
+ async function sendMessage() {
125
+ const messageInput = document.getElementById('message');
126
+ const msg = messageInput.value.trim();
127
+ if(!msg || isTyping) return;
128
+
129
+ // Add user message to chat
130
+ addMessage(msg, 'user');
131
+ messageInput.value = '';
132
+
133
+ // Show typing indicator
134
+ showTypingIndicator();
135
+ isTyping = true;
136
+
137
+ try {
138
+ const res = await fetch('/chat', {
139
+ method: 'POST',
140
+ headers: { 'Content-Type': 'application/json' },
141
+ body: JSON.stringify({ message: msg })
142
+ });
143
+
144
+ const data = await res.json();
145
+
146
+ // Remove typing indicator
147
+ removeTypingIndicator();
148
+
149
+ // Add AI response
150
+ addMessage(data.reply, 'ai');
151
+ isTyping = false;
152
+
153
+ } catch (error) {
154
+ console.error('Error:', error);
155
+ removeTypingIndicator();
156
+ addMessage("Apologies, I'm experiencing some technical difficulties. Please check your internet connection and try again in a moment. If the issue persists, it might be on our end - we're working hard to keep things running smoothly!", 'ai');
157
+ isTyping = false;
158
+ }
159
+ }
160
+
161
+ function addMessage(content, sender) {
162
+ const chatContainer = document.getElementById('chat');
163
+
164
+ const messageDiv = document.createElement('div');
165
+ messageDiv.className = `chat-message ${sender} flex ${sender === 'user' ? 'justify-end' : ''}`;
166
+
167
+ if (sender === 'user') {
168
+ messageDiv.innerHTML = `
169
+ <div class="flex flex-col items-end">
170
+ <div class="bg-indigo-600 text-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md lg:max-w-lg">
171
+ <p class="text-white">${content}</p>
172
+ </div>
173
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
174
+ </div>
175
+ `;
176
+ } else {
177
+ messageDiv.innerHTML = `
178
+ <div class="flex-shrink-0 mr-3">
179
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center">
180
+ <i class="fas fa-robot"></i>
181
+ </div>
182
+ </div>
183
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md lg:max-w-lg">
184
+ <p class="text-gray-800">${content}</p>
185
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
186
+ </div>
187
+ `;
188
+ }
189
+
190
+ chatContainer.appendChild(messageDiv);
191
+ chatContainer.scrollTop = chatContainer.scrollHeight;
192
+ }
193
+
194
+ function showTypingIndicator() {
195
+ const chatContainer = document.getElementById('chat');
196
+
197
+ const typingDiv = document.createElement('div');
198
+ typingDiv.className = 'chat-message ai flex';
199
+ typingDiv.id = 'typing-indicator';
200
+ typingDiv.innerHTML = `
201
+ <div class="flex-shrink-0 mr-3">
202
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center">
203
+ <i class="fas fa-robot"></i>
204
+ </div>
205
+ </div>
206
+ <div class="bg-white p-3 rounded-lg shadow-sm">
207
+ <div class="typing-indicator">
208
+ <span></span>
209
+ <span></span>
210
+ <span></span>
211
+ </div>
212
+ </div>
213
+ `;
214
+
215
+ chatContainer.appendChild(typingDiv);
216
+ chatContainer.scrollTop = chatContainer.scrollHeight;
217
+ }
218
+
219
+ function removeTypingIndicator() {
220
+ const typingIndicator = document.getElementById('typing-indicator');
221
+ if (typingIndicator) {
222
+ typingIndicator.remove();
223
+ }
224
+ }
225
+ </script>
226
+ <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=Abel222/lux" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
227
+ </html>