MVP V1: Implemented workflow

app.py

@@ -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: {x} | Document: {r.document} | Context: {r.context} | Requirement: {r.requirement}]" for x, r in enumerate(requirements)])
+    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(

index.html

@@ -90,9 +90,48 @@
             </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 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"
+                        disabled
+                        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" 
+                        disabled
+                        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>

schemas.py

@@ -33,6 +33,7 @@ class RequirementsResponse(BaseModel):
 
 # --------------------------------------
 class SingleRequirement(BaseModel):
+    req_id: int
     document: str
     context: str
     requirement: str

static/script.js

@@ -1,6 +1,15 @@
 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"
     });
@@ -23,6 +32,10 @@ function downloadTDocs() {
         })
         .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;
@@ -39,7 +52,7 @@ function downloadTDocs() {
                 "Tous") {
                 dl_name = `${document.getElementById('docType').value}_${dl_name}`
             };
-            if (document.getElementById('queryReqForm').classList.contains('hidden')) {
+            if (isRequirements) {
                 dl_name = `requirements_${dl_name}_${url.split('/').pop()}`
             }
             dl_name = dl_name + ".zip";
@@ -52,27 +65,20 @@ function downloadTDocs() {
 }
 
 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>
-            `
+
+    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: {
@@ -86,9 +92,12 @@ function getDataFrame() {
         .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");
+            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();
@@ -136,9 +145,6 @@ function getDataFrame() {
                 document.getElementById('docStatus').appendChild(option);
             })
         })
-
-    document.getElementById("progressText").classList.add('hidden')
-    document.getElementById("loadingBar").classList.add("hidden")
 }
 
 function filterTable() {
@@ -157,6 +163,7 @@ function filterTable() {
 }
 
 function getMeetings() {
+    isRequirements = false;
     const workingGroup = document.getElementById("workingGroupSelect").value;
     document.getElementById("meetingSelect").setAttribute('disabled', 'true')
     document.getElementById("meetingSelect").innerHTML = "<option>Loading...</option>"
@@ -173,26 +180,29 @@ function getMeetings() {
         .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);
             }
+            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"
     });
-    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",
@@ -205,20 +215,25 @@ function generateRequirements() {
         })
         .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,
                         "requirement": req
                     })
+                    req_id++;
                 })
             })
         })
@@ -246,6 +261,7 @@ function queryRequirements() {
             document.getElementById("getReqs").classList.add("hidden");
             document.getElementById("reqStatus").classList.add("hidden");
             document.getElementById("downloadZip").classList.remove("hidden");
+            isRequirements = true;
 
             dataFrame.classList.remove("hidden");
 
@@ -295,7 +311,7 @@ function tableToGenBody(columnsMap) {
 
 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">
+        <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>
@@ -303,47 +319,330 @@ function createCard(cardTitle, cardSub, cardText) {
     `;
 }
 
