Update index.html

index.html

@@ -63,6 +63,7 @@
             margin-bottom: 20px;
             transition: all 0.3s ease;
             cursor: pointer;
+            user-select: none;
         }
         .upload-area:hover, .upload-area.dragover {
             background: rgba(76, 175, 80, 0.1);
@@ -78,6 +79,7 @@
             height: 400px;
             border: 1px solid var(--border-color);
             flex-shrink: 0;
+            position: relative;
         }
         canvas {
             max-width: 100%;
@@ -127,6 +129,14 @@
         }
         .download-btn:disabled { background: #666; cursor: not-allowed; }
         .hidden { display: none !important; }
+        /* visually-hidden allows programmatic click while keeping it out of sight */
+        .visually-hidden {
+            position: absolute !important;
+            left: -9999px !important;
+            width: 1px !important;
+            height: 1px !important;
+            overflow: hidden !important;
+        }
         @media (max-width: 900px) {
             .main-content { grid-template-columns: 1fr; }
         }
@@ -138,10 +148,11 @@
         <div class="main-content">
             <div class="column">
                 <h2>Input & Controls</h2>
-                <div class="upload-area" id="upload-area">
+                <div class="upload-area" id="upload-area" role="button" tabindex="0">
                     <p>Click or Drop Image Here</p>
                 </div>
-                <input type="file" id="file-input" class="hidden" accept="image/*">
+                <!-- keep file input in DOM but visually hidden (not display:none) so programmatic click works reliably -->
+                <input type="file" id="file-input" class="visually-hidden" accept="image/*">
 
                 <div class="canvas-container">
                     <canvas id="input-canvas"></canvas>
@@ -181,12 +192,18 @@
 
     <script src="https://docs.opencv.org/4.8.0/opencv.js"></script>
     <script>
-        cv['onRuntimeInitialized'] = () => {
-            console.log('OpenCV.js is ready.');
-            document.addEventListener('DOMContentLoaded', () => {
-                new SegmentationApp();
-            });
-        };
+        // Robust init: wait for both DOMContentLoaded and cv runtime
+        let cvReady = false;
+        let domReady = false;
+        function tryInit() {
+            if (cvReady && domReady) {
+                // instantiate app
+                window.segApp = new SegmentationApp();
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', () => { domReady = true; tryInit(); });
+        cv['onRuntimeInitialized'] = () => { console.log('OpenCV.js is ready.'); cvReady = true; tryInit(); };
 
         class SegmentationApp {
             constructor() {
@@ -214,17 +231,21 @@
                 const fileInput = document.getElementById('file-input');
                 const uploadArea = document.getElementById('upload-area');
 
-                uploadArea.onclick = () => fileInput.click();
-                fileInput.onchange = e => this.handleFile(e.target.files[0]);
-                
-                uploadArea.ondragover = e => { e.preventDefault(); uploadArea.classList.add('dragover'); };
-                uploadArea.ondragleave = () => uploadArea.classList.remove('dragover');
-                uploadArea.ondrop = e => {
-                    e.preventDefault();
-                    uploadArea.classList.remove('dragover');
-                    this.handleFile(e.dataTransfer.files[0]);
-                };
-                
+                // clicking upload area triggers the hidden file input
+                uploadArea.addEventListener('click', () => fileInput.click());
+                // also support keyboard activation for accessibility
+                uploadArea.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });
+
+                fileInput.addEventListener('change', e => this.handleFile(e.target.files[0]));
+
+                uploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.classList.add('dragover'); });
+                uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
+                uploadArea.addEventListener('drop', e => {
+                    e.preventDefault(); uploadArea.classList.remove('dragover');
+                    const f = e.dataTransfer.files && e.dataTransfer.files[0];
+                    if (f) this.handleFile(f);
+                });
+
                 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()));
@@ -236,7 +257,7 @@
                         this.currentTool = e.target.dataset.tool;
                     };
                 });
-                
+
                 document.getElementById('view-filled').onclick = () => this.setView('filled');
                 document.getElementById('view-outline').onclick = () => this.setView('outline');
                 document.getElementById('view-binary').onclick = () => this.setView('binary');
@@ -245,6 +266,10 @@
                 document.getElementById('clear-annotations').onclick = () => this.clearAnnotations();
                 this.predictBtn.onclick = () => this.predict();
                 this.downloadBtn.onclick = () => this.downloadMask();
+
+                // prevent accidental image drag from navigating away
+                window.addEventListener('dragover', (e) => e.preventDefault());
+                window.addEventListener('drop', (e) => e.preventDefault());
             }
 
             handleFile(file) {
@@ -265,7 +290,7 @@
                 };
                 reader.readAsDataURL(file);
             }
-            
+
             reset() {
                 this.annotations = [];
                 this.predictedMask = null;
@@ -273,25 +298,31 @@
                 this.downloadBtn.disabled = true;
                 this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
             }
