Update index.html

index.html

@@ -208,7 +208,7 @@
             }
 
             initEventListeners() {
-                // FIX: Simplified event listeners
+                // FIX: Simplified event listeners for robust uploading
                 const fileInput = document.getElementById('file-input');
                 const uploadArea = document.getElementById('upload-area');
 
@@ -254,6 +254,7 @@
                         this.uploadedImage = img;
                         this.reset();
                         this.drawImageScaled(this.inputCanvas, this.inputCtx, img);
+                        // Also set the size for other canvases
                         this.outputCanvas.width = this.inputCanvas.width;
                         this.outputCanvas.height = this.inputCanvas.height;
                         this.maskCanvas.width = this.inputCanvas.width;
@@ -374,11 +375,7 @@
             renderOutput() {
                 if (!this.predictedMask) return;
                 
-                const tempCanvas = document.createElement('canvas');
-                tempCanvas.width = this.outputCanvas.width;
-                tempCanvas.height = this.outputCanvas.height;
-                const tempCtx = tempCanvas.getContext('2d');
-                
+                // Always draw the original image on the output canvas first
                 this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
 
@@ -386,7 +383,12 @@
                     this.drawImageScaled(this.outputCanvas, this.outputCtx, this.predictedMask);
                     return;
                 }
-
+                
+                // Create a temporary canvas to work with the mask
+                const tempCanvas = document.createElement('canvas');
+                const tempCtx = tempCanvas.getContext('2d');
+                tempCanvas.width = this.outputCanvas.width;
+                tempCanvas.height = this.outputCanvas.height;
                 tempCtx.drawImage(this.predictedMask, 0, 0, tempCanvas.width, tempCanvas.height);
                 
                 if (this.currentView === 'filled') {
@@ -399,23 +401,27 @@
                     this.outputCtx.globalAlpha = 1.0;
 
                 } else if (this.currentView === 'outline') {
-                    // This logic now requires OpenCV.js, loaded via the script tag
                     const src = cv.imread(tempCanvas);
                     const contours = new cv.MatVector();
                     const hierarchy = new cv.Mat();
+                    // Convert to grayscale for findContours
                     cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
                     cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
                     
-                    const color = new cv.Scalar(255, 255, 255, 255); // White color
-                    // Create a transparent mat to draw contours on
-                    let contourImg = new cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC4);
+                    // Draw contours directly onto the output canvas
+                    this.outputCtx.strokeStyle = 'white';
+                    this.outputCtx.lineWidth = 2;
                     for (let i = 0; i < contours.size(); ++i) {
-                        cv.drawContours(contourImg, contours, i, color, 2, cv.LINE_8, hierarchy, 100);
+                        const contour = contours.get(i).data32S; // Get contour points
+                        this.outputCtx.beginPath();
+                        this.outputCtx.moveTo(contour[0], contour[1]);
+                        for (let j = 2; j < contour.length; j += 2) {
+                            this.outputCtx.lineTo(contour[j], contour[j+1]);
+                        }
+                        this.outputCtx.closePath();
+                        this.outputCtx.stroke();
                     }
-                    // Display the contour image on the canvas
-                    cv.imshow(this.outputCanvas, contourImg);
-                    
-                    src.delete(); contours.delete(); hierarchy.delete(); contourImg.delete();
+                    src.delete(); contours.delete(); hierarchy.delete();
                 }
             }