Update index.html

index.html

@@ -68,6 +68,7 @@
             transition: all 0.3s ease;
             cursor: pointer;
             background: rgba(76, 175, 80, 0.05);
+            position: relative;
         }
 
         .upload-area:hover {
@@ -81,6 +82,16 @@
             transform: scale(1.02);
         }
 
+        .file-input {
+            position: absolute;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            cursor: pointer;
+        }
+
         .upload-btn {
             background: linear-gradient(135deg, #4CAF50, #45a049);
             color: white;
@@ -108,13 +119,13 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 400px; /* Fixed height for consistent alignment */
+            height: 400px;
             border: 1px solid rgba(255,255,255,0.1);
         }
 
         canvas {
             max-width: 100%;
-            max-height: 100%; /* Scales image down within container */
+            max-height: 100%;
             object-fit: contain;
             border-radius: 4px;
             cursor: crosshair;
@@ -266,6 +277,16 @@
             gap: 10px;
             margin-bottom: 20px;
         }
+
+        .debug-info {
+            background: rgba(255, 0, 0, 0.1);
+            border: 1px solid #ff6b6b;
+            border-radius: 4px;
+            padding: 10px;
+            margin-top: 10px;
+            font-size: 12px;
+            color: #ff9999;
+        }
         
         @media (max-width: 768px) {
             .main-content {
@@ -284,9 +305,9 @@
                 <h2>Input & Controls</h2>
                 
                 <div class="upload-area" id="upload-area">
-                    <button class="upload-btn" id="upload-btn">Upload Image</button>
+                    <input type="file" class="file-input" id="file-input" accept="image/*">
+                    <button class="upload-btn" id="upload-btn" type="button">Upload Image</button>
                     <p>Or drop an image here</p>
-                    <input type="file" id="file-input" accept="image/*" style="display: none;">
                 </div>
                 
                 <div class="canvas-container">
@@ -316,6 +337,10 @@
                 <div class="action-panel">
                     <button class="predict-btn" id="predict-btn" disabled>Predict</button>
                 </div>
+                
+                <div class="debug-info" id="debug-info" style="display: none;">
+                    Debug info will appear here
+                </div>
             </div>
             
             <div class="column">
@@ -344,21 +369,42 @@
 
     <script src="https://docs.opencv.org/4.8.0/opencv.js"></script>
     <script>
+        // Debug function
+        function debugLog(message) {
+            console.log('DEBUG:', message);
+            const debugDiv = document.getElementById('debug-info');
+            debugDiv.style.display = 'block';
+            debugDiv.innerHTML += '<br>' + message;
+        }
+
+        // Initialize when OpenCV is ready
         cv['onRuntimeInitialized'] = () => {
             console.log('OpenCV.js is ready.');
-            document.addEventListener('DOMContentLoaded', () => {
+            // Wait for DOM to be ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    debugLog('DOM loaded, initializing app...');
+                    new SegmentationApp();
+                });
+            } else {
+                debugLog('DOM already loaded, initializing app...');
                 new SegmentationApp();
-            });
+            }
         };
 
         class SegmentationApp {
             constructor() {
+                debugLog('SegmentationApp constructor called');
+                
+                // Initialize canvas elements
                 this.inputCanvas = document.getElementById('input-canvas');
                 this.inputCtx = this.inputCanvas.getContext('2d');
                 this.outputCanvas = document.getElementById('output-canvas');
                 this.outputCtx = this.outputCanvas.getContext('2d');
                 this.maskCanvas = document.createElement('canvas');
                 this.maskCtx = this.maskCanvas.getContext('2d');
+                
+                // Initialize state
                 this.currentTool = 'point';
                 this.brushSize = 5;
                 this.isDrawing = false;
@@ -366,94 +412,133 @@
                 this.predictedMask = null;
                 this.annotations = [];
                 this.currentView = 'filled';
+                
+                // Get UI elements
                 this.predictBtn = document.getElementById('predict-btn');
                 this.downloadBtn = document.getElementById('download-btn');
                 this.transparencySlider = document.getElementById('transparency');
                 this.transparencyControl = document.getElementById('transparency-control');
                 
+                debugLog('Elements initialized, setting up event listeners...');
                 this.initEventListeners();
+                debugLog('SegmentationApp initialized successfully');
             }
 
             initEventListeners() {
-                // File input setup
+                // File upload elements
                 const fileInput = document.getElementById('file-input');
                 const uploadBtn = document.getElementById('upload-btn');
                 const uploadArea = document.getElementById('upload-area');
                 
-                // Upload button click
-                uploadBtn.onclick = () => fileInput.click();
+                debugLog('Setting up file upload listeners...');
+                
+                // Multiple ways to trigger file selection - more reliable
+                uploadBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    debugLog('Upload button clicked');
+                    fileInput.value = ''; // Reset to ensure change event fires
+                    fileInput.click();
+                });
+                
+                uploadArea.addEventListener('click', (e) => {
+                    if (e.target !== uploadBtn) {
+                        e.preventDefault();
+                        debugLog('Upload area clicked');
+                        fileInput.value = '';
+                        fileInput.click();
+                    }
+                });
                 