-            
+
             drawImageScaled(canvas, ctx, img) {
                 const container = canvas.parentElement;
                 const hRatio = container.clientWidth / img.width;
                 const vRatio = container.clientHeight / img.height;
                 const ratio = Math.min(hRatio, vRatio);
-                canvas.width = img.width * ratio;
-                canvas.height = img.height * ratio;
+                // Guard against zero sizes
+                const finalRatio = (ratio && isFinite(ratio)) ? ratio : 1;
+                canvas.width = Math.round(img.width * finalRatio);
+                canvas.height = Math.round(img.height * finalRatio);
+                ctx.clearRect(0,0,canvas.width, canvas.height);
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             }
-            
+
             getCanvasCoordinates(e) {
                 const rect = this.inputCanvas.getBoundingClientRect();
+                // Support touch events
+                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
                 return {
-                    x: (e.clientX - rect.left) * (this.inputCanvas.width / rect.width),
-                    y: (e.clientY - rect.top) * (this.inputCanvas.height / rect.height)
+                    x: (clientX - rect.left) * (this.inputCanvas.width / rect.width),
+                    y: (clientY - rect.top) * (this.inputCanvas.height / rect.height)
                 };
             }
-            
+
             startDrawing(e) {
                 if (!this.uploadedImage) return;
                 this.isDrawing = true;
@@ -299,16 +330,16 @@
                 if (this.currentTool === 'point') this.drawOnCanvas(coords.x, coords.y);
                 else { this.lastX = coords.x; this.lastY = coords.y; }
             }
-            
+
             draw(e) {
                 if (!this.isDrawing || this.currentTool !== 'line') return;
                 const coords = this.getCanvasCoordinates(e);
                 this.drawOnCanvas(this.lastX, this.lastY, coords.x, coords.y);
                 [this.lastX, this.lastY] = [coords.x, coords.y];
             }
-            
+
             stopDrawing() { this.isDrawing = false; }
-            
+
             drawOnCanvas(x1, y1, x2 = null, y2 = null) {
                 [this.inputCtx, this.maskCtx].forEach((ctx, i) => {
                     ctx.beginPath();
@@ -316,7 +347,7 @@
                     ctx.strokeStyle = (i === 0) ? '#4CAF50' : 'white';
                     ctx.fillStyle = (i === 0) ? '#4CAF50' : 'white';
                     ctx.lineCap = 'round';
-                    if (x2 && y2) {
+                    if (x2 !== null && y2 !== null) {
                         ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
                     } else {
                         ctx.arc(x1, y1, this.brushSize, 0, Math.PI * 2); ctx.fill();
@@ -325,14 +356,14 @@
                 this.annotations.push(true);
                 this.predictBtn.disabled = false;
             }
-            
+
             clearAnnotations() {
                 if (!this.uploadedImage) return;
                 this.reset();
                 this.drawImageScaled(this.inputCanvas, this.inputCtx, this.uploadedImage);
                 this.maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height);
             }
-            
+
             async predict() {
                 if (!this.uploadedImage || this.annotations.length === 0) return;
                 this.predictBtn.disabled = true; this.predictBtn.innerText = "Processing...";
@@ -363,21 +394,22 @@
                     this.predictBtn.disabled = this.annotations.length === 0;
                 }
             }
-            
+
             setView(view) {
                 this.currentView = view;
                 document.querySelectorAll('.output-tabs .tool-btn').forEach(b => b.classList.remove('active'));
-                document.getElementById(`view-${view}`).classList.add('active');
+                const el = document.getElementById(`view-${view}`);
+                if (el) el.classList.add('active');
                 this.transparencyControl.style.display = (view === 'filled') ? 'block' : 'none';
                 this.renderOutput();
             }
-            
+
             renderOutput() {
                 if (!this.predictedMask) {
                     this.outputCtx.clearRect(0, 0, this.outputCanvas.width, this.outputCanvas.height);
                     return;
                 }
-                
+
                 this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
 
@@ -385,18 +417,18 @@
                     this.drawImageScaled(this.outputCanvas, this.outputCtx, this.predictedMask);
                     return;
                 }
-                
+
                 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') {
                     tempCtx.globalCompositeOperation = 'source-in';
                     tempCtx.fillStyle = '#FF00FF'; // Magenta
                     tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-                    
+
                     this.outputCtx.globalAlpha = this.transparencySlider.value / 100;
                     this.outputCtx.drawImage(tempCanvas, 0, 0);
                     this.outputCtx.globalAlpha = 1.0;
@@ -410,19 +442,24 @@
                     const contours = new cv.MatVector();
                     const hierarchy = new cv.Mat();
                     cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
-                    
+
                     const color = new cv.Scalar(255, 255, 255, 255); // White color
                     for (let i = 0; i < contours.size(); ++i) {
                         cv.drawContours(contourImg, contours, i, color, 2, cv.LINE_8, hierarchy, 0);
                     }
-                    
+
                     // Draw the contours over the original image
-                    this.outputCtx.drawImage(contourImg, 0, 0, this.outputCanvas.width, this.outputCanvas.height);
+                    // draw contourImg into a temporary HTML canvas first
+                    const contourCanvas = document.createElement('canvas');
+                    contourCanvas.width = contourImg.cols;
+                    contourCanvas.height = contourImg.rows;
+                    cv.imshow(contourCanvas, contourImg);
+                    this.outputCtx.drawImage(contourCanvas, 0, 0, this.outputCanvas.width, this.outputCanvas.height);
 
                     src.delete(); contours.delete(); hierarchy.delete(); contourImg.delete();
                 }
             }
-            
+
             downloadMask() {
                 if (!this.predictedMask) return;
                 const link = document.createElement('a');
@@ -433,4 +470,4 @@
         }
     </script>
 </body>
-</html>
+</html>