Upload 2 files

static/script.js

@@ -1,168 +1,211 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const chatContainer = document.getElementById("chat-container");
+    // --- UI Elements ---
+    const sidebar = document.getElementById("sidebar");
+    const openSidebarBtn = document.getElementById("open-sidebar");
+    const closeSidebarBtn = document.getElementById("close-sidebar");
+    const chatMessages = document.getElementById("chat-messages");
     const chatForm = document.getElementById("chat-form");
     const userInput = document.getElementById("user-input");
-    const usageStatsDiv = document.getElementById("usage-stats");
-    const themeToggle = document.getElementById("theme-toggle");
-    const showSaveFormBtn = document.getElementById("show-save-form-btn");
-    const saveModalOverlay = document.getElementById("save-modal-overlay");
-    const saveForm = document.getElementById("save-form");
-    const cancelSaveBtn = document.getElementById("cancel-save-btn");
-    const addAnswerBtn = document.getElementById("add-answer-btn");
-    const answersContainer = document.getElementById("answers-container");
-    const trainingOverlay = document.getElementById("training-overlay");
-    const progressBar = document.getElementById("training-progress-bar");
-    const progressStep = document.getElementById("training-step");
-    const progressPercentage = document.getElementById("training-percentage");
-
-    let eventSource = null;
-
-    async function updateStats() {
-        try {
-            const res = await fetch("/status");
-            const s = await res.json();
-            usageStatsDiv.innerHTML = `
-                <div class="sys-stats">
-                    <span>📊 ${s.tokens_used}/${s.max_tokens} Token</span>
-                    <span>💻 CPU: ${s.cpu}%</span>
-                    <span>🧠 RAM: ${s.ram}%</span>
-                </div>
-            `;
-            if (s.is_training) startTrainingListener();
-        } catch (e) {}
-    }
-    setInterval(updateStats, 3000);
-
-    function startTrainingListener() {
-        if (eventSource) return;
-        eventSource = new EventSource("/training-progress");
-        eventSource.onmessage = (event) => {
-            const data = JSON.parse(event.data);
-            if (data.is_training) {
-                trainingOverlay.classList.remove("hidden");
-                progressBar.style.width = `${data.percentage}%`;
-                progressStep.textContent = data.current_step;
-                progressPercentage.textContent = `${data.percentage}%`;
+    const usageDisplay = document.getElementById("usage-display");
+    const authTrigger = document.getElementById("auth-trigger");
+    const authModal = document.getElementById("auth-modal");
+    const closeModalBtn = document.querySelector(".close-modal");
+    const loginForm = document.getElementById("login-form");
+    const signupForm = document.getElementById("signup-form");
+    const logoutBtn = document.getElementById("logout-btn");
+    const tabBtns = document.querySelectorAll(".tab-btn");
+    const historyList = document.getElementById("history-list");
+
+    // --- State ---
+    let isLoggedIn = false;
+
+    // --- Sidebar Logic ---
+    openSidebarBtn.onclick = () => {
+        sidebar.classList.remove("sidebar-closed");
+        if (isLoggedIn) fetchHistory();
+    };
+    closeSidebarBtn.onclick = () => sidebar.classList.add("sidebar-closed");
+
+    // --- Auth Logic ---
+    authTrigger.onclick = () => authModal.classList.remove("hidden");
+    closeModalBtn.onclick = () => authModal.classList.add("hidden");
+
+    tabBtns.forEach(btn => {
+        btn.onclick = () => {
+            tabBtns.forEach(b => b.classList.remove("active"));
+            btn.classList.add("active");
+            if (btn.dataset.tab === "login") {
+                loginForm.classList.remove("hidden");
+                signupForm.classList.add("hidden");
             } else {
-                trainingOverlay.classList.add("hidden");
-                eventSource.close();
-                eventSource = null;
+                loginForm.classList.add("hidden");
+                signupForm.classList.remove("hidden");
             }
         };
-    }
+    });
+
+    loginForm.onsubmit = async (e) => {
+        e.preventDefault();
+        const [email, password] = loginForm.querySelectorAll("input");
+        const res = await fetch("/login", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({email: email.value, password: password.value})
+        });
+        const data = await res.json();
+        if (data.success) {
+            authModal.classList.add("hidden");
+            location.reload();
+        } else {
+            alert(data.error);
+        }
+    };
+
+    signupForm.onsubmit = async (e) => {
+        e.preventDefault();
+        const [email, password] = signupForm.querySelectorAll("input");
+        const res = await fetch("/signup", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({email: email.value, password: password.value})
+        });
+        const data = await res.json();
+        if (data.success) {
+            alert("Account created! Please login.");
+            tabBtns[0].click();
+        } else {
+            alert(data.error);
+        }
+    };
+
+    logoutBtn.onclick = async () => {
+        await fetch("/logout");
+        location.reload();
+    };
 
