Spaces:

LeafNet75
/

Segment-Leaf

Sleeping

App Files Files Community

Subh775 commited on Sep 18, 2025

Commit

4c4e3b2

verified ·

1 Parent(s): f0a3b89

Update index.html

Browse files

Files changed (1) hide show

index.html +251 -84

index.html CHANGED Viewed

@@ -3,68 +3,104 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Leaf Segmentation</title>
     <style>
-        :root {
-            --primary: #4CAF50;
-            --dark-bg: #121212;
-            --surface-bg: #1E1E2E;
-            --text-primary: #E0E0E0;
-            --text-secondary: #9E9E9E;
-            --border-color: rgba(255, 255, 255, 0.1);
-        }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: 'Segoe UI', sans-serif;
-            background: var(--dark-bg);
-            color: var(--text-primary);
             padding: 20px;
         }
         .container {
             max-width: 1400px;
             margin: 0 auto;
-            background: var(--surface-bg);
             border-radius: 16px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-            border: 1px solid var(--border-color);
         }
         h1 {
             text-align: center;
-            color: var(--primary);
-            padding: 30px;
-            font-size: 2.2em;
             font-weight: 300;
         }
         .main-content {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 30px;
-            padding: 0 30px 30px 30px;
         }
         .column {
-            background: rgba(0,0,0,0.2);
             border-radius: 12px;
             padding: 25px;
         }
         .column h2 {
-            color: var(--primary);
             margin-bottom: 20px;
             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;
@@ -72,86 +108,215 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 400px;
-            border: 1px solid var(--border-color);
         }
         canvas {
             max-width: 100%;
-            max-height: 100%;
             object-fit: contain;
             cursor: crosshair;
         }
-        .tools-panel, .output-controls {
-            background: rgba(0,0,0,0.2);
             border-radius: 8px;
             padding: 20px;
             margin-bottom: 20px;
         }
-        .tool-group { margin-bottom: 15px; }
         .tool-group label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
-            color: var(--text-secondary);
         }
-        .tool-buttons { display: flex; gap: 10px; }
         .tool-btn {
             background: rgba(76, 175, 80, 0.2);
-            color: var(--primary);
-            border: 1px solid var(--primary);
             padding: 10px 16px;
             border-radius: 6px;
             cursor: pointer;
             transition: all 0.3s ease;
             flex: 1;
         }
-        .tool-btn:hover { background: rgba(76, 175, 80, 0.3); }
-        .tool-btn.active { background: var(--primary); color: white; }
         .predict-btn {
             background: linear-gradient(135deg, #FF6B35, #F7931E);
-            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; }
         .download-btn {
-             background: linear-gradient(135deg, #9C27B0, #673AB7);
-             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; }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Interactive Leaf Segmentation</h1>
         <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>
                 <div class="tools-panel">
                     <div class="tool-group">
                         <label>Annotation Tools</label>
                         <div class="tool-buttons">
-                            <button class="tool-btn active" data-tool="point">Point (Dot)</button>
                             <button class="tool-btn" data-tool="line">Line/Drag</button>
                         </div>
                     </div>
-                    <button class="tool-btn" id="clear-annotations" style="width:100%; margin-top:10px;">Clear Annotations</button>
                 </div>
-                <button class="predict-btn" id="predict-btn" disabled>Predict</button>
             </div>
             <div class="column">
                 <h2>Output</h2>
                 <div class="output-tabs">
@@ -165,7 +330,8 @@
                 <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" style="width:100%;">
                     </div>
                     <button class="download-btn" id="download-btn" disabled>Download Mask</button>
                 </div>
@@ -175,7 +341,6 @@
     <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', () => {
@@ -192,7 +357,7 @@
                 this.maskCanvas = document.createElement('canvas');
                 this.maskCtx = this.maskCanvas.getContext('2d');
                 this.currentTool = 'point';
-                this.brushSize = 8;
                 this.isDrawing = false;
                 this.uploadedImage = null;
                 this.predictedMask = null;
@@ -202,6 +367,7 @@
                 this.downloadBtn = document.getElementById('download-btn');
                 this.transparencySlider = document.getElementById('transparency');
                 this.transparencyControl = document.getElementById('transparency-control');
                 this.initEventListeners();
             }
@@ -213,9 +379,11 @@
                 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]);
                 };
