Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEXUS | Secure AI Gateway</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Rajdhani', sans-serif; background-color: #030303; color: #e0e0e0; } | |
| .mono { font-family: 'JetBrains Mono', monospace; } | |
| .glass { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); } | |
| .neon-border { box-shadow: 0 0 10px rgba(0, 255, 136, 0.1), inset 0 0 5px rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); } | |
| .neon-text { text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } | |
| .card-hover:hover { transform: translateY(-2px); border-color: #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); } | |
| /* Transitions */ | |
| .page { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; } | |
| .page.active { display: block; opacity: 1; } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col overflow-hidden bg-[url('https://res.cloudinary.com/dflj6x2d3/image/upload/v1709664556/grid-bg_dark_k9w2x8.png')] bg-cover"> | |
| <nav class="glass border-b-0 p-4 flex justify-between items-center z-50"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-green-400 to-blue-600 rounded flex items-center justify-center font-bold text-black neon-border">N</div> | |
| <h1 class="text-2xl font-bold tracking-widest text-white">NEXUS<span class="text-green-500 text-sm align-top"> v2.0</span></h1> | |
| </div> | |
| <div class="flex gap-4 text-sm mono"> | |
| <button onclick="showPage('marketplace')" class="hover:text-green-400 transition">MARKETPLACE</button> | |
| <button onclick="showPage('chat')" class="hover:text-green-400 transition">TERMINAL</button> | |
| <div id="auth-buttons" class="flex gap-4 border-l border-gray-700 pl-4"> | |
| <button onclick="showPage('login')" class="text-gray-400 hover:text-white">LOGIN</button> | |
| <button onclick="showPage('register')" class="text-green-400 hover:text-green-300">REGISTER</button> | |
| </div> | |
| <div id="user-info" class="hidden flex gap-3 items-center border-l border-gray-700 pl-4"> | |
| <span id="username-display" class="text-blue-400">User</span> | |
| <button onclick="logout()" class="text-red-400 hover:text-red-300 text-xs">[LOGOUT]</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="flex-1 overflow-hidden relative"> | |
| <div id="login" class="page active h-full flex items-center justify-center"> | |
| <div class="glass p-8 rounded-2xl w-96 space-y-6 neon-border"> | |
| <h2 class="text-3xl font-bold text-center mb-8">AUTHENTICATE</h2> | |
| <input type="text" id="login-user" placeholder="Username" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white focus:border-green-500 outline-none"> | |
| <input type="password" id="login-pass" placeholder="Password" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white focus:border-green-500 outline-none"> | |
| <button onclick="handleLogin()" class="w-full bg-green-600 hover:bg-green-500 text-black font-bold p-3 rounded transition">ACCESS SYSTEM</button> | |
| <p class="text-center text-gray-500 text-xs cursor-pointer hover:text-green-400" onclick="showPage('register')">Request New Identity >></p> | |
| </div> | |
| </div> | |
| <div id="register" class="page h-full flex items-center justify-center"> | |
| <div class="glass p-8 rounded-2xl w-96 space-y-6 border border-gray-800"> | |
| <h2 class="text-3xl font-bold text-center text-blue-400">NEW IDENTITY</h2> | |
| <input type="text" id="reg-user" placeholder="Username" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white outline-none"> | |
| <input type="password" id="reg-pass" placeholder="Password" class="w-full bg-black/50 border border-gray-700 p-3 rounded text-white outline-none"> | |
| <button onclick="handleRegister()" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold p-3 rounded transition">INITIALIZE</button> | |
| <p class="text-center text-gray-500 text-xs cursor-pointer hover:text-blue-400" onclick="showPage('login')"><< Return to Login</p> | |
| </div> | |
| </div> | |
| <div id="marketplace" class="page h-full overflow-y-auto p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-2">NEURAL MARKETPLACE</h2> | |
| <p class="text-gray-400 mb-8 mono text-sm">AVAILABLE MODELS :: SELECT MODULE TO LOAD</p> | |
| <div id="model-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="text-center w-full col-span-3 text-gray-500 animate-pulse">Scanning Neural Network...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chat" class="page h-full flex flex-col"> | |
| <div id="chat-box" class="flex-1 overflow-y-auto p-6 space-y-6 max-w-5xl mx-auto w-full"> | |
| <div class="bg-blue-900/20 border border-blue-500/30 p-4 rounded-lg text-blue-200 text-sm mono"> | |
| SYSTEM: Connected via TiDB Shield. Logging Active. | |
| </div> | |
| </div> | |
| <div class="p-4 glass border-t border-gray-800"> | |
| <div class="max-w-4xl mx-auto flex gap-4"> | |
| <select id="model-selector" class="bg-black/50 border border-gray-700 text-gray-300 text-xs rounded px-2 outline-none"> | |
| <option value="gpt-3.5-turbo">GPT-3.5</option> | |
| </select> | |
| <input id="user-input" type="text" placeholder="Enter command..." class="flex-1 bg-black/50 border border-gray-700 rounded px-4 text-white outline-none focus:border-green-500" onkeydown="if(event.key === 'Enter') sendMessage()"> | |
| <button onclick="sendMessage()" class="bg-green-600 text-black font-bold px-6 rounded hover:bg-green-500">SEND</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="toast" class="fixed top-4 right-4 bg-red-600 text-white px-6 py-3 rounded shadow-lg hidden translate-x-full transition-transform">Error</div> | |
| <script> | |
| // --- STATE MANAGEMENT --- | |
| let TOKEN = localStorage.getItem('nexus_token'); | |
| let USER = localStorage.getItem('nexus_user'); | |
| if(TOKEN) updateAuthUI(true); | |
| function showPage(id) { | |
| document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); | |
| document.getElementById(id).classList.add('active'); | |
| if(id === 'marketplace') fetchModels(); | |
| } | |
| function updateAuthUI(isLoggedIn) { | |
| const authBtns = document.getElementById('auth-buttons'); | |
| const userInfo = document.getElementById('user-info'); | |
| if (isLoggedIn) { | |
| authBtns.classList.add('hidden'); | |
| userInfo.classList.remove('hidden'); | |
| document.getElementById('username-display').textContent = USER || 'Agent'; | |
| showPage('marketplace'); | |
| } else { | |
| authBtns.classList.remove('hidden'); | |
| userInfo.classList.add('hidden'); | |
| } | |
| } | |
| function toast(msg, type='error') { | |
| const t = document.getElementById('toast'); | |
| t.textContent = msg; | |
| t.className = `fixed top-20 right-4 px-6 py-3 rounded shadow-lg transition-transform z-50 ${type === 'success' ? 'bg-green-600 text-black' : 'bg-red-600 text-white'}`; | |
| t.classList.remove('hidden', 'translate-x-full'); | |
| setTimeout(() => t.classList.add('translate-x-full'), 3000); | |
| } | |
| // --- API INTERACTIONS --- | |
| async function handleLogin() { | |
| const u = document.getElementById('login-user').value; | |
| const p = document.getElementById('login-pass').value; | |
| // NOTE: NewAPI default login endpoint | |
| try { | |
| const res = await fetch('/api/user/login', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({username: u, password: p}) | |
| }); | |
| const data = await res.json(); | |
| if (data.success) { | |
| TOKEN = data.data.token || "dummy-token"; // NewAPI sometimes returns session cookie, sometimes token | |
| USER = u; | |
| localStorage.setItem('nexus_token', TOKEN); | |
| localStorage.setItem('nexus_user', USER); | |
| updateAuthUI(true); | |
| toast('Welcome back, Agent.', 'success'); | |
| } else { | |
| toast(data.message || 'Login Failed'); | |
| } | |
| } catch (e) { toast('Connection Error'); } | |
| } | |
| async function handleRegister() { | |
| const u = document.getElementById('reg-user').value; | |
| const p = document.getElementById('reg-pass').value; | |
| try { | |
| const res = await fetch('/api/user/register', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({username: u, password: p}) | |
| }); | |
| const data = await res.json(); | |
| if (data.success) { | |
| toast('Identity Created. Please Login.', 'success'); | |
| showPage('login'); | |
| } else { | |
| toast(data.message || 'Registration Failed'); | |
| } | |
| } catch (e) { toast('Connection Error'); } | |
| } | |
| async function fetchModels() { | |
| try { | |
| // Fetch from standard OpenAI models endpoint | |
| const res = await fetch('/v1/models', { | |
| headers: { 'Authorization': `Bearer ${TOKEN}` } | |
| }); | |
| const data = await res.json(); | |
| const grid = document.getElementById('model-grid'); | |
| grid.innerHTML = ''; | |
| const selector = document.getElementById('model-selector'); | |
| selector.innerHTML = ''; | |
| data.data.forEach(model => { | |
| // Add to Grid | |
| grid.innerHTML += ` | |
| <div class="glass p-6 rounded-xl card-hover cursor-pointer relative overflow-hidden group" onclick="selectModel('${model.id}')"> | |
| <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-100 transition"> | |
| <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">${model.id}</h3> | |
| <p class="text-gray-400 text-xs mono mb-4">PROVIDER: ${model.owned_by || 'UNKNOWN'}</p> | |
| <button class="w-full border border-green-600 text-green-400 py-2 rounded text-xs hover:bg-green-600 hover:text-black transition">INITIALIZE SESSION</button> | |
| </div> | |
| `; | |
| // Add to Dropdown | |
| selector.innerHTML += `<option value="${model.id}">${model.id}</option>`; | |
| }); | |
| } catch (e) { | |
| console.error(e); | |
| } | |
| } | |
| function selectModel(id) { | |
| document.getElementById('model-selector').value = id; | |
| showPage('chat'); | |
| toast(`Switched to ${id}`, 'success'); | |
| } | |
| function logout() { | |
| localStorage.clear(); | |
| location.reload(); | |
| } | |
| // --- CHAT LOGIC --- | |
| async function sendMessage() { | |
| const text = document.getElementById('user-input').value; | |
| if(!text) return; | |
| const box = document.getElementById('chat-box'); | |
| document.getElementById('user-input').value = ''; | |
| // Add User Msg | |
| box.innerHTML += `<div class="flex justify-end"><div class="bg-green-900/20 border border-green-600 text-green-100 p-3 rounded-xl max-w-[80%]">${text}</div></div>`; | |
| // Loading | |
| const loadId = 'load-'+Date.now(); | |
| box.innerHTML += `<div id="${loadId}" class="text-gray-500 text-xs mono animate-pulse">Processing...</div>`; | |
| box.scrollTo(0, box.scrollHeight); | |
| const model = document.getElementById('model-selector').value; | |
| try { | |
| const res = await fetch('/v1/chat/completions', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${TOKEN}` // Uses the User's own token | |
| }, | |
| body: JSON.stringify({ | |
| model: model, | |
| messages: [{role: 'user', content: text}] | |
| }) | |
| }); | |
| const data = await res.json(); | |
| document.getElementById(loadId).remove(); | |
| if (res.status === 403) { | |
| box.innerHTML += `<div class="bg-red-900/50 border border-red-500 text-red-200 p-4 rounded mb-2">🚫 SYSTEM ALERT: ${data.error.message}</div>`; | |
| } else if (data.choices) { | |
| const reply = marked.parse(data.choices[0].message.content); | |
| box.innerHTML += `<div class="flex justify-start"><div class="glass p-4 rounded-xl max-w-[80%] prose prose-invert prose-sm">${reply}</div></div>`; | |
| } else { | |
| box.innerHTML += `<div class="text-red-400 text-xs">Error: ${JSON.stringify(data)}</div>`; | |
| } | |
| } catch (e) { | |
| document.getElementById(loadId).remove(); | |
| box.innerHTML += `<div class="text-red-500">Connection Failed</div>`; | |
| } | |
| box.scrollTo(0, box.scrollHeight); | |
| } | |
| </script> | |
| </body> | |
| </html> |