Spaces:

OrganizedProgrammers
/

Reqxtract-v2

Running

App Files Files Community

om4r932 commited on Jun 26

Commit

0d2c020

1 Parent(s): ac3ccd5

Push reworked MVP

Browse files

Files changed (3) hide show

app.py +3 -3
index.html +129 -115
static/script.js +564 -359

app.py CHANGED Viewed

@@ -359,7 +359,7 @@ def find_requirements_from_problem_description(req: ReqSearchRequest):
     requirements = req.requirements
     query = req.query
-    requirements_text = "\n".join([f"[Selection ID: {r.i} | Document: {r.document} | Context: {r.context} | Requirement: {r.requirement}]" for r in requirements])
     print("Called the LLM")
     resp_ai = llm_router.completion(
@@ -369,9 +369,9 @@ def find_requirements_from_problem_description(req: ReqSearchRequest):
     )
     print("Answered")
     print(resp_ai.choices[0].message.content)
     out_llm = ReqSearchLLMResponse.model_validate_json(resp_ai.choices[0].message.content).selected
-    if max(out_llm) > len(out_llm) - 1:
         raise HTTPException(status_code=500, detail="LLM error : Generated a wrong index, please try again.")
     return ReqSearchResponse(requirements=[requirements[i] for i in out_llm])

     requirements = req.requirements
     query = req.query
+    requirements_text = "\n".join([f"[Selection ID: {r.req_id} | Document: {r.document} | Context: {r.context} | Requirement: {r.requirement}]" for r in requirements])
     print("Called the LLM")
     resp_ai = llm_router.completion(
     )
     print("Answered")
     print(resp_ai.choices[0].message.content)
     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.")
     return ReqSearchResponse(requirements=[requirements[i] for i in out_llm])

index.html CHANGED Viewed

@@ -1,148 +1,162 @@
 <!DOCTYPE html>
-<html lang="fr" data-theme="light">
 <head>
     <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/[email protected]/dist/full.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="p-8 bg-base-100">
-    <div class="container mx-auto">
-        <h1 class="text-4xl font-bold text-center mb-8">Requirements Extractor</h1>
-        <div class="" id="dataFrameForm">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                <select class="select select-bordered" id="workingGroupSelect">
-                    <option disabled="" selected="" value="">Working Group</option>
-                    <option>SA1</option>
-                    <option>SA2</option>
-                    <option>SA3</option>
-                    <option>SA4</option>
-                    <option>SA5</option>
-                    <option>SA6</option>
-                    <option>CT1</option>
-                    <option>CT2</option>
-                    <option>CT3</option>
-                    <option>CT4</option>
-                    <option>CT5</option>
-                    <option>CT6</option>
-                </select>
-                <select class="select select-bordered" id="meetingSelect" disabled="">
-                    <option disabled="" selected="" value="">Select a working group</option>
-                </select>
-                <button class="btn" id="getTDocs">Get TDocs</button>
             </div>
         </div>
-        <div class="hidden" id="filters">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                <select class="select select-bordered" id="docType">
-                    <option disabled="" selected="" value="">Type</option>
-                    <option>Tous</option>
-                </select>
-                <select class="select select-bordered" id="docStatus">
-                    <option disabled="" selected="" value="">Status</option>
-                    <option>Tous</option>
-                </select>
-                <select class="select select-bordered" id="agendaItem">
-                    <option disabled="" selected="" value="">Agenda Item</option>
-                    <option>Tous</option>
-                </select>
-            </div>
         </div>
-        <div class="flex justify-center mt-12 min-h-[10vh] hidden" id="queryReqForm">
-            <div class="w-full max-w-md">
-                <div class="grid grid-cols-1 gap-4">
-                    <textarea placeholder="Enter your problem description here ..."
-                        class="w-full mx-auto px-4 py-2 border rounded" id="problemDescription"></textarea>
-                    <button class="w-1/2 mx-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-                        id="queryReq">
-                        Find requirements
-                    </button>
                 </div>
             </div>
         </div>
-        <center>
-            <span class="loading loading-bars loading-xl hidden" id="loadingBar"></span>
-            <p class="hidden" id="progressText"></p>
-        </center>
-        <!-- Tableau des données -->
-        <div class="max-h-[65vh] overflow-y-auto mt-12" id="dataFrameDiv">
-            <table class="table table-zebra w-full" id="dataFrame">
-                <thead class="sticky top-0 bg-base-200 z-10">
-                    <tr class="bg-base-200">
-                        <th>TDoc</th>
-                        <th>Title</th>
-                        <th>Type</th>
-                        <th>Status</th>
-                        <th>Agenda Item</th>
-                        <th>URL</th>
                     </tr>
                 </thead>
-                <tbody>
-                </tbody>
             </table>
         </div>
