Spaces:

Philips656
/

newapi

Runtime error

App Files Files Community

Philips656 commited on Jan 6

Commit

6cfec2a

verified ·

1 Parent(s): 13dd291

Create index.html

Browse files

Files changed (1) hide show

index.html +119 -0

index.html ADDED Viewed

	@@ -0,0 +1,119 @@

+<!DOCTYPE html>
+<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, "&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>
+</html>