Separate JS and HTML + add Categorize reqs

app.py

@@ -2,6 +2,7 @@ from concurrent.futures import ThreadPoolExecutor, as_completed
 import json
 import traceback
 from fastapi import FastAPI, BackgroundTasks, HTTPException
+from fastapi.staticfiles import StaticFiles
 from schemas import *
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse, StreamingResponse
@@ -38,6 +39,7 @@ warnings.filterwarnings("ignore")
 from bs4 import BeautifulSoup
 
 app = FastAPI(title="Requirements Extractor")
+app.mount("/static", StaticFiles(directory="static"), name="static")
 app.add_middleware(CORSMiddleware, allow_credentials=True, allow_headers=["*"], allow_methods=["*"], allow_origins=["*"])
 llm_router = Router(model_list=[{"model_name": "gemini-v1", "litellm_params": {"model": "gemini/gemini-2.0-flash", "api_key": os.environ.get("GEMINI"), "max_retries": 10, "rpm": 15}},
                                 {"model_name": "gemini-v2", "litellm_params": {"model": "gemini/gemini-2.5-flash", "api_key": os.environ.get("GEMINI"), "max_retries": 10, "rpm": 10}}]
@@ -188,7 +190,9 @@ def get_meetings(req: MeetingsRequest):
     working_group = req.working_group
     tsg = re.sub(r"\d+", "", working_group)
     wg_number = re.search(r"\d", working_group).group(0)
+    print(tsg, wg_number)
     url = "https://www.3gpp.org/ftp/tsg_" + tsg
+    print(url)
     resp = requests.get(url, verify=False)
     soup = BeautifulSoup(resp.text, "html.parser")
     meeting_folders = []
@@ -196,17 +200,18 @@ def get_meetings(req: MeetingsRequest):
     wg_folders = [item.get_text() for item in soup.select("tr td a")]
     selected_folder = None
     for folder in wg_folders:
-        if str(wg_number) in folder:
+        if "wg" + str(wg_number) in folder.lower():
             selected_folder = folder
             break
 
     url += "/" + selected_folder
+    print(url)
 
     if selected_folder:
         resp = requests.get(url, verify=False)
         soup = BeautifulSoup(resp.text, "html.parser")
-        meeting_folders = [item.get_text() for item in soup.select("tr td a") if item.get_text().startswith("TSG")]
-        all_meetings = [working_group + "#" + meeting.split("_", 1)[1].replace("_", " ").replace("-", " ") for meeting in meeting_folders]
+        meeting_folders = [item.get_text() for item in soup.select("tr td a") if item.get_text().startswith("TSG") or (item.get_text().startswith("CT") and "-" in item.get_text())]
+        all_meetings = [working_group + "#" + meeting.split("_", 1)[1].replace("_", " ").replace("-", " ") if meeting.startswith('TSG') else meeting.replace("-","#") for meeting in meeting_folders]
     
     return MeetingsResponse(meetings=dict(zip(all_meetings, meeting_folders)))
 
@@ -304,7 +309,7 @@ async def gen_reqs(req: RequirementsRequest, background_tasks: BackgroundTasks):
             async with limiter_mapping[model_used]:
                 resp_ai = await llm_router.acompletion(
                     model=model_used,
-                    messages=[{"role":"user","content": 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."}],
+                    messages=[{"role":"user","content": 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"}],
                     response_format=RequirementsResponse
                 )
             return RequirementsResponse.model_validate_json(resp_ai.choices[0].message.content).requirements
@@ -315,7 +320,7 @@ async def gen_reqs(req: RequirementsRequest, background_tasks: BackgroundTasks):
                     async with limiter_mapping[model_used]:
                         resp_ai = await llm_router.acompletion(
                             model=model_used,
-                            messages=[{"role":"user","content": 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."}],
+                            messages=[{"role":"user","content": 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"}],
                             response_format=RequirementsResponse
                         )
                     return RequirementsResponse.model_validate_json(resp_ai.choices[0].message.content).requirements

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="fr" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,13 +8,14 @@
     <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 id="dataFrameForm">
+        <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 disabled="" selected="" value="">Working Group</option>
                     <option>SA1</option>
                     <option>SA2</option>
                     <option>SA3</option>
@@ -27,8 +29,8 @@
                     <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 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>
@@ -36,17 +38,17 @@
         <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 disabled="" selected="" value="">Type</option>
                     <option>Tous</option>
                 </select>
 
                 <select class="select select-bordered" id="docStatus">
-                    <option disabled selected value="">Status</option>
+                    <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 disabled="" selected="" value="">Agenda Item</option>
                     <option>Tous</option>
                 </select>
             </div>
@@ -55,8 +57,10 @@
         <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">
+                    <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>
@@ -77,7 +81,7 @@
                         <th>Title</th>
                         <th>Type</th>
                         <th>Status</th>
-                        <th>Agenda Item N°</th>
+                        <th>Agenda Item</th>
                         <th>URL</th>
                     </tr>
                 </thead>
@@ -86,6 +90,11 @@
             </table>
         </div>
 
+        <div class="w-full max-w-[100%] mx-auto p-6 hidden" id="carousels">
+            <h1 class="text-xl font-bold mb-8 text-center">Liste des catégories de requirements</h1>
+            
+        </div>
+
         <center>
             <div id="buttons">
                 <p id="reqStatus" class="mt-6 hidden">Requirements extracted</p>
@@ -99,254 +108,6 @@
         </center>
     </div>
 
-    <script>
-        let requirements;
-
-        function downloadTDocs(){
-            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 => {
-                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 (document.getElementById('queryReqForm').classList.contains('hidden')){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(){
-            document.getElementById("loadingBar").classList.remove("hidden");
-            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");
-            document.getElementById("progressText").classList.remove('hidden')
-            document.getElementById("progressText").innerHTML = "Loading ...";
-            document.getElementById("loadingBar").classList.remove("hidden")
-            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("loadingBar").classList.add("hidden");
-                document.getElementById("downloadZip").classList.remove("hidden");
-                document.getElementById("getReqs").classList.remove("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);
-                })
-            })
-
-            document.getElementById("progressText").classList.add('hidden')
-            document.getElementById("loadingBar").classList.add("hidden")
-        }
-
-        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(){
-            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 = "";
-                document.getElementById("meetingSelect").removeAttribute("disabled");
-                document.getElementById("getTDocs").removeAttribute("disabled")
-                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);
-                }
-            })
-        }
-
-        function generateRequirements(){
-            const bodyreq = tableToGenBody({"TDoc": "document", "URL": "url"});
-            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");
-
-            fetch("/generate_requirements", {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({"documents": bodyreq})})
-            .then(resp => resp.json())
-            .then(data => {
-                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");
-                requirements = [];
-                data.requirements.forEach(obj => {
-                    obj.requirements.forEach(req => {
-                        requirements.push({"document": obj.document, "context": obj.context, "requirement": req})
-                    })
-                })
-            })
-        }
-
-        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");
-
-                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;
-                });
-        }
-
-        // É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("downloadZip").addEventListener('click', downloadTDocs)
-        document.getElementById("queryReq").addEventListener("click", queryRequirements)
-        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');
-        })
-    </script>
+    <script src="/static/script.js"></script>
 </body>
 </html>