-        <div id="categorizeReqContainer" class="hidden">
-            <div class="w-full max-w-[100%] mx-auto p-6" id="carousels">
-                <h1 class="text-xl font-bold mb-8 text-center">Requirements categories list</h1>
-            </div>
-            <div class="w-full max-w-[100%] mx-auto px-6 pb-6" id="catReqActions">
-                <div class="flex items-center justify-center gap-4 flex-wrap">
-                    <!-- Checkbox et Input Limite -->
-                    <div class="flex items-center gap-2">
-                        <input
-                            type="number"
-                            id="limitInput"
-                            placeholder="10"
-                            min="1"
-                            max="9999"
-                            class="w-20 px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                        >
-                    </div>
-                    <!-- Boutons -->
-                    <button
-                        id="getSolutions"
-                        class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
-                    >
-                        Get solutions
-                    </button>
-                    <button
-                        id="getSolutionsStepByStep"
-                        class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors duration-200"
-                    >
-                        Get solutions (Step-by-step)
-                    </button>
-                </div>
             </div>
         </div>
-        <div id="criticizeSoluceContainer" class="hidden">
         </div>
-        <center>
-            <div id="buttons">
-                <p id="reqStatus" class="mt-6 hidden">Requirements extracted</p>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                    <button class="btn mt-6 hidden" id="getReqs">Extract Requirements</button>
-                    <button class="btn mt-6 hidden" id="downloadZip">Download TDocs</button>
-                    <button class="btn mt-6 hidden" id="searchReq">Query requirements</button>
-                    <button class="btn mt-6 hidden" id="categorizeReq">Categorize requirements</button>
-                </div>
             </div>
-        </center>
     </div>
     <script src="/static/script.js"></script>

 <!DOCTYPE html>
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
     <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>
             </div>
+            <p id="progress-text" class="text-gray-700">Chargement en cours...</p>
         </div>
+    </div>
+    <div class="container mx-auto p-6">
+        <h1 class="text-3xl font-bold text-center mb-8">Requirements Extractor</h1>
+        <!-- Working Group Selection -->
+        <div id="working-group-container" class="mb-6">
+            <label for="working-group-select" class="block text-sm font-medium text-gray-700 mb-2">Working Group</label>
+            <select id="working-group-select" class="w-full p-2 border border-gray-300 rounded-md">
+                <option value="">Select a working group</option>
+                <option value="SA1">SA1</option>
+                <option value="SA2">SA2</option>
+                <option value="SA3">SA3</option>
+                <option value="SA4">SA4</option>
+                <option value="SA5">SA5</option>
+                <option value="SA6">SA6</option>
+                <option value="CT1">CT1</option>
+                <option value="CT2">CT2</option>
+                <option value="CT3">CT3</option>
+                <option value="CT4">CT4</option>
+                <option value="CT5">CT5</option>
+                <option value="CT6">CT6</option>
+            </select>
+            <button id="get-meetings-btn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
+                Get Meetings
+            </button>
         </div>
+        <!-- Meeting Selection -->
+        <div id="meeting-container" class="mb-6 hidden">
+            <label for="meeting-select" class="block text-sm font-medium text-gray-700 mb-2">Meeting</label>
+            <select id="meeting-select" class="w-full p-2 border border-gray-300 rounded-md">
+                <option value="">Select a meeting</option>
+            </select>
+            <button id="get-tdocs-btn" class="mt-2 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
+                Get TDocs
+            </button>
+        </div>
+        <!-- Filters -->
+        <div id="filters-container" class="mb-6 hidden">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                    <label for="doc-type-filter" class="block text-sm font-medium text-gray-700 mb-2">Type</label>
+                    <select id="doc-type-filter" class="w-full p-2 border border-gray-300 rounded-md">
+                        <option value="">Tous</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="doc-status-filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
+                    <select id="doc-status-filter" class="w-full p-2 border border-gray-300 rounded-md">
+                        <option value="">Tous</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="agenda-item-filter" class="block text-sm font-medium text-gray-700 mb-2">Agenda Item</label>
+                    <select id="agenda-item-filter" class="w-full p-2 border border-gray-300 rounded-md">
+                        <option value="">Tous</option>
+                    </select>
                 </div>
             </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 -->
+        <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>

static/script.js CHANGED Viewed

@@ -1,233 +1,394 @@
-let requirements;
-let categorizedRequirements;
 let solutionsCriticizedVersions = [];
 let isRequirements = false;
