Spaces:

LeafNet75
/

Segment-Leaf

Sleeping

App Files Files Community

Subh775 commited on Sep 18

Commit

d77a368

verified ·

1 Parent(s): 8c8b6d8

Update index.html

Browse files

Files changed (1) hide show

index.html +330 -341

index.html CHANGED Viewed

@@ -3,446 +3,435 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaf Disease Segmentation System</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --primary: #4CAF50;
-            --primary-dark: #388E3C;
-            --secondary: #607D8B;
             --dark-bg: #121212;
-            --dark-surface: #1E1E1E;
             --text-primary: #E0E0E0;
             --text-secondary: #9E9E9E;
-            --border-color: #333;
-            --error: #F44336;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
         }
         body {
-            font-family: 'Segoe UI', 'Roboto', sans-serif;
-            background: linear-gradient(135deg, #121212 0%, #1e1e2e 100%);
             color: var(--text-primary);
-            min-height: 100vh;
             padding: 20px;
         }
         .container {
             max-width: 1400px;
             margin: 0 auto;
-            background: rgba(30, 30, 46, 0.9);
-            border-radius: 24px;
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
-            overflow: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.05);
         }
-        .header {
-            background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-            padding: 40px;
             text-align: center;
-        }
-        .header h1 {
-            font-size: 2.8rem;
             font-weight: 300;
-            margin-bottom: 12px;
-            background: linear-gradient(90deg, #4c956c, #2f9b69);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .header p {
-            font-size: 1.3rem;
-            opacity: 0.85;
-            max-width: 800px;
-            margin: 0 auto;
         }
         .main-content {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 40px;
-            padding: 50px;
         }
         .column {
-            background: rgba(42, 45, 71, 0.6);
-            border-radius: 20px;
-            padding: 35px;
-            border: 1px solid rgba(255, 255, 255, 0.08);
         }
         .column h2 {
-            color: #4c956c;
-            margin-bottom: 30px;
-            font-size: 1.8rem;
             text-align: center;
-            padding-bottom: 15px;
-            border-bottom: 2px solid #4c956c;
         }
         .upload-area {
-            border: 2px dashed rgba(76, 149, 108, 0.5);
-            border-radius: 18px;
-            padding: 50px 30px;
             text-align: center;
             cursor: pointer;
-            transition: all 0.4s ease;
-            background: rgba(76, 149, 108, 0.05);
-            margin-bottom: 30px;
         }
-        .upload-area.dragover {
-            border-color: var(--primary);
-            background: rgba(76, 149, 108, 0.15);
-            transform: scale(1.02);
         }
-        .upload-icon {
-            font-size: 3.5rem;
-            color: var(--primary);
             margin-bottom: 20px;
-        }
-        .upload-text {
-            font-size: 1.4rem;
-            margin-bottom: 8px;
-            font-weight: 500;
-        }
-        .upload-subtext {
-            font-size: 1rem;
-            opacity: 0.7;
-            color: var(--text-secondary);
-        }
-        .file-input { display: none; }
-        /* FIX: Corrected image container and image scaling */
-        .image-display {
-            margin-top: 25px;
-            border-radius: 15px;
-            overflow: hidden;
-            height: 350px; /* Fixed height */
             display: flex;
-            align-items: center;
             justify-content: center;
-            background: rgba(0, 0, 0, 0.2);
             border: 1px solid var(--border-color);
         }
-        .image-display img {
             max-width: 100%;
-            max-height: 100%; /* Scales down to fit container */
             object-fit: contain;
-            border-radius: 12px;
         }
-        .placeholder {
             color: var(--text-secondary);
-            font-style: italic;
-            text-align: center;
-            padding: 40px 20px;
         }
-        .btn {
-            background: linear-gradient(45deg, #4c956c 0%, #2f9b69 100%);
-            color: white;
-            border: none;
-            padding: 16px 40px;
-            border-radius: 30px;
-            font-size: 1.1rem;
-            font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            margin-top: 25px;
-            width: 100%;
-            text-transform: uppercase;
-            letter-spacing: 1.2px;
-            box-shadow: 0 8px 25px rgba(76, 149, 108, 0.2);
-        }
-        .btn:hover:not(:disabled) {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(76, 149, 108, 0.4);
-        }
-        .btn:disabled {
-            background: #555;
-            cursor: not-allowed;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        }
-        .loading {
-            display: none;
-            align-items: center;
-            justify-content: center;
-            gap: 15px;
-            margin-top: 25px;
-            color: var(--primary);
-            font-size: 1.1rem;
-        }
-        .spinner {
-            width: 24px;
-            height: 24px;
-            border: 2px solid rgba(76, 149, 108, 0.3);
-            border-top: 2px solid var(--primary);
-            border-radius: 50%;
-            animation: spin 1.2s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
         .download-btn {
-            background: linear-gradient(45deg, #ff6b6b 0%, #ee5a52 100%);
-            margin-top: 20px;
-            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.25);
-        }
-        .download-btn:hover:not(:disabled) {
-            background: linear-gradient(45deg, #ee5a52 0%, #ff6b6b 100%);
-            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
-        }
-        .result-stats {
-            margin-top: 30px;
-            padding: 25px;
-            background: rgba(76, 149, 108, 0.1);
-            border-radius: 16px;
-            border-left: 4px solid var(--primary);
-            display: none;
-            animation: fadeIn 0.5s ease;
-        }
-        .result-stats h3 {
-            color: var(--primary);
-            margin-bottom: 12px;
-            font-weight: 500;
-            font-size: 1.3rem;
-        }
-        .result-stats p {
-            color: #c0c0c0;
-        }
-        .alert {
-            padding: 15px;
-            border-radius: 8px;
-            margin: 20px 0;
-            display: none;
-            animation: fadeIn 0.5s ease;
-            text-align: center;
-        }
-        .alert-success {
-            background-color: rgba(76, 175, 80, 0.2);
-            border: 1px solid var(--primary);
-        }
-        .alert-error {
-            background-color: rgba(244, 67, 54, 0.2);
-            border: 1px solid var(--error);
-        }
-        .footer {
-            padding: 25px;
-            text-align: center;
-            background: rgba(0, 0, 0, 0.2);
-        }
-        .footer a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        @media (max-width: 768px) {
-            .container { margin: 10px; }
-            .main-content { grid-template-columns: 1fr; padding: 20px; }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
-            <h1>Leaf Disease Segmentation System</h1>
-            <p>Advanced AI-powered analysis to detect and segment diseased areas in plant leaves with high precision</p>
-        </div>
         <div class="main-content">
             <div class="column">
-                <h2>Input Image</h2>
-                <div class="upload-area" id="uploadArea">
-                    <div class="upload-icon">📷</div>
-                    <div class="upload-text">Upload Leaf Image</div>
-                    <div class="upload-subtext">Or drop an image here</div>
                 </div>
-                <input type="file" id="fileInput" class="file-input" accept="image/*">
-                <div class="image-display" id="inputImageDisplay">
-                    <div class="placeholder">No image selected. Upload an image to get started.</div>
                 </div>
-                <div class="alert alert-success" id="successMessage"></div>
-                <div class="alert alert-error" id="errorMessage"></div>
-                <button class="btn" id="detectBtn" disabled>🔍 Analyze Image</button>
-                <div class="loading" id="loadingIndicator">
-                    <div class="spinner"></div>
-                    <span>Analyzing leaf image...</span>
                 </div>
             </div>
             <div class="column">
-                <h2>Segmentation Results</h2>
-                <div class="image-display" id="outputImageDisplay">
-                    <div class="placeholder">Segmentation results will appear here after analysis.</div>
                 </div>
-                <button class="btn download-btn" id="downloadBtn" disabled>💾 Download Result</button>
-                <div class="result-stats" id="resultStats">
-                    <h3>Analysis Summary</h3>
-                    <p>Diseased areas have been identified and highlighted with colored overlays.</p>
                 </div>
             </div>
         </div>
-        <div class="footer">
-            Built with ❤️ and AI • A project by Subh775
-        </div>
     </div>
     <script>
-        class LeafDiseaseSegmentation {
             constructor() {
-                this.uploadArea = document.getElementById('uploadArea');
-                this.fileInput = document.getElementById('fileInput');
-                this.inputImageDisplay = document.getElementById('inputImageDisplay');
-                this.outputImageDisplay = document.getElementById('outputImageDisplay');
-                this.detectBtn = document.getElementById('detectBtn');
-                this.downloadBtn = document.getElementById('downloadBtn');
-                this.loadingIndicator = document.getElementById('loadingIndicator');
-                this.successMessage = document.getElementById('successMessage');
-                this.errorMessage = document.getElementById('errorMessage');
-                this.resultStats = document.getElementById('resultStats');
-                this.currentImage = null;
-                this.resultImage = null;
-                this.initializeEventListeners();
             }
-            initializeEventListeners() {
-                // FIX: Simplified listeners for robust uploads
-                this.uploadArea.addEventListener('click', () => this.fileInput.click());
-                this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files[0]));
-                this.uploadArea.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    this.uploadArea.classList.add('dragover');
-                });
-                this.uploadArea.addEventListener('dragleave', (e) => {
                     e.preventDefault();
-                    this.uploadArea.classList.remove('dragover');
-                });
-                this.uploadArea.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    this.uploadArea.classList.remove('dragover');
-                    const file = e.dataTransfer.files[0];
-                    if (file && file.type.startsWith('image/')) {
-                        this.handleFileSelect(file);
-                    }
                 });
-                this.detectBtn.addEventListener('click', () => this.processImage());
-                this.downloadBtn.addEventListener('click', () => this.downloadResult());
             }
