Spaces:

Philips656
/

newapi

Runtime error

App Files Files Community

Philips656 commited on Jan 6

Commit

2255c27

verified ·

1 Parent(s): 92117a1

Update index.html

Browse files

Files changed (1) hide show

index.html +234 -79

index.html CHANGED Viewed

@@ -3,116 +3,271 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SHIELD v1.0</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=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
-        body { font-family: 'JetBrains Mono', monospace; background-color: #050505; color: #00ff41; }
-        .glass { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0, 255, 65, 0.2); }
-        .user-msg { background: rgba(0, 255, 65, 0.1); border: 1px solid #00ff41; color: #fff; }
-        .ai-msg { background: rgba(255, 255, 255, 0.05); border-left: 3px solid #00ff41; color: #ccc; }
-        .typing-dot { animation: pulse 1.5s infinite; }
-        @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
-        /* Scrollbar */
-        ::-webkit-scrollbar { width: 8px; }
-        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
     </style>
 </head>
-<body class="h-screen flex flex-col overflow-hidden selection:bg-green-900 selection:text-white">
-    <header class="p-4 flex justify-between items-center glass border-b-0 z-50">
         <div class="flex items-center gap-3">
-            <div class="w-3 h-3 bg-green-500 rounded-full shadow-[0_0_10px_#00ff41]"></div>
-            <h1 class="text-xl font-bold tracking-widest text-white">SHIELD<span class="text-green-500">_API</span></h1>
         </div>
-        <div class="text-xs text-gray-500">SECURE_CHANNEL: ENCRYPTED</div>
-    </header>
-    <main id="chat-box" class="flex-1 overflow-y-auto p-6 space-y-6 pb-32">
-        <div class="ai-msg p-4 rounded-r-xl rounded-bl-xl max-w-3xl">
-            <p>System Online. Secure logging active. How can I assist you today?</p>
         </div>
-    </main>
-    <footer class="fixed bottom-0 w-full p-4 bg-gradient-to-t from-black via-black to-transparent">
-        <div class="max-w-4xl mx-auto glass rounded-xl flex items-center p-2 gap-2">
-            <input id="user-input" type="text" placeholder="Enter command or query..."
-                   class="bg-transparent flex-1 outline-none text-white px-4 py-3 placeholder-gray-700"
-                   onkeydown="if(event.key === 'Enter') sendMessage()">
-            <button onclick="sendMessage()" class="bg-green-600 hover:bg-green-500 text-black font-bold px-6 py-3 rounded-lg transition shadow-[0_0_15px_rgba(0,255,65,0.3)]">
-                SEND
-            </button>
         </div>
-        <div class="text-center text-[10px] text-gray-700 mt-2">MONITORED BY TiDB CLOUD • v1.0.5</div>
-    </footer>
     <script>
-        const chatBox = document.getElementById('chat-box');
-        const userInput = document.getElementById('user-input');
         async function sendMessage() {
-            const text = userInput.value.trim();
-            if (!text) return;
-            // 1. Add User Message
-            appendMessage('user', text);
-            userInput.value = '';
-            // 2. Add Loading State
-            const loadingId = 'loading-' + Date.now();
-            chatBox.innerHTML += `
-                <div id="${loadingId}" class="ai-msg p-4 rounded-r-xl rounded-bl-xl max-w-3xl flex gap-1">
-                    <span class="typing-dot">●</span><span class="typing-dot" style="animation-delay:0.2s">●</span><span class="typing-dot" style="animation-delay:0.4s">●</span>
-                </div>`;
-            chatBox.scrollTo(0, chatBox.scrollHeight);
             try {
-                // 3. Send to your Python Shield
-                const response = await fetch('/v1/chat/completions', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
-                        model: "gemini-pro", // Default model
-                        messages: [{ role: "user", content: text }]
                     })
                 });
-                const data = await response.json();
-                document.getElementById(loadingId).remove();
-                if (response.status === 403) {
-                    // Handle Policy Block
-                    appendMessage('error', "🚫 ACCESS DENIED: " + data.error.message);
                 } else if (data.choices) {
-                    // Handle Success
-                    appendMessage('ai', data.choices[0].message.content);
                 } else {
-                    appendMessage('error', "System Error: " + JSON.stringify(data));
                 }
-            } catch (err) {
-                document.getElementById(loadingId).remove();
-                appendMessage('error', "CONNECTION_LOST: " + err.message);
-            }
-        }
-        function appendMessage(role, text) {
-            const div = document.createElement('div');
-            if (role === 'user') {
-                div.className = "flex justify-end";
-                div.innerHTML = `<div class="user-msg p-4 rounded-l-xl rounded-br-xl max-w-[80%]">${text.replace(/</g, "&lt;")}</div>`;
-            } else if (role === 'error') {
-                div.className = "flex justify-start";
-                div.innerHTML = `<div class="bg-red-900/30 border border-red-500 text-red-400 p-4 rounded-r-xl rounded-bl-xl max-w-3xl font-bold">${text}</div>`;
-            } else {
-                div.className = "flex justify-start";
-                // Parse Markdown for AI response
-                div.innerHTML = `<div class="ai-msg p-4 rounded-r-xl rounded-bl-xl max-w-3xl prose prose-invert prose-p:text-gray-300 prose-code:text-green-400">${marked.parse(text)}</div>`;
             }
-            chatBox.appendChild(div);
-            chatBox.scrollTo(0, chatBox.scrollHeight);
         }
     </script>
 </body>

 <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>