Update static/js/script.js

static/js/script.js

@@ -945,6 +945,14 @@ function showRefinedProblems(result) {
     tabs.innerHTML = '';
     content.innerHTML = '';
     
+    // Collect problem descriptions for evaluation
+    const problemDescriptions = [];
+    for (const key in result) {
+        if (result.hasOwnProperty(key)) {
+            problemDescriptions.push(result[key].description);
+        }
+    }
+    
     // Add tabs and content for each refined problem
     let isFirst = true;
     for (const key in result) {
@@ -955,7 +963,20 @@ function showRefinedProblems(result) {
             const tab = document.createElement('div');
             tab.className = `refined-problem-tab ${isFirst ? 'active' : ''}`;
             tab.dataset.target = key;
-            tab.textContent = `Option ${key.split('_')[1]}`;
+            tab.dataset.problemIndex = problemDescriptions.indexOf(problem.description);
+            
+            // Create tab content with placeholder for score
+            const tabTextSpan = document.createElement('span');
+            tabTextSpan.textContent = `Option ${key.split('_')[1]}`;
+            
+            // Create score element that will be updated later
+            const tabScoreSpan = document.createElement('span');
+            tabScoreSpan.className = 'tab-score-indicator';
+            tabScoreSpan.innerHTML = `<div class="tab-loading-spinner"></div>`;
+            
+            tab.appendChild(tabTextSpan);
+            tab.appendChild(tabScoreSpan);
+            
             tab.onclick = function() {
                 document.querySelectorAll('.refined-problem-tab').forEach(t => t.classList.remove('active'));
                 document.querySelectorAll('.refined-problem').forEach(p => p.classList.remove('active'));
@@ -977,6 +998,18 @@ function showRefinedProblems(result) {
             description.className = 'refined-problem-description';
             description.textContent = problem.description;
             
+            // Create score display with loading spinner initially
+            const scoreContainer = document.createElement('div');
+            scoreContainer.className = 'problem-score-container';
+            scoreContainer.innerHTML = `
+                <div class="problem-score-loading">
+                    <div class="loading-spinner-small"></div>
+                    <span>Evaluating quality...</span>
+                </div>
+                <div class="problem-score" style="display: none;"></div>
+            `;
+            scoreContainer.dataset.problemIndex = problemDescriptions.indexOf(problem.description);
+            
             const applyButton = document.createElement('button');
             applyButton.className = 'apply-problem-btn';
             applyButton.textContent = 'Apply This Problem';
@@ -986,6 +1019,7 @@ function showRefinedProblems(result) {
             
             problemDiv.appendChild(title);
             problemDiv.appendChild(description);
+            problemDiv.appendChild(scoreContainer);
             problemDiv.appendChild(applyButton);
             
             content.appendChild(problemDiv);
@@ -999,6 +1033,77 @@ function showRefinedProblems(result) {
     
     // Scroll to the container
     refinedContainer.scrollIntoView({ behavior: 'smooth' });
+    
+    // If we have problem descriptions, evaluate them
+    if (problemDescriptions.length > 0) {
+        // Call the API to evaluate problem descriptions
+        fetch('/evaluate-problem-descriptions', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                'problem_descriptions': problemDescriptions
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Problem evaluation results:', data);
+            
+            // Update the UI with evaluation scores
+            if (Array.isArray(data)) {
+                data.forEach((evaluation, index) => {
+                    const scoreContainers = document.querySelectorAll(`.problem-score-container[data-problem-index="${index}"]`);
+                    scoreContainers.forEach(container => {
+                        const loadingEl = container.querySelector('.problem-score-loading');
+                        const scoreEl = container.querySelector('.problem-score');
+                        
+                        if (loadingEl && scoreEl && evaluation.score !== undefined) {
+                            // Hide loading spinner
+                            loadingEl.style.display = 'none';
+                            
+                            // Format the score as a percentage
+                            const scoreValue = (evaluation.score * 100).toFixed(1);
+                            
+                            // Determine color based on score
+                            let scoreColor = '#ff4d4d'; // Red for low scores
+                            if (evaluation.score >= 0.7) {
+                                scoreColor = '#4caf50'; // Green for high scores
+                            } else if (evaluation.score >= 0.5) {
+                                scoreColor = '#ff9800'; // Orange for medium scores
+                            }
+                            
+                            // Show score with appropriate styling
+                            scoreEl.innerHTML = `<span style="font-weight: bold;">Specificity Score: <span style="color: ${scoreColor};">${scoreValue}%</span></span>`;
+                            scoreEl.style.display = 'block';
+                            
+                            // Also update the score in the tab
+                            const tabWithSameIndex = document.querySelector(`.refined-problem-tab[data-problem-index="${index}"]`);
+                            if (tabWithSameIndex) {
+                                const tabScoreSpan = tabWithSameIndex.querySelector('.tab-score-indicator');
+                                if (tabScoreSpan) {
+                                    tabScoreSpan.innerHTML = `<span style="color: ${scoreColor}; margin-left: 6px; font-size: 0.85em;">${scoreValue}%</span>`;
+                                }
+                            }
+                        }
+                    });
+                });
+            } else if (data.error) {
+                console.error('Error evaluating problems:', data.error);
+                // Update UI to show error state
+                document.querySelectorAll('.problem-score-loading').forEach(el => {
+                    el.innerHTML = '<span style="color: #ff4d4d;">Evaluation failed</span>';
+                });
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            // Update UI to show error state
+            document.querySelectorAll('.problem-score-loading').forEach(el => {
+                el.innerHTML = '<span style="color: #ff4d4d;">Evaluation failed</span>';
+            });
+        });
+    }
 }
 
 // Apply the selected refined problem