-function downloadTDocs() {
-    document.getElementById("getReqs").setAttribute('disabled', 'true')
-    document.getElementById("downloadZip").setAttribute('disabled', 'true')
-    document.getElementById("progressText").classList.remove('hidden');
-    document.getElementById("progressText").innerHTML = "Downloading TDocs, please wait, it may take a while ...";
-    document.getElementById("loadingBar").classList.remove("hidden");
-    const data = tableToGenBody({
-        "TDoc": "doc"
     });
-    const dataSet = [...new Set(data.map(item => item.doc))];
-    console.log(dataSet);
-    let body = {
-        "documents": dataSet,
-        "meeting": document.getElementById('meetingSelect').value
-    };
-    if (document.getElementById('agendaItem').value != "" | document.getElementById('agendaItem').value !=
-        "Tous") {
-        body['agenda_item'] = document.getElementById('agendaItem').value;
     }
-    fetch('/download_tdocs', {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify(body)
-        })
-        .then(resp => resp.blob())
-        .then(blob => {
-            document.getElementById("getReqs").removeAttribute('disabled')
-            document.getElementById("downloadZip").removeAttribute('disabled')
-            document.getElementById("loadingBar").classList.add("hidden");
-            document.getElementById("progressText").classList.add("hidden");
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            let dl_name = `${document.getElementById('meetingSelect').value}`;
-            if (document.getElementById('agendaItem').value != "" | document.getElementById('agendaItem')
-                .value != "Tous") {
-                dl_name = dl_name + `_${document.getElementById('agendaItem').value}`
-            };
-            if (document.getElementById('docStatus').value != "" | document.getElementById('docStatus')
-                .value != "Tous") {
-                dl_name = dl_name + `_${document.getElementById('docStatus').value}`
-            };
-            if (document.getElementById('docType').value != "" | document.getElementById('docType').value !=
-                "Tous") {
-                dl_name = `${document.getElementById('docType').value}_${dl_name}`
-            };
-            if (isRequirements) {
-                dl_name = `requirements_${dl_name}_${url.split('/').pop()}`
-            }
-            dl_name = dl_name + ".zip";
-            a.download = dl_name;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            window.URL.revokeObjectURL(url); // libération mémoire
-        })
 }
-function getDataFrame() {
-    isRequirements = false;
-    document.getElementById("progressText").classList.remove('hidden');
-    document.getElementById("progressText").innerHTML = "Getting TDoc list of meeting ...";
-    document.getElementById("loadingBar").classList.remove("hidden");
-    document.getElementById("getTDocs").setAttribute('disabled', 'true')
-    const wg = document.getElementById('workingGroupSelect').value;
-    const meeting = document.getElementById('meetingSelect').value;
-    document.getElementById('docType').innerHTML = `<option disabled selected value="">Type</option><option>Tous</option>`
-    document.getElementById('docStatus').innerHTML = `<option disabled selected value="">Status</option><option>Tous</option>`
-    document.getElementById('agendaItem').innerHTML = `<option disabled selected value="">Agenda Item</option><option>Tous</option>`
-    const dataFrame = document.getElementById("dataFrame");
-    fetch("/get_dataframe", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                "working_group": wg,
-                "meeting": meeting
-            })
-        })
-        .then(resp => resp.json())
-        .then(data => {
-            document.getElementById("filters").classList.remove("hidden");
-            document.getElementById("downloadZip").classList.remove("hidden");
-            document.getElementById("getReqs").classList.remove("hidden");
-            document.getElementById("getTDocs").removeAttribute("disabled")
-            document.getElementById("progressText").classList.add('hidden');
-            document.getElementById("loadingBar").classList.add("hidden");
-            const dataframeBody = dataFrame.querySelector("tbody");
-            dataframeBody.innerHTML = "";
-            const setType = new Set();
-            const setAgenda = new Set();
-            const setStatus = new Set();
-            data.data.forEach(row => {
-                const tr = document.createElement("tr");
-                tr.setAttribute("data-type", row['Type']);
-                tr.setAttribute("data-status", row["TDoc Status"]);
-                tr.setAttribute("data-agenda", row["Agenda item description"]);
-                tr.innerHTML = `
-                        <td>${row["TDoc"]}</td>
-                        <td>${row["Title"]}</td>
-                        <td>${row["Type"]}</td>
-                        <td>${row["TDoc Status"]}</td>
-                        <td>${row["Agenda item description"]}</td>
-                        <td>
-                            <a href="${row["URL"]}" class="link">${row["URL"]}</a>
-                        </td>
-                    `;
-                dataframeBody.appendChild(tr);
-                setType.add(row["Type"]);
-                setAgenda.add(row["Agenda item description"]);
-                setStatus.add(row["TDoc Status"]);
-            })
-            setType.forEach(tdoctype => {
-                const option = document.createElement("option");
-                option.textContent = tdoctype;
-                option.value = tdoctype;
-                document.getElementById('docType').appendChild(option);
-            })
-            setAgenda.forEach(agenda => {
-                const option = document.createElement("option");
-                option.textContent = agenda;
-                option.value = agenda;
-                document.getElementById('agendaItem').appendChild(option);
-            })
-            setStatus.forEach(status => {
-                const option = document.createElement("option");
-                option.textContent = status;
-                option.value = status;
-                document.getElementById('docStatus').appendChild(option);
-            })
-        })
 }
