synthetic_data

Sleeping

App Files Files Community

Pepguy commited on Apr 24

Commit

bb18161

verified ·

1 Parent(s): 017e9c7

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +276 -46

public/index.html CHANGED Viewed

@@ -1,49 +1,279 @@
-<!-- producer.html -->
 <!DOCTYPE html>
-<html>
-<body>
-  <h3>Broadcaster</h3>
-  <p>Hello </p>
-  <video id="localVideo" autoplay muted></video>
-  <script>
-  const ws = new WebSocket('ws://pepguy-swarming-1.hf.space');
-  let transport, producer;
-  ws.onmessage = async ({ data }) => {
-    const { action, data: d } = JSON.parse(data);
-    if (action === 'producerTransportCreated') {
-      transport = device.createSendTransport(d);
-      transport.on('connect', ({ dtlsParameters }, cb) =>
-        ws.send(JSON.stringify({ action: 'connectProducerTransport', data: { dtlsParameters } })), cb()
-      );
-      transport.on('produce', ({ kind, rtpParameters }, cb) =>
-        ws.send(JSON.stringify({ action: 'produce', data: { kind, rtpParameters } })), cb({ id: '' })
-      );
-    }
-    if (action === 'produced') {
-      console.log('Producer ready:', d.producerId);
-    }
-  };
-  async function start() {
-    // 1) getUserMedia
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
-    document.getElementById('localVideo').srcObject = stream;
-    // 2) load device RTP capabilities
-    ws.send(JSON.stringify({ action: 'createProducerTransport' }));
-    const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json();
-    device = new mediasoupClient.Device();
-    await device.load({ routerRtpCapabilities: rtpCapabilities });
-    // 3) wait for transport then produce
-    stream.getTracks().forEach(track => transport.produce({ track }));
-  }
-  start();
-  </script>
-  <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Developer Hub</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: { extend: { colors: { gray: { 850: '#1f2937', 900: '#111827', 950: '#030712' } } } }
+        }
+    </script>
+    <style>
+        .markdown-body pre { background: #1e1e1e; padding: 1rem; border-radius: 0.5rem; position: relative; }
+        .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: #374151; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; }
+        .copy-btn:hover { background: #4b5563; }
+        .reasoning-block { border-left: 3px solid #6366f1; padding-left: 1rem; margin-bottom: 1rem; color: #9ca3af; font-size: 0.9em; background: rgba(99, 102, 241, 0.05); padding: 0.5rem; border-radius: 0 0.5rem 0.5rem 0; }
+    </style>
+</head>
+<body class="bg-gray-950 text-gray-200 h-screen flex font-sans overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
+        <div class="p-4 border-b border-gray-800 flex justify-between items-center">
+            <h1 class="font-bold text-lg text-white">Dev AI Hub</h1>
+            <button onclick="createNewChat()" class="text-blue-400 hover:text-blue-300">+</button>
+        </div>
+        <div id="chat-list" class="flex-1 overflow-y-auto p-2 space-y-1"></div>
+    </aside>
+    <!-- Main Chat Area -->
+    <main class="flex-1 flex flex-col h-full bg-gray-950">
+        <!-- Header -->
+        <header class="h-14 border-b border-gray-800 flex items-center px-6 justify-between bg-gray-900/50">
+            <h2 id="current-chat-title" class="font-semibold text-gray-100">Select or create a chat</h2>
+            <div class="flex items-center space-x-4">
+                <span class="text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded">Tokens: <span id="token-counter">0</span></span>
+                <select id="model-select" class="bg-gray-800 text-sm rounded border border-gray-700 px-2 py-1 outline-none focus:border-blue-500">
+                    <option value="claude">Claude Sonnet 3.5</option>
+                    <option value="haiku">Claude Haiku</option>
+                    <option value="maverick">Llama 3 Maverick</option>
+                </select>
+                <button onclick="deleteCurrentChat()" class="text-red-500 text-sm hover:text-red-400">Delete Chat</button>
+            </div>
+        </header>
+        <!-- Messages -->
+        <div id="chat-window" class="flex-1 overflow-y-auto p-6 space-y-6"></div>
+        <!-- Input Area -->
+        <div class="p-4 bg-gray-900 border-t border-gray-800">
+            <div id="image-preview-container" class="flex gap-2 mb-2 hidden"></div>
+            <div class="flex items-end gap-2 bg-gray-800 rounded-xl border border-gray-700 p-2 focus-within:border-blue-500 transition-colors">
+                <label class="cursor-pointer p-2 text-gray-400 hover:text-white transition">
+                    <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                    <input type="file" id="image-input" accept="image/*" multiple class="hidden" onchange="handleImageSelect(event)">
+                </label>
+                <textarea id="message-input" rows="1" class="flex-1 bg-transparent resize-none outline-none text-sm p-2 max-h-32" placeholder="Ask anything..."></textarea>
+                <button onclick="sendMessage()" id="send-btn" class="p-2 text-blue-400 hover:text-blue-300 disabled:opacity-50 transition">
+                    <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>
+                </button>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Configure Marked with highlight.js for styling block code
+        marked.setOptions({
+            highlight: function(code, lang) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                return hljs.highlight(code, { language }).value;
+            }
+        });
+        let currentChatId = null;
+        let attachedImages =[];
+        let pollingInterval = null;
+        async function loadSidebar() {
+            const res = await fetch('/api/chats');
+            const chats = await res.json();
+            const list = document.getElementById('chat-list');
+            list.innerHTML = chats.map(c => `
+                <div onclick="selectChat('${c.id}')" class="p-3 rounded-lg cursor-pointer hover:bg-gray-800 transition ${c.id === currentChatId ? 'bg-gray-800' : ''}">
+                    <div class="text-sm font-medium truncate">${c.title}</div>
+                    <div class="text-xs text-gray-500 mt-1">${c.totalTokens.toLocaleString()} tokens</div>
+                </div>
+            `).join('');
+        }
+        async function createNewChat() {
+            const res = await fetch('/api/chats', { method: 'POST' });
+            const chat = await res.json();
+            selectChat(chat.id);
+            loadSidebar();
+        }
+        async function deleteCurrentChat() {
+            if (!currentChatId) return;
+            if (confirm("Permanently delete this chat?")) {
+                await fetch(`/api/chats/${currentChatId}`, { method: 'DELETE' });
+                currentChatId = null;
+                document.getElementById('chat-window').innerHTML = '';
+                document.getElementById('current-chat-title').innerText = 'Select or create a chat';
+                document.getElementById('token-counter').innerText = '0';
+                loadSidebar();
+            }
+        }
+        async function selectChat(id) {
+            currentChatId = id;
+            clearInterval(pollingInterval);
+            const res = await fetch(`/api/chats/${id}`);
+            const chat = await res.json();
+            document.getElementById('current-chat-title').innerText = chat.title;
+            document.getElementById('token-counter').innerText = chat.totalTokens.toLocaleString();
+            renderMessages(chat.messages);
+            loadSidebar(); // Updates highlighting
+            // If a reload happens during generation, poll until done.
+            if (chat.isGenerating) {
+                pollGeneratingChat(id);
+            }
+        }
+        function renderMessages(messages) {
+            const container = document.getElementById('chat-window');
+            container.innerHTML = messages.map(m => {
+                let html = '';
+                if (m.reasoning) {
+                    html += `<div class="reasoning-block"><i>Thinking...</i><br/>${marked.parse(m.reasoning)}</div>`;
+                }
+                if (m.content) {
+                    html += DOMPurify.sanitize(marked.parse(m.content));
+                }
+                return `
+                    <div class="flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}">
+                        <div class="max-w-[80%] rounded-xl p-4 ${m.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-850 border border-gray-800 markdown-body'}">
+                            ${m.role === 'user' ? m.content : html}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+            // Add copy buttons to code blocks
+            document.querySelectorAll('.markdown-body pre').forEach(pre => {
+                if (!pre.querySelector('.copy-btn')) {
+                    const btn = document.createElement('button');
+                    btn.className = 'copy-btn';
+                    btn.innerText = 'Copy';
+                    btn.onclick = () => {
+                        navigator.clipboard.writeText(pre.innerText.replace('Copy', '').trim());
+                        btn.innerText = 'Copied!';
+                        setTimeout(() => btn.innerText = 'Copy', 2000);
+                    };
+                    pre.appendChild(btn);
+                }
+            });
+            container.scrollTop = container.scrollHeight;
+        }
+        function pollGeneratingChat(id) {
+            pollingInterval = setInterval(async () => {
+                const res = await fetch(`/api/chats/${id}`);
+                const chat = await res.json();
+                renderMessages(chat.messages);
+                document.getElementById('token-counter').innerText = chat.totalTokens.toLocaleString();
+                if (!chat.isGenerating) clearInterval(pollingInterval);
+            }, 1500);
+        }
+        function handleImageSelect(event) {
+            const files = event.target.files;
+            const container = document.getElementById('image-preview-container');
+            container.classList.remove('hidden');
+            Array.from(files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    attachedImages.push(e.target.result);
+                    container.innerHTML += `<img src="${e.target.result}" class="h-12 w-12 object-cover rounded border border-gray-600">`;
+                };
+                reader.readAsDataURL(file);
+            });
+        }
+        async function sendMessage() {
+            const input = document.getElementById('message-input');
+            const text = input.value.trim();
+            if (!text || !currentChatId) return;
+            const payload = {
+                model: document.getElementById('model-select').value,
+                prompt: text,
+                images: attachedImages
+            };
+            const container = document.getElementById('chat-window');
+            container.innerHTML += `
+                <div class="flex justify-end mb-6"><div class="max-w-[80%] rounded-xl p-4 bg-blue-600 text-white">${text}</div></div>
+                <div class="flex justify-start mb-6" id="temp-ai-wrapper"><div class="max-w-[80%] rounded-xl p-4 bg-gray-850 border border-gray-800 markdown-body" id="temp-ai-msg"><span class="animate-pulse">Thinking...</span></div></div>
+            `;
+            container.scrollTop = container.scrollHeight;
+            input.value = '';
+            attachedImages =[];
+            document.getElementById('image-preview-container').innerHTML = '';
+            document.getElementById('image-preview-container').classList.add('hidden');
+            document.getElementById('send-btn').disabled = true;
+            try {
+                const response = await fetch(`/api/chats/${currentChatId}/stream`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let aiContent = "";
+                let aiReasoning = "";
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+                    const chunkText = decoder.decode(value, { stream: true });
+                    const chunks = chunkText.split(/(__THINK__|__USAGE__)/);
+                    let i = 0;
+                    while (i < chunks.length) {
+                        if (chunks[i] === '__THINK__') {
+                            aiReasoning += chunks[i+1];
+                            i += 2;
+                        } else if (chunks[i] === '__USAGE__') {
+                            const usageData = JSON.parse(chunks[i+1]);
+                            document.getElementById('token-counter').innerText =
+                                (parseInt(document.getElementById('token-counter').innerText.replace(/,/g, '')) + usageData.totalTokenCount).toLocaleString();
+                            i += 2;
+                        } else {
+                            aiContent += chunks[i];
+                            i++;
+                        }
+                    }
+                    let tempHtml = "";
+                    if (aiReasoning) tempHtml += `<div class="reasoning-block"><i>Thinking...</i><br/>${marked.parse(aiReasoning)}</div>`;
+                    if (aiContent) tempHtml += DOMPurify.sanitize(marked.parse(aiContent));
+                    document.getElementById('temp-ai-msg').innerHTML = tempHtml || "<span class='animate-pulse'>Thinking...</span>";
+                    container.scrollTop = container.scrollHeight;
+                }
+                selectChat(currentChatId);
+            } catch (error) {
+                console.error(error);
+                document.getElementById('temp-ai-msg').innerHTML = "<span class='text-red-500'>Error connecting to API.</span>";
+            } finally {
+                document.getElementById('send-btn').disabled = false;
+            }
+        }
+        document.getElementById('message-input').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+        });
+        loadSidebar();
+    </script>
 </body>
 </html>