Spaces:

OrganizedProgrammers
/

Reqxtract-v2

Running

App Files Files Community

Lucas ARRIESSE commited on Jul 2

Commit

50d44e1

1 Parent(s): ed24fa8

UI work + add back sources logging

Browse files

Files changed (4) hide show

app.py +8 -1
index.html +145 -87
schemas.py +2 -2
static/script.js +207 -79

app.py CHANGED Viewed

@@ -291,8 +291,11 @@ def get_change_request_dataframe(req: DataRequest):
 @app.post("/download_tdocs")
 def download_tdocs(req: DownloadRequest):
     documents = req.documents
     def process_document(doc: str):
         doc_id = doc
         url = requests.post(
@@ -337,10 +340,13 @@ def download_tdocs(req: DownloadRequest):
 @app.post("/generate_requirements", response_model=RequirementsResponse)
 async def gen_reqs(req: RequirementsRequest, background_tasks: BackgroundTasks):
     documents = req.documents
     n_docs = len(documents)
-    logging.info("Generating requirements for documents: {}".format([doc.document for doc in documents]))
     def prompt(doc_id, full):
         return f"Here's the document whose ID is {doc_id} : {full}\n\nExtract all requirements and group them by context, returning a list of objects where each object includes a document ID, a concise description of the context where the requirements apply (not a chapter title or copied text), and a list of associated requirements; always return the result as a list, even if only one context is found. Remove the errors"
@@ -424,6 +430,7 @@ def find_requirements_from_problem_description(req: ReqSearchRequest):
     out_llm = ReqSearchLLMResponse.model_validate_json(
         resp_ai.choices[0].message.content).selected
     if max(out_llm) > len(requirements) - 1:
         raise HTTPException(
             status_code=500, detail="LLM error : Generated a wrong index, please try again.")

 @app.post("/download_tdocs")
 def download_tdocs(req: DownloadRequest):
+    """Download the specified TDocs and zips them in a single archive"""
     documents = req.documents
+    logging.info(f"Downloading TDocs: {documents}")
     def process_document(doc: str):
         doc_id = doc
         url = requests.post(
 @app.post("/generate_requirements", response_model=RequirementsResponse)
 async def gen_reqs(req: RequirementsRequest, background_tasks: BackgroundTasks):
+    """Extract requirements from the specified TDocs using a LLM"""
     documents = req.documents
     n_docs = len(documents)
+    logging.info("Generating requirements for documents: {}".format(
+        [doc.document for doc in documents]))
     def prompt(doc_id, full):
         return f"Here's the document whose ID is {doc_id} : {full}\n\nExtract all requirements and group them by context, returning a list of objects where each object includes a document ID, a concise description of the context where the requirements apply (not a chapter title or copied text), and a list of associated requirements; always return the result as a list, even if only one context is found. Remove the errors"
     out_llm = ReqSearchLLMResponse.model_validate_json(
         resp_ai.choices[0].message.content).selected
     if max(out_llm) > len(requirements) - 1:
         raise HTTPException(
             status_code=500, detail="LLM error : Generated a wrong index, please try again.")

index.html CHANGED Viewed

@@ -5,13 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/5.0.43/daisyui.css" rel="stylesheet" type="text/css" />
-    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <!-- Loading Overlay -->
-    <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-white p-6 rounded-lg shadow-lg text-center">
             <div id="loading-bar" class="w-64 h-4 bg-gray-200 rounded-full mb-4">
                 <div class="h-full bg-blue-500 rounded-full animate-pulse"></div>
@@ -96,6 +96,7 @@
                         <div id="status-options" class="flex flex-col gap-1"></div>
                     </ul>
                 </div>
                 <!-- Agenda Item Filter Dropdown -->
                 <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
                     <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn">
@@ -119,104 +120,161 @@
             </div>
         </div>
-        <!-- Action Buttons -->
-        <div id="action-buttons-container" class="mb-6 hidden">
-            <div class="flex flex-wrap gap-2">
-                <button id="download-tdocs-btn"
-                    class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">
-                    Download TDocs
-                </button>
-                <button id="extract-requirements-btn"
-                    class="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
-                    Extract Requirements
-                </button>
-                <button id="find-requirements-btn"
-                    class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 hidden">
-                    Find Requirements
-                </button>
-                <button id="categorize-requirements-btn"
-                    class="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 hidden">
-                    Categorize Requirements
-                </button>
-            </div>
-        </div>
-        <!-- Data Table Informations -->
-        <div class="flex justify-end mb-2 gap-2 items-center">
-            <span id="displayed-count" class="text-sm text-gray-700 bg-white rounded px-3 py-1 shadow">
-                0 document affiché
-            </span>
-            <span id="selected-count" class="text-sm text-blue-700 bg-blue-50 rounded px-3 py-1 shadow">
-                0 document sélectionné
-            </span>
         </div>
-        <!-- Data Table -->
-        <div id="data-table-container" class="mb-6 hidden">
-            <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-2 text-left">
-                            <input type="checkbox" id="select-all-checkbox">
-                        </th>
-                        <th class="px-4 py-2 text-left">TDoc</th>
-                        <th class="px-4 py-2 text-left">Title</th>
-                        <th class="px-4 py-2 text-left">Type</th>
-                        <th class="px-4 py-2 text-left">Status</th>
-                        <th class="px-4 py-2 text-left">Agenda Item</th>
-                        <th class="px-4 py-2 text-left">URL</th>
-                    </tr>
-                </thead>
-                <tbody></tbody>
-            </table>
         </div>
-        <!-- Requirements Container -->
-        <div id="requirements-container" class="mb-6 hidden">
-            <h2 class="text-2xl font-bold mb-4">Requirements extracted</h2>
-            <div id="requirements-list"></div>
         </div>
         <!-- Query Requirements -->
-        <div id="query-requirements-container" class="mb-6 hidden">
-            <h2 class="text-2xl font-bold mb-4">Query requirements</h2>
-            <div class="flex gap-2">
-                <input type="text" id="query-input" class="flex-1 p-2 border border-gray-300 rounded-md"
-                    placeholder="Enter your query...">
-                <button id="search-requirements-btn"
-                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
-                    Search
-                </button>
             </div>
-            <div id="query-results" class="mt-4"></div>
         </div>
-        <!-- Categorized Requirements Container -->
-        <div id="categorized-requirements-container" class="mb-6 hidden">
-            <h2 class="text-2xl font-bold mb-4">Requirements categories list</h2>
-            <div id="categorized-requirements-list"></div>
-        </div>
-        <!-- Solutions Action Buttons -->
-        <div id="solutions-action-buttons-container" class="mb-6 hidden">
-            <div class="flex flex-wrap gap-2 justify-center">
-                <button id="get-solutions-btn"
-                    class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
-                    Get Solutions
-                </button>
-                <button id="get-solutions-step-btn"
-                    class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600">
-                    Get Solutions (Step-by-step)
-                </button>
             </div>
-        </div>
-        <!-- Solutions Container -->
-        <div id="solutions-container" class="mb-6 hidden">
-            <h2 class="text-2xl font-bold mb-4">Solutions</h2>
-            <div id="solutions-list"></div>
         </div>
-    </div>
-    <script src="/static/script.js"></script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <!-- Loading Overlay -->
+    <div id="loading-overlay" class="fixed inset-0 bg-black opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-white p-6 rounded-lg shadow-lg text-center">
             <div id="loading-bar" class="w-64 h-4 bg-gray-200 rounded-full mb-4">
                 <div class="h-full bg-blue-500 rounded-full animate-pulse"></div>
                         <div id="status-options" class="flex flex-col gap-1"></div>
                     </ul>
                 </div>
                 <!-- Agenda Item Filter Dropdown -->
                 <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
                     <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn">
             </div>
         </div>
+        <!-- Add an horizontal separation -->
+        <hr>
+        <!-- Tab list for subsections -->
+        <div role="tablist" class="tabs tabs-border" id="tab-container">
+            <a role="tab" class="tab tab-active" id="doc-table-tab" onclick="switchTab('doc-table-tab')">📝
+                Documents</a>
+            <a role="tab" class="tab tab-disabled" id="requirements-tab" onclick="switchTab('requirements-tab')">
+                <div class="flex items-center gap-1">
+                    <div class="badge badge-neutral badge-outline badge-xs" id="requirements-tab-badge">0</div>
+                    <span>Requirements</span>
+                </div>
+            </a>
+            <a role="tab" class="tab tab-disabled" id="solutions-tab" onclick="switchTab('solutions-tab')">Group and
+                Solve</a>
+            <a role="tab" class="tab tab-disabled" id="query-tab" onclick="switchTab('query-tab')">🔎 Find relevant
+                requirements</a>
         </div>
+        <div id="doc-table-tab-contents" class="hidden">
+            <!-- Data Table Informations -->
+            <div class="flex justify-between items-center mb-2 pt-10" id="data-table-info-container">
+                <!-- Left side: buttons -->
+                <div class="flex gap-2 items-center">
+                    <div class="tooltip" data-tip="Extract requirements from selected documents">
+                        <button id="extract-requirements-btn"
+                            class="bg-orange-300 text-white text-sm rounded px-3 py-1 shadow hover:bg-orange-600">
+                            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
+                                viewBox="0 0 24 24">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M9 8h6m-6 4h6m-6 4h6M6 3v18l2-2 2 2 2-2 2 2 2-2 2 2V3l-2 2-2-2-2 2-2-2-2 2-2-2Z" />
+                            </svg>Extract Requirements
+                        </button>
+                    </div>
+                    <button id="download-tdocs-btn" class="text-sm rounded px-3 py-1 shadow">
+                        📦 Download Selected TDocs
+                    </button>
+                </div>
+                <!-- Right side: document counts -->
+                <div class="flex gap-2 items-center">
+                    <span id="displayed-count" class="text-sm text-gray-700 bg-white rounded px-3 py-1 shadow">
+                        0 document affiché
+                    </span>
+                    <span id="selected-count" class="text-sm text-blue-700 bg-blue-50 rounded px-3 py-1 shadow">
+                        0 document sélectionné
+                    </span>
+                </div>
+            </div>
+            <!-- Data Table -->
+            <div id="data-table-container" class="mb-6">
+                <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-4 py-2 text-left">
+                                <input type="checkbox" id="select-all-checkbox">
+                            </th>
+                            <th class="px-4 py-2 text-left">TDoc</th>
+                            <th class="px-4 py-2 text-left">Title</th>
+                            <th class="px-4 py-2 text-left">Type</th>
+                            <th class="px-4 py-2 text-left">Status</th>
+                            <th class="px-4 py-2 text-left">Agenda Item</th>
+                            <th class="px-4 py-2 text-left">URL</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
         </div>
+        <div id="requirements-tab-contents" class="hidden pt-10">
+            <!-- Requirement list container -->
+            <div id="requirements-container" class="mb-6">
+                <h2 class="text-2xl font-bold mb-4">Extracted requirement list</h2>
+                <div id="requirements-list"></div>
+            </div>
         </div>
         <!-- Query Requirements -->
+        <div id="query-tab-contents" class="hidden pt-10">
+            <div id="query-requirements-container" class="mb-6">
+                <h2 class="text-2xl font-bold mb-4">Find relevant requirements for a query</h2>
+                <div class="flex gap-2">
+                    <input type="text" id="query-input" class="flex-1 p-2 border border-gray-300 rounded-md"
+                        placeholder="Enter your query...">
+                    <button id="search-requirements-btn"
+                        class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
+                        Search
+                    </button>
+                </div>
+                <div id="query-results" class="mt-4"></div>
             </div>
         </div>
+        <!-- Solution tab -->
+        <div id="solutions-tab-contents" class="hidden pt-10">
+            <!--Header de catégorisation des requirements-->
+            <div class="w-full mx-auto mt-4 p-4 bg-base-100 rounded-box shadow-lg border border-base-200">
+                <div class="flex flex-wrap justify-begin items-center gap-6">
+                    <!-- Number input -->
+                    <div class="form-control flex flex-col items-center justify-center">
+                        <label class="label" for="category-count">
+                            <span class="label-text text-base-content"># Categories</span>
+                        </label>
+                        <input id="category-count" type="number" class="input input-bordered w-24" min="1" value="3" />
+                    </div>
+                    <!-- Auto detect toggle -->
+                    <div class="form-control flex flex-col items-center justify-center">
+                        <label class="label">
+                            <span class="label-text text-base-content">Number of categories</span>
+                        </label>
+                        <input type="checkbox" class="toggle toggle-primary" id="auto-detect-toggle"
+                            onchange="toggleAutoDetect(this)" />
+                        <div class="text-xs mt-1 text-base-content">Manual | Auto detect</div>
+                    </div>
+                    <!-- Action Button -->
+                    <button id="categorize-requirements-btn" class="btn btn-primary btn-l self-center">
+                        Categorize
+                    </button>
+                </div>
+            </div>
+            <div id="categorized-requirements-container pt-10" class="mb-6">
+                <h2 class="text-2xl font-bold mb-4 pt-10">Requirements categories list</h2>
+                <div id="categorized-requirements-list"></div>
+            </div>
+            <!-- Solutions Action Buttons -->
+            <div id="solutions-action-buttons-container" class="mb-6 hidden">
+                <div class="flex flex-wrap gap-2 justify-center">
+                    <button id="get-solutions-btn"
+                        class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
+                        Get Solutions
+                    </button>
+                    <button id="get-solutions-step-btn"
+                        class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600">
+                        Get Solutions (Step-by-step)
+                    </button>
+                </div>
             </div>
+            <!-- Solutions Container -->
+            <div id="solutions-container" class="mb-6">
+                <h2 class="text-2xl font-bold mb-4">Solutions</h2>
+                <div id="solutions-list"></div>
+            </div>
         </div>
+        <script src="/static/script.js"></script>
 </body>
 </html>

schemas.py CHANGED Viewed

@@ -1,4 +1,4 @@
-from pydantic import BaseModel
 from typing import Any, List, Dict, Optional
 class MeetingsRequest(BaseModel):
@@ -51,4 +51,4 @@ class ReqSearchResponse(BaseModel):
 # --------------------------------------
 class DownloadRequest(BaseModel):
-    documents: List[str]

+from pydantic import BaseModel, Field
 from typing import Any, List, Dict, Optional
 class MeetingsRequest(BaseModel):
 # --------------------------------------
 class DownloadRequest(BaseModel):
+    documents: List[str] = Field(description="List of document IDs to download")

static/script.js CHANGED Viewed

@@ -98,7 +98,7 @@ function populateCheckboxDropdown(optionsContainerId, options, filterType, label
             <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
             <span>${option}</span>
         `;
-        label.querySelector('input').addEventListener('change', function() {
             if (this.checked) {
                 selectionSet.add(this.value);
             } else {
@@ -122,7 +122,7 @@ function populateCheckboxDropdown(optionsContainerId, options, filterType, label
     // Gestion de "Tous"
     const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
     if (allBox) {
-        allBox.addEventListener('change', function() {
             if (this.checked) {
                 // Décoche tout le reste
                 selectionSet.clear();
@@ -147,11 +147,11 @@ function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
 }
 function updateSelectedFilters(filterType, value, isChecked) {
-  if (isChecked) {
-    selectedFilters[filterType].add(value);
-  } else {
-    selectedFilters[filterType].delete(value);
-  }
 }
 function populateDaisyDropdown(menuId, options, labelId, onSelect) {
@@ -181,14 +181,14 @@ function populateDaisyDropdown(menuId, options, labelId, onSelect) {
 }
 function updateFilterLabel(filterType) {
-  const selectedCount = selectedFilters[filterType].size;
-  const labelElement = document.getElementById(`${filterType}-filter-label`);
-  if (selectedCount === 0) {
-    labelElement.textContent = `${filterType} (Tous)`;
-  } else {
-    labelElement.textContent = `${filterType} (${selectedCount} sélectionné${selectedCount > 1 ? 's' : ''})`;
-  }
 }
 /**
@@ -208,7 +208,7 @@ function extractTableData(mapping) {
             Object.entries(mapping).forEach(([columnName, propertyName]) => {
                 const cell = row.querySelector(`td[data-column="${columnName}"]`);
                 if (cell) {
-                    if(columnName == "URL") {
                         rowData[propertyName] = cell.querySelector('a').getAttribute('href');
                     } else {
                         rowData[propertyName] = cell.textContent.trim();
@@ -222,6 +222,64 @@ function extractTableData(mapping) {
     return data;
 }
 // =============================================================================
 // FONCTIONS MÉTIER
 // =============================================================================
@@ -261,7 +319,7 @@ async function getMeetings() {
 async function getTDocs() {
     const workingGroup = document.getElementById('working-group-select').value;
     const meeting = document.getElementById('meeting-select').value;
     if (!workingGroup || !meeting) return;
     showLoadingOverlay('Récupération de la liste des TDocs...');
@@ -277,13 +335,15 @@ async function getTDocs() {
         const data = await response.json();
         populateDataTable(data.data);
         setupFilters(data.data);
         toggleContainersVisibility([
             'filters-container',
             'action-buttons-container',
-            'data-table-container'
         ], true);
         isRequirements = false;
     } catch (error) {
         console.error('Erreur lors de la récupération des TDocs:', error);
@@ -406,7 +466,7 @@ function applyFilters() {
  * Configure les événements du tableau
  */
 function setupTableEvents() {
-    document.getElementById('select-all-checkbox').addEventListener('change', function() {
         const checkboxes = document.querySelectorAll('.row-checkbox');
         checkboxes.forEach(checkbox => {
             // Ne coche que les visibles
@@ -466,7 +526,7 @@ async function downloadTDocs() {
  */
 function generateDownloadFilename() {
     let filename = document.getElementById('meeting-select').value || 'documents';
     const agendaItem = document.getElementById('agenda-item-filter').value;
     const docStatus = document.getElementById('doc-status-filter').value;
     const docType = document.getElementById('doc-type-filter').value;
@@ -527,21 +587,27 @@ async function extractRequirements() {
         requirements = data.requirements;
         let req_id = 0;
         data.requirements.forEach(obj => {
-                obj.requirements.forEach(req => {
-                    formattedRequirements.push({
-                        req_id,
-                        "document": obj.document,
-                        "context": obj.context,
-                        "requirement": req
-                    })
-                    req_id++;
                 })
             })
         displayRequirements(requirements);
         toggleContainersVisibility(['requirements-container', 'query-requirements-container'], true);
-        toggleContainersVisibility(['find-requirements-btn', 'categorize-requirements-btn', 'get-solutions-btn', 'get-solutions-step-btn'], true);
         isRequirements = true;
     } catch (error) {
         console.error('Erreur lors de l\'extraction des requirements:', error);
@@ -563,17 +629,17 @@ function displayRequirements(requirementsData) {
     requirementsData.forEach((docReq, docIndex) => {
         const docDiv = document.createElement('div');
         docDiv.className = 'mb-6 p-4 border border-gray-200 rounded-lg bg-white';
         docDiv.innerHTML = `
             <h3 class="text-lg font-semibold mb-2">${docReq.document}</h3>
             <p class="text-gray-600 mb-3">${docReq.context}</p>
             <ul class="list-disc list-inside space-y-1">
-                ${docReq.requirements.map((req, reqIndex) =>
-                    `<li class="text-sm" data-req-id="${docIndex}-${reqIndex}">${req}</li>`
-                ).join('')}
             </ul>
         `;
         container.appendChild(docDiv);
     });
 }
@@ -586,6 +652,7 @@ async function categorizeRequirements(max_categories) {
         alert('Aucun requirement à catégoriser');
         return;
     }
     showLoadingOverlay('Catégorisation des requirements en cours...');
     toggleElementsEnabled(['categorize-requirements-btn'], false);
@@ -600,11 +667,11 @@ async function categorizeRequirements(max_categories) {
         const data = await response.json();
         categorizedRequirements = data;
         displayCategorizedRequirements(categorizedRequirements.categories);
         // Masquer le container de query et afficher les catégories et boutons solutions
-        toggleContainersVisibility(['query-requirements-container'], false);
         toggleContainersVisibility(['categorized-requirements-container', 'solutions-action-buttons-container'], true);
     } catch (error) {
         console.error('Erreur lors de la catégorisation des requirements:', error);
         alert('Erreur lors de la catégorisation des requirements');
@@ -624,20 +691,26 @@ function displayCategorizedRequirements(categorizedData) {
     categorizedData.forEach((category, categoryIndex) => {
         const categoryDiv = document.createElement('div');
-        categoryDiv.className = 'mb-6 p-4 border border-gray-200 rounded-lg bg-white';
         categoryDiv.innerHTML = `
             <h3 class="text-lg font-semibold mb-2 text-blue-600">${category.title}</h3>
             <div class="space-y-2">
-                ${category.requirements.map((req, reqIndex) =>
-                    `<div class="p-2 bg-gray-50 rounded border-l-4 border-blue-400" data-cat-req-id="${categoryIndex}-${reqIndex}">
                         <div class="text-sm font-medium text-gray-700">${req.document}</div>
                         <div class="text-sm text-gray-600">${req.requirement}</div>
-                    </div>`
-                ).join('')}
             </div>
         `;
         container.appendChild(categoryDiv);
     });
 }
@@ -662,7 +735,7 @@ async function searchRequirements() {
         const response = await fetch('/get_reqs_from_query', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
                 query: query,
                 requirements: formattedRequirements
             })
@@ -670,7 +743,7 @@ async function searchRequirements() {
         const data = await response.json();
         displaySearchResults(data.requirements);
     } catch (error) {
         console.error('Erreur lors de la recherche:', error);
         alert('Erreur lors de la recherche des requirements');
@@ -699,13 +772,13 @@ function displaySearchResults(results) {
     results.forEach((result, index) => {
         const resultDiv = document.createElement('div');
         resultDiv.className = 'p-3 bg-blue-50 border border-blue-200 rounded-lg';
         resultDiv.innerHTML = `
             <div class="text-sm font-medium text-blue-800">${result.document}</div>
             <div class="text-sm text-gray-600 mb-1">${result.context}</div>
             <div class="text-sm">${result.requirement}</div>
         `;
         resultsDiv.appendChild(resultDiv);
     });
@@ -760,10 +833,10 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     // En-tête de l'accordéon avec navigation
     const header = document.createElement('div');
     header.className = 'bg-gray-50 px-4 py-2 cursor-pointer hover:bg-gray-100 transition-colors duration-200';
     const currentVersion = versionIndex + 1;
     const totalVersions = solutionCriticizedHistory.length;
     header.innerHTML = `
         <div class="flex justify-between items-center">
             <div class="flex items-center space-x-3">
@@ -834,7 +907,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     // Section Critique
     const critiqueSection = document.createElement('div');
     critiqueSection.className = 'bg-yellow-50 border-l-2 border-yellow-400 p-3 rounded-r-md';
     let critiqueContent = `
         <h4 class="text-sm font-semibold text-yellow-800 mb-2 flex items-center">
             <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
@@ -880,10 +953,64 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     critiqueSection.innerHTML = critiqueContent;
     // Ajouter les sections au contenu
     content.appendChild(problemSection);
     content.appendChild(solutionSection);
     content.appendChild(critiqueSection);
     // Événement de clic pour l'accordéon (exclure les boutons de navigation)
     header.addEventListener('click', (e) => {
@@ -891,7 +1018,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
         if (e.target.closest('.version-btn-left') || e.target.closest('.version-btn-right')) {
             return;
         }
         const icon = header.querySelector('.accordion-icon');
         const isCurrentlyOpen = !content.classList.contains('hidden');
@@ -934,13 +1061,13 @@ function updateSingleAccordion(solutionCriticizedHistory, containerId, newVersio
     const newData = solutionCriticizedHistory[newVersionIndex];
     const newItem = newData.critiques[categoryIndex];
     if (!newItem) return;
     // Mettre à jour le contenu de cette catégorie spécifique
     const tempContainer = document.createElement('div');
     createSingleAccordionItem(newItem, categoryIndex, newVersionIndex, solutionCriticizedHistory, tempContainer);
     // Remplacer l'ancien item par le nouveau
     accordionItem.parentNode.replaceChild(tempContainer.firstChild, accordionItem);
 }
@@ -953,29 +1080,29 @@ function initializeSolutionAccordion(solutionCriticizedHistory, containerId, sta
     document.getElementById(containerId).classList.remove('hidden')
 }
-async function generateSolutions(){
-    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini', {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(categorizedRequirements)})
     let responseObj = await response.json()
     return responseObj;
 }
-async function generateCriticisms(solutions){
-    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/criticize_solution', {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(solutions)})
     let responseObj = await response.json()
     solutionsCriticizedVersions.push(responseObj)
 }
-async function refineSolutions(critiques){
-    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/refine_solution', {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(critiques)})
     let responseObj = await response.json()
     await generateCriticisms(responseObj)
 }
-async function workflow(steps = 1){
     let soluce;
     showLoadingOverlay('Génération des solutions & critiques ....');
-    for(let step = 1; step <= steps; step++){
-        if(solutionsCriticizedVersions.length == 0){
             soluce = await generateSolutions();
             await generateCriticisms(soluce)
         } else {
@@ -991,25 +1118,21 @@ async function workflow(steps = 1){
 // INITIALISATION DES ÉVÉNEMENTS
 // =============================================================================
-document.addEventListener('DOMContentLoaded', function() {
     // Événements des boutons principaux
     document.getElementById('get-meetings-btn').addEventListener('click', getMeetings);
     document.getElementById('get-tdocs-btn').addEventListener('click', getTDocs);
     document.getElementById('download-tdocs-btn').addEventListener('click', downloadTDocs);
     document.getElementById('extract-requirements-btn').addEventListener('click', extractRequirements);
-    document.getElementById('categorize-requirements-btn').addEventListener('click', ()=>{categorizeRequirements(8)});
-    // Événement pour le bouton "Find Requirements"
-    document.getElementById('find-requirements-btn').addEventListener('click', function() {
-        // Afficher le container de requête
-        toggleContainersVisibility(['query-requirements-container'], true);
-        // Scroll vers le container de requête
-        document.getElementById('query-requirements-container').scrollIntoView({ behavior: 'smooth' });
     });
     // Événement pour la recherche
     document.getElementById('search-requirements-btn').addEventListener('click', searchRequirements);
     // Événements pour les boutons de solutions (à implémenter plus tard)
     document.getElementById('get-solutions-btn').addEventListener('click', () => {
         alert('Fonctionnalité à implémenter');
@@ -1017,4 +1140,9 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
         workflow();
     });
-});

             <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
             <span>${option}</span>
         `;
+        label.querySelector('input').addEventListener('change', function () {
             if (this.checked) {
                 selectionSet.add(this.value);
             } else {
     // Gestion de "Tous"
     const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
     if (allBox) {
+        allBox.addEventListener('change', function () {
             if (this.checked) {
                 // Décoche tout le reste
                 selectionSet.clear();
 }
 function updateSelectedFilters(filterType, value, isChecked) {
+    if (isChecked) {
+        selectedFilters[filterType].add(value);
+    } else {
+        selectedFilters[filterType].delete(value);
+    }
 }
 function populateDaisyDropdown(menuId, options, labelId, onSelect) {
 }
 function updateFilterLabel(filterType) {
+    const selectedCount = selectedFilters[filterType].size;
+    const labelElement = document.getElementById(`${filterType}-filter-label`);
+    if (selectedCount === 0) {
+        labelElement.textContent = `${filterType} (Tous)`;
+    } else {
+        labelElement.textContent = `${filterType} (${selectedCount} sélectionné${selectedCount > 1 ? 's' : ''})`;
+    }
 }
 /**
             Object.entries(mapping).forEach(([columnName, propertyName]) => {
                 const cell = row.querySelector(`td[data-column="${columnName}"]`);
                 if (cell) {
+                    if (columnName == "URL") {
                         rowData[propertyName] = cell.querySelector('a').getAttribute('href');
                     } else {
                         rowData[propertyName] = cell.textContent.trim();
     return data;
 }
+const TABS = {
+    'doc-table-tab': 'doc-table-tab-contents',
+    'requirements-tab': 'requirements-tab-contents',
+    'solutions-tab': 'solutions-tab-contents',
+    'query-tab': 'query-tab-contents'
+};
+/**
+ * Bascule l'affichage sur le nouveau tab
+ * @param {*} newTab
+ */
+function switchTab(newTab) {
+    // Remove active tab style from all tabs
+    Object.keys(TABS).forEach(tabId => {
+        const tabElement = document.getElementById(tabId);
+        if (tabElement) {
+            tabElement.classList.remove("tab-active");
+        }
+    });
+    // Hide all tab contents
+    Object.values(TABS).forEach(contentId => {
+        const contentElement = document.getElementById(contentId);
+        if (contentElement) {
+            contentElement.classList.add("hidden");
+        }
+    });
+    // Activate the new tab if it exists in the mapping
+    if (newTab in TABS) {
+        const newTabElement = document.getElementById(newTab);
+        const newContentElement = document.getElementById(TABS[newTab]);
+        if (newTabElement) newTabElement.classList.add("tab-active");
+        if (newContentElement) newContentElement.classList.remove("hidden");
+    }
+}
+/**
+ * Bascule l'affichage vers la tab uniquement si les requirements sont
+ */
+function enableTabSwitching() {
+    Object.keys(TABS).forEach(tabId => {
+        const tab = document.getElementById(tabId);
+        if (tab)
+            tab.classList.remove("tab-disabled");
+    })
+}
+/**
+ * Change l'état d'activation du number box de choix de nb de catégories.
+ */
+function debounceAutoCategoryCount(state) {
+    document.getElementById('category-count').disabled = state;
+}
 // =============================================================================
 // FONCTIONS MÉTIER
 // =============================================================================
 async function getTDocs() {
     const workingGroup = document.getElementById('working-group-select').value;
     const meeting = document.getElementById('meeting-select').value;
     if (!workingGroup || !meeting) return;
     showLoadingOverlay('Récupération de la liste des TDocs...');
         const data = await response.json();
         populateDataTable(data.data);
         setupFilters(data.data);
         toggleContainersVisibility([
             'filters-container',
             'action-buttons-container',
+            'doc-table-tab-contents',
+            // 'data-table-container',
+            // 'data-table-info-container'
         ], true);
         isRequirements = false;
     } catch (error) {
         console.error('Erreur lors de la récupération des TDocs:', error);
  * Configure les événements du tableau
  */
 function setupTableEvents() {
+    document.getElementById('select-all-checkbox').addEventListener('change', function () {
         const checkboxes = document.querySelectorAll('.row-checkbox');
         checkboxes.forEach(checkbox => {
             // Ne coche que les visibles
  */
 function generateDownloadFilename() {
     let filename = document.getElementById('meeting-select').value || 'documents';
     const agendaItem = document.getElementById('agenda-item-filter').value;
     const docStatus = document.getElementById('doc-status-filter').value;
     const docType = document.getElementById('doc-type-filter').value;
         requirements = data.requirements;
         let req_id = 0;
         data.requirements.forEach(obj => {
+            obj.requirements.forEach(req => {
+                formattedRequirements.push({
+                    req_id,
+                    "document": obj.document,
+                    "context": obj.context,
+                    "requirement": req
                 })
+                req_id++;
             })
+        })
         displayRequirements(requirements);
         toggleContainersVisibility(['requirements-container', 'query-requirements-container'], true);
+        toggleContainersVisibility(['categorize-requirements-btn'], true);
+        // we got some requirements to the other tabs can be enabled
+        enableTabSwitching();
+        // set the number of fetched requirements
+        document.getElementById('requirements-tab-badge').innerText = requirements.length;
         isRequirements = true;
     } catch (error) {
         console.error('Erreur lors de l\'extraction des requirements:', error);
     requirementsData.forEach((docReq, docIndex) => {
         const docDiv = document.createElement('div');
         docDiv.className = 'mb-6 p-4 border border-gray-200 rounded-lg bg-white';
         docDiv.innerHTML = `
             <h3 class="text-lg font-semibold mb-2">${docReq.document}</h3>
             <p class="text-gray-600 mb-3">${docReq.context}</p>
             <ul class="list-disc list-inside space-y-1">
+                ${docReq.requirements.map((req, reqIndex) =>
+            `<li class="text-sm" data-req-id="${docIndex}-${reqIndex}">${req}</li>`
+        ).join('')}
             </ul>
         `;
         container.appendChild(docDiv);
     });
 }
         alert('Aucun requirement à catégoriser');
         return;
     }
+    console.log(max_categories);
     showLoadingOverlay('Catégorisation des requirements en cours...');
     toggleElementsEnabled(['categorize-requirements-btn'], false);
         const data = await response.json();
         categorizedRequirements = data;
         displayCategorizedRequirements(categorizedRequirements.categories);
         // Masquer le container de query et afficher les catégories et boutons solutions
+        // toggleContainersVisibility(['query-requirements-container'], false);
         toggleContainersVisibility(['categorized-requirements-container', 'solutions-action-buttons-container'], true);
     } catch (error) {
         console.error('Erreur lors de la catégorisation des requirements:', error);
         alert('Erreur lors de la catégorisation des requirements');
     categorizedData.forEach((category, categoryIndex) => {
         const categoryDiv = document.createElement('div');
+        categoryDiv.tabIndex = 0;
+        categoryDiv.className = 'collapse collapse-arrow mb-6 p-4 border border-gray-200 rounded-lg bg-white';
         categoryDiv.innerHTML = `
+        <div class="collapse-title font-semibold">
             <h3 class="text-lg font-semibold mb-2 text-blue-600">${category.title}</h3>
+        </div>
+          <div class="collapse-content text-sm">
             <div class="space-y-2">
+                ${category.requirements.map((req, reqIndex) =>
+            `<div class="p-2 bg-gray-50 rounded border-l-4 border-blue-400" data-cat-req-id="${categoryIndex}-${reqIndex}">
                         <div class="text-sm font-medium text-gray-700">${req.document}</div>
                         <div class="text-sm text-gray-600">${req.requirement}</div>
+             </div>`
+        ).join('')}
             </div>
+        </div>
         `;
         container.appendChild(categoryDiv);
     });
 }
         const response = await fetch('/get_reqs_from_query', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
                 query: query,
                 requirements: formattedRequirements
             })
         const data = await response.json();
         displaySearchResults(data.requirements);
     } catch (error) {
         console.error('Erreur lors de la recherche:', error);
         alert('Erreur lors de la recherche des requirements');
     results.forEach((result, index) => {
         const resultDiv = document.createElement('div');
         resultDiv.className = 'p-3 bg-blue-50 border border-blue-200 rounded-lg';
         resultDiv.innerHTML = `
             <div class="text-sm font-medium text-blue-800">${result.document}</div>
             <div class="text-sm text-gray-600 mb-1">${result.context}</div>
             <div class="text-sm">${result.requirement}</div>
         `;
         resultsDiv.appendChild(resultDiv);
     });
     // En-tête de l'accordéon avec navigation
     const header = document.createElement('div');
     header.className = 'bg-gray-50 px-4 py-2 cursor-pointer hover:bg-gray-100 transition-colors duration-200';
     const currentVersion = versionIndex + 1;
     const totalVersions = solutionCriticizedHistory.length;
     header.innerHTML = `
         <div class="flex justify-between items-center">
             <div class="flex items-center space-x-3">
     // Section Critique
     const critiqueSection = document.createElement('div');
     critiqueSection.className = 'bg-yellow-50 border-l-2 border-yellow-400 p-3 rounded-r-md';
     let critiqueContent = `
         <h4 class="text-sm font-semibold text-yellow-800 mb-2 flex items-center">
             <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
     critiqueSection.innerHTML = critiqueContent;
+    // ===================================== Section sources ================================
+    createEl = (tag, properties) => {
+        const element = document.createElement(tag);
+        Object.assign(element, properties);
+        return element;
+    };
+    // conteneur des sources
+    const sourcesSection = createEl('div', {
+        className: 'bg-gray-50 border-l-2 border-gray-400 p-3 rounded-r-md'
+    });
+    const heading = createEl('h4', {
+        className: 'text-sm font-semibold text-black mb-2 flex items-center',
+        innerHTML: `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-4 h-4 mr-1"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                />
+        </svg>
+        Sources
+    `
+    });
+    const pillContainer = createEl('div', {
+        className: 'flex flex-wrap mt-1'
+    });
+    // create reference pills
+    solution['References'].forEach(source => {
+        const pillLink = createEl('a', {
+            href: source.url,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            className: 'inline-block bg-gray-100 text-black text-xs font-medium mr-2 mb-2 px-3 py-1 rounded-full hover:bg-gray-400 transition-colors',
+            textContent: source.name
+        });
+        pillContainer.appendChild(pillLink);
+    });
+    sourcesSection.append(heading, pillContainer);
+    // ======================================================================================
     // Ajouter les sections au contenu
     content.appendChild(problemSection);
     content.appendChild(solutionSection);
     content.appendChild(critiqueSection);
+    content.appendChild(sourcesSection);
     // Événement de clic pour l'accordéon (exclure les boutons de navigation)
     header.addEventListener('click', (e) => {
         if (e.target.closest('.version-btn-left') || e.target.closest('.version-btn-right')) {
             return;
         }
         const icon = header.querySelector('.accordion-icon');
         const isCurrentlyOpen = !content.classList.contains('hidden');
     const newData = solutionCriticizedHistory[newVersionIndex];
     const newItem = newData.critiques[categoryIndex];
     if (!newItem) return;
     // Mettre à jour le contenu de cette catégorie spécifique
     const tempContainer = document.createElement('div');
     createSingleAccordionItem(newItem, categoryIndex, newVersionIndex, solutionCriticizedHistory, tempContainer);
     // Remplacer l'ancien item par le nouveau
     accordionItem.parentNode.replaceChild(tempContainer.firstChild, accordionItem);
 }
     document.getElementById(containerId).classList.remove('hidden')
 }
+async function generateSolutions() {
+    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(categorizedRequirements) })
     let responseObj = await response.json()
     return responseObj;
 }
+async function generateCriticisms(solutions) {
+    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/criticize_solution', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(solutions) })
     let responseObj = await response.json()
     solutionsCriticizedVersions.push(responseObj)
 }
+async function refineSolutions(critiques) {
+    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/refine_solutions', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(critiques) })
     let responseObj = await response.json()
     await generateCriticisms(responseObj)
 }
+async function workflow(steps = 1) {
     let soluce;
     showLoadingOverlay('Génération des solutions & critiques ....');
+    for (let step = 1; step <= steps; step++) {
+        if (solutionsCriticizedVersions.length == 0) {
             soluce = await generateSolutions();
             await generateCriticisms(soluce)
         } else {
 // INITIALISATION DES ÉVÉNEMENTS
 // =============================================================================
+document.addEventListener('DOMContentLoaded', function () {
     // Événements des boutons principaux
     document.getElementById('get-meetings-btn').addEventListener('click', getMeetings);
     document.getElementById('get-tdocs-btn').addEventListener('click', getTDocs);
     document.getElementById('download-tdocs-btn').addEventListener('click', downloadTDocs);
     document.getElementById('extract-requirements-btn').addEventListener('click', extractRequirements);
+    document.getElementById('categorize-requirements-btn').addEventListener('click', () => {
+        const category_count_auto_detect = document.getElementById('auto-detect-toggle').checked;
+        const n_categories = document.getElementById('category-count').value;
+        categorizeRequirements(category_count_auto_detect ? null : n_categories);
     });
     // Événement pour la recherche
     document.getElementById('search-requirements-btn').addEventListener('click', searchRequirements);
     // Événements pour les boutons de solutions (à implémenter plus tard)
     document.getElementById('get-solutions-btn').addEventListener('click', () => {
         alert('Fonctionnalité à implémenter');
     document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
         workflow();
     });
+});
+// dseactiver le choix du nb de catégories lorsqu'en mode auto
+document.getElementById('auto-detect-toggle').addEventListener('change', (ev) => { debounceAutoCategoryCount(ev.target.checked) });
+debounceAutoCategoryCount(true);