Spaces:

rahul-02
/

Rag_Based_ChatBot

Sleeping

App Files Files Community

rahul-02 commited on Jan 24

Commit

12b0bb5

verified ·

1 Parent(s): aa09738

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +82 -219

templates/index.html CHANGED Viewed

@@ -3,243 +3,106 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nexus AI | Research OS</title>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --bg-dark: #020617;
-            --sidebar-bg: #0f172a;
-            --accent: #38bdf8;
-            --accent-glow: rgba(56, 189, 248, 0.3);
-            --border: rgba(255, 255, 255, 0.08);
-            --text-main: #f8fafc;
-            --text-dim: #94a3b8;
-        }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
-            font-family: 'Plus Jakarta Sans', sans-serif;
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            height: 100vh;
-            display: flex;
-            overflow: hidden;
-        }
-        /* Sidebar Navigation */
-        aside {
-            width: 260px;
-            background: var(--sidebar-bg);
-            border-right: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            padding: 24px;
-        }
-        .logo {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--accent);
-            margin-bottom: 40px;
-            letter-spacing: -1px;
-        }
-        .nav-item {
-            padding: 12px 16px;
-            border-radius: 12px;
-            color: var(--text-dim);
-            text-decoration: none;
-            margin-bottom: 8px;
-            font-weight: 500;
-            transition: 0.2s;
-        }
-        .nav-item.active { background: rgba(255,255,255,0.05); color: white; }
-        /* Main Canvas */
-        main { flex: 1; display: flex; flex-direction: column; position: relative; }
-        header {
-            padding: 20px 40px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .status-pill {
-            background: rgba(34, 197, 94, 0.1);
-            color: #4ade80;
-            padding: 4px 12px;
-            border-radius: 100px;
-            font-size: 0.75rem;
-            border: 1px solid rgba(34, 197, 94, 0.2);
-        }
-        #chat-window {
-            flex: 1;
-            overflow-y: auto;
-            padding: 40px;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-        .message {
-            max-width: 75%;
-            padding: 20px;
-            border-radius: 20px;
-            line-height: 1.6;
-            font-size: 0.95rem;
-            animation: slideUp 0.4s ease-out;
-        }
-        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .user-msg {
-            align-self: flex-end;
-            background: var(--accent);
-            color: #000;
-            border-bottom-right-radius: 4px;
-            box-shadow: 0 10px 20px -10px var(--accent-glow);
-        }
-        .ai-msg {
-            align-self: flex-start;
-            background: rgba(255,255,255,0.03);
-            border: 1px solid var(--border);
-            border-bottom-left-radius: 4px;
-        }
-        .typing { color: var(--text-dim); font-size: 0.85rem; font-style: italic; }
-        /* Input Deck */
-        .input-area {
-            padding: 30px 40px;
-            background: linear-gradient(to top, var(--bg-dark), transparent);
-        }
-        .input-box {
-            max-width: 900px;
-            margin: 0 auto;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 8px;
-            display: flex;
-            gap: 10px;
-        }
-        input {
-            flex: 1;
-            background: transparent;
-            border: none;
-            color: white;
-            padding: 12px;
-            outline: none;
-            font-size: 1rem;
-        }
-        button {
-            background: var(--accent);
-            color: #000;
-            border: none;
-            padding: 10px 24px;
-            border-radius: 10px;
-            font-weight: 700;
-            cursor: pointer;
-            transition: 0.2s;
-        }
-        button:hover { transform: translateY(-1px); box-shadow: 0 5px 15px var(--accent-glow); }
-        button:disabled { background: #334155; color: #94a3b8; cursor: not-allowed; }
     </style>
 </head>
 <body>
-    <aside>
-        <div class="logo">Nexus AI</div>
-        <a href="#" class="nav-item active">Dashboard</a>
-        <a href="#" class="nav-item">Research Vault</a>
-        <a href="#" class="nav-item">API Keys</a>
-        <div style="margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border);">
-            <p style="font-size: 0.75rem; color: var(--text-dim);">SYSTEM STATUS</p>
-            <p style="font-size: 0.85rem; margin-top: 4px;">Llama 3.2 3B Instruct</p>
-        </div>
-    </aside>
-    <main>
-        <header>
-            <div>
-                <h1 style="font-size: 1.1rem; font-weight: 700;">Research Assistant</h1>
-                <p style="font-size: 0.8rem; color: var(--text-dim);">Real-time web search enabled</p>
             </div>
-            <div class="status-pill">● Online</div>
-        </header>
-        <div id="chat-window">
-            <div class="message ai-msg">Welcome to Nexus. Type a research query to begin.</div>
         </div>
-        <div class="input-area">
-            <div class="input-box">
-                <input type="text" id="user-input" placeholder="What would you like to research today?" autocomplete="off">
-                <button id="send-btn">Generate</button>
-            </div>
         </div>
-    </main>
     <script>
-        const chatWindow = document.getElementById('chat-window');
-        const userInput = document.getElementById('user-input');
-        const sendBtn = document.getElementById('send-btn');
-        function appendMessage(text, isUser) {
-            const msgDiv = document.createElement('div');
-            msgDiv.className = `message ${isUser ? 'user-msg' : 'ai-msg'}`;
-            msgDiv.innerText = text;
-            chatWindow.appendChild(msgDiv);
-            chatWindow.scrollTop = chatWindow.scrollHeight;
-        }
-        async function handleSend() {
-            const query = userInput.value.trim();
-            if (!query) return;
-            appendMessage(query, true);
-            userInput.value = '';
-            sendBtn.disabled = true;
-            const typing = document.createElement('div');
-            typing.className = 'typing';
-            typing.innerText = 'Nexus AI is thinking...';
-            chatWindow.appendChild(typing);
             try {
-                // IMPORTANT: window.location.origin ensures absolute routing on HF Spaces
-                const response = await fetch(`${window.location.origin}/ask`, {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ query: query })
                 });
-                if (!response.ok) throw new Error(`Server Error: ${response.status}`);
-                const data = await response.json();
-                chatWindow.removeChild(typing);
-                appendMessage(data.answer, false);
-            } catch (err) {
-                if (chatWindow.contains(typing)) chatWindow.removeChild(typing);
-                appendMessage(`Connection Error: ${err.message}. Please check Space logs.`, false);
-            } finally {
-                sendBtn.disabled = false;
-                chatWindow.scrollTop = chatWindow.scrollHeight;
             }
         }
