Hugging Face's logo

Spaces:
tommytracx
/
t
Running

App Files Community
tommytracx commited on
Commit
eaadc27
·
verified ·
1 Parent(s): a235c02

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +392 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: T
3
- emoji: 😻
4
- colorFrom: gray
5
  colorTo: purple
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: t
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: purple
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,392 @@
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>HuroAI Ollama Playground</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f5f7fa;
15
+ }
16
+
17
+ .message-user {
18
+ background-color: #e3f2fd;
19
+ border-radius: 18px 18px 0 18px;
20
+ }
21
+
22
+ .message-ai {
23
+ background-color: #ffffff;
24
+ border-radius: 18px 18px 18px 0;
25
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
26
+ }
27
+
28
+ .model-card {
29
+ transition: all 0.2s ease;
30
+ }
31
+
32
+ .model-card:hover {
33
+ transform: translateY(-2px);
34
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
35
+ }
36
+
37
+ .model-card.selected {
38
+ border-color: #3b82f6;
39
+ background-color: #f0f7ff;
40
+ }
41
+
42
+ .typing-indicator span {
43
+ display: inline-block;
44
+ width: 8px;
45
+ height: 8px;
46
+ border-radius: 50%;
47
+ background-color: #9ca3af;
48
+ margin: 0 2px;
49
+ }
50
+
51
+ .typing-indicator span:nth-child(1) {
52
+ animation: bounce 1s infinite;
53
+ }
54
+
55
+ .typing-indicator span:nth-child(2) {
56
+ animation: bounce 1s infinite 0.2s;
57
+ }
58
+
59
+ .typing-indicator span:nth-child(3) {
60
+ animation: bounce 1s infinite 0.4s;
61
+ }
62
+
63
+ @keyframes bounce {
64
+ 0%, 100% { transform: translateY(0); }
65
+ 50% { transform: translateY(-5px); }
66
+ }
67
+
68
+ #chat-container {
69
+ scrollbar-width: thin;
70
+ scrollbar-color: #cbd5e0 #f1f5f9;
71
+ }
72
+
73
+ #chat-container::-webkit-scrollbar {
74
+ width: 6px;
75
+ }
76
+
77
+ #chat-container::-webkit-scrollbar-track {
78
+ background: #f1f5f9;
79
+ }
80
+
81
+ #chat-container::-webkit-scrollbar-thumb {
82
+ background-color: #cbd5e0;
83
+ border-radius: 3px;
84
+ }
85
+ </style>
86
+ </head>
87
+ <body class="min-h-screen flex flex-col">
88
+ <header class="bg-white shadow-sm py-4">
89
+ <div class="container mx-auto px-4 flex justify-between items-center">
90
+ <div class="flex items-center space-x-2">
91
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
92
+ <i class="fas fa-robot text-white"></i>
93
+ </div>
94
+ <h1 class="text-xl font-bold text-gray-800">HuroAI Ollama Playground</h1>
95
+ </div>
96
+ <div class="flex items-center space-x-4">
97
+ <a href="#" class="text-gray-600 hover:text-blue-500">
98
+ <i class="fas fa-cog"></i>
99
+ </a>
100
+ <a href="#" class="text-gray-600 hover:text-blue-500">
101
+ <i class="fas fa-question-circle"></i>
102
+ </a>
103
+ </div>
104
+ </div>
105
+ </header>
106
+
107
+ <main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
108
+ <!-- Model Selection Sidebar -->
109
+ <aside class="w-full lg:w-64 flex-shrink-0">
110
+ <div class="bg-white rounded-xl shadow-sm p-4 sticky top-6">
111
+ <h2 class="font-semibold text-gray-700 mb-4">Available Models</h2>
112
+ <div class="space-y-3">
113
+ <div class="model-card p-3 border rounded-lg cursor-pointer transition selected" data-model="huroai/phoenixcoder">
114
+ <div class="flex items-center space-x-3">
115
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
116
+ <i class="fas fa-code text-purple-600"></i>
117
+ </div>
118
+ <div>
119
+ <h3 class="font-medium text-gray-800">PhoenixCoder</h3>
120
+ <p class="text-xs text-gray-500">Specialized in coding</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="model-card p-3 border rounded-lg cursor-pointer transition" data-model="huroai/beehuroai">
126
+ <div class="flex items-center space-x-3">
127
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
128
+ <i class="fas fa-comment-dots text-yellow-600"></i>
129
+ </div>
130
+ <div>
131
+ <h3 class="font-medium text-gray-800">BeeHuroAI</h3>
132
+ <p class="text-xs text-gray-500">General assistant</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="model-card p-3 border rounded-lg cursor-pointer transition" data-model="huroai/beehuroai-vision">
138
+ <div class="flex items-center space-x-3">
139
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
140
+ <i class="fas fa-eye text-green-600"></i>
141
+ </div>
142
+ <div>
143
+ <h3 class="font-medium text-gray-800">BeeHuroAI Vision</h3>
144
+ <p class="text-xs text-gray-500">Multimodal capabilities</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="mt-6 pt-4 border-t border-gray-100">
151
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Model Settings</h3>
152
+ <div class="space-y-3">
153
+ <div>
154
+ <label class="block text-xs text-gray-500 mb-1">Temperature</label>
155
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
156
+ </div>
157
+ <div>
158
+ <label class="block text-xs text-gray-500 mb-1">Max Tokens</label>
159
+ <input type="number" value="2048" class="w-full px-2 py-1 text-sm border rounded">
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </aside>
165
+
166
+ <!-- Chat Interface -->
167
+ <div class="flex-1 flex flex-col bg-white rounded-xl shadow-sm overflow-hidden">
168
+ <!-- Chat Header -->
169
+ <div class="border-b border-gray-100 p-4 flex items-center justify-between">
170
+ <div>
171
+ <h2 class="font-semibold text-gray-800">Chat with PhoenixCoder</h2>
172
+ <p class="text-xs text-gray-500">Model is ready</p>
173
+ </div>
174
+ <div class="flex space-x-2">
175
+ <button class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-50 rounded-full">
176
+ <i class="fas fa-redo"></i>
177
+ </button>
178
+ <button class="p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-50 rounded-full">
179
+ <i class="fas fa-trash-alt"></i>
180
+ </button>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Chat Messages -->
185
+ <div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-4">
186
+ <div class="flex justify-start">
187
+ <div class="message-ai p-4 max-w-[85%]">
188
+ <div class="flex items-center space-x-2 mb-1">
189
+ <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
190
+ <i class="fas fa-robot text-blue-500 text-xs"></i>
191
+ </div>
192
+ <span class="text-xs font-medium text-gray-700">PhoenixCoder</span>
193
+ </div>
194
+ <p class="text-gray-800">Hello! I'm PhoenixCoder, your AI coding assistant. I can help with code generation, debugging, and explanations. What would you like to work on today?</p>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="flex justify-end">
199
+ <div class="message-user p-4 max-w-[85%]">
200
+ <div class="flex items-center space-x-2 mb-1 justify-end">
201
+ <span class="text-xs font-medium text-gray-700">You</span>
202
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
203
+ <i class="fas fa-user text-white text-xs"></i>
204
+ </div>
205
+ </div>
206
+ <p class="text-gray-800">Can you help me write a Python function to calculate Fibonacci numbers?</p>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="flex justify-start">
211
+ <div class="message-ai p-4 max-w-[85%]">
212
+ <div class="flex items-center space-x-2 mb-1">
213
+ <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
214
+ <i class="fas fa-robot text-blue-500 text-xs"></i>
215
+ </div>
216
+ <span class="text-xs font-medium text-gray-700">PhoenixCoder</span>
217
+ </div>
218
+ <div class="text-gray-800">
219
+ <p>Certainly! Here's a Python function to calculate Fibonacci numbers recursively:</p>
220
+ <pre class="bg-gray-100 p-3 rounded mt-2 overflow-x-auto"><code class="text-sm">def fibonacci(n):
221
+ if n <= 1:
222
+ return n
223
+ else:
224
+ return fibonacci(n-1) + fibonacci(n-2)</code></pre>
225
+ <p class="mt-2">Would you like me to explain how it works or provide an iterative version?</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Input Area -->
232
+ <div class="border-t border-gray-100 p-4">
233
+ <div class="flex items-end space-x-2">
234
+ <div class="flex-1 relative">
235
+ <textarea id="message-input" rows="1" placeholder="Type your message..." class="w-full px-4 py-3 pr-12 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" style="min-height: 50px;"></textarea>
236
+ <div class="absolute right-2 bottom-3 flex space-x-1">
237
+ <button class="p-1 text-gray-400 hover:text-blue-500">
238
+ <i class="fas fa-paperclip"></i>
239
+ </button>
240
+ <button class="p-1 text-gray-400 hover:text-blue-500">
241
+ <i class="fas fa-image"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ <button id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-lg transition">
246
+ <i class="fas fa-paper-plane"></i>
247
+ </button>
248
+ </div>
249
+ <div class="mt-2 text-xs text-gray-500 flex justify-between">
250
+ <div>
251
+ <span id="char-count">0</span>/1000
252
+ </div>
253
+ <div>
254
+ <button class="text-blue-500 hover:underline">Shift + Enter for new line</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </main>
260
+
261
+ <footer class="bg-white border-t py-4">
262
+ <div class="container mx-auto px-4 text-center text-sm text-gray-500">
263
+ <p>Powered by Ollama • Models by HuroAI • <a href="#" class="text-blue-500 hover:underline">Terms</a> • <a href="#" class="text-blue-500 hover:underline">Privacy</a></p>
264
+ </div>
265
+ </footer>
266
+
267
+ <script>
268
+ document.addEventListener('DOMContentLoaded', function() {
269
+ // Model selection
270
+ const modelCards = document.querySelectorAll('.model-card');
271
+ modelCards.forEach(card => {
272
+ card.addEventListener('click', function() {
273
+ modelCards.forEach(c => c.classList.remove('selected'));
274
+ this.classList.add('selected');
275
+
276
+ const modelName = this.getAttribute('data-model');
277
+ document.querySelector('.chat-header h2').textContent = `Chat with ${modelName.split('/')[1]}`;
278
+
279
+ // In a real implementation, you would switch the active model here
280
+ console.log(`Switched to model: ${modelName}`);
281
+ });
282
+ });
283
+
284
+ // Message input handling
285
+ const messageInput = document.getElementById('message-input');
286
+ const sendButton = document.getElementById('send-button');
287
+ const chatContainer = document.getElementById('chat-container');
288
+ const charCount = document.getElementById('char-count');
289
+
290
+ messageInput.addEventListener('input', function() {
291
+ charCount.textContent = this.value.length;
292
+ });
293
+
294
+ function sendMessage() {
295
+ const message = messageInput.value.trim();
296
+ if (message === '') return;
297
+
298
+ // Add user message to chat
299
+ const userMessageHtml = `
300
+ <div class="flex justify-end">
301
+ <div class="message-user p-4 max-w-[85%]">
302
+ <div class="flex items-center space-x-2 mb-1 justify-end">
303
+ <span class="text-xs font-medium text-gray-700">You</span>
304
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
305
+ <i class="fas fa-user text-white text-xs"></i>
306
+ </div>
307
+ </div>
308
+ <p class="text-gray-800">${message}</p>
309
+ </div>
310
+ </div>
311
+ `;
312
+ chatContainer.insertAdjacentHTML('beforeend', userMessageHtml);
313
+
314
+ // Clear input
315
+ messageInput.value = '';
316
+ charCount.textContent = '0';
317
+
318
+ // Add typing indicator
319
+ const typingIndicator = `
320
+ <div class="flex justify-start">
321
+ <div class="message-ai p-4 max-w-[85%]">
322
+ <div class="flex items-center space-x-2 mb-1">
323
+ <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
324
+ <i class="fas fa-robot text-blue-500 text-xs"></i>
325
+ </div>
326
+ <span class="text-xs font-medium text-gray-700">${document.querySelector('.selected h3').textContent}</span>
327
+ </div>
328
+ <div class="typing-indicator">
329
+ <span></span>
330
+ <span></span>
331
+ <span></span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ `;
336
+ chatContainer.insertAdjacentHTML('beforeend', typingIndicator);
337
+ chatContainer.scrollTop = chatContainer.scrollHeight;
338
+
339
+ // Simulate AI response after delay
340
+ setTimeout(() => {
341
+ // Remove typing indicator
342
+ const typingIndicators = document.querySelectorAll('.typing-indicator');
343
+ typingIndicators[typingIndicators.length - 1].parentNode.parentNode.remove();
344
+
345
+ // Add AI response
346
+ const selectedModel = document.querySelector('.selected').getAttribute('data-model');
347
+ let responseText = '';
348
+
349
+ if (selectedModel === 'huroai/phoenixcoder') {
350
+ responseText = `I'm PhoenixCoder, your coding assistant. I can help you with programming questions. For your message: "${message}", I would typically provide a code solution or explanation. In a real implementation, this would connect to the Ollama API.`;
351
+ } else if (selectedModel === 'huroai/beehuroai') {
352
+ responseText = `As BeeHuroAI, I can assist with general knowledge questions. You asked: "${message}". In a production environment, this would query the Ollama model for a detailed response.`;
353
+ } else if (selectedModel === 'huroai/beehuroai-vision') {
354
+ responseText = `BeeHuroAI Vision can process both text and images. You sent: "${message}". If you included an image, I could analyze it. This is a demo - in reality, it would use Ollama's multimodal capabilities.`;
355
+ }
356
+
357
+ const aiMessageHtml = `
358
+ <div class="flex justify-start">
359
+ <div class="message-ai p-4 max-w-[85%]">
360
+ <div class="flex items-center space-x-2 mb-1">
361
+ <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
362
+ <i class="fas fa-robot text-blue-500 text-xs"></i>
363
+ </div>
364
+ <span class="text-xs font-medium text-gray-700">${document.querySelector('.selected h3').textContent}</span>
365
+ </div>
366
+ <p class="text-gray-800">${responseText}</p>
367
+ </div>
368
+ </div>
369
+ `;
370
+ chatContainer.insertAdjacentHTML('beforeend', aiMessageHtml);
371
+ chatContainer.scrollTop = chatContainer.scrollHeight;
372
+ }, 1500);
373
+ }
374
+
375
+ sendButton.addEventListener('click', sendMessage);
376
+
377
+ messageInput.addEventListener('keydown', function(e) {
378
+ if (e.key === 'Enter' && !e.shiftKey) {
379
+ e.preventDefault();
380
+ sendMessage();
381
+ }
382
+ });
383
+
384
+ // Auto-resize textarea
385
+ messageInput.addEventListener('input', function() {
386
+ this.style.height = 'auto';
387
+ this.style.height = (this.scrollHeight) + 'px';
388
+ });
389
+ });
390
+ </script>
391
+ <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=tommytracx/t" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
392
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a Hugging Face Space that uses my Ollama models: ollama run huroai/phoenixcoder ollama run huroai/beehuroai ollama run huroai/beehuroai-vision