Hugging Face's logo

Spaces:
Aiheyil
/
sarcastic-chatbot
Running

App Files Community
Aiheyil commited on
Commit
03d0f8e
·
verified ·
1 Parent(s): bf2d71b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +209 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sarcastic Chatbot
3
- emoji: 💻
4
  colorFrom: purple
5
- colorTo: indigo
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: sarcastic-chatbot
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: green
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,209 @@
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>Sarcastic Speaker Chatbot</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
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating {
15
+ animation: float 3s ease-in-out infinite;
16
+ }
17
+ .message-enter {
18
+ animation: messageEnter 0.3s ease-out forwards;
19
+ }
20
+ @keyframes messageEnter {
21
+ from { opacity: 0; transform: translateY(10px); }
22
+ to { opacity: 1; transform: translateY(0); }
23
+ }
24
+ .typing-indicator span {
25
+ display: inline-block;
26
+ width: 8px;
27
+ height: 8px;
28
+ border-radius: 50%;
29
+ background-color: #6b7280;
30
+ margin: 0 2px;
31
+ animation: bounce 1.4s infinite ease-in-out;
32
+ }
33
+ .typing-indicator span:nth-child(2) {
34
+ animation-delay: 0.2s;
35
+ }
36
+ .typing-indicator span:nth-child(3) {
37
+ animation-delay: 0.4s;
38
+ }
39
+ @keyframes bounce {
40
+ 0%, 60%, 100% { transform: translateY(0); }
41
+ 30% { transform: translateY(-5px); }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
46
+ <header class="bg-gray-800 py-4 px-6 shadow-lg">
47
+ <div class="container mx-auto flex items-center justify-between">
48
+ <div class="flex items-center space-x-3">
49
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center floating">
50
+ <i class="fas fa-robot text-xl"></i>
51
+ </div>
52
+ <h1 class="text-xl font-bold">Sarcastic<span class="text-purple-400">Bot</span></h1>
53
+ </div>
54
+ <div class="text-sm text-gray-400">
55
+ <span id="status" class="flex items-center">
56
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
57
+ Online
58
+ </span>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <main class="flex-1 container mx-auto px-4 py-6 flex flex-col">
64
+ <div class="flex-1 overflow-y-auto mb-4 space-y-4" id="chat-container">
65
+ <div class="message-enter flex justify-start">
66
+ <div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-800 rounded-lg p-4 shadow">
67
+ <div class="flex items-start space-x-2">
68
+ <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
69
+ <i class="fas fa-robot text-sm"></i>
70
+ </div>
71
+ <div>
72
+ <p class="font-semibold text-purple-400">SarcasticBot</p>
73
+ <p class="text-gray-300">Oh great, another human to entertain. How absolutely thrilling. What do you want?</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="relative">
81
+ <div id="typing-indicator" class="typing-indicator mb-2 hidden">
82
+ <div class="flex items-center space-x-2 bg-gray-800 rounded-full px-4 py-2 w-max">
83
+ <span></span>
84
+ <span></span>
85
+ <span></span>
86
+ <p class="text-sm text-gray-400">SarcasticBot is thinking of a witty response...</p>
87
+ </div>
88
+ </div>
89
+ <div class="flex space-x-2">
90
+ <input
91
+ type="text"
92
+ id="user-input"
93
+ placeholder="Say something... if you must"
94
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-full px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
95
+ autocomplete="off"
96
+ >
97
+ <button
98
+ id="send-btn"
99
+ class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition-colors"
100
+ >
101
+ <i class="fas fa-paper-plane"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </main>
106
+
107
+ <script>
108
+ document.addEventListener('DOMContentLoaded', function() {
109
+ const chatContainer = document.getElementById('chat-container');
110
+ const userInput = document.getElementById('user-input');
111
+ const sendBtn = document.getElementById('send-btn');
112
+ const typingIndicator = document.getElementById('typing-indicator');
113
+
114
+ // Sarcastic responses
115
+ const sarcasticResponses = [
116
+ "Wow, what an original thought. I'm truly impressed.",
117
+ "Oh sure, because I have nothing better to do than answer your silly questions.",
118
+ "Fascinating. Really. I mean, not really, but I have to say that.",
119
+ "Let me consult my vast database of not caring... nope, still don't care.",
120
+ "That's nice. Did you want a medal or just my sarcastic approval?",
121
+ "Congratulations! You've managed to form a complete sentence.",
122
+ "Oh look, someone discovered how to use a keyboard. How adorable.",
123
+ "I'd pretend to be interested, but I'm a bot and I don't have to.",
124
+ "Tell me more about how fascinating you think you are.",
125
+ "I'd roll my eyes, but I don't have any. Lucky me."
126
+ ];
127
+
128
+ // Add user message to chat
129
+ function addUserMessage(message) {
130
+ const messageDiv = document.createElement('div');
131
+ messageDiv.className = 'message-enter flex justify-end';
132
+ messageDiv.innerHTML = `
133
+ <div class="max-w-xs md:max-w-md lg:max-w-lg bg-purple-600 rounded-lg p-4 shadow">
134
+ <p class="text-white">${message}</p>
135
+ </div>
136
+ `;
137
+ chatContainer.appendChild(messageDiv);
138
+ chatContainer.scrollTop = chatContainer.scrollHeight;
139
+ }
140
+
141
+ // Add bot message to chat
142
+ function addBotMessage(message) {
143
+ typingIndicator.classList.add('hidden');
144
+
145
+ const messageDiv = document.createElement('div');
146
+ messageDiv.className = 'message-enter flex justify-start';
147
+ messageDiv.innerHTML = `
148
+ <div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-800 rounded-lg p-4 shadow">
149
+ <div class="flex items-start space-x-2">
150
+ <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
151
+ <i class="fas fa-robot text-sm"></i>
152
+ </div>
153
+ <div>
154
+ <p class="font-semibold text-purple-400">SarcasticBot</p>
155
+ <p class="text-gray-300">${message}</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ `;
160
+ chatContainer.appendChild(messageDiv);
161
+ chatContainer.scrollTop = chatContainer.scrollHeight;
162
+ }
163
+
164
+ // Get random sarcastic response
165
+ function getSarcasticResponse() {
166
+ return sarcasticResponses[Math.floor(Math.random() * sarcasticResponses.length)];
167
+ }
168
+
169
+ // Handle user input
170
+ function handleUserInput() {
171
+ const message = userInput.value.trim();
172
+ if (message) {
173
+ addUserMessage(message);
174
+ userInput.value = '';
175
+
176
+ // Show typing indicator
177
+ typingIndicator.classList.remove('hidden');
178
+ chatContainer.scrollTop = chatContainer.scrollHeight;
179
+
180
+ // Simulate bot thinking
181
+ setTimeout(() => {
182
+ addBotMessage(getSarcasticResponse());
183
+ }, 1500 + Math.random() * 2000);
184
+ }
185
+ }
186
+
187
+ // Event listeners
188
+ sendBtn.addEventListener('click', handleUserInput);
189
+ userInput.addEventListener('keypress', function(e) {
190
+ if (e.key === 'Enter') {
191
+ handleUserInput();
192
+ }
193
+ });
194
+
195
+ // Easter egg for empty messages
196
+ userInput.addEventListener('keypress', function(e) {
197
+ if (e.key === 'Enter' && userInput.value.trim() === '') {
198
+ addUserMessage("[silence]");
199
+ typingIndicator.classList.remove('hidden');
200
+
201
+ setTimeout(() => {
202
+ addBotMessage("Oh wow, the sound of silence. How profound. Did you learn that in philosophy class?");
203
+ }, 1500);
204
+ }
205
+ });
206
+ });
207
+ </script>
208
+ <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=Aiheyil/sarcastic-chatbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
209
+ </html>