Upload 3 files

result.html

@@ -352,7 +352,38 @@
   function renderLightbox() {
     const d = resultData;
     const isOrig = lightboxMode === 'orig';
-    document.getElementById('lightbox-img').src = 'data:image/jpeg;base64,' + (isOrig ? d.orig_b64 : d.result_b64);
+    if (isOrig) {
+      // ภาพต้นฉบับ — ใช้ base64 ตรงๆ
+      document.getElementById('lightbox-img').src = 'data:image/jpeg;base64,' + d.orig_b64;
+    } else {
+      // ภาพ detection — snapshot จาก canvas + ภาพต้นฉบับรวมกัน
+      const img = document.getElementById('result-img');
+      const canvas = document.getElementById('det-canvas');
+      // วาดภาพ + box รวมกันบน offscreen canvas
+      const off = document.createElement('canvas');
+      off.width = img.naturalWidth || img.width;
+      off.height = img.naturalHeight || img.height;
+      const ctx = off.getContext('2d');
+      ctx.drawImage(img, 0, 0, off.width, off.height);
+      // วาด box ทับด้วย scale ที่ถูกต้อง
+      const scaleX = off.width / (canvas.width || 1);
+      const scaleY = off.height / (canvas.height || 1);
+      const filtered = allBoxes.filter(b => b.conf >= currentThreshold);
+      filtered.forEach(b => {
+        const x = b.x1 * off.width, y = b.y1 * off.height;
+        const w = (b.x2 - b.x1) * off.width, h = (b.y2 - b.y1) * off.height;
+        ctx.strokeStyle = '#e84d6f'; ctx.lineWidth = Math.max(2, off.width / 300);
+        ctx.strokeRect(x, y, w, h);
+        const label = (b.conf * 100).toFixed(0) + '%';
+        ctx.font = 'bold ' + Math.max(12, off.width / 80) + 'px monospace';
+        const tw = ctx.measureText(label).width;
+        ctx.fillStyle = '#e84d6f';
+        ctx.fillRect(x, y - Math.max(16, off.width / 60), tw + 8, Math.max(16, off.width / 60));
+        ctx.fillStyle = '#fff';
+        ctx.fillText(label, x + 4, y - 4);
+      });
+      document.getElementById('lightbox-img').src = off.toDataURL('image/jpeg', 0.92);
+    }
     document.getElementById('lightbox-title').textContent = isOrig
       ? (currentLang==='th'?'ภาพต้นฉบับ':'Original')
       : (currentLang==='th'?'ผล detection':'Detection');