static/script.js

@@ -0,0 +1,364 @@
+let requirements;
+
+function downloadTDocs() {
+    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 => {
+            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 (document.getElementById('queryReqForm').classList.contains('hidden')) {
+                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() {
+    document.getElementById("loadingBar").classList.remove("hidden");
+    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");
+    document.getElementById("progressText").classList.remove('hidden')
+    document.getElementById("progressText").innerHTML = "Loading ...";
+    document.getElementById("loadingBar").classList.remove("hidden")
+    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("loadingBar").classList.add("hidden");
+            document.getElementById("downloadZip").classList.remove("hidden");
+            document.getElementById("getReqs").classList.remove("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);
+            })
+        })
+
+    document.getElementById("progressText").classList.add('hidden')
+    document.getElementById("loadingBar").classList.add("hidden")
+}
+
+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() {
+    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 = "";
+            document.getElementById("meetingSelect").removeAttribute("disabled");
+            document.getElementById("getTDocs").removeAttribute("disabled")
+            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);
+            }
+        })
+}
+
+function generateRequirements() {
+    const bodyreq = tableToGenBody({
+        "TDoc": "document",
+        "URL": "url"
+    });
+    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");
+
+    fetch("/generate_requirements", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                "documents": bodyreq
+            })
+        })
+        .then(resp => resp.json())
+        .then(data => {
+            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");
+            requirements = [];
+            data.requirements.forEach(obj => {
+                obj.requirements.forEach(req => {
+                    requirements.push({
+                        "document": obj.document,
+                        "context": obj.context,
+                        "requirement": req
+                    })
+                })
+            })
+        })
+}
+
+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");
+
+            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="flex-none w-80 bg-white rounded-lg shadow-md p-6 mr-4 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, cards) {
+    let cardsHTML = cards.join("\n");
+    return `
+        <div class="mb-8">
+            <h2 class="text-xl font-bold text-gray-800 mb-4">${carouselTitle}</h2>
+            <div class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
+                <div class="flex pb-4">
+                    ${cardsHTML}
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+function categorizeRequirements() {
+    fetch("https://game4all-reqroup.hf.space/categorize_requirements", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                requirements
+            })
+        })
+        .then(resp => resp.json())
+        .then(data => {
+            document.getElementById('dataFrameForm').classList.add('hidden');
+            document.getElementById('filters').classList.add('hidden');
+            document.getElementById('carousels').classList.remove('hidden');
+            document.getElementById('dataFrameDiv').classList.add('hidden');
+            document.getElementById('buttons').classList.add('hidden');
+            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, reqCards);
+            })
+        })
+    }
+
+// É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);
+document.getElementById("downloadZip").addEventListener('click', downloadTDocs)
+document.getElementById("queryReq").addEventListener("click", queryRequirements)
+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');
+})