Fix merge conflict

index.html

@@ -13,10 +13,6 @@
     <!-- Loading Overlay -->
     <div id="loading-overlay" class="fixed inset-0 bg-black/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> -->
-
             <span class="loading loading-spinner loading-xl"></span>
             <p id="progress-text" class="text-gray-700">Chargement en cours...</p>
         </div>
@@ -247,8 +243,8 @@
         <div id="solutions-tab-contents" class="hidden pt-10">
             <!--Header de catégorisation des requirements-->
             <div class="w-full mx-auto mt-4 p-4 bg-base-100 rounded-box shadow-lg border border-base-200">
+                <!-- Séléction du nb de catégories / mode auto-->
                 <div class="flex flex-wrap justify-begin items-center gap-6">
-
                     <!-- Number input -->
                     <div class="form-control flex flex-col items-center justify-center">
                         <label class="label" for="category-count">
@@ -262,7 +258,7 @@
                         <label class="label">
                             <span class="label-text text-base-content">Number of categories</span>
                         </label>
-                        <input type="checkbox" class="toggle toggle-primary" id="auto-detect-toggle" />
+                        <input type="checkbox" class="toggle toggle-primary" id="auto-detect-toggle" checked="true" />
                         <div class="text-xs mt-1 text-base-content">Manual | Auto detect</div>
                     </div>
 
@@ -271,6 +267,15 @@
                         Categorize
                     </button>
                 </div>
+                <div class="flex flex-wrap justify-end items-center gap-6">
+                    <div class="tooltip" data-tip="Use Insight Finder's API to generate solutions">
+                        <label class="label">
+                            <span class="label-text text-base-content">Use insight finder solver</span>
+                        </label>
+                        <input type="checkbox" class="toggle toggle-primary" id="use-insight-finder-solver"
+                            checked="false" />
+                    </div>
+                </div>
             </div>
             <div id="categorized-requirements-container pt-10" class="mb-6">
                 <div class="flex mb-4 pt-10">
@@ -326,6 +331,7 @@
         </div>
 
         <script src="/static/sse.js"></script>
+        <script src="/static/ui-utils.js"></script>
         <script src="/static/script.js"></script>
 </body>
 

static/script.js

