Hugging Face's logo

Spaces:
LeafNet75
/
Segment-Leaf-RFDETR
Sleeping

App Files Community
Subh775 commited on
Commit
a9379e4
·
verified ·
1 Parent(s): 1009e84

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +208 -285
static/index.html CHANGED
@@ -3,17 +3,18 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>Tulsi Leaf Segmentation — RF-DETR</title>
7
  <style>
8
  :root {
9
  --primary: #E73562;
10
  --secondary: #EA782D;
 
 
11
  --dark-bg: #121212;
12
  --surface-bg: #1E1E2E;
13
  --text-primary: #E0E0E0;
14
  --text-secondary: #BDB2C6;
15
  --border-color: rgba(255, 255, 255, 0.06);
16
- --accent-green: #33ff99;
17
  }
18
  * { margin: 0; padding: 0; box-sizing: border-box; }
19
  body {
@@ -24,279 +25,241 @@
24
  min-height: 100vh;
25
  }
26
  .container {
27
- max-width: 1200px;
28
  margin: 0 auto;
29
  background: var(--surface-bg);
30
  border-radius: 14px;
31
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
32
  border: 1px solid var(--border-color);
33
  overflow: hidden;
 
 
 
34
  }
35
  header {
36
  text-align: center;
37
- padding: 30px;
38
  background: rgba(0,0,0,0.18);
39
  border-bottom: 1px solid var(--border-color);
40
  }
41
  h1 {
42
- color: var(--primary);
43
- font-size: 2.2em;
44
- font-weight: 600;
45
- margin-bottom: 8px;
 
 
46
  }
47
  .header-note {
48
- font-size: 0.92rem;
49
- background-color: rgba(255, 59, 48, 0.06);
50
- color: var(--secondary);
51
- padding: 8px 12px;
52
- border-radius: 6px;
53
- display: inline-block;
54
- border: 1px solid rgba(255,59,48,0.08);
55
  }
56
 
57
  .main-content {
58
- display: grid;
59
- grid-template-columns: 1fr 1fr;
60
- gap: 26px;
61
- padding: 30px;
62
  }
63
- .column {
 
 
 
 
64
  background: rgba(0,0,0,0.15);
65
  border-radius: 12px;
66
- padding: 22px;
67
  display: flex;
68
  flex-direction: column;
 
 
69
  }
70
- .column h2 {
71
- color: var(--primary);
72
- margin-bottom: 16px;
73
- font-size: 1.4em;
74
- font-weight: 500;
75
- text-align: center;
 
76
  }
77
 
78
  .upload-area {
79
  border: 2px dashed var(--primary);
80
  border-radius: 8px;
81
- padding: 28px;
82
  text-align: center;
83
- margin-bottom: 18px;
84
  transition: all 0.2s ease;
85
  cursor: pointer;
86
- user-select: none;
87
  }
88
- .upload-area.dragover {
89
- background: rgba(255, 77, 166, 0.06);
90
- transform: translateY(-2px);
91
  }
92
- .upload-area p { color: var(--text-secondary); font-size: 1.05em; }
93
- .canvas-container {
 
 
 
94
  background: #000;
95
  border-radius: 8px;
96
- margin-bottom: 18px;
97
  display: flex;
98
- justify-content: center;
99
  align-items: center;
100
- min-height: 420px;
101
- border: 1px solid var(--border-color);
102
- position: relative;
103
  overflow: hidden;
104
  }
105
- canvas, img {
106
  max-width: 100%;
107
- max-height: 520px;
108
  object-fit: contain;
109
- border-radius: 4px;
110
  }
111
 
112
- .controls-panel {
113
- background: rgba(0,0,0,0.18);
114
- border-radius: 8px;
115
- padding: 14px;
116
- margin-top: 6px;
 
 
 
 
 
117
  }