-        sendBtn.addEventListener('click', handleSend);
-        userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSend(); });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus AI ChatBot</title>
     <style>
+        body { font-family: 'Segoe UI', Roboto, sans-serif; background: #212121; color: #ececf1; margin: 0; display: flex; flex-direction: column; height: 100vh; }
+        /* Chat Area */
+        #chat-window { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 20px 0; }
+        .row { width: 100%; display: flex; justify-content: center; padding: 25px 0; border-bottom: 1px solid #3d3d3d; }
+        .user-row { background: #2f2f2f; }
+        .message-content { max-width: 800px; width: 90%; display: flex; gap: 20px; line-height: 1.6; font-size: 16px; }
+        .avatar { width: 30px; height: 30px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; }
+        .ai-avatar { background: #19c37d; }
+        .user-avatar { background: #5436da; }
+        /* Input Bar */
+        #input-area { padding: 40px 20px; background: linear-gradient(transparent, #212121 50%); position: sticky; bottom: 0; display: flex; justify-content: center; }
+        .input-container { max-width: 800px; width: 100%; position: relative; }
+        input { width: 100%; padding: 14px 45px 14px 16px; background: #40414f; border: 1px solid #565869; border-radius: 8px; color: white; font-size: 16px; outline: none; box-sizing: border-box; }
+        button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #acacbe; cursor: pointer; font-size: 20px; }
+        /* Loading dots */
+        .typing { font-style: italic; color: #9a9a9a; font-size: 14px; }
     </style>
 </head>
 <body>
+    <div id="chat-window">
+        <div class="row">
+            <div class="message-content">
+                <div class="avatar ai-avatar">AI</div>
+                <div class="text">Hello! I am Nexus AI. Ask me anything that you want to know.</div>
             </div>
         </div>
+    </div>
+    <div id="input-area">
+        <div class="input-container">
+            <input type="text" id="userInput" placeholder="Send a message..." onkeypress="if(event.key==='Enter') sendMessage()">
+            <button onclick="sendMessage()">➤</button>
         </div>
+    </div>
     <script>
+        async function sendMessage() {
+            const input = document.getElementById('userInput');
+            const chat = document.getElementById('chat-window');
+            const query = input.value.trim();
+            if(!query) return;
+            // 1. Add User Message
+            chat.innerHTML += `
+                <div class="row user-row">
+                    <div class="message-content">
+                        <div class="avatar user-avatar">U</div>
+                        <div class="text">${query}</div>
+                    </div>
+                </div>`;
+            input.value = '';
+            // 2. Add AI Placeholder (Loading)
+            const aiId = "ai-" + Date.now();
+            chat.innerHTML += `
+                <div class="row">
+                    <div class="message-content">
+                        <div class="avatar ai-avatar">AI</div>
+                        <div class="text typing" id="${aiId}">Thinking...</div>
+                    </div>
+                </div>`;
+            chat.scrollTop = chat.scrollHeight;
+            // 3. Fetch Answer
             try {
+                const res = await fetch('/ask', {
                     method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({query: query})
                 });
+                const data = await res.json();
+                // 4. Type the Answer
+                const aiDiv = document.getElementById(aiId);
+                aiDiv.classList.remove('typing');
+                aiDiv.innerText = '';
+                typeWriter(aiDiv, data.answer);
+            } catch (e) {
+                document.getElementById(aiId).innerText = "Error: Could not connect to the AI.";
             }
         }
+        function typeWriter(element, text) {
+            let i = 0;
+            function type() {
+                if (i < text.length) {
+                    element.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(type, 15); // Adjust speed here
+                    document.getElementById('chat-window').scrollTop = document.getElementById('chat-window').scrollHeight;
+                }
+            }
+            type();
+        }
     </script>
 </body>
 </html>