-            handleFileSelect(file) {
-                if (!file || !file.type.startsWith('image/')) {
-                    this.showError('Please select a valid image file (JPEG, PNG, etc.).');
-                    return;
-                }
-                if (file.size > 10 * 1024 * 1024) { // 10MB limit
-                    this.showError('File size exceeds 10MB. Please select a smaller image.');
-                    return;
-                }
                 const reader = new FileReader();
-                reader.onload = (e) => {
-                    this.currentImage = e.target.result;
-                    this.displayInputImage(this.currentImage);
-                    this.detectBtn.disabled = false;
-                    this.showSuccess('Image uploaded successfully!');
-                    this.hideError();
                 };
                 reader.readAsDataURL(file);
             }
-            displayInputImage(imageSrc) {
-                this.inputImageDisplay.innerHTML = `<img src="${imageSrc}" alt="Input leaf image" />`;
             }
-            async processImage() {
-                if (!this.currentImage) return;
-                this.setLoadingState(true);
-                this.hideMessages();
                 try {
-                    const payload = { image: this.currentImage };
                     const response = await fetch('/predict', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(payload)
                     });
-                    if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
                     const result = await response.json();
-                    if (result.result_image) {
-                        this.resultImage = result.result_image;
-                        this.displayOutputImage(this.resultImage);
                         this.downloadBtn.disabled = false;
-                        this.resultStats.style.display = 'block';
-                        this.showSuccess('Disease detection completed successfully!');
-                    } else {
-                        throw new Error('No result image received from server');
-                    }
                 } catch (error) {
-                    console.error('Error processing image:', error);
-                    this.showError('Failed to process image. Please check your connection and try again.');
                 } finally {
-                    this.setLoadingState(false);
                 }
             }
