Update index.html

index.html

@@ -52,6 +52,19 @@
             font-size: 1.5em;
             font-weight: 500;
         }
+        .upload-area {
+            border: 2px dashed var(--primary);
+            border-radius: 8px;
+            padding: 30px;
+            text-align: center;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .upload-area:hover, .upload-area.dragover {
+            background: rgba(76, 175, 80, 0.1);
+            border-color: #66BB6A;
+        }
         .canvas-container {
             background: #000;
             border-radius: 8px;
@@ -96,21 +109,19 @@
         .tool-btn.active { background: var(--primary); color: white; }
         .predict-btn {
             background: linear-gradient(135deg, #FF6B35, #F7931E);
-            color: white;
-            padding: 15px 30px;
-            font-size: 18px;
-            width: 100%;
+            color: white; border: none;
+            padding: 15px 30px; font-size: 18px; width: 100%;
+            border-radius: 8px; cursor: pointer; transition: all 0.3s ease;
         }
+        .predict-btn:hover:not(:disabled) { transform: translateY(-2px); }
         .predict-btn:disabled { background: #666; cursor: not-allowed; }
-        .output-tabs {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
+        .output-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
         .download-btn {
              background: linear-gradient(135deg, #9C27B0, #673AB7);
-             color: white;
+             color: white; border: none; padding: 12px 24px;
+             border-radius: 8px; cursor: pointer; width: 100%;
         }
+        .download-btn:disabled { background: #666; cursor: not-allowed; }
         .hidden { display: none !important; }
         @media (max-width: 900px) {
             .main-content { grid-template-columns: 1fr; }
@@ -123,6 +134,9 @@
         <div class="main-content">
             <div class="column">
                 <h2>Input & Controls</h2>
+                <div class="upload-area" id="upload-area">
+                    <p>Click or Drop Image Here</p>
+                </div>
                 <div class="canvas-container">
                     <canvas id="input-canvas"></canvas>
                 </div>
@@ -151,7 +165,7 @@
                 <div class="output-controls">
                     <div class="tool-group" id="transparency-control">
                         <label>Mask Transparency</label>
-                        <input type="range" id="transparency" min="0" max="100" value="40">
+                        <input type="range" id="transparency" min="0" max="100" value="40" style="width:100%;">
                     </div>
                     <button class="download-btn" id="download-btn" disabled>Download Mask</button>
                 </div>
@@ -159,18 +173,24 @@
         </div>
     </div>
 
+    <script src="https://docs.opencv.org/4.8.0/opencv.js"></script>
     <script>
+        // Wait for OpenCV to be ready
+        cv['onRuntimeInitialized'] = () => {
+            console.log('OpenCV.js is ready.');
+            document.addEventListener('DOMContentLoaded', () => {
+                new SegmentationApp();
+            });
+        };
+
         class SegmentationApp {
             constructor() {
-                // Canvases
                 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');
-
-                // State
                 this.currentTool = 'point';
                 this.brushSize = 8;
                 this.isDrawing = false;
@@ -178,37 +198,31 @@
                 this.predictedMask = null;
                 this.annotations = [];
                 this.currentView = 'filled';
-
-                // DOM Elements
                 this.predictBtn = document.getElementById('predict-btn');
                 this.downloadBtn = document.getElementById('download-btn');
                 this.transparencySlider = document.getElementById('transparency');
                 this.transparencyControl = document.getElementById('transparency-control');
-                
                 this.initEventListeners();
             }
 
             initEventListeners() {
-                // Use a single file input for both click and drop
                 const fileInput = document.createElement('input');
                 fileInput.type = 'file';
                 fileInput.accept = 'image/*';
                 fileInput.onchange = e => this.handleFile(e.target.files[0]);
                 
-                this.inputCanvas.parentElement.onclick = () => fileInput.click();
-                this.inputCanvas.parentElement.ondragover = e => e.preventDefault();
-                this.inputCanvas.parentElement.ondrop = e => {
+                const uploadArea = document.getElementById('upload-area');
+                uploadArea.onclick = () => fileInput.click();
+                uploadArea.ondragover = e => e.preventDefault();
+                uploadArea.ondrop = e => {
                     e.preventDefault();
                     this.handleFile(e.dataTransfer.files[0]);
                 };
                 
-                // Drawing events
                 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());
+                ['mouseup', 'mouseout'].forEach(evt => this.inputCanvas.addEventListener(evt, () => this.stopDrawing()));
 
-                // Tool selection
                 document.querySelectorAll('.tool-btn[data-tool]').forEach(btn => {
                     btn.onclick = (e) => {
                         document.querySelectorAll('.tool-btn[data-tool]').forEach(b => b.classList.remove('active'));
@@ -217,12 +231,10 @@
                     };
                 });
                 
-                // View selection
                 document.getElementById('view-filled').onclick = () => this.setView('filled');
                 document.getElementById('view-outline').onclick = () => this.setView('outline');
                 document.getElementById('view-binary').onclick = () => this.setView('binary');
 
-                // Controls
                 this.transparencySlider.oninput = () => this.renderOutput();
                 document.getElementById('clear-annotations').onclick = () => this.clearAnnotations();
                 this.predictBtn.onclick = () => this.predict();
@@ -238,6 +250,11 @@
                         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;
+                        this.maskCanvas.height = this.inputCanvas.height;
                     };
                     img.src = e.target.result;
                 };
@@ -253,14 +270,13 @@
             }
 
             drawImageScaled(canvas, ctx, img) {
-                const hRatio = canvas.width / img.width;
-                const vRatio = canvas.height / img.height;
+                const hRatio = canvas.parentElement.clientWidth / img.width;
+                const vRatio = canvas.parentElement.clientHeight / img.height;
                 const ratio = Math.min(hRatio, vRatio);
-                const centerShift_x = (canvas.width - img.width * ratio) / 2;
-                const centerShift_y = (canvas.height - img.height * ratio) / 2;
+                canvas.width = img.width * ratio;
+                canvas.height = img.height * ratio;
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.drawImage(img, 0, 0, img.width, img.height,
-                              centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             }
 
             getCanvasCoordinates(e) {
@@ -289,20 +305,16 @@
             stopDrawing() { this.isDrawing = false; }
 
             drawOnCanvas(x1, y1, x2 = null, y2 = null) {
-                // This function draws on both the visible and hidden scribble canvases
                 [this.inputCtx, this.maskCtx].forEach((ctx, i) => {
                     ctx.beginPath();
-                    ctx.lineWidth = this.brushSize;
+                    ctx.lineWidth = this.brushSize * 2;
                     ctx.strokeStyle = (i === 0) ? '#4CAF50' : 'white';
                     ctx.fillStyle = (i === 0) ? '#4CAF50' : 'white';
                     ctx.lineCap = 'round';
-                    if (x2 && y2) { // Line
-                        ctx.moveTo(x1, y1);
-                        ctx.lineTo(x2, y2);
-                        ctx.stroke();
-                    } else { // Point
-                        ctx.arc(x1, y1, this.brushSize, 0, Math.PI * 2);
-                        ctx.fill();
+                    if (x2 && y2) {
+                        ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+                    } else {
+                        ctx.arc(x1, y1, this.brushSize, 0, Math.PI * 2); ctx.fill();
                     }
                 });
                 this.annotations.push(true);
@@ -310,6 +322,7 @@
             }
 
             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);
@@ -317,9 +330,7 @@
 
             async predict() {
                 if (!this.uploadedImage || this.annotations.length === 0) return;
-                this.predictBtn.disabled = true;
-                this.predictBtn.innerText = "Processing...";
-
+                this.predictBtn.disabled = true; this.predictBtn.innerText = "Processing...";
                 try {
                     const payload = {
                         image: this.inputCanvas.toDataURL('image/jpeg'),
@@ -340,7 +351,6 @@
                         this.downloadBtn.disabled = false;
                     };
                     maskImg.src = result.predicted_mask;
-
                 } catch (error) {
                     console.error('Prediction failed:', error);
                     alert('Prediction failed. Check the console for details.');
@@ -360,69 +370,42 @@
 
             renderOutput() {
                 if (!this.predictedMask) return;
-                
-                this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
 
-                // Create a temporary canvas to draw the raw mask
-                const tempCanvas = document.createElement('canvas');
-                tempCanvas.width = this.uploadedImage.width;
-                tempCanvas.height = this.uploadedImage.height;
-                const tempCtx = tempCanvas.getContext('2d');
-                tempCtx.drawImage(this.predictedMask, 0, 0);
-                const maskData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
-                
                 if (this.currentView === 'binary') {
                     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;
+                this.drawImageScaled(tempCanvas, tempCtx, this.predictedMask);
+                
                 if (this.currentView === 'filled') {
-                    const alpha = this.transparencySlider.value / 100;
-                    this.outputCtx.globalAlpha = alpha;
-                    const colorOverlay = this.createColorOverlay(maskData, [255, 0, 255]); // Magenta
-                    this.drawImageScaled(this.outputCanvas, this.outputCtx, colorOverlay);
+                    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;
+
                 } else if (this.currentView === 'outline') {
-                    const mask_uint8 = new cv.Mat();
-                    const src = cv.matFromImageData(maskData);
-                    cv.cvtColor(src, mask_uint8, cv.COLOR_RGBA2GRAY, 0);
-                    let contours = new cv.MatVector();
-                    let hierarchy = new cv.Mat();
-                    cv.findContours(mask_uint8, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
+                    const src = cv.imread(tempCanvas);
+                    const contours = new cv.MatVector();
+                    const hierarchy = new cv.Mat();
+                    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
+                    cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
                     
-                    const scaleRatio = this.outputCanvas.width / this.uploadedImage.width;
                     this.outputCtx.strokeStyle = 'white';
                     this.outputCtx.lineWidth = 2;
                     for (let i = 0; i < contours.size(); ++i) {
-                        const contour = contours.get(i);
-                        this.outputCtx.beginPath();
-                        const d = contour.data32S;
-                        this.outputCtx.moveTo(d[0] * scaleRatio, d[1] * scaleRatio);
-                        for (let j = 2; j < d.length; j += 2) {
-                            this.outputCtx.lineTo(d[j] * scaleRatio, d[j + 1] * scaleRatio);
-                        }
-                        this.outputCtx.closePath();
-                        this.outputCtx.stroke();
-                    }
-                    src.delete(); mask_uint8.delete(); contours.delete(); hierarchy.delete();
-                }
-            }
-
-            createColorOverlay(imageData, color) {
-                const data = imageData.data;
-                for (let i = 0; i < data.length; i += 4) {
-                    if (data[i] > 128) { // If the pixel is white in the mask
-                        data[i] = color[0];
-                        data[i + 1] = color[1];
-                        data[i + 2] = color[2];
+                        cv.drawContours(this.outputCtx, contours, i, [255, 255, 255, 255], 2, cv.LINE_8, hierarchy, 100);
                     }
+                    src.delete(); contours.delete(); hierarchy.delete();
                 }
-                const canvas = document.createElement('canvas');
-                canvas.width = imageData.width;
-                canvas.height = imageData.height;
-                canvas.getContext('2d').putImageData(imageData, 0, 0);
-                return canvas;
             }
 
             downloadMask() {
@@ -433,20 +416,6 @@
                 link.click();
             }
         }
-
-        // OpenCV.js loader
-        const script = document.createElement('script');
-        script.src = 'https://docs.opencv.org/4.8.0/opencv.js';
-        script.async = true;
-        script.onload = () => {
-            cv['onRuntimeInitialized'] = () => {
-                console.log('OpenCV.js is ready.');
-                document.addEventListener('DOMContentLoaded', () => {
-                    new SegmentationApp();
-                });
-            };
-        };
-        document.head.appendChild(script);
     </script>
 </body>
 </html>