Hugging Face's logo

Spaces:
Pepguy
/
synthetic_data
Sleeping

App Files Community
Pepguy commited on
Commit
4b4c5ae
·
verified ·
1 Parent(s): bb059f1

Delete public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +0 -218
public/index.html DELETED
@@ -1,218 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" class="dark">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
- <title>AI Developer Hub</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
11
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
12
- <script>
13
- tailwind.config = {
14
- darkMode: 'class',
15
- theme: { extend: { colors: { gray: { 850: '#1f2937', 900: '#111827', 950: '#030712' } } } }
16
- }
17
- </script>
18
- <style>
19
- ::-webkit-scrollbar { width: 6px; height: 6px; }
20
- ::-webkit-scrollbar-track { background: transparent; }
21
- ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
22
- ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
23
-
24
- .markdown-body { font-size: 0.95rem; line-height: 1.6; }
25
- .markdown-body code:not(pre code) { background: #374151; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
26
- .markdown-body pre { background: #1e1e1e; padding: 2.5rem 1rem 1rem 1rem; border-radius: 0.5rem; position: relative; overflow-x: auto; margin-bottom: 1rem; }
27
-
28
- /* Snippet Collapse Logic */
29
- .markdown-body pre.snippet-collapsed { max-height: 8rem; overflow: hidden !important; }
30
- .markdown-body pre.snippet-collapsed::after {
31
- content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3rem;
32
- background: linear-gradient(transparent, #1e1e1e); pointer-events: none;
33
- }
34
-
35
- .copy-btn, .expand-btn { position: absolute; top: 0.5rem; background: #4b5563; color: #e5e7eb; border: none; padding: 0.25rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.75rem; transition: background 0.2s; }
36
- .copy-btn { right: 0.5rem; }
37
- .expand-btn { right: 4.5rem; }
38
- .copy-btn:hover, .expand-btn:hover { background: #6b7280; }
39
-
40
- .reasoning-block { border-left: 3px solid #6366f1; padding: 0.75rem; margin-bottom: 1rem; color: #9ca3af; font-size: 0.9em; background: rgba(99, 102, 241, 0.05); border-radius: 0 0.5rem 0.5rem 0; }
41
- </style>
42
- </head>
43
- <body class="bg-gray-950 text-gray-200 h-[100dvh] flex font-sans overflow-hidden antialiased">
44
-
45
- <div id="mobile-overlay" class="fixed inset-0 bg-black/60 z-20 hidden lg:hidden" onclick="toggleSidebar()"></div>
46
-
47
- <aside id="sidebar" class="absolute lg:relative z-30 inset-y-0 left-0 w-72 lg:w-64 bg-gray-900 border-r border-gray-800 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 flex flex-col">
48
- <div class="p-4 border-b border-gray-800 flex justify-between items-center bg-gray-900">
49
- <h1 class="font-bold text-lg text-white tracking-wide">Dev AI Hub</h1>
50
- <button onclick="createNewChat()" class="p-2 text-blue-400 hover:text-blue-300 bg-gray-800 rounded-md transition">
51
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
52
- </button>
53
- </div>
54
- <div id="chat-list" class="flex-1 overflow-y-auto p-3 space-y-2"></div>
55
- </aside>
56
-
57
- <main class="flex-1 flex flex-col h-full w-full bg-gray-950 relative min-w-0">
58
- <header class="h-14 border-b border-gray-800 flex items-center px-4 justify-between bg-gray-900/80 backdrop-blur-sm z-10">
59
- <div class="flex items-center gap-3 truncate">
60
- <button onclick="toggleSidebar()" class="lg:hidden p-1 text-gray-400">
61
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
62
- </button>
63
- <h2 id="current-chat-title" class="font-semibold text-gray-100 truncate">Select a chat</h2>
64
- </div>
65
-
66
- <div class="flex items-center gap-3">
67
- <select id="model-select" class="bg-gray-800 text-xs rounded-md border border-gray-700 px-2 py-1 outline-none text-gray-200">
68
- <option value="claude">Claude Sonnet 3.5</option>
69
- <option value="haiku">Claude Haiku</option>
70
- <option value="maverick">Llama 3</option>
71
- </select>
72
- <button onclick="deleteCurrentChat()" class="text-gray-500 hover:text-red-400">
73
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
74
- </button>
75
- </div>
76
- </header>
77
-
78
- <div id="chat-window" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6"></div>
79
-
80
- <div class="p-4 bg-gray-900 border-t border-gray-800">
81
- <div class="max-w-4xl mx-auto flex items-end gap-2 bg-gray-850 rounded-xl border border-gray-700 p-2">
82
- <textarea id="message-input" rows="1" class="flex-1 bg-transparent resize-none outline-none p-2 text-gray-100" placeholder="Type a message..."></textarea>
83
- <button onclick="sendMessage()" id="send-btn" class="p-2 text-blue-400 hover:text-blue-300">
84
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
85
- </button>
86
- </div>
87
- </div>
88
- </main>
89
-
90
- <script>
91
- marked.setOptions({ highlight: (code, lang) => hljs.highlightAuto(code).value });
92
-
93
- let currentChatId = null;
94
- let lastMessageCount = 0; // Prevent unnecessary re-renders
95
- let pollingInterval = null;
96
-
97
- function toggleSidebar() {
98
- document.getElementById('sidebar').classList.toggle('-translate-x-full');
99
- document.getElementById('mobile-overlay').classList.toggle('hidden');
100
- }
101
-
102
- async function loadSidebar() {
103
- try {
104
- const res = await fetch('/api/chats');
105
- const chats = await res.json();
106
- const container = document.getElementById('chat-list');
107
-
108
- // Only update sidebar if content changed to prevent "restart" flicker
109
- const newHtml = chats.map(c => `
110
- <div onclick="selectChat('${c.id}')" class="p-3 rounded-xl cursor-pointer transition ${c.id === currentChatId ? 'bg-gray-800 border-gray-700' : 'hover:bg-gray-800/50'}">
111
- <div class="text-sm font-medium truncate text-gray-200">${c.title}</div>
112
- </div>
113
- `).join('');
114
-
115
- if (container.innerHTML !== newHtml) container.innerHTML = newHtml;
116
- } catch (e) { console.error("Sidebar sync failed"); }
117
- }
118
-
119
- async function selectChat(id) {
120
- if (pollingInterval) clearInterval(pollingInterval);
121
- currentChatId = id;
122
- lastMessageCount = 0;
123
-
124
- const res = await fetch(`/api/chats/${id}`);
125
- const chat = await res.json();
126
-
127
- document.getElementById('current-chat-title').innerText = chat.title;
128
- renderMessages(chat.messages);
129
-
130
- if (chat.isGenerating) startPolling(id);
131
- if (window.innerWidth < 1024) toggleSidebar();
132
- }
133
-
134
- function renderMessages(messages) {
135
- // Optimization: If message count is same, don't nuke the DOM
136
- if (messages.length === lastMessageCount) return;
137
-
138
- const container = document.getElementById('chat-window');
139
- const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 100;
140
-
141
- container.innerHTML = messages.map(m => {
142
- let content = m.role === 'user' ? `<div class="whitespace-pre-wrap">${m.content}</div>` : DOMPurify.sanitize(marked.parse(m.content || ''));
143
- if (m.reasoning) content = `<div class="reasoning-block"><i>Thinking...</i><br>${marked.parse(m.reasoning)}</div>` + content;
144
-
145
- return `
146
- <div class="flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}">
147
- <div class="max-w-[90%] rounded-2xl p-4 ${m.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-850 border border-gray-800 text-gray-200 markdown-body'}">
148
- ${content}
149
- </div>
150
- </div>`;
151
- }).join('');
152
-
153
- lastMessageCount = messages.length;
154
- attachCodeTools();
155
- if (isAtBottom) container.scrollTop = container.scrollHeight;
156
- }
157
-
158
- function startPolling(id) {
159
- pollingInterval = setInterval(async () => {
160
- const res = await fetch(`/api/chats/${id}`);
161
- const chat = await res.json();
162
- renderMessages(chat.messages);
163
- if (!chat.isGenerating) clearInterval(pollingInterval);
164
- }, 2000);
165
- }
166
-
167
- function attachCodeTools() {
168
- document.querySelectorAll('.markdown-body pre').forEach(pre => {
169
- if (pre.querySelector('.copy-btn')) return;
170
-
171
- const copy = document.createElement('button');
172
- copy.className = 'copy-btn'; copy.innerText = 'Copy';
173
- copy.onclick = () => {
174
- navigator.clipboard.writeText(pre.textContent.replace('CopyExpand', '').trim());
175
- copy.innerText = 'Copied!';
176
- setTimeout(() => copy.innerText = 'Copy', 2000);
177
- };
178
-
179
- if (pre.scrollHeight > 180) {
180
- pre.classList.add('snippet-collapsed');
181
- const exp = document.createElement('button');
182
- exp.className = 'expand-btn'; exp.innerText = 'Expand';
183
- exp.onclick = () => {
184
- const isCol = pre.classList.toggle('snippet-collapsed');
185
- exp.innerText = isCol ? 'Expand' : 'Collapse';
186
- };
187
- pre.appendChild(exp);
188
- }
189
- pre.appendChild(copy);
190
- });
191
- }
192
-
193
- async function sendMessage() {
194
- const input = document.getElementById('message-input');
195
- const text = input.value.trim();
196
- if (!text || !currentChatId) return;
197
-
198
- input.value = '';
199
- // Append user message immediately (Optimistic UI)
200
- const container = document.getElementById('chat-window');
201
- container.innerHTML += `<div class="flex justify-end"><div class="max-w-[90%] rounded-2xl p-4 bg-blue-600 text-white">${text}</div></div>`;
202
- container.scrollTop = container.scrollHeight;
203
-
204
- await fetch(`/api/chats/${currentChatId}/stream`, {
205
- method: 'POST',
206
- headers: { 'Content-Type': 'application/json' },
207
- body: JSON.stringify({ prompt: text, model: document.getElementById('model-select').value })
208
- });
209
-
210
- startPolling(currentChatId);
211
- }
212
-
213
- // Initialize
214
- loadSidebar();
215
- setInterval(loadSidebar, 10000); // Background sync every 10s (quiet, no reload)
216
- </script>
217
- </body>
218
- </html>