-                // File input change
-                fileInput.onchange = e => {
-                    if (e.target.files && e.target.files[0]) {
+                // File input change event
+                fileInput.addEventListener('change', (e) => {
+                    debugLog('File input changed');
+                    if (e.target.files && e.target.files.length > 0) {
+                        debugLog(`File selected: ${e.target.files[0].name}`);
                         this.handleFile(e.target.files[0]);
+                    } else {
+                        debugLog('No file selected');
                     }
-                };
+                });
                 
                 // Drag and drop
-                uploadArea.ondragover = e => { 
-                    e.preventDefault(); 
-                    uploadArea.classList.add('dragover'); 
-                };
-                uploadArea.ondragleave = () => uploadArea.classList.remove('dragover');
-                uploadArea.ondrop = e => {
+                uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadArea.classList.add('dragover');
+                });
+                
+                uploadArea.addEventListener('dragleave', (e) => {
+                    uploadArea.classList.remove('dragover');
+                });
+                
+                uploadArea.addEventListener('drop', (e) => {
                     e.preventDefault();
                     uploadArea.classList.remove('dragover');
-                    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                    debugLog('File dropped');
+                    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
                         this.handleFile(e.dataTransfer.files[0]);
                     }
-                };
+                });
                 
                 // Canvas drawing events
-                this.inputCanvas.addEventListener('mousedown', e => this.startDrawing(e));
-                this.inputCanvas.addEventListener('mousemove', e => this.draw(e));
-                ['mouseup', 'mouseout'].forEach(evt => this.inputCanvas.addEventListener(evt, () => this.stopDrawing()));
+                this.inputCanvas.addEventListener('mousedown', (e) => this.startDrawing(e));
+                this.inputCanvas.addEventListener('mousemove', (e) => this.draw(e));
+                this.inputCanvas.addEventListener('mouseup', () => this.stopDrawing());
+                this.inputCanvas.addEventListener('mouseout', () => this.stopDrawing());
 
                 // Tool selection
                 document.querySelectorAll('.tool-btn[data-tool]').forEach(btn => {
-                    btn.onclick = (e) => {
+                    btn.addEventListener('click', (e) => {
                         document.querySelectorAll('.tool-btn[data-tool]').forEach(b => b.classList.remove('active'));
                         e.target.classList.add('active');
                         this.currentTool = e.target.dataset.tool;
-                    };
+                        debugLog(`Tool changed to: ${this.currentTool}`);
+                    });
                 });
                 
                 // View tabs
-                document.getElementById('view-filled').onclick = () => this.setView('filled');
-                document.getElementById('view-outline').onclick = () => this.setView('outline');
-                document.getElementById('view-binary').onclick = () => this.setView('binary');
+                document.getElementById('view-filled').addEventListener('click', () => this.setView('filled'));
+                document.getElementById('view-outline').addEventListener('click', () => this.setView('outline'));
+                document.getElementById('view-binary').addEventListener('click', () => this.setView('binary'));
 
                 // Brush size slider
                 const brushSizeSlider = document.getElementById('brush-size');
                 const brushSizeValue = document.getElementById('brush-size-value');
-                brushSizeSlider.oninput = (e) => {
+                brushSizeSlider.addEventListener('input', (e) => {
                     this.brushSize = parseInt(e.target.value);
                     brushSizeValue.textContent = this.brushSize;
-                };
+                });
 
                 // Transparency slider
                 const transparencyValue = document.getElementById('transparency-value');
-                this.transparencySlider.oninput = (e) => {
+                this.transparencySlider.addEventListener('input', (e) => {
                     transparencyValue.textContent = e.target.value + '%';
                     this.renderOutput();
-                };
+                });
                 
                 // Action buttons