@@ -17,277 +17,6 @@ let lastSelectedRequirementsChecksum = null;
 // les requirements ont ils été extraits au moins une fois ?
 let hasRequirementsExtracted = 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 = 'Loading...') {
-    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 = 'Select...') {
-    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);
-        });
-    }
-}
-
-function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet) {
-    const container = document.getElementById(optionsContainerId);
-    container.innerHTML = '';
-    selectionSet.clear(); // reset all
-
-    // Ajoute chaque option
-    options.forEach(option => {
-        const safeId = `${filterType}-${encodeURIComponent(option).replace(/[%\s]/g, '_')}`;
-        const label = document.createElement('label');
-        label.className = "flex items-center gap-2 cursor-pointer py-1";
-        label.innerHTML = `
-            <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
-            <span>${option}</span>
-        `;
-        label.querySelector('input').addEventListener('change', function () {
-            if (this.checked) {
-                selectionSet.add(this.value);
-            } else {
-                selectionSet.delete(this.value);
-            }
-            // Gestion du label "Tous"
-            updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
-            // Gestion du "Tous" global
-            const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
-            if (allBox && allBox.checked) allBox.checked = false;
-            // Si plus rien n'est coché, recoche "Tous"
-            if (selectionSet.size === 0 && allBox) allBox.checked = true;
-            applyFilters();
-        });
-        container.appendChild(label);
-    });
-
-    // Réinitialise le label
-    updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
-
-    // Gestion de "Tous"
-    const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
-    if (allBox) {
-        allBox.addEventListener('change', function () {
-            if (this.checked) {
-                // Décoche tout le reste
-                selectionSet.clear();
-                container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
-                this.checked = true; // reste coché
-                updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
-                applyFilters();
-            }
-        });
-    }
-}
-
-function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
-    const label = document.getElementById(labelId);
-    if (!set.size) {
-        label.textContent = type.charAt(0).toUpperCase() + type.slice(1) + " (All)";
-    } else if (set.size === 1) {
-        label.textContent = [...set][0];
-    } else {
-        label.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} (${set.size}/${totalCount})`;
-    }
-}
-
-function updateSelectedFilters(filterType, value, isChecked) {
-    if (isChecked) {
-        selectedFilters[filterType].add(value);
-    } else {
-        selectedFilters[filterType].delete(value);
-    }
-}
-
-function populateDaisyDropdown(menuId, options, labelId, onSelect) {
-    const menu = document.getElementById(menuId);
-    menu.innerHTML = '';
-    // Option "Tous"
-    const liAll = document.createElement('li');
-    liAll.innerHTML = `<a data-value="">All</a>`;
-    liAll.querySelector('a').onclick = e => {
-        e.preventDefault();
-        document.getElementById(labelId).textContent = "Type";
-        onSelect("");
-    };
-    menu.appendChild(liAll);
-
-    // Ajoute chaque option
-    options.forEach(opt => {
-        const li = document.createElement('li');
-        li.innerHTML = `<a data-value="${opt}">${opt}</a>`;
-        li.querySelector('a').onclick = e => {
-            e.preventDefault();
-            document.getElementById(labelId).textContent = opt;
-            onSelect(opt);
-        };
-        menu.appendChild(li);
-    });
-}
-
-function updateFilterLabel(filterType) {
-    const selectedCount = selectedFilters[filterType].size;
-    const labelElement = document.getElementById(`${filterType}-filter-label`);
-
-    if (selectedCount === 0) {
-        labelElement.textContent = `${filterType} (All)`;
-    } else {
-        labelElement.textContent = `${filterType} (${selectedCount} selected)`;
-    }
-}
-
-/**
- * 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;
-}
-
-const TABS = {
-    'doc-table-tab': 'doc-table-tab-contents',
-    'requirements-tab': 'requirements-tab-contents',
-    'solutions-tab': 'solutions-tab-contents',
-    'query-tab': 'query-tab-contents'
-};
-
-/**
- * Bascule l'affichage sur le nouveau tab
- * @param {*} newTab 
- */
-function switchTab(newTab) {
-    // Remove active tab style from all tabs
-    Object.keys(TABS).forEach(tabId => {
-        const tabElement = document.getElementById(tabId);
-        if (tabElement) {
-            tabElement.classList.remove("tab-active");
-        }
-    });
-
-    // Hide all tab contents
-    Object.values(TABS).forEach(contentId => {
-        const contentElement = document.getElementById(contentId);
-        if (contentElement) {
-            contentElement.classList.add("hidden");
-        }
-    });
-
-    // Activate the new tab if it exists in the mapping
-    if (newTab in TABS) {
-        const newTabElement = document.getElementById(newTab);
-        const newContentElement = document.getElementById(TABS[newTab]);
-
-        if (newTabElement) newTabElement.classList.add("tab-active");
-        if (newContentElement) newContentElement.classList.remove("hidden");
-    }
-}
-
-/**
- * Bascule l'affichage vers la tab uniquement si les requirements sont
- */
-function enableTabSwitching() {
-    Object.keys(TABS).forEach(tabId => {
-        const tab = document.getElementById(tabId);
-        if (tab)
-            tab.classList.remove("tab-disabled");
-    })
-}
-
-
-/**
- * Change l'état d'activation du number box de choix de nb de catégories. 
- */
-function debounceAutoCategoryCount(state) {
-    document.getElementById('category-count').disabled = state;
-}
-
-
 // =============================================================================
 // FONCTIONS MÉTIER
 // =============================================================================
@@ -348,8 +77,6 @@ async function getTDocs() {
             'filters-container',
             'action-buttons-container',
             'doc-table-tab-contents',
-            // 'data-table-container',
-            // 'data-table-info-container'
         ], true);
 
         hasRequirementsExtracted = false;
@@ -1298,30 +1025,33 @@ function clearAllSolutions() {
     document.querySelectorAll('.solution-accordion').forEach(a => a.remove());
 }
 
-async function generateSolutions(selected_categories, user_constraints) {
+async function generateSolutionsV1(selected_categories, user_constraints = null, useIFSolver = false) {
     console.log(selected_categories);
 
     let input_req = structuredClone(selected_categories);
     input_req.user_constraints = user_constraints;
+    console.log(useIFSolver);
+
+    const base_url = useIFSolver ? "https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_if" : "https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini/v2"
 
-    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini/v2', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(input_req) })
+    let response = await fetch(base_url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(input_req) })
     let responseObj = await response.json()
     return responseObj;
 }
 
-async function generateCriticisms(solutions) {
+async function generateCriticismsV1(solutions) {
     let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/criticize_solution', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(solutions) })
     let responseObj = await response.json()
     solutionsCriticizedVersions.push(responseObj)
 }
 
-async function refineSolutions(critiques) {
+async function refineSolutionsV1(critiques) {
     let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/refine_solutions', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(critiques) })
     let responseObj = await response.json()
-    await generateCriticisms(responseObj)
+    await generateCriticismsV1(responseObj)
 }
 
-async function workflow(steps = 1) {
+async function workflow(steps = 1, useIFSolver = false) {
     let soluce;
     showLoadingOverlay('Génération des solutions & critiques ....');
 
@@ -1341,11 +1071,11 @@ async function workflow(steps = 1) {
         }
 
         if (solutionsCriticizedVersions.length == 0) {
-            soluce = await generateSolutions(selected_requirements, user_constraints ? user_constraints : null);
-            await generateCriticisms(soluce)
+            soluce = await generateSolutionsV1(selected_requirements, user_constraints ? user_constraints : null, useIFSolver);
+            await generateCriticismsV1(soluce)
         } else {
             let prevSoluce = solutionsCriticizedVersions[solutionsCriticizedVersions.length - 1];
-            await refineSolutions(prevSoluce)
+            await refineSolutionsV1(prevSoluce)
         }
     }
     hideLoadingOverlay();
@@ -1377,10 +1107,10 @@ document.addEventListener('DOMContentLoaded', function () {
     // Événements pour les boutons de solutions (à implémenter plus tard)
     document.getElementById('get-solutions-btn').addEventListener('click', () => {
         const n_steps = document.getElementById('solution-gen-nsteps').value;
-        workflow(n_steps);
+        workflow(n_steps, document.getElementById('use-insight-finder-solver').checked);
     });
     document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
-        workflow();
+        workflow(1, document.getElementById('use-insight-finder-solver').checked);
     });
 });
 

static/ui-utils.js

@@ -0,0 +1,270 @@
+// =============================================================================
+// 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);
+        });
+    }
+}
+
+function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet) {
+    const container = document.getElementById(optionsContainerId);
+    container.innerHTML = '';
+    selectionSet.clear(); // reset all
+
+    // Ajoute chaque option
+    options.forEach(option => {
+        const safeId = `${filterType}-${encodeURIComponent(option).replace(/[%\s]/g, '_')}`;
+        const label = document.createElement('label');
+        label.className = "flex items-center gap-2 cursor-pointer py-1";
+        label.innerHTML = `
+            <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
+            <span>${option}</span>
+        `;
+        label.querySelector('input').addEventListener('change', function () {
+            if (this.checked) {
+                selectionSet.add(this.value);
+            } else {
+                selectionSet.delete(this.value);
+            }
+            // Gestion du label "Tous"
+            updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+            // Gestion du "Tous" global
+            const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
+            if (allBox && allBox.checked) allBox.checked = false;
+            // Si plus rien n'est coché, recoche "Tous"
+            if (selectionSet.size === 0 && allBox) allBox.checked = true;
+            applyFilters();
+        });
+        container.appendChild(label);
+    });
+
+    // Réinitialise le label
+    updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+
+    // Gestion de "Tous"
+    const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
+    if (allBox) {
+        allBox.addEventListener('change', function () {
+            if (this.checked) {
+                // Décoche tout le reste
+                selectionSet.clear();
+                container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+                this.checked = true; // reste coché
+                updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+                applyFilters();
+            }
+        });
+    }
+}
+
+function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
+    const label = document.getElementById(labelId);
+    if (!set.size) {
+        label.textContent = type.charAt(0).toUpperCase() + type.slice(1) + " (Tous)";
+    } else if (set.size === 1) {
+        label.textContent = [...set][0];
+    } else {
+        label.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} (${set.size}/${totalCount})`;
+    }
+}
+
+function updateSelectedFilters(filterType, value, isChecked) {
+    if (isChecked) {
+        selectedFilters[filterType].add(value);
+    } else {
+        selectedFilters[filterType].delete(value);
+    }
+}
+
+function populateDaisyDropdown(menuId, options, labelId, onSelect) {
+    const menu = document.getElementById(menuId);
+    menu.innerHTML = '';
+    // Option "Tous"
+    const liAll = document.createElement('li');
+    liAll.innerHTML = `<a data-value="">Tous</a>`;
+    liAll.querySelector('a').onclick = e => {
+        e.preventDefault();
+        document.getElementById(labelId).textContent = "Type";
+        onSelect("");
+    };
+    menu.appendChild(liAll);
+
+    // Ajoute chaque option
+    options.forEach(opt => {
+        const li = document.createElement('li');
+        li.innerHTML = `<a data-value="${opt}">${opt}</a>`;
+        li.querySelector('a').onclick = e => {
+            e.preventDefault();
+            document.getElementById(labelId).textContent = opt;
+            onSelect(opt);
+        };
+        menu.appendChild(li);
+    });
+}
+
+function updateFilterLabel(filterType) {
+    const selectedCount = selectedFilters[filterType].size;
+    const labelElement = document.getElementById(`${filterType}-filter-label`);
+
+    if (selectedCount === 0) {
+        labelElement.textContent = `${filterType} (Tous)`;
+    } else {
+        labelElement.textContent = `${filterType} (${selectedCount} sélectionné${selectedCount > 1 ? 's' : ''})`;
+    }
+}
+
+/**
+ * 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;
+}
+
+const TABS = {
+    'doc-table-tab': 'doc-table-tab-contents',
+    'requirements-tab': 'requirements-tab-contents',
+    'solutions-tab': 'solutions-tab-contents',
+    'query-tab': 'query-tab-contents'
+};
+
+/**
+ * Bascule l'affichage sur le nouveau tab
+ * @param {*} newTab 
+ */
+function switchTab(newTab) {
+    // Remove active tab style from all tabs
+    Object.keys(TABS).forEach(tabId => {
+        const tabElement = document.getElementById(tabId);
+        if (tabElement) {
+            tabElement.classList.remove("tab-active");
+        }
+    });
+
+    // Hide all tab contents
+    Object.values(TABS).forEach(contentId => {
+        const contentElement = document.getElementById(contentId);
+        if (contentElement) {
+            contentElement.classList.add("hidden");
+        }
+    });
+
+    // Activate the new tab if it exists in the mapping
+    if (newTab in TABS) {
+        const newTabElement = document.getElementById(newTab);
+        const newContentElement = document.getElementById(TABS[newTab]);
+
+        if (newTabElement) newTabElement.classList.add("tab-active");
+        if (newContentElement) newContentElement.classList.remove("hidden");
+    }
+}
+
+/**
+ * Bascule l'affichage vers la tab uniquement si les requirements sont
+ */
+function enableTabSwitching() {
+    Object.keys(TABS).forEach(tabId => {
+        const tab = document.getElementById(tabId);
+        if (tab)
+            tab.classList.remove("tab-disabled");
+    })
+}
+
+
+/**
+ * Change l'état d'activation du number box de choix de nb de catégories. 
+ */
+function debounceAutoCategoryCount(state) {
+    document.getElementById('category-count').disabled = state;
+}
+