-    function addMessage(text, className) {
+    // --- Chat Logic ---
+    function addMessage(text, type, stats = null) {
         const div = document.createElement("div");
-        div.className = `message ${className}`;
-        div.innerHTML = `<div class="msg-content">${text}</div>`;
-        chatContainer.appendChild(div);
-        chatContainer.scrollTop = chatContainer.scrollHeight;
+        div.className = `message ${type === 'user' ? 'user-msg' : 'bot-msg'} fade-in`;
+        
+        let footerHtml = stats ? `
+            <div class="msg-footer">
+                <span><i class="fas fa-clock"></i> ${stats.duration.toFixed(3)}s</span>
+                <span><i class="fas fa-font"></i> ${stats.token_count} Token</span>
+            </div>
+        ` : '';
+
+        div.innerHTML = `
+            <div class="msg-bubble">${text}</div>
+            ${footerHtml}
+        `;
+        chatMessages.appendChild(div);
+        document.getElementById("chat-viewport").scrollTop = chatMessages.scrollHeight;
         return div;
     }
 
-    chatForm.addEventListener("submit", async (e) => {
+    chatForm.onsubmit = async (e) => {
         e.preventDefault();
         const q = userInput.value.trim();
         if (!q) return;
 
-        addMessage(q, "user-message");
+        addMessage(q, 'user');
         userInput.value = "";
-        
+
         const botMsgDiv = document.createElement("div");
-        botMsgDiv.className = "message bot-message";
+        botMsgDiv.className = "message bot-msg fade-in";
         const statusEl = document.createElement("div");
         statusEl.className = "generating-status";
-        statusEl.textContent = "جاري البدء ... 0%";
+        statusEl.textContent = "جاري البدء...";
         botMsgDiv.appendChild(statusEl);
-        chatContainer.appendChild(botMsgDiv);
+        chatMessages.appendChild(botMsgDiv);
 
         try {
-            const response = await fetch("/chat", {
+            const res = await fetch("/chat", {
                 method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ question: q })
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({question: q})
             });
 
-            if (!response.ok) {
-                const errData = await response.json();
-                botMsgDiv.textContent = `❌ ${errData.error || "Error"}`;
+            if (!res.ok) {
+                const data = await res.json();
+                botMsgDiv.innerHTML = `<div class="msg-bubble">❌ ${data.error}</div>`;
                 return;
             }
 
-            const reader = response.body.getReader();
+            const reader = res.body.getReader();
             const decoder = new TextDecoder();
-            
+
             while (true) {
-                const { value, done } = await reader.read();
+                const {value, done} = await reader.read();
                 if (done) break;
                 
-                const chunk = decoder.decode(value);
-                const lines = chunk.split("\n");
-                
+                const lines = decoder.decode(value).split("\n");
                 for (const line of lines) {
                     if (!line.trim()) continue;
-                    try {
-                        const data = JSON.parse(line);
-                        
-                        if (data.status === "Generating") {
-                            statusEl.textContent = `${data.step} ... ${data.percentage}%`;
-                        } else if (data.status === "Complete" || data.response_text) {
-                            botMsgDiv.innerHTML = `
-                                <div class="msg-content">${data.response_text}</div>
-                                <div class="msg-footer">
-                                    ⏱️ ${data.duration.toFixed(3)}s | 🔤 ${data.token_count} Token | 💻 ${data.cpu}% CPU
-                                </div>
-                            `;
-                            // Immediately update stats display after completion
-                            updateStats();
-                        } else if (data.error) {
-                            botMsgDiv.textContent = `❌ ${data.error}`;
-                        }
-                    } catch (e) { console.error("Error parsing chunk", e); }
+                    const data = JSON.parse(line);
+                    if (data.status === "Generating") {
+                        statusEl.textContent = `${data.step} ... ${data.percentage}%`;
+                    } else if (data.status === "Complete") {
+                        botMsgDiv.innerHTML = `
+                            <div class="msg-bubble">${data.response_text}</div>
+                            <div class="msg-footer">
+                                <span><i class="fas fa-clock"></i> ${data.duration.toFixed(3)}s</span>
+                                <span><i class="fas fa-font"></i> ${data.token_count} Token</span>
+                            </div>
+                        `;
+                        updateStatus();
+                    }
                 }
-                chatContainer.scrollTop = chatContainer.scrollHeight;
             }
         } catch (err) {
-            botMsgDiv.textContent = "❌ حدث خطأ في الاتصال.";
+            botMsgDiv.innerHTML = `<div class="msg-bubble">❌ حدث خطأ في الاتصال</div>`;
         }
-        updateStats();
-    });
-
-    showSaveFormBtn.onclick = () => saveModalOverlay.classList.remove("hidden");
-    cancelSaveBtn.onclick = () => saveModalOverlay.classList.add("hidden");
-    
-    addAnswerBtn.onclick = () => {
-        const input = document.createElement("input");
-        input.type = "text";
-        input.className = "answer-input";
-        input.placeholder = "إجابة أخرى...";
-        answersContainer.appendChild(input);
     };
 
-    saveForm.onsubmit = async (e) => {
-        e.preventDefault();
-        const question = document.getElementById("new-question").value.trim();
-        const answers = Array.from(document.querySelectorAll(".answer-input")).map(i => i.value.trim()).filter(Boolean);
-        if (!question || !answers.length) return;
-        const data = answers.map(a => ({ question, answer: a }));
+    // --- Helper Functions ---
+    async function updateStatus() {
         try {
-            const res = await fetch("/save", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(data)
-            });
-            if (res.ok) {
-                saveModalOverlay.classList.add("hidden");
-                saveForm.reset();
-                updateStats();
+            const res = await fetch("/status");
+            const data = await res.json();
+            isLoggedIn = data.logged_in;
+            
+            if (isLoggedIn) {
+                authTrigger.classList.add("hidden");
+                logoutBtn.classList.remove("hidden");
+                usageDisplay.innerHTML = `
+                    <span><i class="fas fa-user-circle"></i> ${data.user}</span>
+                    <span><i class="fas fa-coins"></i> ${data.tokens}/${data.max}</span>
+                `;
+            } else {
+                authTrigger.classList.remove("hidden");
+                logoutBtn.classList.add("hidden");
+                usageDisplay.innerHTML = `
+                    <span><i class="fas fa-ghost"></i> ضيف</span>
+                    <span><i class="fas fa-coins"></i> ${data.tokens}/${data.max}</span>
+                `;
             }
-        } catch (err) {}
-    };
+        } catch (e) {}
+    }
 
-    themeToggle.onclick = () => {
-        const isDark = document.body.classList.toggle("dark-mode");
-        themeToggle.textContent = isDark ? "☀️" : "🌙";
-    };
+    async function fetchHistory() {
+        const res = await fetch("/history");
+        const data = await res.json();
+        historyList.innerHTML = "";
+        data.reverse().forEach(item => {
+            const div = document.createElement("div");
+            div.className = "history-item";
+            div.textContent = item.q;
+            div.title = item.q;
+            div.onclick = () => {
+                chatMessages.innerHTML = "";
+                addMessage(item.q, 'user');
+                addMessage(item.a, 'bot');
+                sidebar.classList.add("sidebar-closed");
+            };
+            historyList.appendChild(div);
+        });
+    }
 
-    updateStats();
+    updateStatus();
 });