-            displayOutputImage(imageSrc) {
-                this.outputImageDisplay.innerHTML = `<img src="${imageSrc}" alt="Disease segmentation result" />`;
-            }
-            downloadResult() {
-                if (!this.resultImage) return;
-                const link = document.createElement('a');
-                link.href = this.resultImage;
-                link.download = `leaf_disease_segmentation_${Date.now()}.png`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
             }
-            setLoadingState(isLoading) {
-                if (isLoading) {
-                    this.loadingIndicator.style.display = 'flex';
-                    this.detectBtn.disabled = true;
-                } else {
-                    this.loadingIndicator.style.display = 'none';
-                    this.detectBtn.disabled = false;
                 }
-            }
-            showSuccess(message) {
-                this.successMessage.textContent = `✅ ${message}`;
-                this.successMessage.style.display = 'block';
-                setTimeout(() => { this.successMessage.style.display = 'none'; }, 3000);
-            }
-            showError(message) {
-                this.errorMessage.textContent = `❌ ${message}`;
-                this.errorMessage.style.display = 'block';
             }
-            hideError() { this.errorMessage.style.display = 'none'; }
-            hideMessages() {
-                this.successMessage.style.display = 'none';
-                this.errorMessage.style.display = 'none';
             }
         }
-        document.addEventListener('DOMContentLoaded', () => {
-            new LeafDiseaseSegmentation();
-        });
     </script>
 </body>
 </html>

 <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;
+            display: flex;
+            flex-direction: column;
         }
         .column h2 {
+            color: var(--primary);
+            margin-bottom: 20px;
+            font-size: 1.5em;
+            font-weight: 500;
             text-align: center;
         }
         .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;
             margin-bottom: 20px;
             display: flex;
             justify-content: center;