-function filterTable() {
-    const type = document.getElementById('docType').value
-    const status = document.getElementById('docStatus').value
-    const agenda = document.getElementById('agendaItem').value
-    document.querySelectorAll('#dataFrame tbody tr').forEach(row => {
-        const showRow =
-            (type === 'Tous' || row.dataset.type === type || type === "") &&
-            (status === 'Tous' || row.dataset.status === status || status === "") &&
-            (agenda === 'Tous' || row.dataset.agenda === agenda || agenda === "")
-        row.style.display = showRow ? '' : 'none'
-    })
 }
-function getMeetings() {
-    isRequirements = false;
-    const workingGroup = document.getElementById("workingGroupSelect").value;
-    document.getElementById("meetingSelect").setAttribute('disabled', 'true')
-    document.getElementById("meetingSelect").innerHTML = "<option>Loading...</option>"
-    document.getElementById("getTDocs").setAttribute('disabled', 'true')
-    fetch("/get_meetings", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                "working_group": workingGroup
-            })
-        })
-        .then(resp => resp.json())
-        .then(data => {
-            document.getElementById("meetingSelect").innerHTML = "";
-            for (const [key, value] of Object.entries(data.meetings)) {
-                const option = document.createElement("option");
-                option.textContent = key;
-                option.value = value;
-                document.getElementById('meetingSelect').appendChild(option);
-            }
-            document.getElementById("meetingSelect").removeAttribute("disabled");
-            document.getElementById("getTDocs").removeAttribute("disabled")
-        })
 }
-function generateRequirements() {
-    isRequirements = false;
-    document.getElementById("getReqs").setAttribute('disabled', 'true')
-    document.getElementById("downloadZip").setAttribute('disabled', 'true')
-    document.getElementById("progressText").classList.remove('hidden');
-    document.getElementById("progressText").innerHTML = "Generating requirements, please wait, it may take a while ...";
-    document.getElementById("loadingBar").classList.remove("hidden");
-    const bodyreq = tableToGenBody({
-        "TDoc": "document",
-        "URL": "url"
     });
-    fetch("/generate_requirements", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                "documents": bodyreq
-            })
-        })
-        .then(resp => resp.json())
-        .then(data => {
-            let req_id = 0;
-            document.getElementById("loadingBar").classList.add("hidden");
-            document.getElementById("progressText").classList.add("hidden");
-            document.getElementById("reqStatus").classList.remove("hidden");
-            document.getElementById("getReqs").classList.add("hidden");
-            document.getElementById("searchReq").classList.remove("hidden");
-            document.getElementById("categorizeReq").classList.remove("hidden");
-            document.getElementById("getReqs").removeAttribute('disabled')
-            document.getElementById("downloadZip").removeAttribute('disabled')
-            requirements = [];
-            data.requirements.forEach(obj => {
                 obj.requirements.forEach(req => {
-                    requirements.push({
                         req_id,
                         "document": obj.document,
                         "context": obj.context,
@@ -236,142 +397,180 @@ function generateRequirements() {
                     req_id++;
                 })
             })
-        })
 }
-function queryRequirements() {
-    fetch("/get_reqs_from_query", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                query: document.getElementById("problemDescription").value,
-                requirements
-            })
-        })
-        .then(resp => resp.json())
-        .then(data => {
-            const dataFrame = document.getElementById("dataFrameDiv");
-            const dataFrameHead = dataFrame.querySelector("thead");
-            const dataFrameBody = dataFrame.querySelector("tbody");
-            document.getElementById("buttons").classList.remove("hidden");
-            document.getElementById("searchReq").classList.add("hidden");
-            document.getElementById("categorizeReq").classList.add("hidden");
-            document.getElementById("getReqs").classList.add("hidden");
-            document.getElementById("reqStatus").classList.add("hidden");
-            document.getElementById("downloadZip").classList.remove("hidden");
-            isRequirements = true;
-            dataFrame.classList.remove("hidden");
-            dataFrameHead.innerHTML = `
-                    <th>TDoc</th>
-                    <th>Context</th>
-                    <th>Requirement</th>
-                `;
-            dataFrameBody.innerHTML = "";
-            data.requirements.forEach(req => {
-                const tr = document.createElement("tr");
-                tr.innerHTML = `
-                        <td>${req["document"]}</td>
-                        <td>${req["context"]}</td>
-                        <td>${req["requirement"]}</td>
-                    `;
-                dataFrameBody.appendChild(tr);
-            })
-        })
 }
