Upload script.js

static/script.js

@@ -1,67 +1,330 @@
-const chatBox = document.getElementById('chat-box');
-const chatForm = document.getElementById('chat-form');
-const userInput = document.getElementById('user-input');
-const trainingOverlay = document.getElementById('training-overlay');
-
-// التحقق من حالة التدريب كل ثانية
-function checkStatus() {
-    fetch('/training-status')
-        .then(r => r.json())
-        .then(data => {
-            if (data.is_training) {
-                trainingOverlay.classList.remove('hidden');
-                document.getElementById('progress-fill').style.width = data.progress + '%';
-                document.getElementById('progress-text').innerText = data.progress + '%';
-                document.getElementById('task-name').innerText = data.current_task;
+document.addEventListener("DOMContentLoaded", () => {
+    // --- DOM Elements ---
+    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 suggestionsContainer = document.getElementById("suggestions-container");
+    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 newQuestionInput = document.getElementById("new-question");
+    const saveStatus = document.getElementById("save-status");
+
+    // --- Helper Functions ---
+    async function updateStats() {
+        try {
+            const [statusRes, statsRes] = await Promise.all([fetch("/status"), fetch("/stats")]);
+            if (statusRes.ok) {
+                const stats = await statusRes.json();
+                usageStatsDiv.innerHTML = `📊 ${stats.tokens_used}/${stats.max_tokens} رمز | ⏱️ ${stats.training_time_used.toFixed(1)}ث/${stats.max_training_time}ث تدريب`;
+            }
+            if (statsRes.ok) {
+                const stats = await statsRes.json();
+                modelStatsDiv.innerHTML = `🧠 ${stats.question_count} سؤال في قاعدة البيانات`;
+            }
+        } catch (error) {
+            usageStatsDiv.innerHTML = "⚠️ تعذر تحميل الإحصائيات";
+            modelStatsDiv.innerHTML = "";
+        }
+    }
+
+    function addMessage(text, className) {
+        const div = document.createElement("div");
+        div.className = `message ${className}`;
+        div.textContent = text;
+        chatContainer.appendChild(div);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function addBotResponse(data) {
+        const messageDiv = document.createElement("div");
+        messageDiv.className = "message bot-message";
+        removeTypingIndicator();
+
+        if (data.ambiguous_questions) {
+            const header = document.createElement('div');
+            header.className = 'content';
+            header.textContent = 'وجدنا عدة أسئلة متشابهة. أي واحد تقصد؟';
+            messageDiv.appendChild(header);
+
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'selection-buttons';
+
+            data.ambiguous_questions.forEach(q => {
+                const btn = document.createElement('button');
+                btn.className = 'selection-btn';
+                btn.textContent = q;
+                btn.onclick = () => handleSelection(data.user_query, q);
+                buttonContainer.appendChild(btn);
+            });
+            messageDiv.appendChild(buttonContainer);
+        } else {
+            const contentDiv = document.createElement("div");
+            contentDiv.className = "content";
+            messageDiv.appendChild(contentDiv);
+            
+            const statsDiv = document.createElement("div");
+            statsDiv.className = "stats-grid";
+            const createStat = (icon, value, label) => {
+                const statDiv = document.createElement('div');
+                statDiv.className = 'stat-item';
+                statDiv.innerHTML = `${icon} <span>${value}</span> ${label}`;
+                return statDiv;
+            };
+            statsDiv.appendChild(createStat('⏱️', `${data.duration.toFixed(3)}s`, ''));
+            statsDiv.appendChild(createStat('🔤', data.token_count, 'رمز'));
+            if (data.similarity_score !== undefined && data.similarity_score !== null) {
+                const scoreValue = `${(data.similarity_score * 100).toFixed(1)}%`;
+                statsDiv.appendChild(createStat('🎯', scoreValue, 'تشابه'));
+            }
+            statsDiv.appendChild(createStat('💻', `${data.cpu_usage[0].toFixed(1)}%`, 'CPU'));
+            statsDiv.appendChild(createStat('🧠', `${data.mem_usage[1].toFixed(1)}%`, 'RAM'));
+            
+            typeAnimation(contentDiv, data.response_text, () => {
+                messageDiv.appendChild(statsDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            });
+        }
+        
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    async function handleSelection(originalQuery, selectedQuestion) {
+        try {
+            await fetch('/log_selection', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ user_query: originalQuery, selected_question: selectedQuestion })
+            });
+        } catch (error) {
+            console.error("Failed to log selection:", error);
+        }
+
+        addMessage(selectedQuestion, "user-message");
+        showTypingIndicator();
+
+        try {
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ question: selectedQuestion }),
+            });
+            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || 'حدث خطأ في الخادم');
+            
+            const allButtons = document.querySelectorAll('.selection-buttons');
+            if (allButtons.length > 0) {
+                allButtons[allButtons.length - 1].parentElement.remove();
+            }
+
+            addBotResponse(data);
+        } catch (error) {
+            addMessage(`❌ خطأ: ${error.message}`, "bot-message");
+        } finally {
+            removeTypingIndicator();
+        }
+    }
+
+    function showTypingIndicator() {
+        const div = document.createElement("div");
+        div.className = "message bot-message typing-indicator";
+        div.innerHTML = "<span></span><span></span><span></span>";
+        chatContainer.appendChild(div);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function removeTypingIndicator() {
+        const indicator = document.querySelector(".typing-indicator");
+        if (indicator) indicator.remove();
+    }
+
+    function typeAnimation(element, text, callback) {
+        let i = 0;
+        element.innerHTML = "";
+        const interval = setInterval(() => {
+            if (i < text.length) {
+                element.innerHTML += text.charAt(i);
+                i++;
+                chatContainer.scrollTop = chatContainer.scrollHeight;
             } else {
-                trainingOverlay.classList.add('hidden');
+                clearInterval(interval);
+                if (callback) callback();
             }
+        }, 20);
+    }
+
+    function displaySuggestions(suggestions) {
+        suggestionsContainer.innerHTML = '';
+        if (suggestions.length === 0) {
+            suggestionsContainer.classList.add('hidden');
+            return;
+        }
+        suggestions.forEach(suggestion => {
+            const div = document.createElement('div');
+            div.className = 'suggestion';
+            div.textContent = suggestion;
+            div.addEventListener('click', () => {
+                userInput.value = suggestion;
+                suggestionsContainer.classList.add('hidden');
+                chatForm.dispatchEvent(new Event('submit'));
+            });
+            suggestionsContainer.appendChild(div);
         });
-}
+        suggestionsContainer.classList.remove('hidden');
+    }
+    
+    function showSaveStatus(message, type) {
+        saveStatus.textContent = message;
+        saveStatus.className = `status-${type}`;
+        saveStatus.classList.remove('hidden');
+    }
 
-setInterval(checkStatus, 1500);
+    // --- Event Listeners ---
+    chatForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const question = userInput.value.trim();
+        if (!question) return;
+        addMessage(question, "user-message");
+        userInput.value = "";
+        suggestionsContainer.classList.add('hidden');
+        showTypingIndicator();
+        sendBtn.disabled = true;
+        try {
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ question }),
+            });
+            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || 'حدث خطأ في الخادم');
+            addBotResponse(data);
+        } catch (error) {
+            addMessage(`❌ خطأ: ${error.message}`, "bot-message");
+        } finally {
+            removeTypingIndicator();
+            sendBtn.disabled = false;
+            updateStats();
+        }
+    });
 