-                document.getElementById('clear-annotations').onclick = () => this.clearAnnotations();
-                this.predictBtn.onclick = () => this.predict();
-                this.downloadBtn.onclick = () => this.downloadMask();
+                document.getElementById('clear-annotations').addEventListener('click', () => this.clearAnnotations());
+                this.predictBtn.addEventListener('click', () => this.predict());
+                this.downloadBtn.addEventListener('click', () => this.downloadMask());
+                
+                debugLog('All event listeners set up');
             }
             
             handleFile(file) {
+                debugLog(`Handling file: ${file.name}, type: ${file.type}, size: ${file.size}`);
+                
                 if (!file || !file.type.startsWith('image/')) {
                     alert('Please select a valid image file.');
+                    debugLog('Invalid file type');
                     return;
                 }
                 
                 const reader = new FileReader();
-                reader.onload = e => {
+                reader.onload = (e) => {
+                    debugLog('FileReader loaded successfully');
                     const img = new Image();
                     img.onload = () => {
+                        debugLog(`Image loaded: ${img.width}x${img.height}`);
                         this.uploadedImage = img;
                         this.reset();
                         this.drawImageScaled(this.inputCanvas, this.inputCtx, img);
@@ -461,15 +546,17 @@
                         this.outputCanvas.height = this.inputCanvas.height;
                         this.maskCanvas.width = this.inputCanvas.width;
                         this.maskCanvas.height = this.inputCanvas.height;
-                        console.log('Image loaded successfully');
+                        debugLog('Image setup completed');
                     };
                     img.onerror = () => {
                         alert('Failed to load image. Please try another file.');
+                        debugLog('Image load error');
                     };
                     img.src = e.target.result;
                 };
                 reader.onerror = () => {
                     alert('Failed to read file. Please try again.');
+                    debugLog('FileReader error');
                 };
                 reader.readAsDataURL(file);
             }
@@ -480,6 +567,7 @@
                 this.predictBtn.disabled = true;
                 this.downloadBtn.disabled = true;
                 this.outputCtx.clearRect(0, 0, this.outputCanvas.width, this.outputCanvas.height);
+                debugLog('App state reset');
             }
             
             drawImageScaled(canvas, ctx, img) {
@@ -490,6 +578,7 @@
                 canvas.width = img.width * ratio;
                 canvas.height = img.height * ratio;
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                debugLog(`Canvas scaled to: ${canvas.width}x${canvas.height}`);
             }
             
             getCanvasCoordinates(e) {
@@ -541,6 +630,7 @@
                 });
                 this.annotations.push(true);
                 this.predictBtn.disabled = false;
+                debugLog(`Annotation added. Total: ${this.annotations.length}`);
             }
             
             clearAnnotations() {
@@ -548,6 +638,7 @@
                 this.reset();
                 this.drawImageScaled(this.inputCanvas, this.inputCtx, this.uploadedImage);
                 this.maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+                debugLog('Annotations cleared');
             }
             
             async predict() {
@@ -555,6 +646,7 @@
                 
                 this.predictBtn.disabled = true; 
                 this.predictBtn.innerText = "Processing...";
+                debugLog('Starting prediction...');
                 
                 try {
                     const payload = {
@@ -562,6 +654,7 @@
                         scribble_mask: this.maskCanvas.toDataURL('image/png')
                     };
                     
+                    debugLog('Sending request to /predict endpoint...');
                     const response = await fetch('/predict', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
@@ -573,12 +666,14 @@
                     }
                     
                     const result = await response.json();
+                    debugLog('Prediction response received');
+                    
                     const maskImg = new Image();
                     maskImg.onload = () => {
                         this.predictedMask = maskImg;
                         this.renderOutput();
                         this.downloadBtn.disabled = false;
-                        console.log('Prediction completed successfully');
+                        debugLog('Prediction completed successfully');
                     };
                     maskImg.onerror = () => {
                         throw new Error('Failed to load predicted mask image');
@@ -587,6 +682,7 @@
                     
                 } catch (error) {
                     console.error('Prediction failed:', error);
+                    debugLog(`Prediction error: ${error.message}`);
                     alert(`Prediction failed: ${error.message}`);
                 } finally {
                     this.predictBtn.innerText = "Predict";
@@ -600,6 +696,7 @@
                 document.getElementById(`view-${view}`).classList.add('active');
                 this.transparencyControl.style.display = (view === 'filled' || view === 'outline') ? 'block' : 'none';
                 this.renderOutput();
+                debugLog(`View changed to: ${view}`);
             }
             
             renderOutput() {
@@ -635,16 +732,17 @@
                         cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
                         cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
                         
-                        let color = new cv.Scalar(255, 255, 255, 255); // White color
+                        let color = new cv.Scalar(255, 255, 255, 255);
                         for (let i = 0; i < contours.size(); ++i) {
                             cv.drawContours(src, contours, i, color, 2, cv.LINE_8, hierarchy, 100);
                         }
-                        cv.imshow('output-canvas', src); // Draw contours back onto the output canvas
+                        cv.imshow('output-canvas', src);
                         src.delete(); 
                         contours.delete(); 
                         hierarchy.delete();
                     } catch (error) {
                         console.error('Error rendering outline view:', error);
+                        debugLog(`Outline rendering error: ${error.message}`);
                     }
                 }
             }
@@ -655,6 +753,7 @@
                 link.download = 'binary_mask.png';
                 link.href = this.predictedMask.src;
                 link.click();
+                debugLog('Mask download initiated');
             }
         }
     </script>