-function tableToGenBody(columnsMap) {
-    // columnsMap : { "NomHeaderDansTable": "nom_voulu", ... }
-    const dataFrame = document.getElementById("dataFrame");
-    const headers = Array.from(dataFrame.querySelectorAll('thead th')).map(th => th.innerText.trim());
-    // Indices des colonnes à extraire
-    const selectedIndices = headers
-        .map((header, idx) => columnsMap[header] ? idx : -1)
-        .filter(idx => idx !== -1);
-    return Array.from(dataFrame.querySelectorAll('tbody tr'))
-        .filter(row => getComputedStyle(row).display !== 'none')
-        .map(row => {
-            const cells = Array.from(row.querySelectorAll('td'));
-            const obj = {};
-            selectedIndices.forEach(idx => {
-                const originalHeader = headers[idx];
-                const newKey = columnsMap[originalHeader];
-                obj[newKey] = cells[idx].innerText.trim();
-            });
-            return obj;
         });
-}
-function createCard(cardTitle, cardSub, cardText) {
-    return `
-        <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow duration-300">
-            <h3 class="text-lg font-semibold text-gray-800 mb-2">${cardTitle}</h3>
-            <p class="text-sm text-gray-600 mb-3 font-medium">${cardSub}</p>
-            <p class="text-gray-700 text-sm leading-relaxed">${cardText}</p>
-        </div>
-    `;
 }
-function createCarousel(carouselTitle, id, cards) {
-    let cardsHTML = cards.join("\n");
-    return `
-        <div class="mb-8" id="category-${id}">
-            <h2 class="text-xl font-bold text-gray-800 mb-4">${carouselTitle}</h2>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                ${cardsHTML}
             </div>
-        </div>
-    `;
 }
-function categorizeRequirements(max_categories) {
-    isRequirements = false;
-    document.getElementById('categorizeReq').setAttribute('disabled', 'true');
-    document.getElementById('downloadZip').setAttribute('disabled', 'true');
-    document.getElementById('searchReq').setAttribute('disabled', 'true');
-    document.getElementById('progressText').classList.remove('hidden');
-    document.getElementById('loadingBar').classList.remove('hidden');
-    document.getElementById('progressText').textContent = "Grouping requirements by their context ...";
-    fetch("https://game4all-reqroup.hf.space/reqs/categorize_requirements", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-            requirements,
-            "max_n_categories": max_categories
-        })
-    })
-    .then(resp => resp.json())
-    .then(data => {
-        categorizedRequirements = data;
-        document.getElementById('dataFrameForm').classList.add('hidden');
-        document.getElementById('filters').classList.add('hidden');
-        document.getElementById('categorizeReqContainer').classList.remove('hidden');
-        document.getElementById('dataFrameDiv').classList.add('hidden');
-        document.getElementById('buttons').classList.add('hidden');
-        document.getElementById('carousels').innerHTML = '<h1 class="text-xl font-bold mb-8 text-center">Requirements categories list</h1>'
-        data.categories.forEach(cat => {
-            let reqCards = [];
-            cat.requirements.forEach(reqContent => { // Correction ici
-                reqCards.push(createCard(reqContent.document, reqContent.context, reqContent.requirement))
-            });
-            document.getElementById('carousels').innerHTML += createCarousel(cat.title, cat.id, reqCards);
-        })
-    })
 }
