Fix Safari compatibility issues: CSV download and image navigation

app.py

@@ -179,6 +179,12 @@ def download_file(job_id, filename):
 
         if safe_filename.lower() == "results.csv":
             mime_type = 'text/csv'
+            return send_file(
+                str(file_path),
+                mimetype=mime_type,
+                as_attachment=True,
+                download_name=safe_filename
+            )
 
         return send_file(str(file_path), mimetype=mime_type)
     except Exception as e:

static/script.js

@@ -611,38 +611,50 @@ document.addEventListener('DOMContentLoaded', () => {
         
         if (result.annotated_filename) {
             const imageUrl = `/results/${currentJobId}/${result.annotated_filename}`;
-            previewImage.src = imageUrl;
-            previewImage.alt = result.filename;
             
-            // Update image info with the new function
-            updateImageInfo();
-            
-            // Enable zoom controls
-            zoomInBtn.disabled = false;
-            zoomOutBtn.disabled = false;
+            // Create a new image object to handle loading
+            const tempImage = new Image();
+            tempImage.onload = function() {
+                previewImage.src = imageUrl;
+                previewImage.alt = result.filename;
+                
+                // Update image info with the new function
+                updateImageInfo();
+                
+                // Enable zoom controls
+                zoomInBtn.disabled = false;
+                zoomOutBtn.disabled = false;
 
-            // Calculate which page this image should be on
-            const targetPage = Math.floor(index / RESULTS_PER_PAGE) + 1;
-            
-            // If we're not on the correct page, switch to it
-            if (currentPage !== targetPage) {
-                currentPage = targetPage;
-                displayResultsPage(currentPage);
-            }
+                // Calculate which page this image should be on
+                const targetPage = Math.floor(index / RESULTS_PER_PAGE) + 1;
+                
+                // If we're not on the correct page, switch to it
+                if (currentPage !== targetPage) {
+                    currentPage = targetPage;
+                    displayResultsPage(currentPage);
+                }
 
-            // Remove selection from all rows
-            document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
-            
-            // Find and highlight the corresponding row
-            const rows = resultsTableBody.querySelectorAll('tr');
-            rows.forEach(row => {
-                if (parseInt(row.dataset.originalIndex) === index) {
-                    row.classList.add('selected');
+                // Remove selection from all rows
+                document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
+                
+                // Find and highlight the corresponding row
+                const rows = Array.from(resultsTableBody.querySelectorAll('tr'));
+                const targetRow = rows.find(row => parseInt(row.dataset.originalIndex, 10) === index);
+                if (targetRow) {
+                    targetRow.classList.add('selected');
                 }
-            });
+                
+                // Reset panning when a new image is displayed
+                resetPanZoom();
+            };
             
-            // Reset panning when a new image is displayed
-            resetPanZoom();
+            tempImage.onerror = function() {
+                console.error('Failed to load image:', imageUrl);
+                clearPreview();
+            };
+            
+            // Start loading the image
+            tempImage.src = imageUrl;
         } else {
             clearPreview();
         }
@@ -686,16 +698,24 @@ document.addEventListener('DOMContentLoaded', () => {
         updatePanCursorState();
     }
 
-    // Image Navigation
-    prevBtn.addEventListener('click', () => {
-        if (currentImageIndex > 0) {
+    // Image Navigation with debouncing
+    let navigationInProgress = false;
+    
+    prevBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (!navigationInProgress && currentImageIndex > 0) {
+            navigationInProgress = true;
             displayImage(currentImageIndex - 1);
+            setTimeout(() => { navigationInProgress = false; }, 300);
         }
     });
 
-    nextBtn.addEventListener('click', () => {
-        if (currentImageIndex < currentResults.length - 1) {
+    nextBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (!navigationInProgress && currentImageIndex < currentResults.length - 1) {
+            navigationInProgress = true;
             displayImage(currentImageIndex + 1);
+            setTimeout(() => { navigationInProgress = false; }, 300);
         }
     });