Spaces:

LeafNet75
/

Segment-Leaf-RFDETR

Running

App Files Files Community

Subh775 commited on Oct 21, 2025

Commit

b3c8c6c

verified ·

1 Parent(s): 487d73b

Create static/index.html

Browse files

Files changed (1) hide show

static/index.html +330 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,330 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Tulsi Leaf Segmentation — RF-DETR</title>
+    <style>
+        :root {
+            --primary: #E73562; /* pink */
+            --secondary: #EA782D; /* red-ish */
+            --dark-bg: #121212;
+            --surface-bg: #1E1E2E;
+            --text-primary: #E0E0E0;
+            --text-secondary: #BDB2C6;
+            --border-color: rgba(255, 255, 255, 0.06);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: var(--dark-bg);
+            color: var(--text-primary);
+            padding: 20px;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: var(--surface-bg);
+            border-radius: 14px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+        }
+        header {
+            text-align: center;
+            padding: 30px;
+            background: rgba(0,0,0,0.18);
+            border-bottom: 1px solid var(--border-color);
+        }
+        h1 {
+            color: var(--primary);
+            font-size: 2.2em;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .header-note {
+            font-size: 0.92rem;
+            background-color: rgba(255, 59, 48, 0.06);
+            color: var(--secondary);
+            padding: 8px 12px;
+            border-radius: 6px;
+            display: inline-block;
+            border: 1px solid rgba(255,59,48,0.08);
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 26px;
+            padding: 30px;
+        }
+        .column {
+            background: rgba(0,0,0,0.15);
+            border-radius: 12px;
+            padding: 22px;
+            display: flex;
+            flex-direction: column;
+        }
+        .column h2 {
+            color: var(--primary);
+            margin-bottom: 16px;
+            font-size: 1.4em;
+            font-weight: 500;
+            text-align: center;
+        }
+        .upload-area {
+            border: 2px dashed var(--primary);
+            border-radius: 8px;
+            padding: 28px;
+            text-align: center;
+            margin-bottom: 18px;
+            transition: all 0.2s ease;
+            cursor: pointer;
+            user-select: none;
+        }
+        .upload-area.dragover {
+            background: rgba(255, 77, 166, 0.06);
+            transform: translateY(-2px);
+        }
+        .upload-area p { color: var(--text-secondary); font-size: 1.05em; }
+        .canvas-container {
+            background: #000;
+            border-radius: 8px;
+            margin-bottom: 18px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 420px;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+        canvas, img {
+            max-width: 100%;
+            max-height: 520px;
+            object-fit: contain;
+            border-radius: 4px;
+        }
+        .controls-panel {
+            background: rgba(0,0,0,0.18);
+            border-radius: 8px;
+            padding: 14px;
+            margin-top: 6px;
+        }
+        .control-group { margin-bottom: 12px; }
+        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; }
+        input[type="range"] { width:100%; height:8px; border-radius:4px; background: rgba(255,255,255,0.06); outline:none; }
+        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; }
+        .action-btn {
+            background: linear-gradient(135deg, var(--secondary), #FF7A5A);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            font-size: 1.02em;
+            width: 100%;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.22s ease;
+            margin-top: 6px;
+            font-weight:600;
+        }
+        .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; }
+        .detection-info { color: var(--text-secondary); font-size:0.95em; }
+        .detection-count { color: var(--primary); font-weight:700; font-size:1.1em; margin-top:8px; }
+        .download-btn {
+            background: linear-gradient(135deg,#D63384,#8E2B57);
+            color: white;
+            border: none;
+            padding: 10px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            width: 100%;
+            font-weight:600;
+        }
+        @media (max-width: 900px) {
+            .main-content { grid-template-columns: 1fr; }
+            h1 { font-size: 1.8em; }
+        }
+        .visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Tulsi Leaf Segmentation — RF-DETR</h1>
+            <p class="header-note">Upload an image, set confidence, press <strong>Detect</strong>. CPU-only inference.</p>
+        </header>
+        <div class="main-content">
+            <!-- Left column: upload & controls -->
+            <div class="column">
+                <h2>Input & Controls</h2>
+                <div id="upload-area" class="upload-area">
+                    <p>Click or drop an image here (jpg, png)</p>
+                </div>
+                <input id="file-input" class="visually-hidden" type="file" accept="image/*" />
+                <div class="canvas-container">
+                    <canvas id="input-canvas"></canvas>
+                </div>
+                <div class="controls-panel">
+                    <div class="control-group">
+                        <div class="confidence-display">
+                            <label>Confidence Threshold</label>
+                            <span class="confidence-value" id="conf-display">0.25</span>
+                        </div>
+                        <input id="conf-slider" type="range" min="0" max="100" value="25" step="1">
+                    </div>
+                    <button id="predict-btn" class="action-btn" disabled>Detect Leaves</button>
+                </div>
+            </div>
+            <!-- Right column: output & info -->
+            <div class="column">
+                <h2>Detection Results</h2>
+                <div class="canvas-container">
+                    <img id="annotated-img" alt="Annotated result" src="" />
+                </div>
+                <div class="info-panel">
+                    <div class="detection-info">
+                        <p><strong>Status:</strong> <span id="status-text">Ready</span></p>
+                        <p class="detection-count">Leaves Detected: <span id="leaf-count">0</span></p>
+                        <p class="detection-info">Highest confidence: <strong id="best-conf">0.00</strong></p>
+                        <button id="download-btn" class="download-btn" disabled>Download Annotated Image</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('file-input');
+        const inputCanvas = document.getElementById('input-canvas');
+        const inputCtx = inputCanvas.getContext('2d');
+        const predictBtn = document.getElementById('predict-btn');
+        const confSlider = document.getElementById('conf-slider');
+        const confDisplay = document.getElementById('conf-display');
+        const annotatedImg = document.getElementById('annotated-img');
+        const statusText = document.getElementById('status-text');
+        const leafCountEl = document.getElementById('leaf-count');
+        const bestConfEl = document.getElementById('best-conf');
+        const downloadBtn = document.getElementById('download-btn');
+        let currentImage = null;
+        let lastAnnotatedDataUrl = null;
+        let boxes = [];
+        function setStatus(text) { statusText.textContent = text; }
+        uploadArea.addEventListener('click', ()=> fileInput.click());
+        uploadArea.addEventListener('dragover', (e)=>{ e.preventDefault(); uploadArea.classList.add('dragover'); });
+        uploadArea.addEventListener('dragleave', ()=> uploadArea.classList.remove('dragover'));
+        uploadArea.addEventListener('drop', (e)=>{
+            e.preventDefault(); uploadArea.classList.remove('dragover');
+            const f = e.dataTransfer.files && e.dataTransfer.files[0];
+            if (f) handleFile(f);
+        });
+        fileInput.addEventListener('change', (e)=> {
+            const f = e.target.files && e.target.files[0];
+            if (f) handleFile(f);
+        });
+        function handleFile(file) {
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                const img = new Image();
+                img.onload = () => {
+                    currentImage = img;
+                    drawToCanvas(img);
+                    predictBtn.disabled = false;
+                    annotatedImg.src = "";
+                    downloadBtn.disabled = true;
+                    setStatus("Image ready");
+                };
+                img.src = ev.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        function drawToCanvas(img) {
+            const maxW = 600, maxH = 520;
+            let w = img.width, h = img.height;
+            const ratio = Math.min(maxW/w, maxH/h, 1);
+            w = Math.round(w*ratio); h = Math.round(h*ratio);
+            inputCanvas.width = w; inputCanvas.height = h;
+            inputCtx.clearRect(0,0,w,h);
+            inputCtx.drawImage(img, 0,0,w,h);
+        }
+        confSlider.addEventListener('input', ()=> {
+            const val = confSlider.value / 100;
+            confDisplay.textContent = val.toFixed(2);
+        });
+        predictBtn.addEventListener('click', async ()=>{
+            if (!currentImage) return;
+            predictBtn.disabled = true;
+            setStatus("Processing...");
+            const dataUrl = inputCanvas.toDataURL('image/jpeg', 0.9);
+            const conf = confSlider.value / 100;
+            try {
+                const res = await fetch('/predict', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ image: dataUrl, conf })
+                });
+                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;
+                bestConfEl.textContent = (best).toFixed(2);
+                downloadBtn.disabled = false;
+                setStatus("Done");
+            } catch (err) {
+                console.error(err);
+                setStatus("Error: " + (err.message || err));
+                alert('Prediction failed. See console for details.');
+            } finally {
+                predictBtn.disabled = false;
+            }
+        });
+        downloadBtn.addEventListener('click', ()=>{
+            if (!lastAnnotatedDataUrl) return;
+            const a = document.createElement('a');
+            a.href = lastAnnotatedDataUrl;
+            a.download = `tulsi_segment_${Date.now()}.png`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+        });
+        // Initialize
+        setStatus('Ready');
+    })();
+    </script>
+</body>
+</html>