@@ -240,7 +408,7 @@
                 this.predictBtn.onclick = () => this.predict();
                 this.downloadBtn.onclick = () => this.downloadMask();
             }
             handleFile(file) {
                 if (!file || !file.type.startsWith('image/')) return;
                 const reader = new FileReader();
@@ -250,7 +418,6 @@
                         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;
@@ -260,7 +427,7 @@
                 };
                 reader.readAsDataURL(file);
             }
             reset() {
                 this.annotations = [];
                 this.predictedMask = null;
@@ -268,17 +435,17 @@
                 this.downloadBtn.disabled = true;
                 this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
             }
             drawImageScaled(canvas, ctx, img) {
-                const hRatio = canvas.parentElement.clientWidth / img.width;
-                const vRatio = canvas.parentElement.clientHeight / img.height;
                 const ratio = Math.min(hRatio, vRatio);
                 canvas.width = img.width * ratio;
                 canvas.height = img.height * ratio;
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             }
             getCanvasCoordinates(e) {
                 const rect = this.inputCanvas.getBoundingClientRect();
                 return {
@@ -294,7 +461,7 @@
                 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);
@@ -303,7 +470,7 @@
             }
             stopDrawing() { this.isDrawing = false; }
             drawOnCanvas(x1, y1, x2 = null, y2 = null) {
                 [this.inputCtx, this.maskCtx].forEach((ctx, i) => {
                     ctx.beginPath();
@@ -320,14 +487,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...";
@@ -343,7 +510,6 @@
                     });
                     if (!response.ok) throw new Error(`Server error: ${response.status}`);
                     const result = await response.json();
                     const maskImg = new Image();
                     maskImg.onload = () => {
                         this.predictedMask = maskImg;
@@ -359,19 +525,21 @@
                     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');
-                this.transparencyControl.style.display = (view === 'filled') ? 'block' : 'none';
                 this.renderOutput();
             }
             renderOutput() {
                 if (!this.predictedMask) return;
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
                 if (this.currentView === 'binary') {
                     this.drawImageScaled(this.outputCanvas, this.outputCtx, this.predictedMask);
                     return;
@@ -381,7 +549,7 @@
                 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') {
                     tempCtx.globalCompositeOperation = 'source-in';
@@ -391,7 +559,6 @@
                     this.outputCtx.globalAlpha = this.transparencySlider.value / 100;
                     this.outputCtx.drawImage(tempCanvas, 0, 0);
                     this.outputCtx.globalAlpha = 1.0;
                 } else if (this.currentView === 'outline') {
                     const src = cv.imread(tempCanvas);
                     const contours = new cv.MatVector();
@@ -399,15 +566,15 @@
                     cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
                     cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
-                    this.outputCtx.strokeStyle = 'white';
-                    this.outputCtx.lineWidth = 2;
                     for (let i = 0; i < contours.size(); ++i) {
-                        cv.drawContours(this.outputCtx, contours, i, [255, 255, 255, 255], 2, cv.LINE_8, hierarchy, 100);
                     }
                     src.delete(); contours.delete(); hierarchy.delete();
                 }
             }
             downloadMask() {
                 if (!this.predictedMask) return;
                 const link = document.createElement('a');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaf Segmentation with precision</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+            color: #e0e0e0;
+            min-height: 100vh;
             padding: 20px;
         }
         .container {
             max-width: 1400px;
             margin: 0 auto;
+            background: rgba(45, 45, 68, 0.8);
             border-radius: 16px;
+            padding: 30px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
         }
         h1 {
             text-align: center;
+            color: #4CAF50;
+            margin-bottom: 30px;
+            font-size: 2.5em;
             font-weight: 300;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         }
         .main-content {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 30px;
+            min-height: 600px;
         }
         .column {
+            background: rgba(30, 30, 46, 0.6);
             border-radius: 12px;
             padding: 25px;
+            border: 1px solid rgba(76, 175, 80, 0.2);
         }
         .column h2 {
+            color: #4CAF50;
             margin-bottom: 20px;
             font-size: 1.5em;
+            font-weight: 400;
         }
         .upload-area {
+            border: 2px dashed #4CAF50;
+            border-radius: 12px;
+            padding: 40px;
             text-align: center;
             margin-bottom: 20px;
             transition: all 0.3s ease;
             cursor: pointer;
+            background: rgba(76, 175, 80, 0.05);
         }
+        .upload-area:hover {
             background: rgba(76, 175, 80, 0.1);
             border-color: #66BB6A;
         }
+        .upload-area.dragover {
+            background: rgba(76, 175, 80, 0.15);
+            border-color: #81C784;
+            transform: scale(1.02);
+        }
+        .upload-btn {
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 10px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
+        }
+        .upload-btn:hover {
+            background: linear-gradient(135deg, #45a049, #4CAF50);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
+        }
         .canvas-container {
             background: #000;
             border-radius: 8px;
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 400px; /* Fixed height for consistent alignment */
+            border: 1px solid rgba(255,255,255,0.1);
         }
         canvas {
             max-width: 100%;
+            max-height: 100%; /* Scales image down within container */
             object-fit: contain;
+            border-radius: 4px;
             cursor: crosshair;
         }
+        .tools-panel {
+            background: rgba(0, 0, 0, 0.3);
             border-radius: 8px;
             padding: 20px;
             margin-bottom: 20px;
         }
+        .tool-group {
+            margin-bottom: 15px;
+        }
         .tool-group label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
+            color: #B0B0B0;
+        }
+        .tool-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
         }
         .tool-btn {
             background: rgba(76, 175, 80, 0.2);
+            color: #4CAF50;
+            border: 1px solid #4CAF50;
             padding: 10px 16px;
             border-radius: 6px;
             cursor: pointer;
+            font-size: 14px;
             transition: all 0.3s ease;
             flex: 1;
+            min-width: 100px;
+        }
+        .tool-btn:hover {
+            background: rgba(76, 175, 80, 0.3);
+        }
+        .tool-btn.active {
+            background: #4CAF50;
+            color: white;
+            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+        }
+        .slider-container {
+             display: flex;
+             align-items: center;
+             gap: 10px;
+        }
+        .slider {
+            width:100%;
+        }
+        .action-panel {
+            text-align: center;
         }
         .predict-btn {
             background: linear-gradient(135deg, #FF6B35, #F7931E);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
+            width: 100%;
+        }
+        .predict-btn:hover:not(:disabled) {
+            background: linear-gradient(135deg, #F7931E, #FF6B35);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4);
+        }
+        .predict-btn:disabled {
+            background: #666;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .clear-btn {
+            background: transparent;
+            color: #ff6b6b;
+            border: 1px solid #ff6b6b;
+            padding: 8px 16px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+        .clear-btn:hover {
+            background: rgba(255, 107, 107, 0.1);
         }
+        .output-controls {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 8px;
+            padding: 20px;
+        }
         .download-btn {
+            background: linear-gradient(135deg, #9C27B0, #673AB7);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 8px rgba(156, 39, 176, 0.3);
+            width: 100%;
+            margin-top: 15px;
+        }
+        .download-btn:hover:not(:disabled) {
+            background: linear-gradient(135deg, #673AB7, #9C27B0);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(156, 39, 176, 0.4);
+        }
+        .download-btn:disabled {
+            background: #666;
+            cursor: not-allowed;
+        }
+        .hidden {
+            display: none !important;
         }
+        .output-tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Leaf Segmentation with precision</h1>
         <div class="main-content">
             <div class="column">
                 <h2>Input & Controls</h2>
                 <div class="upload-area" id="upload-area">
+                    <button class="upload-btn">Upload Image</button>
+                    <p>Or drop an image here</p>
                 </div>
                 <div class="canvas-container">
                     <canvas id="input-canvas"></canvas>
                 </div>
                 <div class="tools-panel">
                     <div class="tool-group">
                         <label>Annotation Tools</label>
                         <div class="tool-buttons">
+                            <button class="tool-btn active" data-tool="point">Positive Point (Dot)</button>
                             <button class="tool-btn" data-tool="line">Line/Drag</button>
                         </div>
                     </div>
+                    <div class="tool-group">
+                        <label>Brush Size</label>
+                        <div class="slider-container">
+                            <input type="range" class="slider" id="brush-size" min="2" max="20" value="5">
+                            <span id="brush-size-value">5</span>
+                        </div>
+                    </div>
+                    <div class="tool-group">
+                        <button class="clear-btn" id="clear-annotations">Clear Annotations</button>
+                    </div>
+                </div>
+                <div class="action-panel">
+                    <button class="predict-btn" id="predict-btn" disabled>Predict</button>
                 </div>
             </div>
             <div class="column">
                 <h2>Output</h2>
                 <div class="output-tabs">
                 <div class="output-controls">
                     <div class="tool-group" id="transparency-control">
                         <label>Mask Transparency</label>
+                        <input type="range" class="slider" id="transparency" min="0" max="100" value="50">
+                        <span id="transparency-value">50%</span>
                     </div>
                     <button class="download-btn" id="download-btn" disabled>Download Mask</button>
                 </div>
     <script src="https://docs.opencv.org/4.8.0/opencv.js"></script>
     <script>
         cv['onRuntimeInitialized'] = () => {
             console.log('OpenCV.js is ready.');
             document.addEventListener('DOMContentLoaded', () => {
                 this.maskCanvas = document.createElement('canvas');
                 this.maskCtx = this.maskCanvas.getContext('2d');
                 this.currentTool = 'point';
+                this.brushSize = 5;
                 this.isDrawing = false;
                 this.uploadedImage = null;
                 this.predictedMask = null;
                 this.downloadBtn = document.getElementById('download-btn');
                 this.transparencySlider = document.getElementById('transparency');
                 this.transparencyControl = document.getElementById('transparency-control');
                 this.initEventListeners();
             }
                 const uploadArea = document.getElementById('upload-area');
                 uploadArea.onclick = () => fileInput.click();
+                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]);
                 };
                 this.predictBtn.onclick = () => this.predict();
                 this.downloadBtn.onclick = () => this.downloadMask();
             }
             handleFile(file) {
                 if (!file || !file.type.startsWith('image/')) return;
                 const reader = new FileReader();
                         this.uploadedImage = img;
                         this.reset();
                         this.drawImageScaled(this.inputCanvas, this.inputCtx, img);
                         this.outputCanvas.width = this.inputCanvas.width;
                         this.outputCanvas.height = this.inputCanvas.height;
                         this.maskCanvas.width = this.inputCanvas.width;
                 };
                 reader.readAsDataURL(file);
             }
             reset() {
                 this.annotations = [];
                 this.predictedMask = null;
                 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;
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             }
             getCanvasCoordinates(e) {
                 const rect = this.inputCanvas.getBoundingClientRect();
                 return {
                 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);
             }
             stopDrawing() { this.isDrawing = false; }
             drawOnCanvas(x1, y1, x2 = null, y2 = null) {
                 [this.inputCtx, this.maskCtx].forEach((ctx, i) => {
                     ctx.beginPath();
                 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...";
                     });
                     if (!response.ok) throw new Error(`Server error: ${response.status}`);
                     const result = await response.json();
                     const maskImg = new Image();
                     maskImg.onload = () => {
                         this.predictedMask = maskImg;
                     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');
+                this.transparencyControl.style.display = (view === 'filled' || view === 'outline') ? 'block' : 'none';
                 this.renderOutput();
             }
             renderOutput() {
                 if (!this.predictedMask) return;
+                this.outputCtx.clearRect(0,0, this.outputCanvas.width, this.outputCanvas.height);
                 this.drawImageScaled(this.outputCanvas, this.outputCtx, this.uploadedImage);
                 if (this.currentView === 'binary') {
                     this.drawImageScaled(this.outputCanvas, this.outputCtx, this.predictedMask);
                     return;
                 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';
                     this.outputCtx.globalAlpha = this.transparencySlider.value / 100;
                     this.outputCtx.drawImage(tempCanvas, 0, 0);
                     this.outputCtx.globalAlpha = 1.0;
                 } else if (this.currentView === 'outline') {
                     const src = cv.imread(tempCanvas);
                     const contours = new cv.MatVector();
                     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
                     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
                     src.delete(); contours.delete(); hierarchy.delete();
                 }
             }
             downloadMask() {
                 if (!this.predictedMask) return;
                 const link = document.createElement('a');