Spaces:

LeafNet75
/

Segment-Leaf

Sleeping

App Files Files Community

Subh775 commited on Sep 18

Commit

8c8b6d8

verified ·

1 Parent(s): 3224a0d

Update index.html

Browse files

Files changed (1) hide show

index.html +342 -332

index.html CHANGED Viewed

@@ -3,436 +3,446 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaf Segmentation with Precision</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;
             margin-bottom: 20px;
             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>
-                <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>
-        // Wait for OpenCV to be ready
-        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() {
-                // FIX: Simplified event listeners for robust uploading
-                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);
-                        // 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;
                 };
                 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') ? '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
-                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();
-                    // Convert to grayscale for findContours
-                    cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
-                    cv.findContours(src, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
-                    // Draw contours directly onto the output canvas
-                    this.outputCtx.strokeStyle = 'white';
-                    this.outputCtx.lineWidth = 2;
-                    for (let i = 0; i < contours.size(); ++i) {
-                        const contour = contours.get(i).data32S; // Get contour points
-                        this.outputCtx.beginPath();
-                        this.outputCtx.moveTo(contour[0], contour[1]);
-                        for (let j = 2; j < contour.length; j += 2) {
-                            this.outputCtx.lineTo(contour[j], contour[j+1]);
-                        }
-                        this.outputCtx.closePath();
-                        this.outputCtx.stroke();
-                    }
-                    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>

 <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>