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>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, "<")}</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> | |
| </html> |