-// Variable globale pour tracker les états d'ouverture par catégorie
-let accordionStates = {};
 function createSolutionAccordion(solutionCriticizedHistory, containerId, versionIndex = 0, categoryIndex = null) {
     const container = document.getElementById(containerId);
@@ -611,25 +810,22 @@ function initializeSolutionAccordion(solutionCriticizedHistory, containerId, sta
     // Réinitialiser les états d'accordéon
     accordionStates = {};
     createSolutionAccordion(solutionCriticizedHistory, containerId, startVersion);
-    document.getElementById("criticizeSoluceContainer").classList.remove('hidden')
 }
 async function generateSolutions(){
-    isRequirements = false;
     let response = await fetch('https://game4all-reqroup.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){
-    isRequirements = false;
     let response = await fetch('https://game4all-reqroup.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){
-    isRequirements = false;
     let response = await fetch('https://game4all-reqroup.hf.space/solution/refine_solution', {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(critiques)})
     let responseObj = await response.json()
     await generateCriticisms(responseObj)
@@ -637,6 +833,7 @@ async function refineSolutions(critiques){
 async function workflow(steps = 1){
     let soluce;
     for(let step = 1; step <= steps; step++){
         if(solutionsCriticizedVersions.length == 0){
             soluce = await generateSolutions();
@@ -646,30 +843,38 @@ async function workflow(steps = 1){
             await refineSolutions(prevSoluce)
         }
     }
-    initializeSolutionAccordion(solutionsCriticizedVersions, "criticizeSoluceContainer")
 }
-// Écouteurs d'événements pour les filtres
-document.getElementById('docType').addEventListener('change', filterTable)
-document.getElementById('docStatus').addEventListener('change', filterTable)
-document.getElementById('agendaItem').addEventListener('change', filterTable)
-document.getElementById("workingGroupSelect").addEventListener('change', getMeetings)
-document.getElementById('getTDocs').addEventListener('click', getDataFrame)
-document.getElementById("getReqs").addEventListener("click", generateRequirements);
-document.getElementById('categorizeReq').addEventListener('click', () => categorizeRequirements(8));
-document.getElementById("downloadZip").addEventListener('click', downloadTDocs)
-document.getElementById("queryReq").addEventListener("click", queryRequirements)
-document.getElementById('getSolutionsStepByStep').addEventListener('click', async () => await workflow())
-document.getElementById("getSolutions").addEventListener('click', async () => {
-    let steps = document.getElementById('limitInput').value != '' ? document.getElementById('limitInput').value : 10;
-    await workflow(steps)
-})
-document.getElementById('searchReq').addEventListener('click', () => {
-    document.getElementById('dataFrameForm').classList.add('hidden');
-    document.getElementById('filters').classList.add('hidden');
-    document.getElementById('queryReqForm').classList.remove('hidden');
-    document.getElementById('dataFrameDiv').classList.add('hidden');
-    document.getElementById('buttons').classList.add('hidden');
-})

+// Variables globales
+let requirements = [];
+let accordionStates = {};
+let formattedRequirements = [];
+let categorizedRequirements = [];
 let solutionsCriticizedVersions = [];
 let isRequirements = false;
+// =============================================================================
+// FONCTIONS UTILITAIRES POUR LA GESTION DES ÉLÉMENTS
+// =============================================================================
+/**
+ * Active/désactive des éléments par leurs IDs
+ * @param {string[]} elementIds - Liste des IDs des éléments à activer
+ * @param {boolean} enabled - true pour activer, false pour désactiver
+ */
+function toggleElementsEnabled(elementIds, enabled = true) {
+    elementIds.forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            if (enabled) {
+                element.removeAttribute('disabled');
+            } else {
+                element.setAttribute('disabled', 'true');
+            }
+        }
+    });
+}
+/**
+ * Affiche/masque des conteneurs par leurs IDs
+ * @param {string[]} containerIds - Liste des IDs des conteneurs à afficher
+ * @param {boolean} visible - true pour afficher, false pour masquer
+ */
+function toggleContainersVisibility(containerIds, visible = true) {
+    containerIds.forEach(id => {
+        const container = document.getElementById(id);
+        if (container) {
+            if (visible) {
+                container.classList.remove('hidden');
+            } else {
+                container.classList.add('hidden');
+            }
+        }
     });
+}
+/**
+ * Affiche le loading overlay avec un message personnalisé
+ * @param {string} message - Message à afficher
+ */
+function showLoadingOverlay(message = 'Chargement en cours...') {
+    document.getElementById('progress-text').textContent = message;
+    toggleContainersVisibility(['loading-overlay'], true);
+}
+/**
+ * Masque le loading overlay
+ */
+function hideLoadingOverlay() {
+    toggleContainersVisibility(['loading-overlay'], false);
+}
+/**
+ * Réinitialise un select et ajoute des options
+ * @param {string} selectId - ID du select
+ * @param {Object} options - Objet avec les options {value: text}
+ * @param {string} defaultText - Texte par défaut
+ */
+function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
+    const select = document.getElementById(selectId);
+    if (select) {
+        select.innerHTML = `<option value="">${defaultText}</option>`;
+        Object.entries(options).forEach(([text, value]) => {
+            const option = document.createElement('option');
+            option.value = value;
+            option.textContent = text;
+            select.appendChild(option);
+        });
     }
 }
+/**
+ * Extrait les données du tableau selon un mapping
+ * @param {Object} mapping - Mapping des colonnes {columnName: propertyName}
+ * @returns {Array} Données extraites
+ */
+function extractTableData(mapping) {
+    const tbody = document.querySelector('#data-table tbody');
+    const rows = tbody.querySelectorAll('tr');
+    const data = [];
+    rows.forEach(row => {
+        const checkboxes = row.querySelectorAll('input[type="checkbox"]:checked');
+        if (checkboxes.length > 0) {
+            const rowData = {};
+            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();
+                    }
+                }
+            });
+            data.push(rowData);
+        }
+    });
+    return data;
+}
+// =============================================================================
+// FONCTIONS MÉTIER
+// =============================================================================
+/**
+ * Récupère la liste des meetings pour un working group
+ */
+async function getMeetings() {
+    const workingGroup = document.getElementById('working-group-select').value;
+    if (!workingGroup) return;
+    showLoadingOverlay('Récupération des meetings...');
+    toggleElementsEnabled(['get-meetings-btn'], false);
+    try {
+        const response = await fetch('/get_meetings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ working_group: workingGroup })
+        });
+        const data = await response.json();
+        populateSelect('meeting-select', data.meetings, 'Select a meeting');
+        toggleContainersVisibility(['meeting-container'], true);
+    } catch (error) {
+        console.error('Erreur lors de la récupération des meetings:', error);
+        alert('Erreur lors de la récupération des meetings');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['get-meetings-btn'], true);
+    }
 }
+/**
+ * Récupère la liste des TDocs pour un meeting
+ */
+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...');
+    toggleElementsEnabled(['get-tdocs-btn'], false);
+    try {
+        const response = await fetch('/get_dataframe', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ working_group: workingGroup, meeting: meeting })
+        });
+        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);
+        alert('Erreur lors de la récupération des TDocs');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['get-tdocs-btn'], true);
+    }
 }
