Update script.js

script.js

@@ -1,446 +1,679 @@
-// این خط در فایل script.js قرار دارد و برای Space جدیدی که Frontend و Backend در آن مشترک هستند، استفاده می شود.
+// این فایل script.js نسخه نهایی شده بر اساس کد اصلی شماست.
+// تغییرات لازم برای کار در Hugging Face Space جدید و مدل heydariAI/persian-embeddings اعمال شده است.
+// شامل تمام قابلیت های اضافه شده و رفع اشکالات ID های شناسایی شده.
+
+// ****** تعریف متغیرهای عناصر HTML در بالاترین اسکوپ ******
+// این متغیرها در بلوک DOMContentLoaded مقداردهی اولیه می شوند.
+let searchButton;
+let userQuestionInput; // <--- مطابق با ID در index.html شما
+let searchResultsContainer; // <--- مطابق با ID در index.html شما
+let loadingStatusElement; // <--- مطابق با ID در index.html شما
+let selectionErrorElement; // <--- مطابق با ID در index.html شما
+
+let selectAllCheckbox; // <--- مطابق با ID در index.html شما
+let bookCheckboxes; // <--- مطابق با class در index.html شما (HTMLCollection از المان ها)
+
+let resultsPerPageSelect; // <--- مطابق با ID در index.html شما
+let similarityThresholdInput; // <--- مطابق با ID در index.html شما
+// نکته: در index.html شما المانی برای نمایش عددی آستانه شباهت در کنار input type="number" وجود ندارد، پس نیازی به متغیر برای آن نیست.
+
+// *************************************************
+
+
+// ****** تعریف URL سرور پایتون برای دریافت Embedding سوال ******
 // آدرس لوکال برای ارتباط با Backend در همان کانتینر Docker روی پورت 7860
