fix index.html new new

main.py

@@ -322,7 +322,10 @@ def compute_marks():
     try:
         # Get correct answers
         correct_answers = request.form.getlist('correct_answers[]')
+        log_print(f"Received correct answers: {correct_answers}")
+        
         if not correct_answers:
+            log_print("No correct answers provided", "ERROR")
             return jsonify({
                 "error": "Missing data",
                 "message": "No correct answers provided"
@@ -331,7 +334,9 @@ def compute_marks():
         # Create TFIDF values for correct answers
         try:
             max_tfidf = create_tfidf_values(correct_answers)
+            log_print("Created TFIDF values successfully")
         except Exception as e:
+            log_print(f"TFIDF error: {str(e)}", "ERROR")
             return jsonify({
                 "error": "TFIDF error",
                 "message": f"Error creating TFIDF values: {str(e)}"
@@ -339,7 +344,10 @@ def compute_marks():
         
         # Get all uploaded files
         files = request.files.getlist('file')
+        log_print(f"Received {len(files)} files")
+        
         if not files:
+            log_print("No files uploaded", "ERROR")
             return jsonify({
                 "error": "Missing data",
                 "message": "No files uploaded"
@@ -347,13 +355,14 @@ def compute_marks():
 
         # Validate folder structure
         is_valid, message = validate_folder_structure(files)
+        log_print(f"Folder structure validation: {message}")
+        
         if not is_valid:
+            log_print(f"Invalid folder structure: {message}", "ERROR")
             return jsonify({
                 "error": "Invalid folder structure",
                 "message": message
             }), 400
-            
-        log_print(f"Folder structure validation: {message}")
 
         # Create a temporary directory for processing
         base_temp_dir = tempfile.mkdtemp()
@@ -372,6 +381,8 @@ def compute_marks():
                         log_print("Skipping invalid file", "WARNING")
                         continue
 
+                    log_print(f"Processing file: {file.filename}")
+                    
                     # Get folder structure from file path
                     path_parts = file.filename.split('/')
                     if len(path_parts) < 2:
@@ -380,6 +391,7 @@ def compute_marks():
                         
                     student_folder = path_parts[-2]
                     filename = path_parts[-1]
+                    log_print(f"Student folder: {student_folder}, Filename: {filename}")
                     
                     # Validate file type
                     if not is_valid_image_file(filename):
@@ -393,6 +405,7 @@ def compute_marks():
                     # Initialize student results if not exists
                     if student_folder not in results:
                         results[student_folder] = {}
+                        log_print(f"Initialized results for student: {student_folder}")
                         
                     # Save and process file
                     student_dir = os.path.join(base_temp_dir, student_folder)
@@ -402,7 +415,7 @@ def compute_marks():
                     # Ensure filepath is secure
                     filepath = secure_filename(filepath)
                     file.save(filepath)
-                    log_print(f"Saved file: {filepath}")
+                    log_print(f"Saved file to: {filepath}")
                     
                     # Extract text
                     extracted_text = extract_text_from_image(filepath)
@@ -414,6 +427,8 @@ def compute_marks():
                         })
                         continue
                     
+                    log_print(f"Extracted text: {extracted_text[:100]}...")
+                    
                     # Clean the extracted text for JSON
                     extracted_text = extracted_text.encode('ascii', 'ignore').decode('ascii')
                     
@@ -441,6 +456,8 @@ def compute_marks():
                                 llm_marks * 0.1
                             )
                             
+                            log_print(f"Scores for answer {i+1}: semantic={semantic_score}, word={word_score}, tfidf={tfidf_score}, ft={ft_score}, llm={llm_marks}, combined={combined_score}")
+                            
                             if combined_score > best_score:
                                 best_score = combined_score
                                 best_answer_index = i
@@ -456,7 +473,7 @@ def compute_marks():
                     
                     marks = new_value(best_score, 0, 1, 0, 5)
                     results[student_folder][filename] = round(marks, 2)
-                    log_print(f"Processed {filename} for {student_folder}: {marks} marks")
+                    log_print(f"Assigned marks for {filename} in {student_folder}: {marks}")
                     
                 except Exception as e:
                     error_msg = str(e).encode('ascii', 'ignore').decode('ascii')
@@ -476,6 +493,7 @@ def compute_marks():
                 log_print(f"Warning: Could not clean up temporary directory: {e}", "WARNING")
                 
         if not results:
+            log_print("No results computed", "ERROR")
             return jsonify({
                 "error": "Processing error",
                 "message": "No results computed"
@@ -491,13 +509,19 @@ def compute_marks():
                 clean_scores[clean_filename] = mark
             clean_results[clean_student] = clean_scores
             
-        response = jsonify({
+        log_print(f"Final results: {clean_results}")
+        
+        response_data = {
             "results": clean_results,
             "failed_files": [{
                 "file": f["file"].encode('ascii', 'ignore').decode('ascii'),
                 "error": f["error"].encode('ascii', 'ignore').decode('ascii')
             } for f in failed_files]
-        })
+        }
+        
+        log_print(f"Sending response: {response_data}")
+        
+        response = jsonify(response_data)
         response.headers['Content-Type'] = 'application/json'
         return response
         

templates/index.html

@@ -532,9 +532,138 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        #marks-table-container {
+            margin-top: 20px;
+            overflow-x: auto;
+        }
+
+        #marks-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            background: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        #marks-table th,
+        #marks-table td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+
+        #marks-table th {
+            background-color: var(--primary-color);
+            color: white;
+            font-weight: 500;
+        }
+
+        #marks-table tr:hover {
+            background-color: #f5f5f5;
+        }
+
+        #marks-table tbody tr:nth-child(even) {
+            background-color: #f8f9fa;
+        }
+
+        /* Notification System Styles */
+        .notification-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            max-width: 400px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .notification {
+            padding: 15px 20px;
+            margin-bottom: 10px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            animation: slideIn 0.3s ease-out;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+
+        .notification.info {
+            background-color: #e3f2fd;
+            border-left: 4px solid #2196f3;
+            color: #0d47a1;
+        }
+
+        .notification.success {
+            background-color: #e8f5e9;
+            border-left: 4px solid #4caf50;
+            color: #1b5e20;
+        }
+
+        .notification.warning {
+            background-color: #fff3e0;
+            border-left: 4px solid #ff9800;
+            color: #e65100;
+        }
+
+        .notification.error {
+            background-color: #ffebee;
+            border-left: 4px solid #f44336;
+            color: #b71c1c;
+        }
+
+        .notification-content {
+            flex-grow: 1;
+            margin-right: 10px;
+            word-break: break-word;
+        }
+
+        .notification-close {
+            background: none;
+            border: none;
+            color: inherit;
+            cursor: pointer;
+            font-size: 20px;
+            padding: 0 5px;
+            opacity: 0.7;
+        }
+
+        .notification-close:hover {
+            opacity: 1;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes slideOut {
+            from {
+                transform: translateX(0);
+                opacity: 1;
+            }
+            to {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+        }
+
+        .notification.fade-out {
+            animation: slideOut 0.3s ease-out forwards;
+        }
     </style>
 </head>
 <body>
+    <div class="notification-container" id="notification-container"></div>
+
     <div class="container">
         <div class="section">
             <h2>Upload Query CSV File</h2>
@@ -599,7 +728,19 @@
         <div class="section">
             <div id="answers-container"></div>
             <button id="compute-marks-btn" onclick="computeMarks()">Compute Marks</button>
-            <div id="marks-table-container"></div>
+            <div id="marks-table-container">
+                <table id="marks-table">
+                    <thead>
+                        <tr>
+                            <th>Student Folder</th>
+                            <th>Image Name</th>
+                            <th>Marks</th>
+                        </tr>
+                    </thead>
+                    <tbody id="marks-table-body">
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
@@ -611,6 +752,64 @@
     </div>
 
     <script>
+        const notificationSystem = {
+            container: null,
+            init() {
+                this.container = document.getElementById('notification-container');
+            },
+            
+            show(message, type = 'info', duration = 5000) {
+                if (!this.container) this.init();
+                
+                const notification = document.createElement('div');
+                notification.className = `notification ${type}`;
+                
+                const content = document.createElement('div');
+                content.className = 'notification-content';
+                content.textContent = message;
+                
+                const closeBtn = document.createElement('button');
+                closeBtn.className = 'notification-close';
+                closeBtn.innerHTML = '&times;';
+                closeBtn.onclick = () => this.remove(notification);
+                
+                notification.appendChild(content);
+                notification.appendChild(closeBtn);
+                this.container.appendChild(notification);
+                
+                if (duration > 0) {
+                    setTimeout(() => this.remove(notification), duration);
+                }
+                
+                return notification;
+            },
+            
+            remove(notification) {
+                notification.classList.add('fade-out');
+                setTimeout(() => {
+                    if (notification.parentElement === this.container) {
+                        this.container.removeChild(notification);
+                    }
+                }, 300);
+            },
+            
+            success(message, duration = 5000) {
+                return this.show(message, 'success', duration);
+            },
+            
+            error(message, duration = 8000) {
+                return this.show(message, 'error', duration);
+            },
+            
+            warning(message, duration = 6000) {
+                return this.show(message, 'warning', duration);
+            },
+            
+            info(message, duration = 4000) {
+                return this.show(message, 'info', duration);
+            }
+        };
+
         document.addEventListener('DOMContentLoaded', function() {
             const fileTypeSelect = document.getElementById('file-type');
             const pdfSection = document.getElementById('pdf-section');
@@ -670,31 +869,34 @@
                 const pdfFiles = document.getElementById('pdf-files').files;
 
                 if (!queryfile) {
-                    alert("Please upload a query file first!");
+                    notificationSystem.error("Please upload a query file first!");
                     hideLoading();
                     return;
                 }
 
+                notificationSystem.info("Processing files...");
                 const formData = new FormData();
                 formData.append('file_type', fileType);
                 formData.append('query_file', queryfile);
 
                 if (fileType === 'csv') {
                     if (!anscsvFile) {
-                        alert("Please upload a CSV file for answers!");
+                        notificationSystem.error("Please upload a CSV file for answers!");
                         hideLoading();
                         return;
                     }
                     formData.append('ans_csv_file', anscsvFile);
+                    notificationSystem.info("Processing CSV file...");
                 } else if (fileType === 'pdf') {
                     if (!pdfFiles || pdfFiles.length < 2) {
-                        alert("Please upload at least 2 PDF files!");
+                        notificationSystem.error("Please upload at least 2 PDF files!");
                         hideLoading();
                         return;
                     }
                     for (let file of pdfFiles) {
                         formData.append('pdf_files[]', file);
                     }
+                    notificationSystem.info(`Processing ${pdfFiles.length} PDF files...`);
                 }
 
                 const computeBtn = document.getElementById('compute-btn');
@@ -716,13 +918,14 @@
 
                 if (result.answers) {
                     displayAnswers(result.answers);
+                    notificationSystem.success("Successfully generated answers!");
                 } else {
                     throw new Error('No answers received from server');
                 }
 
             } catch (error) {
                 console.error('Error:', error);
-                alert('Error: ' + error.message);
+                notificationSystem.error('Error: ' + error.message);
             } finally {
                 hideLoading();
                 const computeBtn = document.getElementById('compute-btn');
@@ -953,42 +1156,42 @@
             try {
                 showLoading();
                 const answerBoxes = document.querySelectorAll('.answer-box');
+                
                 if (answerBoxes.length === 0) {
-                    alert("Please generate answers first!");
+                    notificationSystem.error("Please generate answers first!");
                     hideLoading();
                     return;
                 }
 
                 const answerValues = Array.from(answerBoxes).map(box => box.value.trim());
+                
                 if (answerValues.some(answer => !answer)) {
-                    alert("Please ensure all answer boxes are filled!");
+                    notificationSystem.error("Please ensure all answer boxes are filled!");
                     hideLoading();
                     return;
                 }
 
                 if (selectedFiles.size === 0) {
-                    alert("Please upload student answer files!");
+                    notificationSystem.error("Please upload student answer files!");
                     hideLoading();
                     return;
                 }
 
+                notificationSystem.info(`Processing ${selectedFiles.size} student files...`);
+                
                 const computeBtn = document.getElementById('compute-marks-btn');
                 computeBtn.disabled = true;
 
                 const formData = new FormData();
                 
-                // Add each answer as a separate correct_answers[] entry
-                answerValues.forEach(answer => {
+                answerValues.forEach((answer, index) => {
                     formData.append('correct_answers[]', answer);
                 });
 
-                // Add files with their folder structure
                 let validFiles = 0;
                 selectedFiles.forEach((fileInfo, path) => {
                     if (fileInfo.file.type.startsWith('image/')) {
-                        // Maintain the folder structure in the file path
-                        const relativePath = fileInfo.fullPath;
-                        formData.append('file', fileInfo.file, relativePath);
+                        formData.append('file', fileInfo.file, fileInfo.fullPath);
                         validFiles++;
                     }
                 });
@@ -997,7 +1200,8 @@
                     throw new Error("No valid image files found in the uploaded folder");
                 }
 
-                console.log('Sending request to compute marks...');
+                notificationSystem.info(`Processing ${validFiles} valid image files...`);
+                
                 const response = await fetch('/compute_marks', {
                     method: 'POST',
                     headers: {
@@ -1006,15 +1210,15 @@
                     body: formData
                 });
 
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    console.error('Server error:', errorText);
-                    throw new Error(`Server returned error ${response.status}: ${errorText}`);
+                const responseText = await response.text();
+                let result;
+                try {
+                    result = JSON.parse(responseText);
+                } catch (e) {
+                    console.error('Error parsing JSON:', e);
+                    throw new Error('Invalid JSON response from server');
                 }
 
-                const result = await response.json();
-                console.log('Parsed response:', result);
-
                 if (result.error) {
                     throw new Error(result.message || result.error);
                 }
@@ -1024,18 +1228,18 @@
                 }
 
                 displayMarks(result.results);
+                notificationSystem.success("Successfully computed marks!");
 
                 if (result.failed_files && result.failed_files.length > 0) {
-                    console.warn('Some files failed to process:', result.failed_files);
                     const failedMessage = result.failed_files
                         .map(f => `${f.file}: ${f.error}`)
                         .join('\n');
-                    alert(`Warning: Some files failed to process:\n${failedMessage}`);
+                    notificationSystem.warning(`Some files failed to process:\n${failedMessage}`);
                 }
 
             } catch (error) {
                 console.error('Error details:', error);
-                alert('Error computing marks: ' + error.message);
+                notificationSystem.error('Error computing marks: ' + error.message);
             } finally {
                 hideLoading();
                 const computeBtn = document.getElementById('compute-marks-btn');
@@ -1045,29 +1249,61 @@
 
         function displayMarks(results) {
             const tableBody = document.getElementById('marks-table-body');
+            if (!tableBody) {
+                throw new Error('Table body element not found');
+            }
+            
+            // Clear existing rows
             tableBody.innerHTML = '';
             
-            // Create table header
-            const headerRow = document.createElement('tr');
-            headerRow.innerHTML = `
-                <th>Student Folder</th>
-                <th>Image Name</th>
-                <th>Marks</th>
-            `;
-            tableBody.appendChild(headerRow);
+            // Sort student folders for consistent display
+            const sortedStudents = Object.keys(results).sort();
             
-            // Add results
-            Object.entries(results).forEach(([student, scores]) => {
-                Object.entries(scores).forEach(([filename, mark]) => {
-                    const row = document.createElement('tr');
-                    row.innerHTML = `
-                        <td>${student}</td>
-                        <td>${filename}</td>
-                        <td>${mark}</td>
-                    `;
-                    tableBody.appendChild(row);
-                });
-            });
+            for (const student of sortedStudents) {
+                const scores = results[student];
+                const row = document.createElement('tr');
+                
+                // Add student name cell
+                const studentCell = document.createElement('td');
+                studentCell.textContent = student;
+                row.appendChild(studentCell);
+                
+                // Add scores cell
+                const scoresCell = document.createElement('td');
+                const scoresList = document.createElement('ul');
+                scoresList.className = 'list-unstyled mb-0';
+                
+                // Sort filenames for consistent display
+                const sortedFiles = Object.keys(scores).sort();
+                
+                for (const filename of sortedFiles) {
+                    const score = scores[filename];
+                    const scoreItem = document.createElement('li');
+                    scoreItem.textContent = `${filename}: ${score}`;
+                    scoresList.appendChild(scoreItem);
+                }
+                
+                scoresCell.appendChild(scoresList);
+                row.appendChild(scoresCell);
+                
+                // Calculate and add average score cell
+                const scoreValues = Object.values(scores);
+                const average = scoreValues.length > 0
+                    ? (scoreValues.reduce((a, b) => a + b, 0) / scoreValues.length).toFixed(2)
+                    : 'N/A';
+                    
+                const averageCell = document.createElement('td');
+                averageCell.textContent = average;
+                row.appendChild(averageCell);
+                
+                tableBody.appendChild(row);
+            }
+            
+            // Show the results table
+            const resultsSection = document.getElementById('results-section');
+            if (resultsSection) {
+                resultsSection.style.display = 'block';
+            }
         }
     </script>
 </body>