118
- .control-group { margin-bottom: 14px; }
119
- label { display:block; margin-bottom:6px; color:var(--text-secondary); font-size:0.95em; }
120
- .confidence-display { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
121
- .confidence-value { color: var(--primary); font-weight:700; font-size:1.05em; }
122
 
123
- input[type="range"] { width:100%; height:8px; border-radius:4px; background: rgba(255,255,255,0.06); outline:none; }
124
- input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; }
125
- input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--primary); cursor:pointer; }
 
 
 
 
 
 
126
 
127
- /* Toggle switches */
128
- .toggle-group {
129
- display: flex;
130
- gap: 16px;
131
- margin-bottom: 14px;
132
- padding: 10px;
133
  background: rgba(0,0,0,0.2);
134
- border-radius: 6px;
 
 
 
 
135
  }
136
- .toggle-item {
137
- flex: 1;
 
 
 
138
  display: flex;
139
  align-items: center;
140
- justify-content: space-between;
141
- }
142
- .toggle-label {
143
- color: var(--text-secondary);
144
- font-size: 0.9em;
145
- font-weight: 500;
146
  }
147
- .toggle-switch {
 
 
 
 
 
 
148
  position: relative;
149
- display: inline-block;
150
- width: 44px;
151
- height: 24px;
 
 
 
 
152
  }
153
- .toggle-switch input {
154
- opacity: 0;
155
- width: 0;
156
- height: 0;
 
 
157
  }
158
- .slider {
 
159
  position: absolute;
160
- cursor: pointer;
161
- top: 0;
162
- left: 0;
163
- right: 0;
164
- bottom: 0;
165
- background-color: rgba(255, 255, 255, 0.1);
166
- transition: .3s;
167
- border-radius: 24px;
168
  }
169
- .slider:before {
170
- position: absolute;
171
- content: "";
172
- height: 18px;
173
- width: 18px;
174
- left: 3px;
175
- bottom: 3px;
176
- background-color: white;
177
- transition: .3s;
178
  border-radius: 50%;
 
 
179
  }
180
- input:checked + .slider {
181
- background-color: var(--accent-green);
182
- }
183
- input:checked + .slider:before {
184
- transform: translateX(20px);
185
- }
186
 