-function createCarousel(carouselTitle, cards) {
+
+function createCarousel(carouselTitle, id, cards) {
     let cardsHTML = cards.join("\n");
     return `
-        <div class="mb-8">
+        <div class="mb-8" id="category-${id}">
             <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 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                ${cardsHTML}
             </div>
         </div>
     `;
 }
 
-function categorizeRequirements() {
-    fetch("https://game4all-reqroup.hf.space/categorize_requirements", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                requirements
-            })
+function categorizeRequirements(max_categories) {
+    isRequirements = false;
+    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 => {
-            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);
-            })
+    })
+    .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);
+    if (!container) {
+        console.error(`Container with ID "${containerId}" not found`);
+        return;
+    }
+
+    // Si categoryIndex est spécifié, ne mettre à jour que cette catégorie
+    if (categoryIndex !== null) {
+        updateSingleAccordion(solutionCriticizedHistory, containerId, versionIndex, categoryIndex);
+        return;
+    }
+
+    // Vider le container seulement si on recrée tout
+    container.innerHTML = '';
+
+    // Récupérer les données de la version actuelle directement
+    const currentVersionData = solutionCriticizedHistory[versionIndex];
+
+    // Créer l'accordéon principal
+    const accordion = document.createElement('div');
+    accordion.className = 'space-y-2';
+    accordion.id = 'main-accordion';
+
+    // Afficher seulement les solutions de la version actuelle
+    currentVersionData.critiques.forEach((item, index) => {
+        createSingleAccordionItem(item, index, versionIndex, solutionCriticizedHistory, accordion);
+    });
+
+    // Ajouter l'accordéon au container
+    container.appendChild(accordion);
+}
+
+function createSingleAccordionItem(item, index, versionIndex, solutionCriticizedHistory, accordion) {
+    const solution = item.solution;
+    const criticism = item.criticism;
+
+    // Récupérer le titre de la catégorie
+    const categoryTitle = document.querySelector(`#category-${index} h2`)?.textContent || `Catégorie ${index + 1}`;
+
+    // Container pour chaque solution
+    const solutionCard = document.createElement('div');
+    solutionCard.className = 'border border-gray-200 rounded-md shadow-sm';
+    solutionCard.id = `accordion-item-${index}`;
+
+    // En-tête de l'accordéon avec navigation
+    const header = document.createElement('div');
+    header.className = 'bg-gray-50 px-4 py-2 cursor-pointer hover:bg-gray-100 transition-colors duration-200';
+    
+    const currentVersion = versionIndex + 1;
+    const totalVersions = solutionCriticizedHistory.length;
+    
+    header.innerHTML = `
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <h3 class="text-sm font-semibold text-gray-800">${categoryTitle}</h3>
+                <div class="flex items-center space-x-2 bg-white px-3 py-1 rounded-full border">
+                    <button class="version-btn-left w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === 1 ? 'opacity-50 cursor-not-allowed' : ''}" 
+                            data-solution-index="${index}"
+                            ${currentVersion === 1 ? 'disabled' : ''}>
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                        </svg>
+                    </button>
+                    <span class="text-xs font-medium text-gray-600 min-w-[60px] text-center version-indicator">Version ${currentVersion}</span>
+                    <button class="version-btn-right w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === totalVersions ? 'opacity-50 cursor-not-allowed' : ''}" 
+                            data-solution-index="${index}"
+                            ${currentVersion === totalVersions ? 'disabled' : ''}>
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <svg class="w-4 h-4 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+        </div>
+    `;
+
+    // Contenu de l'accordéon
+    const content = document.createElement('div');
+    content.className = `accordion-content px-4 py-3 space-y-3`;
+    content.id = `content-${index}`;
+
+    // Vérifier l'état d'ouverture précédent
+    const isOpen = accordionStates[index] || false;
+    if (!isOpen) {
+        content.classList.add('hidden');
+    } else {
+        header.querySelector('.accordion-icon').style.transform = 'rotate(180deg)';
     }
 
+    // Section Problem Description
+    const problemSection = document.createElement('div');
+    problemSection.className = 'bg-red-50 border-l-2 border-red-400 p-3 rounded-r-md';
+    problemSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-red-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+            </svg>
+            Problem Description
+        </h4>
+        <p class="text-xs text-gray-700 leading-relaxed">${solution['Problem Description'] || 'Aucune description du problème disponible.'}</p>
+    `;
+
+    // Section Solution Description
+    const solutionSection = document.createElement('div');
+    solutionSection.className = 'bg-green-50 border-l-2 border-green-400 p-3 rounded-r-md';
+    solutionSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-green-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+            Solution Description
+        </h4>
+        <p class="text-xs text-gray-700 leading-relaxed">${solution['Solution Description'] || 'Aucune description de solution disponible.'}</p>
+    `;
+
+    // Section Critique
+    const critiqueSection = document.createElement('div');
+    critiqueSection.className = 'bg-yellow-50 border-l-2 border-yellow-400 p-3 rounded-r-md';
+    
+    let critiqueContent = `
+        <h4 class="text-sm font-semibold text-yellow-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+            </svg>
+            Critique & Analysis
+        </h4>
+    `;
+
+    // Sous-sections de critique
+    if (criticism.technical_challenges && criticism.technical_challenges.length > 0) {
+        critiqueContent += `
+            <div class="mb-2">
+                <h5 class="text-xs font-semibold text-yellow-700 mb-1">Technical Challenges:</h5>
+                <ul class="list-disc list-inside space-y-0.5 text-xs text-gray-700 ml-3">
+                    ${criticism.technical_challenges.map(challenge => `<li>${challenge}</li>`).join('')}
+                </ul>
+            </div>
+        `;
+    }
+
+    if (criticism.weaknesses && criticism.weaknesses.length > 0) {
+        critiqueContent += `
+            <div class="mb-2">
+                <h5 class="text-xs font-semibold text-yellow-700 mb-1">Weaknesses:</h5>
+                <ul class="list-disc list-inside space-y-0.5 text-xs text-gray-700 ml-3">
+                    ${criticism.weaknesses.map(weakness => `<li>${weakness}</li>`).join('')}
+                </ul>
+            </div>
+        `;
+    }
+
+    if (criticism.limitations && criticism.limitations.length > 0) {
+        critiqueContent += `
+            <div class="mb-2">
+                <h5 class="text-xs font-semibent text-yellow-700 mb-1">Limitations:</h5>
+                <ul class="list-disc list-inside space-y-0.5 text-xs text-gray-700 ml-3">
+                    ${criticism.limitations.map(limitation => `<li>${limitation}</li>`).join('')}
+                </ul>
+            </div>
+        `;
+    }
+
+    critiqueSection.innerHTML = critiqueContent;
+
+    // Ajouter les sections au contenu
+    content.appendChild(problemSection);
+    content.appendChild(solutionSection);
+    content.appendChild(critiqueSection);
+
+    // Événement de clic pour l'accordéon (exclure les boutons de navigation)
+    header.addEventListener('click', (e) => {
+        // Ne pas déclencher l'accordéon si on clique sur les boutons de navigation
+        if (e.target.closest('.version-btn-left') || e.target.closest('.version-btn-right')) {
+            return;
+        }
+        
+        const icon = header.querySelector('.accordion-icon');
+        const isCurrentlyOpen = !content.classList.contains('hidden');
+
+        if (isCurrentlyOpen) {
+            content.classList.add('hidden');
+            icon.style.transform = 'rotate(0deg)';
+            accordionStates[index] = false;
+        } else {
+            content.classList.remove('hidden');
+            icon.style.transform = 'rotate(180deg)';
+            accordionStates[index] = true;
+        }
+    });
+
+    // Événements de navigation pour cette catégorie spécifique
+    header.querySelector('.version-btn-left')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        updateSingleAccordion(solutionCriticizedHistory, 'accordion-container', versionIndex - 1, index);
+    });
+
+    header.querySelector('.version-btn-right')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        updateSingleAccordion(solutionCriticizedHistory, 'accordion-container', versionIndex + 1, index);
+    });
+
+    // Assembler la carte de solution
+    solutionCard.appendChild(header);
+    solutionCard.appendChild(content);
+    accordion.appendChild(solutionCard);
+}
+
+function updateSingleAccordion(solutionCriticizedHistory, containerId, newVersionIndex, categoryIndex) {
+    // Vérifier les limites de version
+    if (newVersionIndex < 0 || newVersionIndex >= solutionCriticizedHistory.length) {
+        return;
+    }
+
+    const accordionItem = document.getElementById(`accordion-item-${categoryIndex}`);
+    if (!accordionItem) return;
+
+    const newData = solutionCriticizedHistory[newVersionIndex];
+    const newItem = newData.critiques[categoryIndex];
+    
+    if (!newItem) return;
+
+    // Mettre à jour le contenu de cette catégorie spécifique
+    const tempContainer = document.createElement('div');
+    createSingleAccordionItem(newItem, categoryIndex, newVersionIndex, solutionCriticizedHistory, tempContainer);
+    
+    // Remplacer l'ancien item par le nouveau
+    accordionItem.parentNode.replaceChild(tempContainer.firstChild, accordionItem);
+}
+
+// Fonction d'initialisation simplifiée
+function initializeSolutionAccordion(solutionCriticizedHistory, containerId, startVersion = 0) {
+    // 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)
+}
+
+async function workflow(steps = 1){
+    let soluce;
+    for(let step; step <= steps; step++){
+        if(solutionsCriticizedVersions.length == 0){
+            soluce = await generateSolutions();
+            await generateCriticisms(soluce)
+        } else {
+            let prevSoluce = solutionsCriticizedVersions[solutionsCriticizedVersions.length - 1];
+            await refineSolutions(prevSoluce)
+        }
+    }
+    initializeSolutionAccordion(solutionsCriticizedVersions, "criticizeSoluceContainer")
+}
+
+
 // Écouteurs d'événements pour les filtres
 
 document.getElementById('docType').addEventListener('change', filterTable)
@@ -352,9 +651,14 @@ 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('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');