-const EMBEDDING_SERVER_URL = 'http://localhost:7860/get_embedding';
-
-// لیست مسیر فایل های JSON خاطرات شما در هاست (نسبت به ریشه وب سایت)
-// مطمئن شوید که این مسیرها صحیح هستند و این فایل ها در Space آپلود شده اند.
-const MEMOIRS_DATA_FILES = [
-    'jabe_siah.json',
-    // اگر کتاب های دیگری هم دارید، مسیر فایل JSON آن ها را در اینجا اضافه کنید:
-    // 'ketab_dovom.json',
-    // ... فایل های بیشتر
-];
-
-// متغیر برای ذخیره داده های بارگذاری شده از فایل های JSON
-let allMemoirsData = [];
-
-// تعداد نتایج نمایش داده شده در هر صفحه (اختیاری)
-const RESULTS_PER_PAGE = 10; // می توانید این مقدار را تغییر دهید
-
-// حداقل امتیاز شباهت برای نمایش نتیجه
-let similarityThreshold = 0.15; // می توانید مقدار پیش فرض را تنظیم کنید
-
-// متغیرها برای کنترل Pagination (در صورت نیاز به پیاده سازی Pagination واقعی)
-// در حال حاضر فقط تعداد نتایج برتر را نمایش می دهیم، نه pagination واقعی
-// let currentPage = 1;
-// let totalResults = 0;
-// let currentSearchResults = []; // برای ذخیره نتایج جستجوی فعلی قبل از Pagination
-
-// ****** المان های DOM ******
-// دقت کنید: ID ها دقیقاً با index.html مطابقت دارند (حروف کوچک و بزرگ)
-const searchInput = document.getElementById('search-input');
-const searchButton = document.getElementById('searchButton'); // <--- اصلاح شد: ID مطابقت دارد با HTML
-const resultsContainer = document.getElementById('results-container');
-const loadingSpinner = document.getElementById('loading-spinner');
-const statusMessage = document.getElementById('status-message');
-const booksCheckboxesContainer = document.getElementById('books-checkboxes-container');
-const similarityThresholdInput = document.getElementById('similarity-threshold'); // <--- اصلاح شد: ID مطابقت دارد با HTML
-const similarityThresholdValueSpan = document.getElementById('similarity-threshold-value'); // <--- اصلاح شد: ID مطابقت دارد با HTML
-// *************************
-
-
-// ****** توابع کمکی ******
-
-// تابع برای نمایش پیام وضعیت
-function showStatus(message, isError = false) {
-    statusMessage.textContent = message;
-    statusMessage.style.color = isError ? 'red' : 'black';
-    statusMessage.style.display = 'block';
+// این آدرس ثابت است و نیازی به جایگزینی با آدرس عمومی Space ندارد.
+const EMBEDDING_SERVER_URL = 'http://localhost:7860/get_embedding'; // <--- آدرس لوکال برای Space مشترک
+
+
+// ****** نگاشت نام فایل JSON به نام کامل کتاب (برای نمایش در نتایج و فیلتر) ******
+// این map اطلاعات نمایشی کتاب را بر اساس value چک باکس (نام فایل JSON) فراهم می کند.
+// مطمئن شوید که value چک باکس ها در index.html شما با کلیدهای این map مطابقت دارد.
+// همچنین book_title در فایل های JSON شما باید با مقادیر این map مطابقت داشته باشد
+// زیرا فیلتر بر اساس book_title در JSON انجام می شود.
+const bookInfo = {
+    // 'نام_فایل_json_در_value_چک_باکس': 'نام کامل نمایشی کتاب',
+    'jabe_siah.json': 'جعبه سیاه (منتخب خاطرات اسدالله علم)', // مثال: value چک باکس : نام نمایشی کتاب
+    // اگر چک باکس های بیشتری در HTML دارید و فایل های JSON متناظر دارید، ورودی های متناظر را اینجا اضافه کنید:
+    // 'ketab_dovom.json': 'نام کتاب دوم',
+    // 'ketab_sevom.json': 'نام کتاب سوم',
+    // مطمئن شوید که فایل های JSON متناظر (مثلا ketab_dovom.json) در Space آپلود شده اند.
+};
+
+
+// ****** آستانه شباهت پیش فرض ******
+// اگر عنصر ورودی آستانه پیدا نشد یا مقدار آن نامعتبر بود، از این مقدار استفاده می شود.
+const DEFAULT_SIMILARITY_THRESHOLD = 0.15;
+
+
+// ****** متغیر سراسری برای نگهداری داده های بارگذاری شده از کتاب های انتخاب شده ******
+let memoirsWithEmbeddings = []; // این آرایه حاوی خاطرات با بردارهای embedding از کتاب های انتخاب شده است.
+
+
+// ****** توابع کمکی برای مدیریت پیام ها و وضعیت UI ******
+
+// تابع کمکی برای نمایش پیام وضعیت بارگذاری/پردازش در المان loadingStatusElement
+function updateStatus(message, isError = false) {
+    if (loadingStatusElement) {
+        loadingStatusElement.textContent = message;
+        loadingStatusElement.style.color = isError ? 'red' : '#666'; // رنگ قرمز برای خطا، خاکستری برای وضعیت
+        loadingStatusElement.style.fontWeight = isError ? 'bold' : 'normal'; // خطاها با فونت ضخیم تر
+        loadingStatusElement.style.display = message ? 'block' : 'none'; // نمایش المان فقط وقتی پیام دارد
+    } else {
+        console.log("Status:", message); // لاگ برای توسعه
+    }
+    // پاک کردن پیام خطای انتخاب کتاب اگر پیامی در status نمایش داده می شود
+    if (message && selectionErrorElement) {
+        selectionErrorElement.textContent = '';
+        selectionErrorElement.style.display = 'none';
+    }
 }
 
-// تابع برای مخفی کردن پیام وضعیت
-function hideStatus() {
-    statusMessage.style.display = 'none';
+// تابع کمکی برای نمایش خطای انتخاب کتاب یا بارگذاری داده در المان selectionErrorElement
+function updateSelectionError(message) {
+    if (selectionErrorElement) {
+        selectionErrorElement.textContent = message;
+        selectionErrorElement.style.color = 'red';
+        selectionErrorElement.style.fontWeight = 'bold'; // خطاها با فونت ضخیم تر
+        selectionErrorElement.style.display = message ? 'block' : 'none'; // نمایش المان فقط وقتی پیام دارد
+    } else {
+         console.error("Selection Error Element not found."); // لاگ برای توسعه
+    }
+    // پاک کردن پیام وضعیت اگر پیامی در selectionError نمایش داده می شود
+    if (message && loadingStatusElement) {
+        loadingStatusElement.textContent = '';
+        loadingStatusElement.style.display = 'none';
+    }
 }
 
-// تابع برای نمایش اسپینر بارگذاری
-function showLoading() {
-    loadingSpinner.style.display = 'block';
-    searchButton.disabled = true; // غیرفعال کردن دکمه جستجو حین بارگذاری
-    hideStatus(); // مخفی کردن پیام وضعیت هنگام بارگذاری
+// تابع کمکی برای فعال/غیرفعال کردن دکمه جستجو
+function setButtonEnabled(enabled) {
+    if (searchButton) {
+        searchButton.disabled = !enabled;
+         // console.log("Search button enabled state:", enabled); // لاگ برای توسعه
+    } else {
+         console.error("Search button element not found.");
+    }
 }
 
-// تابع برای مخفی کردن اسپینر بارگذاری
-function hideLoading() {
-    loadingSpinner.style.display = 'none';
-    searchButton.disabled = false; // فعال کردن دکمه جستجو پس از بارگذاری
+// ****** تابع برای بررسی وضعیت و فعال/غیرفعال کردن دکمه جستجو ******
+// دکمه فقط زمانی فعال می شود که داده بارگذاری شده و کادر سوال خالی نیست و آستانه معتبر است.
+function checkAndEnableSearchButton() {
+    const isDataLoaded = memoirsWithEmbeddings.length > 0;
+    // اطمینان از وجود userQuestionInput قبل از دسترسی به value
+    const isQueryNotEmpty = userQuestionInput && userQuestionInput.value.trim() !== '';
+
+    // همچنین بررسی می کنیم که مقدار آستانه شباهت معتبر باشد اگر عنصر ورودی وجود دارد
+    let isThresholdInputValid = true;
+    if (similarityThresholdInput) {
+        const inputValue = parseFloat(similarityThresholdInput.value);
+        // چک می کنیم عدد معتبر باشد و در محدوده [0, 1] باشد
+        if (isNaN(inputValue) || inputValue < 0.0 || inputValue > 1.0) {
+            isThresholdInputValid = false; // مقدار نامعتبر است
+        }
+    } else {
+        // اگر عنصر ورودی پیدا نشد، از آستانه پیش فرض استفاده می کنیم و فرض می کنیم معتبر است
+         console.warn("Similarity threshold input element not found. Assuming default threshold is valid.");
+    }
+
+    // دکمه فقط زمانی فعال می شود که تمام شرایط لازم برقرار باشد
+    setButtonEnabled(isDataLoaded && isQueryNotEmpty && isThresholdInputValid);
 }
 
 
-// تابع برای محاسبه شباهت کسینوسی بین دو بردار
-function cosineSimilarity(vecA, vecB) {
-    let dotProduct = 0;
-    // بردارهای تولید شده توسط Sentence-Transformers معمولاً نرمالیزه شده اند (طول 1 دارند).
-    // اگر مطمئن هستید که بردارها نرمالیزه شده اند، می توانید فقط ضرب نقطه ای را محاسبه کنید.
-    for (let i = 0; i < vecA.length; i++) {
-        dotProduct += vecA[i] * vecB[i];
+// ****** تابع اصلی برای بارگذاری داده‌ها از فایل‌های JSON کتاب‌های انتخاب شده ******
+// این تابع هر زمان که انتخاب کتاب ها تغییر می کند، داده ها را بارگذاری مجدد می کند.
+async function updateSelectedBooksData() {
+    console.log("Updating selected books data..."); // لاگ برای توسعه
+    updateStatus("در حال بارگذاری داده‌ها..."); // پیام برای کاربر
+    updateSelectionError(""); // پاک کردن پیام خطای قبلی
+    setButtonEnabled(false); // غیرفعال کردن دکمه در طول بارگذاری داده ها
+     if (searchResultsContainer) { // پاک کردن نتایج قبلی
+       searchResultsContainer.innerHTML = '<p>پس از انتخاب کتاب‌ها و وارد کردن سوال، نتایج اینجا نمایش داده می‌شوند.</p>'; // پیام اولیه
     }
-    return dotProduct; // برگرداندن ضرب نقطه ای برای بردارهای نرمالیزه شده
-}
 
-// تابع برای دریافت بردار (Embedding) یک عبارت جستجو از سرور Backend
-async function getEmbedding(query) {
+
+    // پیدا کردن چک باکس های کتاب ها که انتخاب شده اند
+    // از getElementsByClassName استفاده می کنیم و آن را به آرایه تبدیل می کنیم
+    if (!bookCheckboxes || bookCheckboxes.length === 0) {
+         console.error("No book checkboxes found with class 'book-checkbox'. Cannot load data.");
+         updateStatus(""); // پاک کردن پیام وضعیت
+         updateSelectionError("المان‌های انتخاب کتاب یافت نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا برای کاربر
+         memoirsWithEmbeddings = [];
+         checkAndEnableSearchButton();
+         return;
+    }
+
+    // value چک باکس ها همان نام فایل JSON است که باید بارگذاری شود.
+    const selectedBookFiles = Array.from(bookCheckboxes)
+                                    .filter(checkbox => checkbox.checked)
+                                    .map(checkbox => checkbox.value);
+
+    console.log("Selected book files (from checkbox values):", selectedBookFiles); // لاگ برای توسعه
+
+    // ****** چک کردن اینکه حداقل یک کتاب انتخاب شده باشد ******
+    if (selectedBookFiles.length === 0) {
+        updateStatus(""); // پاک کردن پیام وضعیت
+        updateSelectionError("لطفاً حداقل یک کتاب برای جستجو انتخاب کنید."); // پیام خطا برای کاربر
+        console.warn("No books selected. Cannot load data."); // لاگ برای توسعه
+        memoirsWithEmbeddings = []; // پاک کردن داده های قبلی
+        checkAndEnableSearchButton(); // مطمئن می شویم دکمه غیرفعال بماند
+        return; // توقف فرآیند اگر هیچ کتابی انتخاب نشده است
+    }
+    // ********************************************************
+
+    memoirsWithEmbeddings = []; // پاک کردن داده‌های قبلی قبل از بارگذاری جدید
+
     try {
-        const response = await fetch(EMBEDDING_SERVER_URL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ query: query }),
+        // بارگذاری همزمان تمام فایل‌های JSON انتخاب شده
+        const fetchPromises = selectedBookFiles.map(filename => {
+             // آدرس فایل JSON نسبت به محل قرارگیری index.html
+             // فرض بر این است که فایل های JSON در کنار index.html در همان پوشه قرار دارند
+             const filePath = `./${filename}`;
+             console.log(`Attempting to fetch: ${filePath}`); // لاگ برای توسعه
+             return fetch(filePath).then(response => {
+                 if (!response.ok) {
+                     // اگر فایل پیدا نشد یا خطای دیگری رخ داد (مثلاً 404)
+                     console.error(`Workspace error for ${filePath}: Status ${response.status}`); // لاگ خطا برای توسعه
+                     // تلاش برای خواندن متن خطا از پاسخ برای اطلاعات بیشتر
+                     return response.text().then(text => {
+                          console.error(`Response body for ${filePath}: ${text}`);
+                          throw new Error(`Error fetching file: "${filename}" (Status: ${response.status}). Check if the file exists at "${filePath}".`);
+                     }).catch(() => {
+                          // اگر خواندن متن خطا هم موفق نبود
+                          throw new Error(`Error fetching file: "${filename}" (Status: ${response.status}). Check if the file exists at "${filePath}".`);
+                     });
+
+                 }
+                 // بررسی Content-Type پاسخ برای اطمینان از اینکه واقعا JSON است
+                 const contentType = response.headers.get("content-type");
+                 if (!contentType || !contentType.includes("application/json")) {
+                     console.error(`Workspace error for ${filePath}: Expected application/json, but received ${contentType}`);
+                     throw new Error(`Error fetching file: "${filename}". Expected JSON, but received unexpected content type.`);
+                 }
+                 return response.json();
+             })
+             .catch(error => {
+                 // گرفتن خطاهای شبکه یا تجزیه JSON
+                 console.error(`Failed to fetch or parse file "${filename}":`, error); // لاگ خطا برای توسعه
+                 throw new Error(`Failed to load data for book file "${filename}". ${error.message || 'Unknown error'}. Check file name and location.`);
+             });
         });
 
-        if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
-        }
 
-        const data = await response.json();
-        if (!data || !data.embedding || !Array.isArray(data.embedding)) {
-             throw new Error('Invalid response format from embedding server.');
-        }
-        return data.embedding; // برگرداندن آرایه بردار
+        const booksData = await Promise.all(fetchPromises); // انتظار برای دانلود و تجزیه همه فایل ها
 
-    } catch (error) {
-        console.error('Error getting embedding:', error);
-        showStatus(`Error getting embedding: ${error.message}`, true);
-        return null; // برگرداندن null در صورت خطا
-    }
-}
+        // ترکیب داده‌ها از تمام فایل‌های JSON بارگذاری شده و افزودن اطلاعات کتاب
+        booksData.forEach((data, index) => { // اضافه کردن index برای دسترسی به selectedBookFiles
+            const filename = selectedBookFiles[index]; // نام فایل JSON فعلی (value چک باکس)
+            // پیدا کردن نام نمایشی کتاب از map bookInfo بر اساس نام فایل
+            const bookDisplayName = bookInfo[filename] || filename;
 
-// تابع برای بارگذاری داده های خاطرات از فایل های JSON
-async function loadMemoirsData() {
-    allMemoirsData = []; // پاک کردن داده های قبلی
+            if (Array.isArray(data)) {
+                 // فیلتر کردن آیتم هایی که بردار embedding معتبر دارند و افزودن اطلاعات کتاب به آن ها
+                 const memoirsWithBookInfo = data.filter(item => item && typeof item === 'object' && item.embedding && Array.isArray(item.embedding) && item.embedding.length > 0) // اضافه کردن چک item !== null و item از نوع object باشد
+                                                 .map(item => ({
+                                                     ...item, // کپی کردن تمام پراپرتی های موجود (passage, reference, embedding, passage_original, etc.)
+                                                     book_title: bookDisplayName, // افزودن نام نمایشی کتاب
+                                                     book_file: filename // افزودن نام فایل اصلی کتاب
+                                                 }));
 
-    if (MEMOIRS_DATA_FILES.length === 0) {
-        showStatus("No memoir data files specified.", true);
-        return;
-    }
+                 memoirsWithEmbeddings = memoirsWithEmbeddings.concat(memoirsWithBookInfo);
 
-    showStatus("Loading memoir data...");
+                 // هشدار برای آیتم هایی که بردار ندارند یا فرمتشان مشکل دارد (فقط در کنسول)
+                 const invalidMemoirsCount = data.length - memoirsWithBookInfo.length; // تعداد کل - تعداد معتبر با اطلاعات کتاب
+                 if(invalidMemoirsCount > 0){
+                     console.warn(`Skipped ${invalidMemoirsCount} items from file "${filename}" due to missing or invalid embedding or format.`);
+                 }
 
-    try {
-        for (const file of MEMOIRS_DATA_FILES) {
-            const response = await fetch(file);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status} for file ${file}`);
+            } else {
+                 console.error(`Loaded data from "${filename}" is not an array:`, data); // لاگ برای توسعه
+                 updateSelectionError(`خطا در فرمت داده از فایل "${filename}". انتظار آرایه داشتیم.`);
             }
-            const data = await response.json();
-             if (!Array.isArray(data)) {
-                 console.warn(`Warning: Data in file ${file} is not an array. Skipping.`);
-                 continue; // اگر فایل JSON آرایه نبود، آن را نادیده بگیر
-             }
-            allMemoirsData = allMemoirsData.concat(data); // اضافه کردن داده های هر فایل به لیست کلی
+        });
+
+        const loadedBooksCount = selectedBookFiles.length;
+        const totalPassagesLoaded = memoirsWithEmbeddings.length;
+
+         if (totalPassagesLoaded === 0) {
+             console.warn("No valid passages with embeddings were loaded after processing all files.");
+             updateStatus(`داده‌ها بارگذاری شد، اما هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده (${loadedBooksCount} کتاب) یافت نشد.`, true); // پیام خطا برای کاربر
+             updateSelectionError("هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده یافت نشد. فرمت فایل‌های JSON و وجود فیلد embedding را بررسی کنید.");
+         } else {
+              console.log(`Successfully loaded data from ${loadedBooksCount} book(s). Total valid passages loaded: ${totalPassagesLoaded}`); // لاگ برای توسعه
+             updateStatus(`داده‌ها از ${loadedBooksCount} کتاب با موفقیت بارگذاری شد. مجموع خاطرات قابل جستجو: ${totalPassagesLoaded}. آماده جستجو هستید.`); // پیام برای کاربر
+         }
+
+        checkAndEnableSearchButton(); // بررسی و فعال کردن دکمه پس از بارگذاری داده
 
-        }
-        showStatus(`Successfully loaded data from ${MEMOIRS_DATA_FILES.length} files (${allMemoirsData.length} passages).`);
-        console.log(`Total passages loaded: ${allMemoirsData.length}`);
-        renderBookCheckboxes(); // نمایش چک باکس کتاب ها پس از بارگذاری داده ها
 
     } catch (error) {
-        console.error('Error loading memoir data:', error);
-        showStatus(`Error loading memoir data: ${error.message}`, true);
+        console.error("Error loading selected books data:", error); // لاگ برای توسعه
+        updateStatus("خطا در بارگذاری داده‌ها.", true); // پیام برای کاربر
+        // پیام خطای برای کاربر شامل جزئیات بیشتر از علت خطا
+        updateSelectionError(`خطا در بارگذاری داده‌ها: ${error.message || 'خطای نامشخص'}. جزئیات بیشتر در کنسول مرورگر.`);
+        memoirsWithEmbeddings = []; // اطمینان از خالی بودن داده در صورت خطا
+        checkAndEnableSearchButton(); // مطمئن می شویم دکمه غیرفعال بماند
+         if (searchResultsContainer) { // بازگرداندن پیام اولیه در صورت خطا
+            searchResultsContainer.innerHTML = '<p>پس از انتخاب کتاب‌ها و وارد کردن سوال، نتایج اینجا نمایش داده می‌شوند.</p>';
+         }
+    } finally {
+        // این بخش نیازی به checkAndEnableSearchButton ندارد چون در بالا صدا زده می شود
     }
 }
 
-// تابع برای نمایش نتایج جستجو در رابط کاربری
-function displayResults(results) {
-    resultsContainer.innerHTML = ''; // پاک کردن نتایج قبلی
 
-    if (results.length === 0) {
-        resultsContainer.innerHTML = '<p>No results found.</p>';
-        return;
-    }
-
-    // نمایش تنها تعداد نتایج مشخص در هر صفحه (اگر Pagination کامل پیاده سازی نشود)
-    const resultsToDisplay = results.slice(0, RESULTS_PER_PAGE);
-
-
-    resultsToDisplay.forEach(item => {
-        // استفاده از 'passage_original' اگر وجود دارد، در غیر این صورت 'passage'
-        const passageTextToDisplay = item.passage_original || item.passage;
-
-        const resultElement = document.createElement('div');
-        resultElement.classList.add('result-item');
-
-        // فرمت کردن امتیاز شباهت
-        const similarityScore = item.score !== undefined ? item.score.toFixed(4) : 'N/A'; // نمایش 4 رقم اعشار
-
-        resultElement.innerHTML = `
-            <p class="result-passage">${passageTextToDisplay}</p>
-            <p class="result-meta">منبع: ${item.reference || 'نامشخص'} | کتاب: ${item.book_title || 'نامشخص'} | شباهت: ${similarityScore}</p>
-            <button class="copy-button" style="display: inline-block; margin-left: 10px; padding: 5px 10px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;">کپی متن</button>
-        `;
-        // استایل های موقت inline برای دکمه کپی برای اطمینان از نمایش در موبایل
-
-
-        // اضافه کردن event listener برای دکمه کپی
-        const copyButton = resultElement.querySelector('.copy-button');
-        if (copyButton) { // اضافه کردن چک برای اطمینان که دکمه پیدا شده است
-             copyButton.addEventListener('click', () => {
-                // استفاده از Clipboard API برای کپی کردن متن
-                navigator.clipboard.writeText(passageTextToDisplay)
-                    .then(() => {
-                        // نمایش پیام موفقیت (اختیاری)
-                        copyButton.textContent = 'کپی شد!';
-                        setTimeout(() => {
-                            copyButton.textContent = 'کپی متن';
-                        }, 2000); // بازگرداندن متن دکمه پس از 2 ثانیه
-                    })
-                    .catch(err => {
-                        console.error('Error copying text: ', err);
-                         copyButton.textContent = 'خطا!';
-                         setTimeout(() => {
-                            copyButton.textContent = 'کپی متن';
-                        }, 2000);
-                    });
-            });
-        }
+// ****** تابع کمکی برای محاسبه شباهت کسینوسی بین دو بردار ******
+function cosineSimilarity(vecA, vecB) {
+     // بررسی وجود و صحت بردارها قبل از شروع محاسبات
+     if (!vecA || !vecB || vecA.length !== vecB.length || vecA.length === 0) {
+        console.error("Cosine Similarity Error: Invalid or empty vectors provided.", {vecA_length: vecA ? vecA.length : 'null', vecB_length: vecB ? vecB.length : 'null'});
+        return 0; // برگرداندن 0 در صورت ورودی نامعتبر
+     }
 
+    let dotProduct = 0;
+    let magnitudeA = 0;
+    let magnitudeB = 0;
 
-        resultsContainer.appendChild(resultElement);
-    });
-}
+    // محاسبه نقطه ضرب و مربع اندازه بردارها در یک حلقه برای بهینه سازی
+    for (let i = 0; i < vecA.length; i++) {
+        dotProduct += vecA[i] * vecB[i];
+        magnitudeA += vecA[i] * vecA[i];
+        magnitudeB += vecB[i] * vecB[i];
+    }
 
-// تابع برای رندر کردن چک باکس کتاب ها بر اساس داده های بارگذاری شده
-function renderBookCheckboxes() {
-    booksCheckboxesContainer.innerHTML = ''; // پاک کردن چک باکس های قبلی
-    const uniqueBooks = [...new Set(allMemoirsData.map(item => item.book_title))]; // گرفتن نام کتاب های منحصر به فرد
-
-    if (uniqueBooks.length > 0) {
-        // اضافه کردن گزینه "انتخاب همه"
-        const allBooksCheckbox = document.createElement('input');
-        allBooksCheckbox.type = 'checkbox';
-        allBooksCheckbox.id = 'book-all';
-        allBooksCheckbox.value = 'all';
-        allBooksCheckbox.checked = true; // پیش فرض: همه انتخاب شده اند
-        allBooksCheckbox.classList.add('book-checkbox');
-
-        const allBooksLabel = document.createElement('label');
-        allBooksLabel.htmlFor = 'book-all';
-        allBooksLabel.textContent = 'انتخاب همه';
-        allBooksLabel.style.fontWeight = 'bold'; // برجسته کردن لیبل "انتخاب همه"
-
-        const allBooksDiv = document.createElement('div');
-        allBooksDiv.appendChild(allBooksCheckbox);
-        allBooksDiv.appendChild(allBooksLabel);
-        booksCheckboxesContainer.appendChild(allBooksDiv);
-
-
-        uniqueBooks.forEach(bookTitle => {
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.id = `book-${bookTitle.replace(/\s+/g, '-')}`; // ایجاد ID منحصر به فرد (جایگزینی فاصله ها با خط تیره)
-            checkbox.value = bookTitle;
-            checkbox.checked = true; // پیش فرض: همه انتخاب شده اند
-             checkbox.classList.add('book-checkbox');
-
-            const label = document.createElement('label');
-            label.htmlFor = checkbox.id;
-            label.textContent = bookTitle;
-
-             const div = document.createElement('div');
-             div.appendChild(checkbox);
-             div.appendChild(label);
-            booksCheckboxesContainer.appendChild(div);
-        });
+    // گرفتن ریشه دوم برای اندازه بردارها
+    magnitudeA = Math.sqrt(magnitudeA);
+    magnitudeB = Math.sqrt(magnitudeB);
 
-         // اضافه کردن event listener برای "انتخاب همه"
-        allBooksCheckbox.addEventListener('change', (event) => {
-            const isChecked = event.target.checked;
-            document.querySelectorAll('.book-checkbox').forEach(cb => {
-                if (cb.id !== 'book-all') {
-                    cb.checked = isChecked;
-                }
-            });
-        });
+    // جلوگیری از تقسیم بر صفر اگر یکی از بردارها صفر باشد
+    if (magnitudeA === 0 || magnitudeB === 0) {
+        //console.warn("Cosine Similarity Warning: Magnitude is zero for one or both vectors."); // لاگ هشدار برای توسعه (اختیاری)
+        return 0;
+    }
 
-        // اضافه کردن event listener برای چک باکس های تکی برای مدیریت "انتخاب همه"
-        document.querySelectorAll('.book-checkbox').forEach(cb => {
-             if (cb.id !== 'book-all') {
-                 cb.addEventListener('change', () => {
-                     const allOthersChecked = document.querySelectorAll('.book-checkbox:checked').length === uniqueBooks.length;
-                      allBooksCheckbox.checked = allOthersChecked;
-                 });
-             }
-        });
+    // محاسبه شباهت کسینوسی
+    const similarity = dotProduct / (magnitudeA * magnitudeB);
+    //console.log(`Calculated similarity: ${similarity}`); // لاگ برای توسعه (اختیاری، ممکن است خیلی زیاد شود)
+    return similarity; // برگرداندن امتیاز شباهت
+}
 
+// تابع کمکی برای حذف بخش کلمات کلیدی از متن Passage
+function cleanPassageTextForDisplay(passage) {
+    if (!passage || typeof passage !== 'string') {
+        console.warn("cleanPassageTextForDisplay received invalid input:", passage);
+        return ''; // برگرداندن رشته خالی برای ورودی نامعتبر
+    }
+    // فرض می کنیم فرمت ترکیب متن همان ' <کلیدواژه ها: ...>' است.
+    const startDelimiter = ' <کلیدواژه ها: ';
+    const startIndex = passage.indexOf(startDelimiter);
 
-    } else {
-         booksCheckboxesContainer.innerHTML = '<p>No books found in data.</p>';
+    if (startIndex === -1) {
+        return passage.trim(); // اگر جداکننده پیدا نشد، کل متن را برگردان (با حذف فاصله های اضافی ابتدا و انتها)
     }
-}
 
+    // اگر جداکننده پیدا شد، فقط بخش قبل از آن را برگردان
+    let cleanText = passage.substring(0, startIndex);
+    return cleanText.trim(); // حذف فاصله های اضافی ابتدا و انتهای متن تمیز شده
+}
 
-// ****** Event Listeners ******
 
-// Listener برای اطمینان از اینکه DOM کاملاً بارگذاری شده است
-document.addEventListener('DOMContentLoaded', () => {
+// ****** تعریف کامل تابع async function searchMemoirs() { ... } ******
+// این تابع شامل منطق اصلی جستجو است.
+async function searchMemoirs() {
+    console.log("Search triggered."); // لاگ برای توسعه
+    console.log(`Data loaded state (passages count): ${memoirsWithEmbeddings.length}`); // لاگ برای توسعه
 
-     // بارگذاری داده ها هنگام بارگذاری صفحه
-    loadMemoirsData();
+    // ****** چک کردن اینکه داده ها (از کتاب های انتخاب شده) بارگذاری شده باشند ******
+    if (memoirsWithEmbeddings.length === 0) {
+        console.warn("No memoir data loaded. Cannot search."); // ��اگ برای توسعه
+        updateSelectionError("لطفاً ابتدا کتاب‌های مورد نظر برای جستجو را انتخاب کرده و منتظر بارگذاری داده‌ها بمانید."); // پیام خطا برای کاربر
+        // searchResultsContainer در ابتدای updateSelectedBooksData() پاک می شود.
+        return;
+    }
+    // **************************************************************************
 
-    // تنظیم مقدار اولیه نمایش داده شده برای آستانه شباهت
-    if (similarityThresholdInput && similarityThresholdValueSpan) { // اضافه کردن چک برای اطمینان از پیدا شدن المان ها
-         similarityThresholdInput.value = similarityThreshold;
-         similarityThresholdValueSpan.textContent = similarityThreshold.toFixed(2); // نمایش 2 رقم اعشار
-    } else {
-        console.error("Similarity threshold input or value span not found.");
+    // اطمینان از وجود userQuestionInput قبل از دسترسی به value
+    if (!userQuestionInput) {
+         console.error("Search input element not found. Cannot get query.");
+         updateSelectionError("المان ورودی جستجو پیدا نشد. امکان جستجو وجود ندارد.");
+         return;
+    }
+    const query = userQuestionInput.value.trim();
+    console.log(`Query text is: "${query}"`); // لاگ برای توسعه
+
+    if (!query) {
+         if (searchResultsContainer) { // استفاده از نام متغیر صحیح
+            searchResultsContainer.innerHTML = `<p>لطفاً عبارت مورد نظر برای جستجو را وارد کنید.</p>`; // پیام برای کاربر
+         }
+         console.warn("Search query is empty."); // لاگ برای توسعه
+         updateSelectionError("لطفاً عبارت مورد نظر برای جستجو را وارد کنید."); // پیام خطا برای کاربر
+        return;
     }
 
+    // نمایش پیام "در حال جستجو" و غیرفعال کردن دکمه
+    updateStatus("در حال جستجو...", false); // رنگ خاکستری
+    updateSelectionError(""); // پاک کردن پیام خطای احتمالی قبلی
+     if (searchResultsContainer) { // پاک کردن نتایج قبلی
+         searchResultsContainer.innerHTML = '';
+     }
+    setButtonEnabled(false); // غیرفعال کردن دکمه در طول جستجو
 
-    // event listener برای دکمه جستجو
-    if (searchButton) { // اضافه کردن چک برای اطمینان از پیدا شدن المان
-        searchButton.addEventListener('click', async () => {
-            const query = searchInput.value.trim();
 
-            if (!query) {
-                showStatus("Please enter a search query.", true);
-                return;
-            }
+    try {
+        console.log("Requesting query embedding from Python server..."); // لاگ برای توسعه
 
-             if (allMemoirsData.length === 0) {
-                 showStatus("Memoir data not loaded yet. Please wait or check console.", true);
-                 return;
+        const serverResponse = await fetch(EMBEDDING_SERVER_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ query: query })
+        });
+
+        if (!serverResponse.ok) {
+             const errorBody = await serverResponse.text(); // بخوان به صورت متن برای اطلاعات بیشتر
+             console.error(`Server responded with status ${serverResponse.status}:`, errorBody); // لاگ خطا برای توسعه
+
+             // تلاش برای تجزیه پاسخ خطا به صورت JSON اگر سرور خطای JSON برگردانده باشد
+             let serverErrorMessage = `خطا از سرور (${serverResponse.status}).`;
+             try {
+                 const errorJson = JSON.parse(errorBody);
+                 if (errorJson.error) {
+                     serverErrorMessage += ` پیام: ${errorJson.error}`;
+                 }
+             } catch (e) {
+                 // اگر پاسخ خطا JSON نبود، متن خام را اضافه کن
+                 serverErrorMessage += ` پاسخ خام: ${errorBody.substring(0, Math.min(errorBody.length, 100))}...`; // نمایش بخشی از پاسخ خام (حداکثر 100 کاراکتر)
              }
 
-            showLoading(); // نمایش اسپینر
+             updateStatus("جستجو با خطا مواجه شد.", true); // پیام اصلی برای کاربر (رنگ قرمز)
+             updateSelectionError(serverErrorMessage + " جزئیات بیشتر در کنسول مرورگر."); // نمایش جزئیات خطا در بخش خطای انتخاب
+             // نیازی به throw new Error نیست چون در finally دکمه فعال می شود و پیام ها نمایش داده شده اند.
+             return; // خروج از تابع searchMemoirs پس از خطا
 
-            // 1. دریافت بردار سوال از Backend
-            const queryEmbedding = await getEmbedding(query);
+        }
 
-            if (!queryEmbedding) {
-                hideLoading(); // مخفی کردن اسپینر در صورت خطا
-                // پیام خطا در تابع getEmbedding نمایش داده شده است
-                return;
-            }
+        const serverData = await serverResponse.json();
+        const queryEmbeddingArray = serverData.embedding;
+
+        if (!queryEmbeddingArray || !Array.isArray(queryEmbeddingArray) || queryEmbeddingArray.length === 0) {
+             console.error("Server returned an invalid or empty embedding:", serverData); // لاگ خطا برای توسعه
+             updateStatus("جستجو با خطا مواجه شد.", true); // پیام اصلی برای کاربر
+             updateSelectionError("سرور بردار جستجو را به درستی برنگرداند. جزئیات در کنسول مرورگر."); // نمایش جزئیات خطا در بخش خطای انتخاب
+             return; // خروج از تابع searchMemoirs
+        }
 
-            // 2. فیلتر کردن داده ها بر اساس کتاب های انتخاب شده
-            const selectedBooksCheckboxes = document.querySelectorAll('.book-checkbox:checked');
-            const selectedBookTitles = Array.from(selectedBooksCheckboxes)
-                                            .filter(cb => cb.value !== 'all') // حذف گزینه "انتخاب همه"
-                                            .map(cb => cb.value);
-
-            let filteredMemoirs = allMemoirsData;
-            // اگر گزینه "انتخاب همه" انتخاب نشده و حداقل یک کتاب انتخاب شده باشد
-            // یا اگر تعداد کتاب های انتخاب شده کمتر از تعداد کل کتاب های منحصر به فرد باشد
-            const uniqueBooksCount = new Set(allMemoirsData.map(item => item.book_title)).size;
-            if (selectedBookTitles.length > 0 && selectedBookTitles.length < uniqueBooksCount) {
-                 filteredMemoirs = allMemoirsData.filter(item => selectedBookTitles.includes(item.book_title));
-            } else if (selectedBookTitles.length === 0 && uniqueBooksCount > 0) {
-                 // اگر هیچ کتابی انتخاب نشده باشد و حداقل یک کتاب در داده ها باشد
-                 filteredMemoirs = [];
-                 showStatus("No books selected. Select at least one book.", true);
+        console.log("Query embedding received from server successfully."); // لاگ برای توسعه
+        console.log(`Query embedding dimensions: ${queryEmbeddingArray.length}`); // لاگ برای توسعه
+        console.log("Calculating similarities in browser..."); // لاگ برای توسعه
+
+        const searchResults = [];
+        // محاسبه شباهت با تمام قطعات خاطره ای که از کتاب های انتخاب شده بارگذاری شده اند
+        for (const memoir of memoirsWithEmbeddings) { // memoirsWithEmbeddings حاوی book_title و book_file است
+            // اطمینان از وجود و صحت بردار embedding در آیتم خاطره
+            // همچنین اطمینان از این که بردار خاطره همان ابعاد بردار سوال را دارد
+            if (memoir.embedding && Array.isArray(memoir.embedding) && memoir.embedding.length === queryEmbeddingArray.length) {
+                 const similarity = cosineSimilarity(queryEmbeddingArray, memoir.embedding);
+                // اضافه کردن تمام فیلدهای اصلی خاطره و امتیاز شباهت به نتیجه
+                // استفاده از نام فیلد similarity برای امتیاز شباهت
+                searchResults.push({ ...memoir, similarity: similarity });
+            } else {
+                 // هشدار برای آیتم های بدون بردار یا با ابعاد نامعتبر (فقط در کنسول)
+                 console.warn(`Skipping memoir due to missing or invalid embedding or dimension mismatch: ${memoir.book_title || memoir.book_file || 'Unknown Book'} - ${memoir.reference || 'Unknown Reference'}`);
             }
-             // اگر selectedBookTitles.length برابر با uniqueBooksCount باشد، یعنی همه انتخاب شده اند و فیلتر لازم نیست.
-
-
-            // 3. محاسبه شباهت و ذخیره نتایج
-            const searchResults = [];
-            if (filteredMemoirs.length > 0) {
-                filteredMemoirs.forEach(item => {
-                    // اطمینان از وجود بردار و اینکه یک آرایه است و اندازه مناسبی دارد (اختیاری)
-                    if (item.embedding && Array.isArray(item.embedding) /*&& item.embedding.length === 1024*/) {
-                         const score = cosineSimilarity(queryEmbedding, item.embedding);
-                        // فیلتر بر اساس آستانه شباهت در اینجا
-                        if (score >= similarityThreshold) {
-                             searchResults.push({
-                                ...item, // کپی کردن تمام ویژگی های اصلی
-                                score: score // اضافه کردن امتیاز شباهت
-                            });
-                        }
-                    } else {
-                         console.warn(`Passage with reference "${item.reference}" has no valid embedding. Skipping.`);
-                    }
-                });
+        }
+        console.log(`Similarity calculation complete. Found ${searchResults.length} results with valid embeddings.`); // لاگ برای توسعه
+
+
+        // ****** خواندن آستانه شباهت از ورودی کاربر و فیلتر کردن ******
+        let currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD; // از مقدار پیش فرض ثابت به عنوان fallback استفاده می کنیم
+        if (similarityThresholdInput) {
+            const inputValue = parseFloat(similarityThresholdInput.value);
+            // چک می کنیم عدد معتبر باشد و در محدوده [0, 1] باشد
+            if (!isNaN(inputValue) && inputValue >= 0.0 && inputValue <= 1.0) {
+                currentSimilarityThreshold = inputValue;
+                console.log("Using user-defined similarity threshold:", currentSimilarityThreshold); // لاگ برای توسعه
+            } else {
+                 console.warn("Invalid similarity threshold input value, using default:", DEFAULT_SIMILARITY_THRESHOLD); // لاگ برای توسعه
+                 updateSelectionError(`مقدار آستانه شباهت وارد شده (${similarityThresholdInput.value}) معتبر نیست. از مقدار پیش فرض ${DEFAULT_SIMILARITY_THRESHOLD.toFixed(2)} استفاده می‌شود.`); // پیام خطا برای کاربر
+                 currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD; // بازگشت به مقدار پیش فرض ثابت
+                 // optional: set the input value back to the default if invalid
+                 // similarityThresholdInput.value = DEFAULT_SIMILARITY_THRESHOLD.toFixed(2); // این خط می تواند مقدار نمایش داده شده را هم به پیش فرض برگرداند
             }
+        } else {
+            console.warn("Similarity threshold input element not found, using default threshold:", DEFAULT_SIMILARITY_THRESHOLD); // لاگ برای توسعه
+        }
 
 
-            // 4. مرتب سازی نتایج بر اساس امتیاز شباهت (نزولی)
-            searchResults.sort((a, b) => b.score - a.score);
+        const filteredResults = searchResults.filter(result => result.similarity >= currentSimilarityThreshold);
+        console.log(`Filtered results based on threshold ${currentSimilarityThreshold.toFixed(2)}: ${filteredResults.length} results remaining.`); // لاگ برای توسعه
+        // *************************************************************
 
-            hideLoading(); // مخفی کردن اسپینر
-            hideStatus(); // مخفی کردن پیام وضعیت
 
-            // 5. نمایش نتایج
-            displayResults(searchResults);
+        console.log("Sorting results by similarity..."); // لاگ برای توسعه
+        // Sort the filtered results by similarity in descending order (highest similarity first)
+        filteredResults.sort((a, b) => b.similarity - a.similarity);
+        console.log("Filtered results sorted."); // لاگ برای توسعه
 
-        });
-    } else {
-         console.error("Search button element with ID 'searchButton' not found.");
-         showStatus("Initialization failed: Search button not found.", true);
-    }
+        // ****** انتخاب تعداد نتایج برتر بر اساس انتخاب کاربر (از نتایج فیلتر شده) ******
+        let finalResultsPerPage = 10; // مقدار پیش فرض برای نتایج در صفحه
+        if (resultsPerPageSelect) {
+             const selectedValue = parseInt(resultsPerPageSelect.value, 10); // خواندن مقدار انتخاب شده و تبدیل به عدد صحیح
+             // اطمینان از اینکه selectedValue یک عدد معتبر و مثبت است
+             finalResultsPerPage = (!isNaN(selectedValue) && selectedValue > 0) ? selectedValue : 10; // مقدار پیش فرض 10 اگر نامعتبر باشد
+        } else {
+             console.warn("Results per page select element not found, using default:", finalResultsPerPage);
+        }
 
 
-    // event listener برای کلید Enter در کادر جستجو
-     if (searchInput) { // اضافه کردن چک برای اطمینان از پیدا شدن المان
-        searchInput.addEventListener('keypress', (event) => {
-            // اگر کلید Enter فشرده شد (کد ۱۳)
-            if (event.key === 'Enter') { // یا event.keyCode === 13
-                event.preventDefault(); // جلوگیری از ارسال فرم (اگر در فرم بود)
-                if (searchButton && !searchButton.disabled) { // اگر دکمه جستجو وجود دارد و فعال است
-                     searchButton.click(); // فراخوانی کلیک روی دکمه جستجو
-                }
-            }
-        });
-    } else {
-         console.error("Search input element with ID 'search-input' not found.");
-         showStatus("Initialization failed: Search input not found.", true);
-    }
+        const topResults = filteredResults.slice(0, finalResultsPerPage); // انتخاب فقط N نتیجه برتر از لیست فیلتر شده
+        console.log(`Displaying top ${topResults.length} results from filtered list based on user selection (${finalResultsPerPage} per page setting).`);
+        // ********************************************
+
+
+        // ****** منطق نمایش نتایج و پیام ها ******
+        if (searchResultsContainer) { // استفاده از نام متغیر صحیح
+             // نتایج قبلی در ابتدای تابع پاک شده اند.
+
+             if (topResults.length === 0) { // اگر هیچ نتیجه ای یافت نشد
+                 // پیام به کاربر، شامل مقدار آستانه ای که استفاده شده است
+                 searchResultsContainer.innerHTML = `<p>نتیجه مرتبطی با آستانه شباهت مورد نظر (${currentSimilarityThreshold.toFixed(2)}) یافت نشد. سعی کنید عبارت دیگری را جستجو کنید یا آستانه را کاهش دهید.</p>`;
+                 console.log("No relevant results found after filtering and slicing.");
+             } else { // اگر نتایجی یافت شد
+                  console.log("Results found, updating DOM.");
+
+                 // ایجاد کانتینر برای لیست نتایج برای کنترل بهتر استایل دهی
+                 const resultsList = document.createElement('div');
+                 resultsList.classList.add('results-list');
+
+
+                 topResults.forEach(result => {
+                     // ایجاد المان برای هر آیتم نتیجه
+                     const resultItem = document.createElement('div');
+                     resultItem.classList.add('result-item');
+
+                     // ****** نمایش امتیاز شباهت ******
+                     const similarityElement = document.createElement('p'); // استفاده از p مطابق با ساختار قبلی شما
+                     similarityElement.classList.add('result-similarity');
+                     // نمایش امتیاز با 4 رقم اعشار
+                     similarityElement.textContent = `شباهت: ${result.similarity.toFixed(4)}`;
+                     // ******************************
+
+                     // نمایش نام کتاب
+                     const bookTitleElement = document.createElement('p'); // استفاده از p مطابق با ساختار قبلی شما
+                     bookTitleElement.classList.add('result-book-title');
+                     bookTitleElement.textContent = `از کتاب: ${result.book_title || 'نامشخص'}`;
+
+                     // نمایش مرجع خاطره
+                     const referenceElement = document.createElement('p'); // استفاده از p مطابق با ساختار قبلی شما
+                     referenceElement.classList.add('result-reference');
+                     referenceElement.innerHTML = `<strong>مرجع:</strong> ${result.reference || 'نامشخص'}`; // استفاده از innerHTML برای bold کردن "مرجع:"
+
+
+                     // نمایش متن خاطره (با حذف کلمات کلیدی)
+                     const passageElement = document.createElement('p'); // استفاده از p مطابق با ساختار قبلی شما
+                     passageElement.classList.add('result-passage');
+                     passageElement.textContent = cleanPassageTextForDisplay(result.passage || ''); // استفاده از متن تمیز شده
+
+                     // ****** اضافه کردن دکمه کپی ******
+                     const copyButton = document.createElement('button');
+                     copyButton.classList.add('copy-button'); // کلاس CSS برای استایل دهی
+                     copyButton.textContent = 'کپی متن'; // متن دکمه
+
+                     // ****** اضافه کردن استایل Inline برای تست عیب‌یابی (موقت) ******
+                     // این استایل ها برای کمک به ظاهر شدن دکمه اضافه شده اند.
+                     // اگر با این استایل ها دکمه ظاهر شد، مشکل در فایل style.css یا اعمال آن است.
+                     // پس از حل مشکل نمایش در style.css، این خطوط را حذف کنید.
+                     copyButton.style.display = 'block';
+                     copyButton.style.marginTop = '10px';
+                     copyButton.style.marginLeft = 'auto'; // برای راست چین کردن در RTL
+                     copyButton.style.marginRight = '0';
+                     copyButton.style.backgroundColor = '#007bff'; // رنگ آبی
+                     copyButton.style.color = 'white';
+                     copyButton.style.padding = '5px 5px'; // padding کمی کمتر
+                     copyButton.style.border = 'none';
+                     copyButton.style.borderRadius = '4px';
+                     copyButton.style.cursor = 'pointer';
+                     copyButton.style.fontSize = '0.8em'; // فونت کمی کوچکتر
+                     copyButton.style.fontFamily = "'Vazirmatn', sans-serif"; // اطمینان از اعمال فونت
+                     // *****************************************************************
+
+
+                     // Event listener برای دکمه کپی (همان کد قبلی)
+                     copyButton.addEventListener('click', async () => {
+                         // ****** ساخت متنی که باید کپی شود (متن خاطره، مرجع، نام کتاب، شباهت) ******
+                         const passageText = cleanPassageTextForDisplay(result.passage || ''); // متن تمیز شده خاطره
+                         const referenceText = result.reference || 'نامشخص'; // متن مرجع
+                         const bookTitleText = result.book_title || 'نامشخص'; // متن نام کتاب
+                         const similarityText = result.similarity !== undefined ? result.similarity.toFixed(4) : 'N/A'; // متن شباهت
+
+                         // ترکیب متن ها با فرمت دلخواه (مثلاً با خط جدید بین هر بخش)
+                         const textToCopy = `خاطره:\n${passageText}\n\nمرجع: ${referenceText}\nاز کتاب: ${bookTitleText}\nشباهت: ${similarityText}`; // اضافه کردن امتیاز شباهت به متن کپی شده
+                         // *****************************************************************
+
+                         try {
+                             // استفاده از Clipboard API برای کپی کردن متن
+                             await navigator.clipboard.writeText(textToCopy);
+                             copyButton.textContent = 'کپی شد!'; // پیام بازخورد کوتاه
+                             // برگرداندن متن دکمه به حالت اولیه بعد از 2 ثانیه
+                             setTimeout(() => {
+                                 copyButton.textContent = 'کپی متن';
+                             }, 2000);
+                             console.log("Passage, reference, book title, and similarity copied to clipboard."); // لاگ موفقیت
+                         } catch (err) {
+                             console.error('Failed to copy text: ', err); // لاگ خطا در کنسول
+                             copyButton.textContent = 'خطا در کپی'; // پیام بازخورد خطا
+                              setTimeout(() => {
+                                 copyButton.textContent = 'کپی متن';
+                             }, 2000);
+                         }
+                     });
+                     // ******************************
+
+
+                     // اضافه کردن عناصر به آیتم نتیجه با ترتیب دلخواه
+                     // ایجاد یک div یا span برای نگه داشتن مرجع، نام کتاب و شباهت برای کنترل بهتر استایل دهی (همانند CSS شما)
+                     const metaInfoDiv = document.createElement('div');
+                     // در HTML شما از p های جداگانه برای reference, book-title, similarity استفاده شده بود
+                     // و استایل هایی برای کلاس های result-reference, result-book-title, result-similarity داشتید.
+                     // بهتر است المان ها را جداگانه اضافه کنیم تا کلاس های CSS شما اعمال شوند.
+
+                     resultItem.appendChild(passageElement); // اول متن
+                     resultItem.appendChild(referenceElement); // بعد مرجع
+                     resultItem.appendChild(bookTitleElement); // بعد نام کتاب
+                     resultItem.appendChild(similarityElement); // بعد امتیاز شباهت (که با float در CSS سمت راست میرود)
+                     resultItem.appendChild(copyButton); // دکمه کپی در انتها
+
+                     // **************************************************************************
+
+
+                     resultsList.appendChild(resultItem);
+                 });
 
+                 searchResultsContainer.appendChild(resultsList); // اضافه کردن لیست نتایج به کانتینر اصلی
+                 console.log("DOM updated with results.");
 
-    // event listener برای تغییر آستانه شباهت
-    if (similarityThresholdInput) { // اضافه کردن چک برای اطمینان از پیدا شدن المان
-        similarityThresholdInput.addEventListener('input', (event) => {
-            similarityThreshold = parseFloat(event.target.value);
-            if (similarityThresholdValueSpan) { // چک کردن نمایش دهنده مقدار
-                 similarityThresholdValueSpan.textContent = similarityThreshold.toFixed(2); // نمایش 2 رقم اعشار
-            }
+                 // لاگ کردن نتایج برای توسعه (شامل جزئیات بیشتر)
+                 console.log(`Top ${topResults.length} results displayed (reference, book, similarity, passage start):`);
+                 topResults.forEach(result => {
+                     console.log(`  Book: ${result.book_title || 'Unknown'}, Ref: ${result.reference || 'N/A'}, Sim: ${result.similarity.toFixed(4)}, Passage: "${result.passage ? result.passage.substring(0, 50).replace(/\n/g, ' ') + '...' : 'N/A'}"`); // لاگ جزئیات بیشتر و جایگزینی خط جدید در لاگ
+                 });
+             }
 
-            // می توانید اینجا منطق فیلتر مجدد نتایج نمایش داده شده را اضافه کنید
-            // اگر نتایج قبلی نمایش داده شده اند و می خواهید با تغییر آستانه، نمایش آن ها را به روز کنید.
-            // اما برای سادگی فعلا این کار انجام نمی شود و فیلتر فقط هنگام جستجوی جدید اعمال می شود.
-        });
-    } else {
-         console.error("Similarity threshold input element with ID 'similarity-threshold' not found.");
-         // نمایش وضعیت خطا لود المان ممکن است قبلاً انجام شده باشد.
-    }
+             // به‌روزرسانی پیام وضعیت پس از جستجو
+              if (topResults.length > 0) {
+                 updateStatus(`جستجو به پایان رسید. ${topResults.length} نتیجه برتر (پس از فیلتر با آستانه ${currentSimilarityThreshold.toFixed(2)}) نمایش داده شد.`, false); // پیام موفقیت (رنگ خاکستری)
+              } else {
+                 updateStatus(`جستجو به پایان رسید. هیچ نتیجه مرتبطی با آستانه شباهت مورد نظر (${currentSimilarityThreshold.toFixed(2)}) یافت نشد. سعی کنید عبارت دیگری را جستجو کنید یا آستانه را کاهش دهید.`, false); // پیام وضعیت (رنگ خاکستری)
+              }
 
 
-    // Listener برای دکمه های کپی (به صورت Delegation)
-    // این روش بهتر است چون دکمه های کپی به صورت پویا اضافه می شوند
-     if (resultsContainer) { // اضافه کردن چک برای اطمینان از پیدا شدن المان
-        resultsContainer.addEventListener('click', (event) => {
-            // چک می کنیم که آیا کلیک روی المانی با کلاس 'copy-button' رخ داده است؟
-            if (event.target.classList.contains('copy-button')) {
-                // المان والد نتیجه را پیدا می کنیم (.result-item)
-                const resultItemElement = event.target.closest('.result-item');
-                if (resultItemElement) {
-                     // متن اصلی را از داخل نتیجه پیدا می کنیم
-                    const passageTextElement = resultItemElement.querySelector('.result-passage');
-                    if (passageTextElement) {
-                         navigator.clipboard.writeText(passageTextElement.textContent)
-                            .then(() => {
-                                // نمایش پیام موفقیت روی همان دکمه
-                                event.target.textContent = 'کپی شد!';
-                                setTimeout(() => {
-                                    event.target.textContent = 'کپی متن';
-                                }, 2000);
-                            })
-                            .catch(err => {
-                                console.error('Error copying text: ', err);
-                                 event.target.textContent = 'خطا!';
-                                 setTimeout(() => {
-                                    event.target.textContent = 'کپی متن';
-                                }, 2000);
-                            });
-                    }
-                }
-            }
-        });
-    } else {
-         console.error("Results container element with ID 'results-container' not found.");
-          showStatus("Initialization failed: Results container not found.", true);
+        } else {
+            console.error("Could not find searchResultsContainer to display results.");
+             updateStatus("جستجو با خطا مواجه شد.", true); // پیام خطا (رنگ قرمز)
+             updateSelectionError("المان نمایش نتایج پیدا نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا در بخش انتخاب
+        }
+
+
+    } catch (error) {
+        // مدیریت خطا هنگام درخواست سرور یا پردازش پاسخ
+        console.error("Error during search:", error);
+         if (searchResultsContainer) { // استفاده از نام متغیر صحیح
+            searchResultsContainer.innerHTML = `<p style="color: red;">هنگام جستجو خطایی رخ داد: ${error.message || 'خطای نامشخص'}. جزئیات بیشتر در کنسول مرورگر موجود است.</p>`;
+         }
+        updateStatus("جستجو با خطا مواجه شد.", true); // پیام خطا (رنگ قرمز)
+        updateSelectionError(`هنگام جستجو خطایی رخ داد: ${error.message || 'خطای نامشخص'}.`); // نمایش خطای اصلی در بخش خطای انتخاب
+    } finally {
+        // در نهایت، چه جستجو موفقیت آمیز باشد چه با خطا مواجه شود، دکمه جستجو را فعال می کنیم.
+        // این اطمینان را می دهد که دکمه همیشه پس از پایان فرآیند جستجو قابل استفاده مجدد است (مگر اینکه داده ها بارگذاری نشده باشند).
+        // checkAndEnableSearchButton() این کار را انجام می دهد.
+        checkAndEnableSearchButton(); // فعال کردن مجدد دکمه جستجو
     }
+}
+// پایان تعریف تابع async function searchMemoirs()
 
 
-});
+// ****** بلوک DOMContentLoaded: این کد پس از بارگذاری کامل ساختار صفحه اجرا می شود ******
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("DOM fully loaded and parsed. Initializing script.");
+
+    // ****** دریافت رفرنس المان های HTML (مطابق با ID ها و کلاس ها در index.html شما) ******
+    // این رفرنس ها متغیرهای سراسری تعریف شده در بالای فایل هستند.
+    searchButton = document.getElementById('searchButton');
+    userQuestionInput = document.getElementById('userQuestion');
+    searchResultsContainer = document.getElementById('searchResults');
+    loadingStatusElement = document.getElementById('loadingStatus');
+    selectionErrorElement = document.getElementById('selectionError');
+
+    selectAllCheckbox = document.getElementById('select_all_books');
+    // getElementsByClassName برمی گرداند HTMLCollection زنده.
+    bookCheckboxes = document.getElementsByClassName('book-checkbox');
+
+    resultsPerPageSelect = document.getElementById('resultsPerPage');
+    similarityThresholdInput = document.getElementById('similarityThresholdInput');
+    // **********************************************************************************
+
+
+    // ****** چک کردن وجود المان های ضروری برای جلوگیری از خطا ******
+    // چک می کنیم که تمام المان های مورد نیاز برای اجرای اسکریپت پیدا شده باشند.
+    // bookCheckboxes باید وجود داشته باشد و حداقل یک المان (چک باکس) داشته باشد.
+    const requiredElementsFound = searchButton && userQuestionInput && searchResultsContainer && loadingStatusElement && selectionErrorElement && selectAllCheckbox && bookCheckboxes && bookCheckboxes.length > 0 && resultsPerPageSelect && similarityThresholdInput;
+
+    if (requiredElementsFound) {
+        console.log("All critical DOM elements found. Proceeding with initialization.");
+
+        // ****** تنظیم Event Listeners ******
+
+        // Listener برای دکمه جستجو: فراخوانی تابع searchMemoirs هنگام کلیک
+        searchButton.addEventListener('click', searchMemoirs);
+        console.log("Search button click listener added.");
+
+        // Listener برای کلید Enter در کادر ورودی سوال: شبیه سازی کلیک روی دکمه جستجو
+        userQuestionInput.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault(); // جلوگیری از ارسال فرم پیش فرض مرورگر
+                 // فقط اگر دکمه جستجو فعال است، کلیک را شبیه سازی کن
+                 if (!searchButton.disabled) {
+                    searchButton.click();
+                    console.log("Enter key pressed in search input, simulating search button click."); // La