Update static/index.html

static/index.html

@@ -6,13 +6,14 @@
     <title>Tulsi Leaf Segmentation — RF-DETR</title>
     <style>
         :root {
-            --primary: #E73562; /* pink */
-            --secondary: #EA782D; /* red-ish */
+            --primary: #E73562;
+            --secondary: #EA782D;
             --dark-bg: #121212;
             --surface-bg: #1E1E2E;
             --text-primary: #E0E0E0;
             --text-secondary: #BDB2C6;
             --border-color: rgba(255, 255, 255, 0.06);
+            --accent-green: #33ff99;
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -114,7 +115,7 @@
             padding: 14px;
             margin-top: 6px;
         }
-        .control-group { margin-bottom: 12px; }
+        .control-group { margin-bottom: 14px; }
         label { display:block; margin-bottom:6px; color:var(--text-secondary); font-size:0.95em; }
         .confidence-display { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
         .confidence-value { color: var(--primary); font-weight:700; font-size:1.05em; }
@@ -123,6 +124,66 @@
         input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; }
         input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; }
 
+        /* Toggle switches */
+        .toggle-group {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 14px;
+            padding: 10px;
+            background: rgba(0,0,0,0.2);
+            border-radius: 6px;
+        }
+        .toggle-item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .toggle-label {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+            font-weight: 500;
+        }
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 44px;
+            height: 24px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.1);
+            transition: .3s;
+            border-radius: 24px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: .3s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--accent-green);
+        }
+        input:checked + .slider:before {
+            transform: translateX(20px);
+        }
+
         .action-btn {
             background: linear-gradient(135deg, var(--secondary), #FF7A5A);
             color: white;
@@ -136,6 +197,10 @@
             margin-top: 6px;
             font-weight:600;
         }
+        .action-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(234, 120, 45, 0.4);
+        }
         .action-btn:disabled { background: linear-gradient(135deg,#444,#666); cursor:not-allowed; opacity:0.6; }
 
         .info-panel { background: rgba(0,0,0,0.14); border-radius:8px; padding:14px; margin-top:10px; }
@@ -151,10 +216,18 @@
             cursor: pointer;
             width: 100%;
             font-weight:600;
+            transition: all 0.22s ease;
         }
+        .download-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(214, 51, 132, 0.4);
+        }
+        .download-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        
         @media (max-width: 900px) {
             .main-content { grid-template-columns: 1fr; }
             h1 { font-size: 1.8em; }
+            .toggle-group { flex-direction: column; gap: 10px; }
         }
         .visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
     </style>
@@ -163,7 +236,7 @@
     <div class="container">
         <header>
             <h1>Tulsi Leaf Segmentation — RF-DETR</h1>
-            <p class="header-note">The model can predict wrongly over clutterd/unclear images. <strong>Recommended:</strong> Please provide focused images only.</p>
+            <p class="header-note">Upload an image, set confidence, press <strong>Detect</strong>. CPU-only inference.</p>
         </header>
 
         <div class="main-content">
@@ -172,7 +245,7 @@
                 <h2>Input & Controls</h2>
 
                 <div id="upload-area" class="upload-area">
-                    <p>Click/drop an image (jpg, png)</p>
+                    <p>Click or drop an image here (jpg, png)</p>
                 </div>
                 <input id="file-input" class="visually-hidden" type="file" accept="image/*" />
 
@@ -189,6 +262,23 @@
                         <input id="conf-slider" type="range" min="0" max="100" value="5" step="1">
                     </div>
 
+                    <div class="toggle-group">
+                        <div class="toggle-item">
+                            <span class="toggle-label">Show Labels</span>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="show-labels" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="toggle-item">
+                            <span class="toggle-label">Show Confidence</span>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="show-confidence" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+
                     <button id="predict-btn" class="action-btn" disabled>Detect Leaves</button>
                 </div>
             </div>
@@ -222,6 +312,8 @@
         const predictBtn = document.getElementById('predict-btn');
         const confSlider = document.getElementById('conf-slider');
         const confDisplay = document.getElementById('conf-display');
+        const showLabelsToggle = document.getElementById('show-labels');
+        const showConfidenceToggle = document.getElementById('show-confidence');
         const annotatedImg = document.getElementById('annotated-img');
         const statusText = document.getElementById('status-text');
         const leafCountEl = document.getElementById('leaf-count');
@@ -230,7 +322,6 @@
 
         let currentImage = null;
         let lastAnnotatedDataUrl = null;
-        let boxes = [];
 
         function setStatus(text) { statusText.textContent = text; }
 
@@ -284,19 +375,27 @@
             if (!currentImage) return;
             predictBtn.disabled = true;
             setStatus("Processing...");
+            
             const dataUrl = inputCanvas.toDataURL('image/jpeg', 0.9);
             const conf = confSlider.value / 100;
+            const showLabels = showLabelsToggle.checked;
+            const showConfidence = showConfidenceToggle.checked;
+            
             try {
                 const res = await fetch('/predict', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ image: dataUrl, conf })
+                    body: JSON.stringify({ 
+                        image: dataUrl, 
+                        conf: conf,
+                        show_labels: showLabels,
+                        show_confidence: showConfidence
+                    })
                 });
                 if (!res.ok) throw new Error('Server error: ' + res.status);
                 const j = await res.json();
-                // j.annotated: data URL, j.confidences: [..], j.count
+                
                 lastAnnotatedDataUrl = j.annotated;
-                boxes = j.confidences || [];
                 annotatedImg.src = lastAnnotatedDataUrl;
                 leafCountEl.textContent = j.count || 0;
                 const best = j.confidences && j.confidences.length ? Math.max(...j.confidences) : 0;
@@ -327,4 +426,4 @@
     })();
     </script>
 </body>
-</html>
+</html>