Hugging Face's logo

Spaces:
herrkobold
/
deskdroid-chatterverse
Running

App Files Community
herrkobold commited on
Commit
e13cc18
·
verified ·
1 Parent(s): 3bcbc20

look: common desk environment parody

Browse files

use case: chat with llm like chatgpt, gemini, deepseek

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +276 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deskdroid Chatterverse
3
- emoji: 🐢
4
- colorFrom: red
5
- colorTo: green
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: DeskDroid ChatterVerse 🤖
3
+ colorFrom: pink
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,277 @@
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>DeskDroid ChatterVerse</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @keyframes float {
13
+ 0%, 100% { transform: translateY(0); }
14
+ 50% { transform: translateY(-10px); }
15
+ }
16
+ .floating-item {
17
+ animation: float 4s ease-in-out infinite;
18
+ }
19
+ .chat-bubble {
20
+ border-radius: 20px 20px 20px 0;
21
+ transition: all 0.3s ease;
22
+ }
23
+ .chat-bubble.user {
24
+ border-radius: 20px 20px 0 20px;
25
+ }
26
+ .desk-object {
27
+ transition: all 0.3s ease;
28
+ cursor: pointer;
29
+ }
30
+ .desk-object:hover {
31
+ transform: scale(1.05);
32
+ }
33
+ #vanta-bg {
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ z-index: -1;
40
+ opacity: 0.15;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-100 text-gray-800 font-sans">
45
+ <div id="vanta-bg"></div>
46
+
47
+ <div class="container mx-auto p-4 max-w-6xl">
48
+ <!-- Desktop Parody Scene -->
49
+ <div class="bg-white rounded-2xl shadow-2xl p-6 mb-8 relative overflow-hidden">
50
+ <div class="absolute top-4 right-4 flex space-x-2">
51
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
52
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
53
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
54
+ </div>
55
+
56
+ <div class="flex flex-col lg:flex-row gap-6">
57
+ <!-- Left Side - Desk Environment -->
58
+ <div class="lg:w-1/3 bg-gray-50 rounded-xl p-4 border border-gray-200">
59
+ <h2 class="text-xl font-bold mb-4 text-gray-700 flex items-center">
60
+ <i data-feather="cpu" class="mr-2"></i> AI Workstation
61
+ </h2>
62
+
63
+ <div class="grid grid-cols-2 gap-3 mb-6">
64
+ <div class="desk-object bg-blue-100 rounded-lg p-3 text-center" onclick="selectAI('chatgpt')">
65
+ <i data-feather="message-square" class="mx-auto text-blue-500 mb-2"></i>
66
+ <p class="text-sm font-medium">ChatGPT</p>
67
+ </div>
68
+ <div class="desk-object bg-purple-100 rounded-lg p-3 text-center" onclick="selectAI('gemini')">
69
+ <i data-feather="zap" class="mx-auto text-purple-500 mb-2"></i>
70
+ <p class="text-sm font-medium">Gemini</p>
71
+ </div>
72
+ <div class="desk-object bg-green-100 rounded-lg p-3 text-center" onclick="selectAI('deepseek')">
73
+ <i data-feather="search" class="mx-auto text-green-500 mb-2"></i>
74
+ <p class="text-sm font-medium">DeepSeek</p>
75
+ </div>
76
+ <div class="desk-object bg-yellow-100 rounded-lg p-3 text-center" onclick="selectAI('claude')">
77
+ <i data-feather="cloud" class="mx-auto text-yellow-500 mb-2"></i>
78
+ <p class="text-sm font-medium">Claude</p>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
83
+ <div class="flex items-center mb-2">
84
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
85
+ <p class="text-xs font-medium text-gray-600">Active Connection</p>
86
+ </div>
87
+ <div class="flex items-center">
88
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
89
+ <i data-feather="wifi" class="text-blue-500"></i>
90
+ </div>
91
+ <div>
92
+ <p class="text-sm font-medium">Quantum Link</p>
93
+ <p class="text-xs text-gray-500">5G-∞</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="bg-white rounded-lg border border-gray-200 p-4">
99
+ <div class="flex items-center mb-2">
100
+ <i data-feather="hard-drive" class="text-gray-500 mr-2"></i>
101
+ <p class="text-sm font-medium">Memory Cache</p>
102
+ </div>
103
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
104
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 73%"></div>
105
+ </div>
106
+ <p class="text-xs text-right text-gray-500">73% of ∞ TB used</p>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Right Side - Chat Interface -->
111
+ <div class="lg:w-2/3 flex flex-col">
112
+ <div class="flex items-center mb-4">
113
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
114
+ <i data-feather="user" class="text-white"></i>
115
+ </div>
116
+ <div>
117
+ <h2 class="font-bold text-gray-800" id="ai-name">Select Your AI Companion</h2>
118
+ <p class="text-xs text-gray-500" id="ai-status">Click on a workstation tool to begin</p>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="flex-1 bg-gray-50 rounded-xl p-4 mb-4 overflow-y-auto h-64 border border-gray-200" id="chat-window">
123
+ <div class="text-center text-gray-400 py-10" id="welcome-message">
124
+ <i data-feather="message-square" class="mx-auto w-12 h-12 mb-3"></i>
125
+ <p>Your AI conversation starts here!</p>
126
+ <p class="text-xs mt-1">Choose from our premium selection of LLMs</p>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="flex items-center">
131
+ <input type="text" placeholder="Type your message..."
132
+ class="flex-1 border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
133
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg transition">
134
+ <i data-feather="send"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Desk Clutter (Floating Objects) -->
141
+ <div class="absolute -bottom-2 -right-2 floating-item">
142
+ <div class="w-16 h-16 bg-yellow-100 rounded-full opacity-70"></div>
143
+ </div>
144
+ <div class="absolute top-10 left-10 floating-item" style="animation-delay: 0.5s;">
145
+ <div class="w-8 h-8 bg-blue-100 rounded-full opacity-70"></div>
146
+ </div>
147
+ <div class="absolute bottom-20 left-1/3 floating-item" style="animation-delay: 1s;">
148
+ <div class="w-12 h-12 bg-purple-100 rounded-full opacity-70"></div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="text-center text-gray-500 text-xs">
153
+ <p>DeskDroid ChatterVerse - Your virtual LLM workstation</p>
154
+ <p class="mt-1">All AIs are imaginary and responses are simulated for parody purposes</p>
155
+ </div>
156
+ </div>
157
+
158
+ <script>
159
+ feather.replace();
160
+
161
+ // Initialize Vanta.js background
162
+ VANTA.GLOBE({
163
+ el: "#vanta-bg",
164
+ mouseControls: true,
165
+ touchControls: true,
166
+ gyroControls: false,
167
+ minHeight: 200.00,
168
+ minWidth: 200.00,
169
+ scale: 1.00,
170
+ scaleMobile: 1.00,
171
+ color: 0x3a86ff,
172
+ backgroundColor: 0xf8fafc,
173
+ size: 0.7
174
+ });
175
+
176
+ // AI selection function
177
+ function selectAI(ai) {
178
+ const aiNames = {
179
+ 'chatgpt': 'ChatGPT-4.0 Pro',
180
+ 'gemini': 'Gemini Ultra',
181
+ 'deepseek': 'DeepSeek-V2',
182
+ 'claude': 'Claude-3'
183
+ };
184
+
185
+ const aiDescriptions = {
186
+ 'chatgpt': 'The classic conversationalist with a touch of sass',
187
+ 'gemini': 'The fast-thinking, creative problem solver',
188
+ 'deepseek': 'The research specialist with deep knowledge',
189
+ 'claude': 'The thoughtful, context-aware assistant'
190
+ };
191
+
192
+ const aiColors = {
193
+ 'chatgpt': 'bg-blue-100 text-blue-800',
194
+ 'gemini': 'bg-purple-100 text-purple-800',
195
+ 'deepseek': 'bg-green-100 text-green-800',
196
+ 'claude': 'bg-yellow-100 text-yellow-800'
197
+ };
198
+
199
+ document.getElementById('ai-name').textContent = aiNames[ai];
200
+ document.getElementById('ai-status').textContent = aiDescriptions[ai];
201
+
202
+ // Update welcome message
203
+ const welcomeMsg = document.getElementById('welcome-message');
204
+ welcomeMsg.innerHTML = `
205
+ <div class="${aiColors[ai]} p-3 rounded-lg inline-block">
206
+ <i data-feather="message-square" class="mx-auto w-10 h-10 mb-2"></i>
207
+ </div>
208
+ <h3 class="font-medium mt-2">Connected to ${aiNames[ai]}</h3>
209
+ <p class="text-sm mt-1">${aiDescriptions[ai]}</p>
210
+ <p class="text-xs mt-2 text-gray-500">Ask me anything!</p>
211
+ `;
212
+ feather.replace();
213
+
214
+ // Animate the selection
215
+ const selectedElement = document.querySelector(`[onclick="selectAI('${ai}')"]`);
216
+ selectedElement.classList.add('ring-2', 'ring-offset-2', 'ring-blue-500');
217
+ setTimeout(() => {
218
+ selectedElement.classList.remove('ring-2', 'ring-offset-2', 'ring-blue-500');
219
+ }, 1000);
220
+ }
221
+
222
+ // Simulate chat functionality
223
+ document.querySelector('button').addEventListener('click', function() {
224
+ const input = document.querySelector('input');
225
+ if (input.value.trim() === '') return;
226
+
227
+ const chatWindow = document.getElementById('chat-window');
228
+ const welcomeMsg = document.getElementById('welcome-message');
229
+
230
+ if (welcomeMsg) {
231
+ chatWindow.removeChild(welcomeMsg);
232
+ }
233
+
234
+ // Add user message
235
+ chatWindow.innerHTML += `
236
+ <div class="flex justify-end mb-3">
237
+ <div class="chat-bubble user bg-blue-500 text-white p-3 max-w-xs lg:max-w-md">
238
+ ${input.value}
239
+ </div>
240
+ </div>
241
+ `;
242
+
243
+ // Add AI response (simulated)
244
+ const responses = [
245
+ "Fascinating query! Let me unpack that for you...",
246
+ "Ah, an excellent question. The answer lies in quantum entanglement.",
247
+ "I've consulted my neural pathways and determined...",
248
+ "According to my 42 billion parameters...",
249
+ "Error 404: Witty response not found. Just kidding! Here's what I think...",
250
+ "Processing... processing... just kidding! Here's my answer:"
251
+ ];
252
+
253
+ setTimeout(() => {
254
+ chatWindow.innerHTML += `
255
+ <div class="flex justify-start mb-3">
256
+ <div class="chat-bubble bg-gray-200 text-gray-800 p-3 max-w-xs lg:max-w-md">
257
+ ${responses[Math.floor(Math.random() * responses.length)]}<br><br>
258
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
259
+ </div>
260
+ </div>
261
+ `;
262
+ chatWindow.scrollTop = chatWindow.scrollHeight;
263
+ }, 1000 + Math.random() * 2000);
264
+
265
+ input.value = '';
266
+ chatWindow.scrollTop = chatWindow.scrollHeight;
267
+ });
268
+
269
+ // Allow pressing Enter to send message
270
+ document.querySelector('input').addEventListener('keypress', function(e) {
271
+ if (e.key === 'Enter') {
272
+ document.querySelector('button').click();
273
+ }
274
+ });
275
+ </script>
276
+ </body>
277
  </html>