static/style.css

@@ -1,71 +1,297 @@
 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
 
 :root {
-    --primary: #0084ff;
-    --primary-glow: rgba(0, 132, 255, 0.5);
-    --bg: #f8f9fa;
-    --card: #ffffff;
-    --text: #1a1a1a;
-    --bot-msg: #f0f2f5;
-    --user-msg: #0084ff;
-    --user-text: #ffffff;
-    --border: #e4e6eb;
-}
-
-body.dark-mode {
-    --bg: #0b0e11;
-    --card: #15191d;
-    --text: #e4e6eb;
-    --bot-msg: #242526;
-    --border: #303338;
-}
-
-* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; }
-
-body { background: var(--bg); color: var(--text); direction: rtl; height: 100vh; display: flex; justify-content: center; align-items: center; }
-
-#app-container { width: 100%; max-width: 500px; height: 95vh; background: var(--card); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--border); }
-
-header { padding: 15px 20px; background: var(--card); border-bottom: 1px solid var(--border); }
-.header-main { display: flex; justify-content: space-between; align-items: center; }
-h1 { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
-.header-actions { display: flex; gap: 8px; }
-.icon-btn { background: var(--bot-msg); border: none; width: 35px; height: 35px; border-radius: 10px; cursor: pointer; color: var(--text); font-size: 1rem; }
-
-#usage-stats { margin-top: 10px; }
-.sys-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.75rem; opacity: 0.8; }
-.sys-stats span { background: var(--bot-msg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); }
-
-#chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
-.message { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; position: relative; }
-.bot-message { background: var(--bot-msg); align-self: flex-start; border-bottom-right-radius: 4px; }
-.user-message { background: var(--user-msg); color: var(--user-text); align-self: flex-end; border-bottom-left-radius: 4px; }
-
-.msg-footer { font-size: 0.65rem; opacity: 0.6; margin-top: 8px; border-top: 1px solid rgba(128,128,128,0.2); padding-top: 4px; }
-.generating-status { font-style: italic; font-size: 0.85rem; opacity: 0.7; color: var(--primary); }
-
-#chat-form-container { padding: 15px; background: var(--card); border-top: 1px solid var(--border); }
-#chat-form { display: flex; gap: 10px; }
-#user-input { flex: 1; padding: 12px 20px; border-radius: 25px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
-#send-btn { background: var(--primary); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transform: rotate(180deg); }
-
-/* Training Overlay */
-#training-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 9999; display: flex; justify-content: center; align-items: center; color: white; }
-.training-card { background: #1c1c1e; padding: 40px; border-radius: 24px; text-align: center; width: 90%; max-width: 400px; border: 1px solid #333; }
-.loader { width: 50px; height: 50px; border: 4px solid #333; border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
-@keyframes spin { 100% { transform: rotate(360deg); } }
-
-.progress-container { background: #333; height: 8px; border-radius: 4px; margin: 15px 0; overflow: hidden; }
-.progress-bar { background: var(--primary); height: 100%; width: 0%; transition: width 0.3s ease; }
-
-#save-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
-#save-modal { background: var(--card); padding: 25px; border-radius: 20px; width: 90%; max-width: 450px; }
-#save-form { display: flex; flex-direction: column; gap: 15px; }
-#save-form input { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
-.modal-actions { display: flex; gap: 10px; }
-.modal-actions button { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; }
-#cancel-save-btn { background: var(--bot-msg); color: var(--text); }
+    --primary: #6366f1;
+    --primary-glow: rgba(99, 102, 241, 0.4);
+    --bg-dark: #0f172a;
+    --glass-bg: rgba(30, 41, 59, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --text-main: #f1f5f9;
+    --text-muted: #94a3b8;
+    --bot-msg: rgba(51, 65, 85, 0.5);
+    --user-msg: #6366f1;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Tajawal', sans-serif;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    background: var(--bg-dark);
+    color: var(--text-main);
+    direction: rtl;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#app-wrapper {
+    display: flex;
+    height: 100vh;
+}
+
+/* --- Glassmorphism Elements --- */
+.glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.glass-header {
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--glass-border);
+    z-index: 100;
+}
+
+/* --- Sidebar --- */
+#sidebar {
+    width: 280px;
+    height: 100%;
+    background: #1e293b;
+    border-left: 1px solid var(--glass-border);
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease;
+    position: fixed;
+    right: 0;
+    z-index: 200;
+}
+
+#sidebar.sidebar-closed {
+    transform: translateX(100%);
+}
+
+.sidebar-header {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+#history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.history-item {
+    padding: 12px;
+    margin-bottom: 8px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+    transition: background 0.2s;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* --- Main Viewport --- */
+#main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+}
+
+#chat-viewport {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    scroll-behavior: smooth;
+}
+
+#chat-messages {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.message {
+    max-width: 85%;
+    display: flex;
+    flex-direction: column;
+}
+
+.bot-msg { align-self: flex-start; }
+.user-msg { align-self: flex-end; }
+
+.msg-bubble {
+    padding: 14px 18px;
+    border-radius: 18px;
+    line-height: 1.6;
+    font-size: 1rem;
+    position: relative;
+    animation: fadeIn 0.3s ease;
+}
+
+.bot-msg .msg-bubble {
+    background: var(--bot-msg);
+    border: 1px solid var(--glass-border);
+    border-bottom-right-radius: 4px;
+}
+
+.user-msg .msg-bubble {
+    background: var(--user-msg);
+    color: white;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 4px 12px var(--primary-glow);
+}
+
+.msg-footer {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-top: 6px;
+    display: flex;
+    gap: 10px;
+}
+
+/* --- Input Area --- */
+.input-area {
+    padding: 20px;
+    background: linear-gradient(to top, var(--bg-dark), transparent);
+}
+
+.glass-form {
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 30px;
+    padding: 6px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+#user-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    outline: none;
+    font-size: 1rem;
+}
+
+#send-btn {
+    width: 45px;
+    height: 45px;
+    background: var(--primary);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    cursor: pointer;
+    transition: transform 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#send-btn:hover { transform: scale(1.05); }
+
+/* --- Modals --- */
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    width: 90%;
+    max-width: 400px;
+    padding: 30px;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 20px 0;
+}
+
+.auth-form input {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 12px;
+    color: white;
+    outline: none;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 12px;
+    border-radius: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.btn-primary:hover { filter: brightness(1.1); }
+
+/* --- Animations --- */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
 
 .hidden { display: none !important; }
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+
+.icon-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 8px;
+    transition: color 0.2s;
+}
+
+.icon-btn:hover { color: var(--primary); }
+
+/* --- Mobile Fixes --- */
+@media (max-width: 600px) {
+    #sidebar { width: 100%; }
+    .msg-bubble { font-size: 0.95rem; }
+    .glass-header h1 { font-size: 1.2rem; }
+    .sys-info { display: none; }
+}
+
+.generating-status {
+    font-size: 0.8rem;
+    color: var(--primary);
+    margin-bottom: 8px;
+    font-weight: bold;
+}