+/**
+ * Remplit le tableau de données
+ * @param {Array} data - Données à afficher
+ */
+function populateDataTable(data) {
+    const tbody = document.querySelector('#data-table tbody');
+    tbody.innerHTML = '';
+    data.forEach(row => {
+        const tr = document.createElement('tr');
+        tr.setAttribute('data-type', row.Type || '');
+        tr.setAttribute('data-status', row['TDoc Status'] || '');
+        tr.setAttribute('data-agenda', row['Agenda item description'] || '');
+        tr.innerHTML = `
+            <td class="px-4 py-2">
+                <input type="checkbox" class="row-checkbox">
+            </td>
+            <td class="px-4 py-2" data-column="TDoc">${row.TDoc || ''}</td>
+            <td class="px-4 py-2" data-column="Title">${row.Title || ''}</td>
+            <td class="px-4 py-2" data-column="Type">${row.Type || ''}</td>
+            <td class="px-4 py-2" data-column="Status">${row['TDoc Status'] || ''}</td>
+            <td class="px-4 py-2" data-column="Agenda">${row['Agenda item description'] || ''}</td>
+            <td class="px-4 py-2" data-column="URL">
+                <a href="${row.URL || '#'}" target="_blank" class="text-blue-500 hover:underline">
+                    ${row.URL ? 'Lien' : 'N/A'}
+                </a>
+            </td>
+        `;
+        tbody.appendChild(tr);
+    });
+    setupTableEvents();
+}
+/**
+ * Configure les filtres basés sur les données
+ * @param {Array} data - Données pour extraire les valeurs uniques
+ */
+function setupFilters(data) {
+    const types = [...new Set(data.map(item => item.Type).filter(Boolean))];
+    const statuses = [...new Set(data.map(item => item['TDoc Status']).filter(Boolean))];
+    const agendaItems = [...new Set(data.map(item => item['Agenda item description']).filter(Boolean))];
+    populateSelect('doc-type-filter', Object.fromEntries(types.map(t => [t, t])), 'Tous');
+    populateSelect('doc-status-filter', Object.fromEntries(statuses.map(s => [s, s])), 'Tous');
+    populateSelect('agenda-item-filter', Object.fromEntries(agendaItems.map(a => [a, a])), 'Tous');
+    setupFilterEvents();
 }
+/**
+ * Configure les événements des filtres
+ */
+function setupFilterEvents() {
+    ['doc-type-filter', 'doc-status-filter', 'agenda-item-filter'].forEach(filterId => {
+        document.getElementById(filterId).addEventListener('change', applyFilters);
     });
+}
+/**
+ * Applique les filtres au tableau
+ */
+function applyFilters() {
+    const typeFilter = document.getElementById('doc-type-filter').value;
+    const statusFilter = document.getElementById('doc-status-filter').value;
+    const agendaFilter = document.getElementById('agenda-item-filter').value;
+    const rows = document.querySelectorAll('#data-table tbody tr');
+    rows.forEach(row => {
+        const type = row.getAttribute('data-type');
+        const status = row.getAttribute('data-status');
+        const agenda = row.getAttribute('data-agenda');
+        const typeMatch = !typeFilter || type === typeFilter;
+        const statusMatch = !statusFilter || status === statusFilter;
+        const agendaMatch = !agendaFilter || agenda === agendaFilter;
+        if (typeMatch && statusMatch && agendaMatch) {
+            row.style.display = '';
+        } else {
+            row.style.display = 'none';
+        }
+    });
+}
+/**
+ * Configure les événements du tableau
+ */
+function setupTableEvents() {
+    // Checkbox "Sélectionner tout"
+    document.getElementById('select-all-checkbox').addEventListener('change', function() {
+        const checkboxes = document.querySelectorAll('.row-checkbox');
+        checkboxes.forEach(checkbox => {
+            if(checkbox.parentElement.parentElement.style.display != "none"){checkbox.checked = this.checked;}
+        });
+    });
+}
+/**
+ * Télécharge les TDocs sélectionnés
+ */
+async function downloadTDocs() {
+    showLoadingOverlay('Téléchargement des TDocs en cours...');
+    toggleElementsEnabled(['download-tdocs-btn', 'extract-requirements-btn'], false);
+    try {
+        // Extraire les données du tableau avec TDoc et URL
+        const selectedData = extractTableData({ 'TDoc': 'document', 'URL': 'url' });
+        if (selectedData.length === 0) {
+            alert('Veuillez sélectionner au moins un document');
+            return;
+        }
+        // Transformer au format requis: [{tdoc_id: url}, ...]
+        const documents = selectedData.map(obj => obj.document)
+        const response = await fetch('/download_tdocs', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ documents: documents })
+        });
+        const blob = await response.blob();
+        downloadBlob(blob, generateDownloadFilename());
+    } catch (error) {
+        console.error('Erreur lors du téléchargement:', error);
+        alert('Erreur lors du téléchargement des TDocs');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['download-tdocs-btn', 'extract-requirements-btn'], true);
+    }
+}
+/**
+ * Génère un nom de fichier pour le téléchargement
+ * @returns {string} Nom du fichier
+ */
+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;
+    if (agendaItem && agendaItem !== 'Tous') {
+        filename += `_${agendaItem}`;
+    }
+    if (docStatus && docStatus !== 'Tous') {
+        filename += `_${docStatus}`;
+    }
+    if (docType && docType !== 'Tous') {
+        filename = `${docType}_${filename}`;
+    }
+    if (isRequirements) {
+        filename = `requirements_${filename}`;
+    }
+    return `${filename}.zip`;
+}
+/**
+ * Télécharge un blob
+ * @param {Blob} blob - Blob à télécharger
+ * @param {string} filename - Nom du fichier
+ */
+function downloadBlob(blob, filename) {
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.URL.revokeObjectURL(url);
+}
+/**
+ * Extrait les requirements des documents sélectionnés
+ */
+async function extractRequirements() {
+    const selectedData = extractTableData({ 'TDoc': 'document', 'URL': 'url' });
+    if (selectedData.length === 0) {
+        alert('Veuillez sélectionner au moins un document');
+        return;
+    }
+    showLoadingOverlay('Extraction des requirements en cours...');
+    toggleElementsEnabled(['extract-requirements-btn'], false);
+    try {
+        const response = await fetch('/generate_requirements', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ documents: selectedData })
+        });
+        const data = await response.json();
+        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,
                     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);