-chatForm.onsubmit = async (e) => {
-    e.preventDefault();
-    const msg = userInput.value;
-    appendMsg(msg, 'user');
-    userInput.value = '';
+    let suggestionTimeout;
+    userInput.addEventListener("input", () => {
+        clearTimeout(suggestionTimeout);
+        const query = userInput.value.trim();
+        if (query.length < 2) {
+            suggestionsContainer.classList.add('hidden');
+            return;
+        }
+        suggestionTimeout = setTimeout(async () => {
+            try {
+                const response = await fetch(`/suggest?q=${encodeURIComponent(query)}`);
+                if (!response.ok) throw new Error("فشل في جلب الاقتراحات");
+                displaySuggestions(await response.json());
+            } catch (error) {
+                suggestionsContainer.classList.add('hidden');
+            }
+        }, 300);
+    });
 
-    const res = await fetch('/chat', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({message: msg})
+    // --- Modal & Other UI ---
+    const singleQuestionForm = document.getElementById('single-question-form');
+    const jsonForm = document.getElementById('json-form');
+    showSaveFormBtn.addEventListener("click", () => saveModalOverlay.classList.remove("hidden"));
+    cancelSaveBtn.addEventListener("click", () => {
+        saveModalOverlay.classList.add("hidden");
+        saveForm.reset();
+        document.querySelectorAll('.answer-input:not(:first-child)').forEach(el => el.remove());
+        saveStatus.textContent = "";
+        saveStatus.classList.add('hidden');
+        singleQuestionForm.classList.remove('hidden');
+        jsonForm.classList.add('hidden');
     });
-    
-    const data = await res.json();
-    if (data.error) appendMsg(data.error, 'bot');
-    else appendMsg(data.response_text, 'bot');
-};
-
-function appendMsg(text, side) {
-    const div = document.createElement('div');
-    div.className = `msg ${side}`;
-    div.innerText = text;
-    chatBox.appendChild(div);
-    chatBox.scrollTop = chatBox.scrollHeight;
-}
-
-// أزرار المودال
-document.getElementById('add-data-btn').onclick = () => document.getElementById('modal').classList.remove('hidden');
-document.getElementById('close-btn').onclick = () => document.getElementById('modal').classList.add('hidden');
-
-document.getElementById('save-btn').onclick = async () => {
-    const q = document.getElementById('new-q').value;
-    const a = document.getElementById('new-a').value;
-    if(!q || !a) return;
-
-    await fetch('/save', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify([{question: q, answer: a}])
+    addAnswerBtn.addEventListener("click", () => {
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "answer-input";
+        input.placeholder = `الإجابة #${answersContainer.children.length + 1}`;
+        answersContainer.appendChild(input);
+        input.focus();
     });
-    
-    document.getElementById('modal').classList.add('hidden');
-    document.getElementById('new-q').value = '';
-    document.getElementById('new-a').value = '';
-};
+    document.querySelectorAll('input[name="save-mode"]').forEach(radio => {
+        radio.addEventListener('change', (e) => {
+            if (e.target.value === 'json') {
+                singleQuestionForm.classList.add('hidden');
+                jsonForm.classList.remove('hidden');
+            } else {
+                singleQuestionForm.classList.remove('hidden');
+                jsonForm.classList.add('hidden');
+            }
+        });
+    });
+    saveForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const saveMode = document.querySelector('input[name="save-mode"]:checked').value;
+        let requestData;
+        if (saveMode === 'json') {
+            const jsonInput = document.getElementById('json-input').value.trim();
+            if (!jsonInput) return showSaveStatus('الرجاء إدخال بيانات JSON', 'error');
+            try {
+                requestData = JSON.parse(jsonInput);
+            } catch (err) {
+                return showSaveStatus('صيغة JSON غير صالحة', 'error');
+            }
+        } else {
+            const question = newQuestionInput.value.trim();
+            const answers = Array.from(document.querySelectorAll(".answer-input")).map(input => input.value.trim()).filter(Boolean);
+            if (!question || answers.length === 0) return showSaveStatus('الرجاء تقديم سؤال وإجابة واحدة على الأقل', 'error');
+            requestData = answers.map(answer => ({ question, answer }));
+        }
+        showSaveStatus('جاري الحفظ والتدريب...', 'info');
+        try {
+            const response = await fetch("/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(requestData),
+            });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.message || 'حدث خطأ غير معروف');
+            showSaveStatus(`✅ ${result.message}`, 'success');
+            setTimeout(() => cancelSaveBtn.click(), 2000);
+        } catch (error) {
+            showSaveStatus(`❌ ${error.message}`, 'error');
+        } finally {
+            updateStats();
+        }
+    });
+    saveModalOverlay.addEventListener('click', (e) => {
+        if (e.target === saveModalOverlay) cancelSaveBtn.click();
+    });
+    document.addEventListener('click', (e) => {
+        if (!userInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
+            suggestionsContainer.classList.add('hidden');
+        }
+    });
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !saveModalOverlay.classList.contains('hidden')) cancelSaveBtn.click();
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            userInput.focus();
+        }
+    });
+
+    // --- Initial Load ---
+	const savedTheme = localStorage.getItem('theme') || 'dark';
+	document.body.classList.toggle('dark-mode', savedTheme === 'dark');
+	themeToggle.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
+    updateStats();
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.classList.toggle('dark-mode');
+        themeToggle.textContent = isDark ? '☀️' : '🌙';
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    });
+});