Update frontend files (script.js, style.css, index.html)

static/script.js

@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const progress = document.getElementById('progress');
     const progressText = document.getElementById('progress-text');
     const progressPercentage = document.getElementById('progress-percentage');
+    const imageCounter = document.getElementById('image-counter');
     const statusOutput = document.getElementById('status-output');
     const clearLogBtn = document.getElementById('clear-log');
     const resultsTableBody = document.querySelector('.results-table tbody');
@@ -25,6 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const exportCsvBtn = document.getElementById('export-csv');
     const exportImagesBtn = document.getElementById('export-images');
     const inputModeHelp = document.getElementById('input-mode-help');
+    const imageContainer = document.getElementById('image-container');
 
     let currentResults = [];
     let currentImageIndex = -1;
@@ -34,6 +36,13 @@ document.addEventListener('DOMContentLoaded', () => {
     const MIN_ZOOM = 0.5;
     let progressInterval = null; // Interval timer for polling
     
+    // Panning variables
+    let isPanning = false;
+    let startPanX = 0;
+    let startPanY = 0;
+    let currentPanX = 0;
+    let currentPanY = 0;
+    
     // Pagination and sorting variables
     const RESULTS_PER_PAGE = 10;
     let currentPage = 1;
@@ -282,6 +291,16 @@ document.addEventListener('DOMContentLoaded', () => {
             clearInterval(progressInterval); // Clear any existing timer
         }
 
+        const totalImages = Array.from(fileInput.files).filter(file => {
+            const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/tiff', 'image/tif'];
+            if (inputMode.value === 'folder') {
+                return allowedTypes.includes(file.type) && 
+                       file.webkitRelativePath && 
+                       !file.webkitRelativePath.startsWith('.');
+            }
+            return allowedTypes.includes(file.type);
+        }).length;
+
         progressInterval = setInterval(async () => {
             try {
                 const response = await fetch(`/progress/${jobId}`);
@@ -299,8 +318,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
                 // Update UI based on status
                 updateProgress(data.progress || 0, data.status);
-                // Optionally update log with snippets from data.log if desired during processing
-                // logStatus(`[Progress ${data.progress}%] ${data.log || data.status}`);
+                
+                // Update image counter based on progress percentage
+                if (data.status === 'running' || data.status === 'starting') {
+                    const processedImages = Math.floor((data.progress / 90) * totalImages); // 90 is the max progress before completion
+                    imageCounter.textContent = `${processedImages} of ${totalImages} images`;
+                }
 
                 if (data.status === 'success') {
                     clearInterval(progressInterval);
@@ -344,9 +367,17 @@ document.addEventListener('DOMContentLoaded', () => {
         if (isLoading) {
             startProcessingBtn.innerHTML = '<i class="ri-loader-4-line"></i> Processing...';
             document.body.classList.add('processing');
+            // Disable input changes during processing
+            inputMode.disabled = true;
+            fileInput.disabled = true;
+            confidenceSlider.disabled = true;
         } else {
             startProcessingBtn.innerHTML = '<i class="ri-play-line"></i> Start Processing';
             document.body.classList.remove('processing');
+            // Re-enable inputs after processing
+            inputMode.disabled = false;
+            fileInput.disabled = false;
+            confidenceSlider.disabled = false;
         }
     }
 
@@ -354,6 +385,11 @@ document.addEventListener('DOMContentLoaded', () => {
         progress.value = value;
         progressPercentage.textContent = `${value}%`;
         progressText.textContent = message;
+        
+        // Clear the image counter when not processing
+        if (message === 'Ready to process' || message === 'Processing complete' || message.startsWith('Error')) {
+            imageCounter.textContent = '';
+        }
     }
 
     function logStatus(message) {
@@ -586,11 +622,9 @@ document.addEventListener('DOMContentLoaded', () => {
             const imageUrl = `/results/${currentJobId}/${result.annotated_filename}`;
             previewImage.src = imageUrl;
             previewImage.alt = result.filename;
-            imageInfo.innerHTML = `
-                <i class="ri-image-line"></i> ${result.filename}
-                <br>
-                <i class="ri-egg-line"></i> ${result.num_eggs} eggs detected
-            `;
+            
+            // Update image info with the new function
+            updateImageInfo();
             
             // Enable zoom controls
             zoomInBtn.disabled = false;
@@ -613,10 +647,11 @@ document.addEventListener('DOMContentLoaded', () => {
             rows.forEach(row => {
                 if (parseInt(row.dataset.originalIndex) === index) {
                     row.classList.add('selected');
-                    // Scroll the row into view if needed
-                    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 }
             });
+            
+            // Reset panning when a new image is displayed
+            resetPanZoom();
         } else {
             clearPreview();
         }
@@ -631,8 +666,7 @@ document.addEventListener('DOMContentLoaded', () => {
         previewImage.alt = 'No image selected';
         imageInfo.textContent = 'Select an image from the results to view';
         currentImageIndex = -1;
-        currentZoomLevel = 1;
-        updateZoom();
+        resetPanZoom();
         
         // Disable controls
         prevBtn.disabled = true;
@@ -640,6 +674,26 @@ document.addEventListener('DOMContentLoaded', () => {
         zoomInBtn.disabled = true;
         zoomOutBtn.disabled = true;
     }
+    
+    function resetPanZoom() {
+        // Reset zoom and pan values
+        currentZoomLevel = 1;
+        currentPanX = 0;
+        currentPanY = 0;
+        
+        // Reset transform directly
+        if (previewImage.src) {
+            previewImage.style.transform = 'none';
+            
+            // Force a reflow to ensure the transform is actually reset
+            void previewImage.offsetWidth;
+            
+            // Then apply the default transform
+            updateImageTransform();
+        }
+        
+        updatePanCursorState();
+    }
 
     // Image Navigation
     prevBtn.addEventListener('click', () => {
@@ -655,26 +709,136 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Zoom Controls
-    function updateZoom() {
+    function updateImageTransform() {
         if (previewImage.src) {
-            previewImage.style.transform = `scale(${currentZoomLevel})`;
+            previewImage.style.transform = `translate(${currentPanX}px, ${currentPanY}px) scale(${currentZoomLevel})`;
         }
     }
 
+    // Unified zoom function for both buttons and wheel
+    function zoomImage(newZoom, zoomX, zoomY) {
+        if (newZoom >= MIN_ZOOM && newZoom <= MAX_ZOOM) {
+            const oldZoom = currentZoomLevel;
+            
+            // If zooming out to minimum, just reset everything
+            if (newZoom === MIN_ZOOM) {
+                currentZoomLevel = MIN_ZOOM;
+                currentPanX = 0;
+                currentPanY = 0;
+            } else {
+                // Calculate zoom ratio
+                const zoomRatio = newZoom / oldZoom;
+                
+                // Get the image and container dimensions
+                const containerRect = imageContainer.getBoundingClientRect();
+                const imgRect = previewImage.getBoundingClientRect();
+                
+                // Calculate the center of the image
+                const imgCenterX = imgRect.width / 2;
+                const imgCenterY = imgRect.height / 2;
+                
+                // Calculate the point to zoom relative to
+                const relativeX = zoomX - (imgRect.left - containerRect.left);
+                const relativeY = zoomY - (imgRect.top - containerRect.top);
+                
+                // Update zoom level
+                currentZoomLevel = newZoom;
+                
+                // Adjust pan to maintain the zoom point position
+                currentPanX = currentPanX + (imgCenterX - relativeX) * (zoomRatio - 1);
+                currentPanY = currentPanY + (imgCenterY - relativeY) * (zoomRatio - 1);
+            }
+            
+            updateImageTransform();
+            updatePanCursorState();
+            updateImageInfo();
+        }
+    }
+
+    // Zoom in button handler
     zoomInBtn.addEventListener('click', () => {
-        if (currentZoomLevel < MAX_ZOOM) {
-            currentZoomLevel += 0.25;
-            updateZoom();
+        if (currentZoomLevel < MAX_ZOOM && previewImage.src) {
+            const containerRect = imageContainer.getBoundingClientRect();
+            const imgRect = previewImage.getBoundingClientRect();
+            
+            // Calculate the center point of the image
+            const centerX = (imgRect.left - containerRect.left) + imgRect.width / 2;
+            const centerY = (imgRect.top - containerRect.top) + imgRect.height / 2;
+            
+            zoomImage(currentZoomLevel + 0.25, centerX, centerY);
         }
     });
 
+    // Zoom out button handler
     zoomOutBtn.addEventListener('click', () => {
-        if (currentZoomLevel > MIN_ZOOM) {
-            currentZoomLevel -= 0.25;
-            updateZoom();
+        if (currentZoomLevel > MIN_ZOOM && previewImage.src) {
+            const containerRect = imageContainer.getBoundingClientRect();
+            const imgRect = previewImage.getBoundingClientRect();
+            
+            // Calculate the center point of the image
+            const centerX = (imgRect.left - containerRect.left) + imgRect.width / 2;
+            const centerY = (imgRect.top - containerRect.top) + imgRect.height / 2;
+            
+            zoomImage(currentZoomLevel - 0.25, centerX, centerY);
+        }
+    });
+    
+    // Mouse wheel zoom uses cursor position
+    imageContainer.addEventListener('wheel', (e) => {
+        if (previewImage.src) {
+            e.preventDefault();
+            
+            // Get mouse position relative to container
+            const rect = imageContainer.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            
+            // Calculate zoom direction and factor
+            const zoomDirection = e.deltaY < 0 ? 1 : -1;
+            const zoomFactor = 0.1;
+            
+            // Calculate and apply new zoom level
+            const newZoom = currentZoomLevel + (zoomDirection * zoomFactor);
+            zoomImage(newZoom, mouseX, mouseY);
+        }
+    });
+    
+    // Panning event listeners
+    imageContainer.addEventListener('mousedown', (e) => {
+        if (e.button === 0 && previewImage.src && currentZoomLevel > 1) { // Left mouse button and zoomed in
+            isPanning = true;
+            startPanX = e.clientX - currentPanX;
+            startPanY = e.clientY - currentPanY;
+            imageContainer.classList.add('panning');
+            e.preventDefault(); // Prevent image dragging behavior
+        }
+    });
+    
+    window.addEventListener('mousemove', (e) => {
+        if (isPanning) {
+            currentPanX = e.clientX - startPanX;
+            currentPanY = e.clientY - startPanY;
+            updateImageTransform();
+        }
+    });
+    
+    window.addEventListener('mouseup', () => {
+        if (isPanning) {
+            isPanning = false;
+            imageContainer.classList.remove('panning');
         }
     });
 
+    // Function to update cursor state based on zoom level
+    function updatePanCursorState() {
+        if (currentZoomLevel > 1) {
+            imageContainer.classList.add('can-pan');
+        } else {
+            imageContainer.classList.remove('can-pan');
+            imageContainer.classList.remove('panning');
+        }
+    }
+
     // Export Handlers
     exportCsvBtn.addEventListener('click', () => {
         if (!currentJobId) return;
@@ -687,6 +851,66 @@ document.addEventListener('DOMContentLoaded', () => {
         window.location.href = `/export_images/${currentJobId}`;
     });
 
+    // Add keyboard controls for panning (arrow keys)
+    window.addEventListener('keydown', (e) => {
+        if (previewImage.src && currentZoomLevel > 1) {
+            const PAN_AMOUNT = 30; // pixels to pan per key press
+            
+            switch (e.key) {
+                case 'ArrowLeft':
+                    currentPanX += PAN_AMOUNT;
+                    updateImageTransform();
+                    e.preventDefault();
+                    break;
+                case 'ArrowRight':
+                    currentPanX -= PAN_AMOUNT;
+                    updateImageTransform();
+                    e.preventDefault();
+                    break;
+                case 'ArrowUp':
+                    currentPanY += PAN_AMOUNT;
+                    updateImageTransform();
+                    e.preventDefault();
+                    break;
+                case 'ArrowDown':
+                    currentPanY -= PAN_AMOUNT;
+                    updateImageTransform();
+                    e.preventDefault();
+                    break;
+                case 'Home':
+                    // Reset pan position but keep zoom
+                    currentPanX = 0;
+                    currentPanY = 0;
+                    updateImageTransform();
+                    e.preventDefault();
+                    break;
+            }
+        }
+    });
+    
+    // Add some instructions to the image info when zoomed in
+    function updateImageInfo() {
+        if (!currentResults[currentImageIndex]) return;
+        
+        const result = currentResults[currentImageIndex];
+        let infoText = `
+            <i class="ri-image-line"></i> ${result.filename}
+            <br>
+            <i class="ri-egg-line"></i> ${result.num_eggs} eggs detected
+        `;
+        
+        if (currentZoomLevel > 1) {
+            infoText += `
+                <br>
+                <small style="color: var(--text-muted);">
+                    <i class="ri-drag-move-line"></i> Click and drag to pan or use arrow keys
+                </small>
+            `;
+        }
+        
+        imageInfo.innerHTML = infoText;
+    }
+
     // Initialize
     updateUploadState();
     logStatus('Application ready');

static/style.css

@@ -181,13 +181,17 @@ textarea:focus {
     align-items: center;
     justify-content: center;
     height: 400px;
+    cursor: default;
+    user-select: none;
 }
 
 .image-preview img {
+    object-fit: contain;
     max-width: 100%;
     max-height: 100%;
-    object-fit: contain;
-    transition: transform 0.2s ease;
+    transform-origin: center;
+    transition: transform 0.1s ease-out;
+    display: block;
 }
 
 .image-controls {
@@ -197,6 +201,15 @@ textarea:focus {
     justify-content: center;
 }
 
+/* Panning cursor states */
+.image-preview.can-pan {
+    cursor: grab;
+}
+
+.image-preview.panning {
+    cursor: grabbing;
+}
+
 .image-info {
     margin: 1rem 0;
     padding: 0.75rem;
@@ -395,6 +408,63 @@ progress::-moz-progress-bar {
     justify-content: center;
 }
 
+/* Processing State */
+body.processing .progress-container {
+    position: relative;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.processing #start-processing i {
+    animation: spin 1s linear infinite;
+}
+
+.progress-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, 
+        var(--primary-color) 0%, 
+        var(--primary-hover) 50%, 
+        var(--primary-color) 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite linear;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+body.processing .progress-container::before {
+    opacity: 1;
+}
+
+@keyframes shimmer {
+    to { background-position: 200% 0; }
+}
+
+/* Update progress bar styles for processing state */
+body.processing progress::-webkit-progress-value {
+    background: linear-gradient(90deg, 
+        var(--primary-color) 0%, 
+        var(--primary-hover) 50%, 
+        var(--primary-color) 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite linear;
+}
+
+body.processing progress::-moz-progress-bar {
+    background: linear-gradient(90deg, 
+        var(--primary-color) 0%, 
+        var(--primary-hover) 50%, 
+        var(--primary-color) 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite linear;
+}
+
 /* Tooltips */
 [data-tooltip] {
     position: relative;
@@ -407,15 +477,21 @@ progress::-moz-progress-bar {
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
-    padding: 0.5rem;
-    background-color: var(--text-color);
+    padding: 0.5rem 1rem;
+    background: rgba(0, 0, 0, 0.8);
     color: white;
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    white-space: nowrap;
-    opacity: 0;
+    border-radius: 0.375rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 0.875rem;
+    white-space: normal;
+    text-align: center;
+    max-width: 300px;
+    width: max-content;
     pointer-events: none;
-    transition: opacity 0.15s ease;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: 1000;
+    margin-bottom: 0.5rem;
 }
 
 [data-tooltip]:hover::after {

templates/index.html

@@ -12,7 +12,7 @@
         <i class="ri-microscope-line"></i>
         NemaQuant
         <small style="display: block; font-size: 1rem; font-weight: normal; color: var(--text-muted);">
-            Automated Nematode Egg Detection
+            Automated Nematode Egg Detection and Counting
         </small>
     </h1>
 
@@ -48,9 +48,9 @@
             <div class="card compact">
                 <h2><i class="ri-settings-4-line"></i> Processing</h2>
                 <div class="form-group">
-                    <label for="confidence-threshold" data-tooltip="Higher values mean more confident detections">
+                    <label for="confidence-threshold">
                         Confidence Threshold
-                        <i class="ri-information-line"></i>
+                        <i class="ri-information-line" data-tooltip="Recommended range: 0.5-0.7; higher values reduce false detections but may miss eggs, lower values catch more eggs but may include false positives"></i>
                     </label>
                     <div class="range-with-value">
                         <input type="range" id="confidence-threshold" name="confidence-threshold" 
@@ -62,7 +62,10 @@
                 <div class="progress-container">
                     <div class="progress-info">
                         <span id="progress-text">Ready to process</span>
-                        <span id="progress-percentage">0%</span>
+                        <div>
+                            <span id="image-counter" style="margin-right: 1rem;"></span>
+                            <span id="progress-percentage">0%</span>
+                        </div>
                     </div>
                     <progress id="progress" value="0" max="100"></progress>
                 </div>