+        alert('Erreur lors de l\'extraction des requirements');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['extract-requirements-btn'], true);
+    }
 }
+/**
+ * Affiche les requirements
+ * @param {Array} requirementsData - Données des requirements
+ */
+function displayRequirements(requirementsData) {
+    const container = document.getElementById('requirements-list');
+    container.innerHTML = '';
+    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);
+    });
 }
+/**
+ * Catégorise les requirements
+ */
+async function categorizeRequirements(max_categories) {
+    if (!formattedRequirements || formattedRequirements.length === 0) {
+        alert('Aucun requirement à catégoriser');
+        return;
+    }
+    showLoadingOverlay('Catégorisation des requirements en cours...');
+    toggleElementsEnabled(['categorize-requirements-btn'], false);
+    try {
+        const response = await fetch('https://game4all-reqroup.hf.space/reqs/categorize_requirements', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ requirements: formattedRequirements, "max_n_categories": 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');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['categorize-requirements-btn'], true);
+    }
 }
+/**
+ * Affiche les requirements catégorisés
+ * @param {Array} categorizedData - Données des requirements catégorisés
+ */
+function displayCategorizedRequirements(categorizedData) {
+    const container = document.getElementById('categorized-requirements-list');
+    container.innerHTML = '';
+    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);
+    });
 }
+async function searchRequirements() {
+    const query = document.getElementById('query-input').value.trim();
+    if (!query) {
+        alert('Veuillez entrer une requête de recherche');
+        return;
+    }
+    if (!formattedRequirements || formattedRequirements.length === 0) {
+        alert('Aucun requirement disponible pour la recherche');
+        return;
+    }
+    showLoadingOverlay('Recherche en cours...');
+    toggleElementsEnabled(['search-requirements-btn'], false);
+    try {
+        // Préparer les requirements pour la recherche
+        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');
+    } finally {
+        hideLoadingOverlay();
+        toggleElementsEnabled(['search-requirements-btn'], true);
+    }
 }
+/**
+ * Affiche les résultats de recherche
+ * @param {Array} results - Résultats de la recherche
+ */
+function displaySearchResults(results) {
+    const container = document.getElementById('query-results');
+    container.innerHTML = '';
+    if (results.length === 0) {
+        container.innerHTML = '<p class="text-gray-500">Aucun résultat trouvé pour cette requête.</p>';
+        return;
+    }
+    const resultsDiv = document.createElement('div');
+    resultsDiv.className = 'space-y-3';
+    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);
+    });
+    container.appendChild(resultsDiv);
+}
 function createSolutionAccordion(solutionCriticizedHistory, containerId, versionIndex = 0, categoryIndex = null) {
     const container = document.getElementById(containerId);
     // Réinitialiser les états d'accordéon
     accordionStates = {};
     createSolutionAccordion(solutionCriticizedHistory, containerId, startVersion);
+    document.getElementById(containerId).classList.remove('hidden')
 }
 async function generateSolutions(){
     let response = await fetch('https://game4all-reqroup.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://game4all-reqroup.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://game4all-reqroup.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 refineSolutions(prevSoluce)
         }
     }
+    hideLoadingOverlay();
+    initializeSolutionAccordion(solutionsCriticizedVersions, "solutions-list")
 }
+// =============================================================================
+// 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');
+    });
+    document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
+        workflow();
+    });
+});