+            align-items: center;
+            height: 400px;
             border: 1px solid var(--border-color);
+            flex-shrink: 0;
         }
+        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>
+                <input type="file" id="file-input" class="hidden" accept="image/*">
+                <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">
+                    <button class="tool-btn active" id="view-filled">Filled</button>
+                    <button class="tool-btn" id="view-outline">Outline</button>
+                    <button class="tool-btn" id="view-binary">Binary Mask</button>
                 </div>
+                <div class="canvas-container" id="output-container">
+                    <canvas id="output-canvas"></canvas>
+                </div>
+                <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>
             </div>
         </div>
     </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', () => {
+                new SegmentationApp();
+            });
+        };
+        class SegmentationApp {
             constructor() {
+                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');
+                this.currentTool = 'point';
+                this.brushSize = 8;
+                this.isDrawing = false;
+                this.uploadedImage = null;
+                this.predictedMask = null;
+                this.annotations = [];
+                this.currentView = 'filled';
+                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() {
+                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]);
+                };
+                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()));
+                document.querySelectorAll('.tool-btn[data-tool]').forEach(btn => {
+                    btn.onclick = (e) => {
+                        document.querySelectorAll('.tool-btn[data-tool]').forEach(b => b.classList.remove('active'));
+                        e.target.classList.add('active');
+                        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');
+                this.transparencySlider.oninput = () => this.renderOutput();
+                document.getElementById('clear-annotations').onclick = () => this.clearAnnotations();
+                this.predictBtn.onclick = () => this.predict();
+                this.downloadBtn.onclick = () => this.downloadMask();
             }
+            handleFile(file) {
+                if (!file || !file.type.startsWith('image/')) return;
                 const reader = new FileReader();
+                reader.onload = e => {
+                    const img = new Image();
+                    img.onload = () => {
+                        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;
+                        this.maskCanvas.height = this.inputCanvas.height;
+                    };
+                    img.src = e.target.result;
                 };
                 reader.readAsDataURL(file);
             }
+            reset() {
+                this.annotations = [];
+                this.predictedMask = null;
+                this.predictBtn.disabled = true;
+                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.clearRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            }
+            getCanvasCoordinates(e) {
+                const rect = this.inputCanvas.getBoundingClientRect();
+                return {
+                    x: (e.clientX - rect.left) * (this.inputCanvas.width / rect.width),
+                    y: (e.clientY - rect.top) * (this.inputCanvas.height / rect.height)
+                };
+            }
+            startDrawing(e) {
+                if (!this.uploadedImage) return;
+                this.isDrawing = true;
+                const coords = this.getCanvasCoordinates(e);
+                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();
+                    ctx.lineWidth = this.brushSize * 2;
+                    ctx.strokeStyle = (i === 0) ? '#4CAF50' : 'white';
+                    ctx.fillStyle = (i === 0) ? '#4CAF50' : 'white';
+                    ctx.lineCap = 'round';
+                    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);
+                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...";
                 try {
+                    const payload = {
+                        image: this.inputCanvas.toDataURL('image/jpeg'),
+                        scribble_mask: this.maskCanvas.toDataURL('image/png')
+                    };
                     const response = await fetch('/predict', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(payload)
                     });
+                    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.renderOutput();
                         this.downloadBtn.disabled = false;
+                    };
+                    maskImg.src = result.predicted_mask;
                 } catch (error) {
+                    console.error('Prediction failed:', error);
+                    alert('Prediction failed. Check the console for details.');
                 } finally {
+                    this.predictBtn.innerText = "Predict";
+                    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;
+                // 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);
+                if (this.currentView === 'binary') {
+                    this.drawImageScaled(this.outputCanvas, this.outputCtx, this.predictedMask);
+                    return;
                 }
+                // Create a temporary canvas to work with the mask for filled/outline views
+                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;
+                } else if (this.currentView === 'outline') {
+                    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);
+                    this.outputCtx.strokeStyle = 'white';
+                    this.outputCtx.lineWidth = 2;
+                    for (let i = 0; i < contours.size(); ++i) {
+                        const contour = contours.get(i).data32S;
+                        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();
+                    }
+                    src.delete(); contours.delete(); hierarchy.delete();
+                }
             }
+            downloadMask() {
+                if (!this.predictedMask) return;
+                const link = document.createElement('a');
+                link.download = 'binary_mask.png';
+                link.href = this.predictedMask.src;
+                link.click();
             }
         }
     </script>
 </body>
 </html>