187
- .action-btn {
188
- background: linear-gradient(135deg, var(--secondary), #FF7A5A);
189
- color: white;
190
- border: none;
191
- padding: 12px 20px;
192
- font-size: 1.02em;
193
- width: 100%;
194
- border-radius: 8px;
195
- cursor: pointer;
196
- transition: all 0.22s ease;
197
- margin-top: 6px;
198
- font-weight:600;
199
- }
200
- .action-btn:hover:not(:disabled) {
201
- transform: translateY(-2px);
202
- box-shadow: 0 6px 20px rgba(234, 120, 45, 0.4);
203
- }
204
- .action-btn:disabled { background: linear-gradient(135deg,#444,#666); cursor:not-allowed; opacity:0.6; }
205
 
206
- .info-panel { background: rgba(0,0,0,0.14); border-radius:8px; padding:14px; margin-top:10px; }
207
- .detection-info { color: var(--text-secondary); font-size:0.95em; }
208
- .detection-count { color: var(--primary); font-weight:700; font-size:1.1em; margin-top:8px; }
209
-
210
- .download-btn {
211
- background: linear-gradient(135deg,#D63384,#8E2B57);
212
- color: white;
213
- border: none;
214
- padding: 10px 16px;
215
- border-radius: 8px;
216
- cursor: pointer;
217
- width: 100%;
218
- font-weight:600;
219
- transition: all 0.22s ease;
220
- }
221
- .download-btn:hover:not(:disabled) {
222
- transform: translateY(-2px);
223
- box-shadow: 0 6px 20px rgba(214, 51, 132, 0.4);
224
- }
225
- .download-btn:disabled { opacity: 0.5; cursor: not-allowed; }
226
-
227
  @media (max-width: 900px) {
228
- .main-content { grid-template-columns: 1fr; }
229
- h1 { font-size: 1.8em; }
230
- .toggle-group { flex-direction: column; gap: 10px; }
 
231
  }
232
- .visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
 
233
  </style>
234
  </head>
235
  <body>
236
  <div class="container">
237
  <header>
238
- <h1>Tulsi Leaf Segmentation — RF-DETR</h1>
239
- <p class="header-note">The model predicts leaves that are in focus and clearly visible in the input. <strong>Recommended:</strong>For best performance, provide a high-quality image</p>
240
  </header>
241
 
242
  <div class="main-content">
243
- <!-- Left column: upload & controls -->
244
- <div class="column">
245
- <h2>Input & Controls</h2>
246
-
247
  <div id="upload-area" class="upload-area">
248
- <p>Click or drop an image here (jpg, png)</p>
249
  </div>
250
  <input id="file-input" class="visually-hidden" type="file" accept="image/*" />
251
 
252
- <div class="canvas-container">
253
- <canvas id="input-canvas"></canvas>
254
  </div>
255
 
256
- <div class="controls-panel">
257
- <div class="control-group">
258
- <div class="confidence-display">
259
- <label>Confidence Threshold</label>
260
- <span class="confidence-value" id="conf-display">0.05</span>
261
- </div>
262
- <input id="conf-slider" type="range" min="0" max="100" value="5" step="1">
263
- </div>
264
-
265
- <div class="toggle-group">
266
- <div class="toggle-item">
267
- <span class="toggle-label">Show Labels</span>
268
- <label class="toggle-switch">
269
- <input type="checkbox" id="show-labels" checked>
270
- <span class="slider"></span>
271
- </label>
272
- </div>
273
- <div class="toggle-item">
274
- <span class="toggle-label">Show Confidence</span>
275
- <label class="toggle-switch">
276
- <input type="checkbox" id="show-confidence" checked>
277
- <span class="slider"></span>
278
- </label>
279
- </div>
280
- </div>
281
-
282
- <button id="predict-btn" class="action-btn" disabled>Detect Leaves</button>
283
  </div>
284
- </div>
285
 
286
- <!-- Right column: output & info -->
287
- <div class="column">
288
- <h2>Detection Results</h2>
289
 
290
- <div class="canvas-container">
291
- <img id="annotated-img" src="" />
 
 
 
 
 
 
 
 
 
292
  </div>
293
 
294
- <div class="info-panel">
295
- <div class="detection-info">
296
- <p><strong>Status:</strong> <span id="status-text">Ready</span></p>
297
- <p class="detection-count">Leaves Detected: <span id="leaf-count">0</span></p>
298
- <p class="detection-info">Highest confidence: <strong id="best-conf">0.00</strong></p>
299
- <button id="download-btn" class="download-btn" disabled>Download Annotated Image</button>
 
 
300
  </div>
301
  </div>
302
  </div>
@@ -304,126 +267,86 @@
304
  </div>
305
 
306
  <script>
307
- (function(){
308
- const uploadArea = document.getElementById('upload-area');
309
  const fileInput = document.getElementById('file-input');
310
- const inputCanvas = document.getElementById('input-canvas');
311
- const inputCtx = inputCanvas.getContext('2d');
312
  const predictBtn = document.getElementById('predict-btn');
313
  const confSlider = document.getElementById('conf-slider');
314
- const confDisplay = document.getElementById('conf-display');
315
- const showLabelsToggle = document.getElementById('show-labels');
316
- const showConfidenceToggle = document.getElementById('show-confidence');
317
- const annotatedImg = document.getElementById('annotated-img');
318
- const statusText = document.getElementById('status-text');
319
- const leafCountEl = document.getElementById('leaf-count');
320
- const bestConfEl = document.getElementById('best-conf');
321
- const downloadBtn = document.getElementById('download-btn');
322
 
323
- let currentImage = null;
324
- let lastAnnotatedDataUrl = null;
325
 
326
- function setStatus(text) { statusText.textContent = text; }
 
327
 
328
- uploadArea.addEventListener('click', ()=> fileInput.click());
329
- uploadArea.addEventListener('dragover', (e)=>{ e.preventDefault(); uploadArea.classList.add('dragover'); });
330
- uploadArea.addEventListener('dragleave', ()=> uploadArea.classList.remove('dragover'));
331
- uploadArea.addEventListener('drop', (e)=>{
332
- e.preventDefault(); uploadArea.classList.remove('dragover');
333
- const f = e.dataTransfer.files && e.dataTransfer.files[0];
334
- if (f) handleFile(f);
335
  });
336
-
337
- fileInput.addEventListener('change', (e)=> {
338
- const f = e.target.files && e.target.files[0];
339
- if (f) handleFile(f);
340
  });
341
 
342
  function handleFile(file) {
343
  const reader = new FileReader();
344
- reader.onload = (ev) => {
345
- const img = new Image();
346
- img.onload = () => {
347
- currentImage = img;
348
- drawToCanvas(img);
349
- predictBtn.disabled = false;
350
- annotatedImg.src = "";
351
- downloadBtn.disabled = true;
352
- setStatus("Image ready");
353
- };
354
- img.src = ev.target.result;
355
  };
356
  reader.readAsDataURL(file);
357
  }
358
 
359
- function drawToCanvas(img) {
360
- const maxW = 600, maxH = 520;
361
- let w = img.width, h = img.height;
362
- const ratio = Math.min(maxW/w, maxH/h, 1);
363
- w = Math.round(w*ratio); h = Math.round(h*ratio);
364
- inputCanvas.width = w; inputCanvas.height = h;
365
- inputCtx.clearRect(0,0,w,h);
366
- inputCtx.drawImage(img, 0,0,w,h);
367
- }
368
-
369
- confSlider.addEventListener('input', ()=> {
370
- const val = confSlider.value / 100;
371
- confDisplay.textContent = val.toFixed(2);
372
- });
373
 
374
- predictBtn.addEventListener('click', async ()=>{
375
- if (!currentImage) return;
376
  predictBtn.disabled = true;
377
- setStatus("Processing...");
378
-
379
- const dataUrl = inputCanvas.toDataURL('image/jpeg', 0.9);
380
- const conf = confSlider.value / 100;
381
- const showLabels = showLabelsToggle.checked;
382
- const showConfidence = showConfidenceToggle.checked;
383
-
384
  try {
385
- const res = await fetch('/predict', {
386
  method: 'POST',
387
  headers: { 'Content-Type': 'application/json' },
388
- body: JSON.stringify({
389
- image: dataUrl,
390
- conf: conf,
391
- show_labels: showLabels,
392
- show_confidence: showConfidence
393
  })
394
  });
395
- if (!res.ok) throw new Error('Server error: ' + res.status);
396
- const j = await res.json();
397
-
398
- lastAnnotatedDataUrl = j.annotated;
399
- annotatedImg.src = lastAnnotatedDataUrl;
400
- leafCountEl.textContent = j.count || 0;
401
- const best = j.confidences && j.confidences.length ? Math.max(...j.confidences) : 0;
402
- bestConfEl.textContent = (best).toFixed(2);
403
- downloadBtn.disabled = false;
404
- setStatus("Done");
405
  } catch (err) {
406
  console.error(err);
407
- setStatus("Error: " + (err.message || err));
408
- alert('Prediction failed. See console for details.');
409
  } finally {
410
  predictBtn.disabled = false;
 
 
411
  }
412
  });
413
-
414
- downloadBtn.addEventListener('click', ()=>{
415
- if (!lastAnnotatedDataUrl) return;
416
- const a = document.createElement('a');
417
- a.href = lastAnnotatedDataUrl;
418
- a.download = `tulsi_segment_${Date.now()}.png`;
419
- document.body.appendChild(a);
420
- a.click();
421
- a.remove();
422
- });
423
-
424
- // Initialize
425
- setStatus('Ready');
426
- })();
427
  </script>
428
  </body>
429
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Threat Detection Comparison</title>
7
  <style>
8
  :root {
9
  --primary: #E73562;
10
  --secondary: #EA782D;
11
+ --rf-accent: #E73562;
12
+ --yolo-accent: #33ff99;
13
  --dark-bg: #121212;
14
  --surface-bg: #1E1E2E;
15
  --text-primary: #E0E0E0;
16
  --text-secondary: #BDB2C6;
17
  --border-color: rgba(255, 255, 255, 0.06);
 
18
  }
19
  * { margin: 0; padding: 0; box-sizing: border-box; }
20
  body {
 
25
  min-height: 100vh;
26
  }
27
  .container {
28
+ max-width: 1400px;
29
  margin: 0 auto;
30
  background: var(--surface-bg);
31
  border-radius: 14px;
32
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
33
  border: 1px solid var(--border-color);
34
  overflow: hidden;
35
+ display: flex;
36
+ flex-direction: column;
37
+ min-height: 90vh;
38
  }
39
  header {
40
  text-align: center;
41
+ padding: 20px;
42
  background: rgba(0,0,0,0.18);
43
  border-bottom: 1px solid var(--border-color);
44
  }
45
  h1 {
46
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
47
+ -webkit-background-clip: text;
48
+ -webkit-text-fill-color: transparent;
49
+ font-size: 2em;
50
+ font-weight: 700;
51
+ margin-bottom: 6px;
52
  }
53
  .header-note {
54
+ font-size: 0.9rem;
55
+ color: var(--text-secondary);
 
 
 
 
 
56
  }
57
 
58
  .main-content {
59
+ display: flex;
60
+ flex: 1;
61
+ padding: 20px;
62
+ gap: 20px;
63
  }
64
+
65
+ /* Left Column: Controls */
66
+ .control-column {
67
+ width: 300px;
68
+ flex-shrink: 0;
69
  background: rgba(0,0,0,0.15);
70
  border-radius: 12px;
71
+ padding: 20px;
72
  display: flex;
73
  flex-direction: column;
74
+ gap: 20px;
75
+ border: 1px solid var(--border-color);
76
  }
77
+
78
+ /* Right Column: Results */
79
+ .result-column {
80
+ flex: 1;
81
+ display: grid;
82
+ grid-template-columns: 1fr 1fr;
83
+ gap: 20px;
84
  }
85
 
86
  .upload-area {
87
  border: 2px dashed var(--primary);
88
  border-radius: 8px;
89
+ padding: 30px 10px;
90
  text-align: center;
 
91
  transition: all 0.2s ease;
92
  cursor: pointer;
93
+ background: rgba(255,255,255,0.02);
94
  }
95
+ .upload-area:hover, .upload-area.dragover {
96
+ background: rgba(231, 53, 98, 0.08);
97
+ border-color: var(--secondary);
98
  }
99
+ .upload-area p { color: var(--text-secondary); font-size: 0.9em; }
100
+
101
+ .input-preview {
102
+ width: 100%;
103
+ height: 200px;
104
  background: #000;
105
  border-radius: 8px;
106
+ border: 1px solid var(--border-color);
107
  display: flex;
 
108
  align-items: center;
109
+ justify-content: center;
 
 
110
  overflow: hidden;
111
  }
112
+ .input-preview img {
113
  max-width: 100%;
114
+ max-height: 100%;
115
  object-fit: contain;
 
116
  }
117
 
118
+ label { color: var(--text-secondary); font-size: 0.85em; margin-bottom: 5px; display: block; }
119
+ .slider-val { float: right; color: var(--primary); font-weight: bold; }
120
+
121
+ input[type="range"] {
122
+ width: 100%; height: 6px; border-radius: 4px;
123
+ background: rgba(255,255,255,0.1); outline: none; -webkit-appearance: none;
124
+ }
125
+ input[type="range"]::-webkit-slider-thumb {
126
+ -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
127
+ background: var(--primary); cursor: pointer;
128
  }
 
 
 
 
129
 
130
+ .action-btn {
131
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
132
+ color: white; border: none; padding: 12px;
133
+ width: 100%; border-radius: 8px; font-weight: 600;
134
+ cursor: pointer; margin-top: auto;
135
+ transition: transform 0.2s;
136
+ }
137
+ .action-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(231, 53, 98, 0.4); }
138
+ .action-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #444; }
139
 
140
+ /* Result Cards */
141
+ .result-card {
 
 
 
 
142
  background: rgba(0,0,0,0.2);
143
+ border-radius: 12px;
144
+ border: 1px solid var(--border-color);
145
+ display: flex;
146
+ flex-direction: column;
147
+ overflow: hidden;
148
  }
149
+ .card-header {
150
+ padding: 12px 15px;
151
+ border-bottom: 1px solid var(--border-color);
152
+ font-weight: 600;
153
+ letter-spacing: 0.5px;
154
  display: flex;
155
  align-items: center;
156
+ gap: 8px;
 
 
 
 
 
157
  }
158
+ .dot { width: 8px; height: 8px; border-radius: 50%; }
159
+ .dot.rf { background: var(--rf-accent); box-shadow: 0 0 8px var(--rf-accent); }
160
+ .dot.yolo { background: var(--yolo-accent); box-shadow: 0 0 8px var(--yolo-accent); }
161
+
162
+ .image-box {
163
+ flex: 1;
164
+ background: #000;
165
  position: relative;
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ /* CRITICAL: Enforce strict height so images don't explode */
170
+ height: 0;
171
+ min-height: 400px;
172
+ padding: 10px;
173
  }
174
+
175
+ .image-box img {
176
+ max-width: 100%;
177
+ max-height: 100%;
178
+ object-fit: contain; /* Ensures image fits within the box */
179
+ display: block;
180
  }
181
+
182
+ .loader {
183
  position: absolute;
184
+ inset: 0;
185
+ background: rgba(0,0,0,0.7);
186
+ display: none;
187
+ justify-content: center;
188
+ align-items: center;
189
+ flex-direction: column;
190
+ color: var(--text-secondary);
191
+ font-size: 0.9em;
192
  }
193
+ .spinner {
194
+ width: 30px; height: 30px;
195
+ border: 3px solid rgba(255,255,255,0.1);
 
 
 
 
 
 
196
  border-radius: 50%;
197
+ margin-bottom: 10px;
198
+ animation: spin 1s linear infinite;
199
  }
200
+ .rf .spinner { border-top-color: var(--rf-accent); }
201
+ .yolo .spinner { border-top-color: var(--yolo-accent); }
 
 
 
 
202
 
203
+ @keyframes spin { to { transform: rotate(360deg); } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
  @media (max-width: 900px) {
206
+ .main-content { flex-direction: column; }
207
+ .control-column { width: 100%; }
208
+ .result-column { grid-template-columns: 1fr; }
209
+ .image-box { min-height: 300px; }
210
  }
211
+
212
+ .visually-hidden { position:absolute; left:-9999px; }
213
  </style>
214
  </head>
215
  <body>
216
  <div class="container">
217
  <header>
218
+ <h1>Comparison: RF-DETR vs YOLOv8</h1>
219
+ <p class="header-note">Threat Detection on CPU • Upload an image to compare model performance</p>
220
  </header>
221
 
222
  <div class="main-content">
223
+ <!-- Controls Sidebar -->
224
+ <div class="control-column">
 
 
225
  <div id="upload-area" class="upload-area">
226
+ <p>Click or Drop Image Here</p>
227
  </div>
228
  <input id="file-input" class="visually-hidden" type="file" accept="image/*" />
229
 
230
+ <div class="input-preview">
231
+ <img id="preview-img" src="" alt="No Image Selected" style="opacity: 0.3;">
232
  </div>
233
 
234
+ <div style="margin-top: 10px;">
235
+ <label>Confidence: <span id="conf-val" class="slider-val">0.25</span></label>
236
+ <input id="conf-slider" type="range" min="0.05" max="0.95" step="0.05" value="0.25">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
 
238
 
239
+ <button id="predict-btn" class="action-btn" disabled>RUN INFERENCE</button>
240
+ </div>
 
241
 
242
+ <!-- Results Grid -->
243
+ <div class="result-column">
244
+ <!-- RF-DETR -->
245
+ <div class="result-card rf">
246
+ <div class="card-header">
247
+ <span class="dot rf"></span> RF-DETR Nano
248
+ </div>
249
+ <div class="image-box">
250
+ <div class="loader" id="loader-rf"><div class="spinner"></div>Running...</div>
251
+ <img id="res-rf" src="" alt="">
252
+ </div>
253
  </div>
254
 
255
+ <!-- YOLOv8 -->
256
+ <div class="result-card yolo">
257
+ <div class="card-header">
258
+ <span class="dot yolo"></span> YOLOv8 Nano
259
+ </div>
260
+ <div class="image-box">
261
+ <div class="loader" id="loader-yolo"><div class="spinner"></div>Running...</div>
262
+ <img id="res-yolo" src="" alt="">
263
  </div>
264
  </div>
265
  </div>
 
267
  </div>
268
 
269
  <script>
 
 
270
  const fileInput = document.getElementById('file-input');
271
+ const uploadArea = document.getElementById('upload-area');
272
+ const previewImg = document.getElementById('preview-img');
273
  const predictBtn = document.getElementById('predict-btn');
274
  const confSlider = document.getElementById('conf-slider');
275
+ const confVal = document.getElementById('conf-val');
276
+
277
+ const resRf = document.getElementById('res-rf');
278
+ const resYolo = document.getElementById('res-yolo');
279
+ const loadRf = document.getElementById('loader-rf');
280
+ const loadYolo = document.getElementById('loader-yolo');
 
 
281
 
282
+ let currentDataUrl = null;
 
283
 
284
+ // --- Event Listeners ---
285
+ confSlider.addEventListener('input', (e) => confVal.textContent = e.target.value);
286
 
287
+ uploadArea.addEventListener('click', () => fileInput.click());
288
+ uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
289
+ uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
290
+ uploadArea.addEventListener('drop', (e) => {
291
+ e.preventDefault();
292
+ uploadArea.classList.remove('dragover');
293
+ if(e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
294
  });
295
+
296
+ fileInput.addEventListener('change', (e) => {
297
+ if(e.target.files[0]) handleFile(e.target.files[0]);
 
298
  });
299
 
300
  function handleFile(file) {
301
  const reader = new FileReader();
302
+ reader.onload = (e) => {
303
+ currentDataUrl = e.target.result;
304
+ previewImg.src = currentDataUrl;
305
+ previewImg.style.opacity = "1";
306
+ predictBtn.disabled = false;
307
+
308
+ // Clear previous results
309
+ resRf.src = "";
310
+ resYolo.src = "";
 
 
311
  };
312
  reader.readAsDataURL(file);
313
  }
314
 
315
+ predictBtn.addEventListener('click', async () => {
316
+ if(!currentDataUrl) return;
 
 
 
 
 
 
 
 
 
 
 
 
317
 
318
+ // UI State: Running
 
319
  predictBtn.disabled = true;
320
+ loadRf.style.display = 'flex';
321
+ loadYolo.style.display = 'flex';
322
+
 
 
 
 
323
  try {
324
+ const response = await fetch('/predict', {
325
  method: 'POST',
326
  headers: { 'Content-Type': 'application/json' },
327
+ body: JSON.stringify({
328
+ image: currentDataUrl,
329
+ conf: parseFloat(confSlider.value)
 
 
330
  })
331
  });
332
+
333
+ const data = await response.json();
334
+
335
+ if(data.error) throw new Error(data.error);
336
+
337
+ // Set Results
338
+ resRf.src = data.rfdetr.image;
339
+ resYolo.src = data.yolov8.image;
340
+
 
341
  } catch (err) {
342
  console.error(err);
343
+ alert("Prediction Error: " + err.message);
 
344
  } finally {
345
  predictBtn.disabled = false;
346
+ loadRf.style.display = 'none';
347
+ loadYolo.style.display = 'none';
348
  }
349
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
350
  </script>
351
  </body>
352
  </html>