Upload 2 files

static/script.js

@@ -2,9 +2,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const chatContainer = document.getElementById("chat-container");
     const chatForm = document.getElementById("chat-form");
     const userInput = document.getElementById("user-input");
-    const sendBtn = document.getElementById("send-btn");
     const usageStatsDiv = document.getElementById("usage-stats");
-    const modelStatsDiv = document.getElementById("model-stats");
     const themeToggle = document.getElementById("theme-toggle");
     const showSaveFormBtn = document.getElementById("show-save-form-btn");
     const saveModalOverlay = document.getElementById("save-modal-overlay");
@@ -16,14 +14,28 @@ document.addEventListener("DOMContentLoaded", () => {
     const progressBar = document.getElementById("training-progress-bar");
     const progressStep = document.getElementById("training-step");
     const progressPercentage = document.getElementById("training-percentage");
-    const progressDetails = document.getElementById("training-details");
 
     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) eventSource.close();
+        if (eventSource) return;
         eventSource = new EventSource("/training-progress");
-        
         eventSource.onmessage = (event) => {
             const data = JSON.parse(event.data);
             if (data.is_training) {
@@ -31,56 +43,21 @@ document.addEventListener("DOMContentLoaded", () => {
                 progressBar.style.width = `${data.percentage}%`;
                 progressStep.textContent = data.current_step;
                 progressPercentage.textContent = `${data.percentage}%`;
-                progressDetails.textContent = data.details;
             } else {
                 trainingOverlay.classList.add("hidden");
-                updateStats();
-                if (eventSource) {
-                    eventSource.close();
-                    eventSource = null;
-                }
+                eventSource.close();
+                eventSource = null;
             }
         };
-
-        eventSource.onerror = () => {
-            if (eventSource) eventSource.close();
-            eventSource = null;
-            // Retry after delay if needed
-            setTimeout(checkTrainingStatus, 3000);
-        };
-    }
-
-    async function checkTrainingStatus() {
-        const res = await fetch("/status");
-        const data = await res.json();
-        if (data.is_training) {
-            startTrainingListener();
-        } else {
-            trainingOverlay.classList.add("hidden");
-        }
-    }
-
-    async function updateStats() {
-        try {
-            const [statusRes, statsRes] = await Promise.all([fetch("/status"), fetch("/stats")]);
-            if (statusRes.ok) {
-                const s = await statusRes.json();
-                usageStatsDiv.innerHTML = `📊 ${s.tokens_used}/${s.max_tokens} رمز اليوم`;
-                if (s.is_training) startTrainingListener();
-            }
-            if (statsRes.ok) {
-                const s = await statsRes.json();
-                modelStatsDiv.innerHTML = `🧠 ${s.question_count} مدخلات في القاعدة`;
-            }
-        } catch (e) {}
     }
 
     function addMessage(text, className) {
         const div = document.createElement("div");
         div.className = `message ${className}`;
-        div.textContent = text;
+        div.innerHTML = `<div class="msg-content">${text}</div>`;
         chatContainer.appendChild(div);
         chatContainer.scrollTop = chatContainer.scrollHeight;
+        return div;
     }
 
     chatForm.addEventListener("submit", async (e) => {
@@ -93,53 +70,59 @@ document.addEventListener("DOMContentLoaded", () => {
         
         const botMsgDiv = document.createElement("div");
         botMsgDiv.className = "message bot-message";
-        botMsgDiv.textContent = "...";
+        const statusEl = document.createElement("div");
+        statusEl.className = "generating-status";
+        statusEl.textContent = "جاري البدء ... 0%";
+        botMsgDiv.appendChild(statusEl);
         chatContainer.appendChild(botMsgDiv);
-        chatContainer.scrollTop = chatContainer.scrollHeight;
 
         try {
-            const res = await fetch("/chat", {
+            const response = await fetch("/chat", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ question: q })
             });
-            const data = await res.json();
+
+            if (!response.ok) {
+                const errData = await response.json();
+                botMsgDiv.textContent = `❌ ${errData.error || "Error"}`;
+                return;
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
             
-            if (data.error) {
-                botMsgDiv.textContent = `❌ ${data.error}`;
-                if (res.status === 503) startTrainingListener();
-            } else if (data.ambiguous_questions) {
-                botMsgDiv.textContent = "أي من هذه الأسئلة تقصد؟";
-                const btnContainer = document.createElement("div");
-                btnContainer.style.display = "flex";
-                btnContainer.style.flexDirection = "column";
-                btnContainer.style.gap = "5px";
-                btnContainer.style.marginTop = "10px";
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
                 
-                data.ambiguous_questions.forEach(aq => {
-                    const btn = document.createElement("button");
-                    btn.textContent = aq;
-                    btn.style.padding = "8px";
-                    btn.style.borderRadius = "10px";
-                    btn.style.border = "1px solid var(--primary)";
-                    btn.style.background = "transparent";
-                    btn.style.color = "var(--primary)";
-                    btn.style.cursor = "pointer";
-                    btn.onclick = () => {
-                        userInput.value = aq;
-                        chatForm.dispatchEvent(new Event('submit'));
-                        btnContainer.remove();
-                    };
-                    btnContainer.appendChild(btn);
-                });
-                botMsgDiv.appendChild(btnContainer);
-            } else {
-                botMsgDiv.textContent = data.response_text;
+                const chunk = decoder.decode(value);
+                const lines = chunk.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>
+                            `;
+                        } else if (data.error) {
+                            botMsgDiv.textContent = `❌ ${data.error}`;
+                        }
+                    } catch (e) { console.error("Error parsing chunk", e); }
+                }
+                chatContainer.scrollTop = chatContainer.scrollHeight;
             }
         } catch (err) {
             botMsgDiv.textContent = "❌ حدث خطأ في الاتصال.";
         }
-        chatContainer.scrollTop = chatContainer.scrollHeight;
         updateStats();
     });
 
@@ -158,11 +141,8 @@ document.addEventListener("DOMContentLoaded", () => {
         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 }));
-        
         try {
             const res = await fetch("/save", {
                 method: "POST",
@@ -172,7 +152,7 @@ document.addEventListener("DOMContentLoaded", () => {
             if (res.ok) {
                 saveModalOverlay.classList.add("hidden");
                 saveForm.reset();
-                startTrainingListener();
+                updateStats();
             }
         } catch (err) {}
     };
@@ -182,6 +162,5 @@ document.addEventListener("DOMContentLoaded", () => {
         themeToggle.textContent = isDark ? "☀️" : "🌙";
     };
 
-    checkTrainingStatus();
     updateStats();
 });

static/style.css

@@ -26,19 +26,24 @@ body { background: var(--bg); color: var(--text); direction: rtl; height: 100vh;
 
 #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: 20px; background: var(--card); border-bottom: 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.2rem; font-weight: 700; color: var(--primary); }
-.header-actions { display: flex; gap: 10px; }
-.icon-btn { background: var(--bot-msg); border: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; color: var(--text); font-size: 1.1rem; }
+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 { font-size: 0.8rem; opacity: 0.7; margin-top: 5px; }
+#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; line-height: 1.5; }
+.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; }
@@ -47,14 +52,12 @@ h1 { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
 /* 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: 60px; height: 60px; border: 5px solid #333; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
+.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: 10px; border-radius: 5px; margin: 20px 0; overflow: hidden; }
-.progress-bar { background: var(--primary); height: 100%; width: 0%; transition: width 0.3s ease; box-shadow: 0 0 15px var(--primary-glow); }
-#training-details { font-size: 0.85rem; opacity: 0.6; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.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; }
 
-/* Modal */
 #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; }
@@ -62,9 +65,7 @@ h1 { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
 .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); }
-button[type="submit"] { background: var(--primary); color: white; }
 
 .hidden { display: none !important; }
-
-::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }