synthetic_data

Sleeping

App Files Files Community

Pepguy commited on 26 days ago

Commit

bb059f1

verified ·

1 Parent(s): e7298b3

Rename public/index.js to public/index.html

Browse files

Files changed (2) hide show

public/index.html +218 -0
public/index.js +0 -39

public/index.html ADDED Viewed

	@@ -0,0 +1,218 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <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>
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
+        .markdown-body { font-size: 0.95rem; line-height: 1.6; }
+        .markdown-body code:not(pre code) { background: #374151; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
+        .markdown-body pre { background: #1e1e1e; padding: 2.5rem 1rem 1rem 1rem; border-radius: 0.5rem; position: relative; overflow-x: auto; margin-bottom: 1rem; }
+        /* Snippet Collapse Logic */
+        .markdown-body pre.snippet-collapsed { max-height: 8rem; overflow: hidden !important; }
+        .markdown-body pre.snippet-collapsed::after {
+            content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3rem;
+            background: linear-gradient(transparent, #1e1e1e); pointer-events: none;
+        }
+        .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; }
+        .copy-btn { right: 0.5rem; }
+        .expand-btn { right: 4.5rem; }
+        .copy-btn:hover, .expand-btn:hover { background: #6b7280; }
+        .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; }
+    </style>
+</head>
+<body class="bg-gray-950 text-gray-200 h-[100dvh] flex font-sans overflow-hidden antialiased">
+    <div id="mobile-overlay" class="fixed inset-0 bg-black/60 z-20 hidden lg:hidden" onclick="toggleSidebar()"></div>
+    <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">
+        <div class="p-4 border-b border-gray-800 flex justify-between items-center bg-gray-900">
+            <h1 class="font-bold text-lg text-white tracking-wide">Dev AI Hub</h1>
+            <button onclick="createNewChat()" class="p-2 text-blue-400 hover:text-blue-300 bg-gray-800 rounded-md transition">
+                <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>
+            </button>
+        </div>
+        <div id="chat-list" class="flex-1 overflow-y-auto p-3 space-y-2"></div>
+    </aside>
+    <main class="flex-1 flex flex-col h-full w-full bg-gray-950 relative min-w-0">
+        <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">
+            <div class="flex items-center gap-3 truncate">
+                <button onclick="toggleSidebar()" class="lg:hidden p-1 text-gray-400">
+                    <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>
+                </button>
+                <h2 id="current-chat-title" class="font-semibold text-gray-100 truncate">Select a chat</h2>
+            </div>
+            <div class="flex items-center gap-3">
+                <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">
+                    <option value="claude">Claude Sonnet 3.5</option>
+                    <option value="haiku">Claude Haiku</option>
+                    <option value="maverick">Llama 3</option>
+                </select>
+                <button onclick="deleteCurrentChat()" class="text-gray-500 hover:text-red-400">
+                    <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>
+                </button>
+            </div>
+        </header>
+        <div id="chat-window" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6"></div>
+        <div class="p-4 bg-gray-900 border-t border-gray-800">
+            <div class="max-w-4xl mx-auto flex items-end gap-2 bg-gray-850 rounded-xl border border-gray-700 p-2">
+                <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>
+                <button onclick="sendMessage()" id="send-btn" class="p-2 text-blue-400 hover:text-blue-300">
+                    <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>
+        marked.setOptions({ highlight: (code, lang) => hljs.highlightAuto(code).value });
+        let currentChatId = null;
+        let lastMessageCount = 0; // Prevent unnecessary re-renders
+        let pollingInterval = null;
+        function toggleSidebar() {
+            document.getElementById('sidebar').classList.toggle('-translate-x-full');
+            document.getElementById('mobile-overlay').classList.toggle('hidden');
+        }
+        async function loadSidebar() {
+            try {
+                const res = await fetch('/api/chats');
+                const chats = await res.json();
+                const container = document.getElementById('chat-list');
+                // Only update sidebar if content changed to prevent "restart" flicker
+                const newHtml = chats.map(c => `
+                    <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'}">
+                        <div class="text-sm font-medium truncate text-gray-200">${c.title}</div>
+                    </div>
+                `).join('');
+                if (container.innerHTML !== newHtml) container.innerHTML = newHtml;
+            } catch (e) { console.error("Sidebar sync failed"); }
+        }
+        async function selectChat(id) {
+            if (pollingInterval) clearInterval(pollingInterval);
+            currentChatId = id;
+            lastMessageCount = 0;
+            const res = await fetch(`/api/chats/${id}`);
+            const chat = await res.json();
+            document.getElementById('current-chat-title').innerText = chat.title;
+            renderMessages(chat.messages);
+            if (chat.isGenerating) startPolling(id);
+            if (window.innerWidth < 1024) toggleSidebar();
+        }
+        function renderMessages(messages) {
+            // Optimization: If message count is same, don't nuke the DOM
+            if (messages.length === lastMessageCount) return;
+            const container = document.getElementById('chat-window');
+            const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 100;
+            container.innerHTML = messages.map(m => {
+                let content = m.role === 'user' ? `<div class="whitespace-pre-wrap">${m.content}</div>` : DOMPurify.sanitize(marked.parse(m.content || ''));
+                if (m.reasoning) content = `<div class="reasoning-block"><i>Thinking...</i><br>${marked.parse(m.reasoning)}</div>` + content;
+                return `
+                    <div class="flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}">
+                        <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'}">
+                            ${content}
+                        </div>
+                    </div>`;
+            }).join('');
+            lastMessageCount = messages.length;
+            attachCodeTools();
+            if (isAtBottom) container.scrollTop = container.scrollHeight;
+        }
+        function startPolling(id) {
+            pollingInterval = setInterval(async () => {
+                const res = await fetch(`/api/chats/${id}`);
+                const chat = await res.json();
+                renderMessages(chat.messages);
+                if (!chat.isGenerating) clearInterval(pollingInterval);
+            }, 2000);
+        }
+        function attachCodeTools() {
+            document.querySelectorAll('.markdown-body pre').forEach(pre => {
+                if (pre.querySelector('.copy-btn')) return;
+                const copy = document.createElement('button');
+                copy.className = 'copy-btn'; copy.innerText = 'Copy';
+                copy.onclick = () => {
+                    navigator.clipboard.writeText(pre.textContent.replace('CopyExpand', '').trim());
+                    copy.innerText = 'Copied!';
+                    setTimeout(() => copy.innerText = 'Copy', 2000);
+                };
+                if (pre.scrollHeight > 180) {
+                    pre.classList.add('snippet-collapsed');
+                    const exp = document.createElement('button');
+                    exp.className = 'expand-btn'; exp.innerText = 'Expand';
+                    exp.onclick = () => {
+                        const isCol = pre.classList.toggle('snippet-collapsed');
+                        exp.innerText = isCol ? 'Expand' : 'Collapse';
+                    };
+                    pre.appendChild(exp);
+                }
+                pre.appendChild(copy);
+            });
+        }
+        async function sendMessage() {
+            const input = document.getElementById('message-input');
+            const text = input.value.trim();
+            if (!text || !currentChatId) return;
+            input.value = '';
+            // Append user message immediately (Optimistic UI)
+            const container = document.getElementById('chat-window');
+            container.innerHTML += `<div class="flex justify-end"><div class="max-w-[90%] rounded-2xl p-4 bg-blue-600 text-white">${text}</div></div>`;
+            container.scrollTop = container.scrollHeight;
+            await fetch(`/api/chats/${currentChatId}/stream`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: text, model: document.getElementById('model-select').value })
+            });
+            startPolling(currentChatId);
+        }
+        // Initialize
+        loadSidebar();
+        setInterval(loadSidebar, 10000); // Background sync every 10s (quiet, no reload)
+    </script>
+</body>
+</html>

public/index.js DELETED Viewed

@@ -1,39 +0,0 @@
-window.onload = () => {
-    document.getElementById('my-button').onclick = () => {
-        init();
-    }
-}
-async function init() {
-    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-    document.getElementById("video").srcObject = stream;
-    const peer = createPeer();
-    stream.getTracks().forEach(track => peer.addTrack(track, stream));
-}
-function createPeer() {
-    const peer = new RTCPeerConnection({
-        iceServers: [
-            {
-                urls: "stun:stun.stunprotocol.org"
-            }
-        ]
-    });
-    peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer);
-    return peer;
-}
-async function handleNegotiationNeededEvent(peer) {
-    const offer = await peer.createOffer();
-    await peer.setLocalDescription(offer);
-    const payload = {
-        sdp: peer.localDescription
-     // , roomId: "gods"
-    };
-    const { data } = await axios.post('/broadcast', payload);
-    const desc = new RTCSessionDescription(data.sdp);
-    peer.setRemoteDescription(desc).catch(e => console.log(e));
-}