Update app.py

app.py

@@ -3,8 +3,6 @@ import numpy as np
 import random
 import torch
 import spaces
-import base64
-from io import BytesIO
 from typing import Iterable
 from PIL import Image, ImageDraw
 from diffusers import FlowMatchEulerDiscreteScheduler
@@ -116,19 +114,6 @@ loaded = False
 DEFAULT_PROMPT = "Remove the red highlighted object from the scene"
 
 
-def b64_to_pil(b64_str: str) -> Image.Image | None:
-    """Helper to decode base64 string from JS into a PIL Image"""
-    if not b64_str or not b64_str.startswith("data:image"):
-        return None
-    try:
-        _, data = b64_str.split(',', 1)
-        image_data = base64.b64decode(data)
-        return Image.open(BytesIO(image_data)).convert("RGB")
-    except Exception as e:
-        print(f"Error decoding image: {e}")
-        return None
-
-
 def burn_boxes_onto_image(pil_image: Image.Image, boxes_json_str: str) -> Image.Image:
     """Burn red outline-only rectangles onto the image (no fill)."""
     import json
@@ -153,7 +138,6 @@ def burn_boxes_onto_image(pil_image: Image.Image, boxes_json_str: str) -> Image.
         y2 = int(b["y2"] * h)
         lx, rx = min(x1, x2), max(x1, x2)
         ty, by_ = min(y1, y2), max(y1, y2)
-        # Red outline only — no fill
         draw.rectangle([lx, ty, rx, by_], outline=(255, 0, 0), width=bw)
 
     return img
@@ -161,7 +145,7 @@ def burn_boxes_onto_image(pil_image: Image.Image, boxes_json_str: str) -> Image.
 
 @spaces.GPU
 def infer_object_removal(
-    b64_str: str,
+    source_image: Image.Image,
     boxes_json: str,
     prompt: str,
     seed: int = 0,
@@ -190,9 +174,8 @@ def infer_object_removal(
     print(f"Prompt: {prompt}")
     print(f"Boxes JSON received: '{boxes_json}'")
 
-    source_image = b64_to_pil(b64_str)
     if source_image is None:
-        raise gr.Error("Please upload an image first using the Bbox editor area.")
+        raise gr.Error("Please upload an image first.")
 
     import json
     try:
@@ -227,8 +210,7 @@ def infer_object_removal(
     return result, seed, marked
 
 
-def update_dimensions_on_upload(b64_str: str):
-    image = b64_to_pil(b64_str)
+def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
@@ -276,65 +258,12 @@ label{font-weight:600!important;color:#333!important}
 ::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#A855F7,#C084FC);border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#9333EA,#A855F7)}
 
-#bbox-draw-wrap{position:relative;border:2px dashed #C084FC;border-radius:12px;overflow:hidden;background:#1a1a1a;min-height:420px;transition: border-color 0.2s ease;}
+#bbox-draw-wrap{position:relative;border:2px solid #C084FC;border-radius:12px;overflow:hidden;background:#1a1a1a;min-height:420px}
 #bbox-draw-wrap:hover{border-color:#A855F7}
 #bbox-draw-canvas{cursor:crosshair;display:block;margin:0 auto}
 .bbox-hint{background:rgba(168,85,247,.08);border:1px solid #E9D5FF;border-radius:8px;padding:10px 16px;margin:8px 0;font-size:.9rem;color:#6B21A8}
 .dark .bbox-hint{background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.3);color:#C084FC}
 
-/* Custom Upload Prompt overlay */
-#upload-prompt {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    z-index: 20;
-    background: rgba(255, 255, 255, 0.95);
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(168,85,247,0.15);
-    backdrop-filter: blur(8px);
-    width: 80%;
-    max-width: 400px;
-    cursor: pointer;
-    border: 2px dashed #C084FC;
-    transition: all 0.2s ease;
-}
-#upload-prompt:hover {
-    border-color: #A855F7;
-    background: rgba(250, 245, 255, 0.95);
-    transform: translate(-50%, -52%);
-    box-shadow: 0 12px 36px rgba(168,85,247,0.25);
-}
-.dark #upload-prompt {
-    background: rgba(30, 30, 30, 0.95);
-    border-color: rgba(168,85,247,0.5);
-}
-.dark #upload-prompt:hover {
-    background: rgba(40, 40, 40, 0.95);
-    border-color: #C084FC;
-}
-.upload-icon {
-    width: 54px;
-    height: 54px;
-    color: #A855F7;
-    margin-bottom: 12px;
-}
-#upload-prompt p {
-    margin: 0 0 6px 0;
-    font-family: 'Outfit', sans-serif;
-    color: #6B21A8;
-    font-weight: 700;
-    font-size: 1.5rem;
-}
-.dark #upload-prompt p { color: #DAB2FF; }
-.upload-subtext {
-    font-size: 0.95rem;
-    color: #888;
-    font-family: 'Outfit', sans-serif;
-}
-.dark .upload-subtext { color: #aaa; }
-
 .bbox-toolbar-section{
     display:flex;
     gap:8px;
@@ -388,14 +317,16 @@ label{font-weight:600!important;color:#333!important}
 .bbox-tb-select{background:#6366f1}
 .bbox-tb-select:hover{background:#818cf8}
 .bbox-tb-select.active{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
+.bbox-tb-upload{background:#0891b2}
+.bbox-tb-upload:hover{background:#06b6d4}
 .bbox-tb-del{background:#dc2626}
 .bbox-tb-del:hover{background:#ef4444}
 .bbox-tb-undo{background:#7E22CE}
 .bbox-tb-undo:hover{background:#9333EA}
 .bbox-tb-clear{background:#be123c}
 .bbox-tb-clear:hover{background:#e11d48}
-.bbox-tb-change{background:#4b5563}
-.bbox-tb-change:hover{background:#6b7280}
+.bbox-tb-remove-img{background:#64748b}
+.bbox-tb-remove-img:hover{background:#94a3b8}
 
 #bbox-status{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.75);color:#00ff88;padding:5px 10px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;z-index:10;display:none;pointer-events:none}
 #bbox-count{position:absolute;top:10px;right:10px;background:rgba(147,51,234,.85);color:#fff;padding:4px 10px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;z-index:10;display:none}
@@ -413,9 +344,70 @@ label{font-weight:600!important;color:#333!important}
 }
 .dark #bbox-debug-count{color:#C084FC;background:rgba(168,85,247,.12)}
 
-.hidden-input {
-    display: none !important;
+#boxes-json-input{
+    max-height:0!important;
+    overflow:hidden!important;
+    margin:0!important;
+    padding:0!important;
+    opacity:0!important;
+    pointer-events:none!important;
+    position:absolute!important;
+    z-index:-1!important;
+}
+
+#source-image-component{
+    max-height:0!important;
+    overflow:hidden!important;
+    margin:0!important;
+    padding:0!important;
+    opacity:0!important;
+    pointer-events:none!important;
+    position:absolute!important;
+    z-index:-1!important;
+}
+
+#bbox-file-input{
+    display:none;
 }
+
+/* Drop zone overlay */
+#bbox-drop-overlay{
+    position:absolute;
+    top:0;left:0;right:0;bottom:0;
+    background:rgba(147,51,234,.3);
+    border:3px dashed #A855F7;
+    border-radius:12px;
+    display:none;
+    align-items:center;
+    justify-content:center;
+    z-index:20;
+    pointer-events:none;
+}
+#bbox-drop-overlay.active{display:flex}
+#bbox-drop-overlay span{
+    font-family:'Outfit',sans-serif;
+    font-size:18px;
+    font-weight:700;
+    color:#fff;
+    background:rgba(147,51,234,.8);
+    padding:12px 24px;
+    border-radius:10px;
+}
+
+/* Image info bar */
+#bbox-image-info{
+    text-align:center;
+    padding:4px 12px;
+    margin-top:4px;
+    font-family:'IBM Plex Mono',monospace;
+    font-size:11px;
+    color:#9333EA;
+    background:rgba(168,85,247,.06);
+    border:1px solid #E9D5FF;
+    border-radius:6px;
+    display:none;
+}
+.dark #bbox-image-info{color:#C084FC;background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.3)}
 """
 
 bbox_drawer_js = r"""
@@ -428,18 +420,19 @@ bbox_drawer_js = r"""
         const status     = document.getElementById('bbox-status');
         const badge      = document.getElementById('bbox-count');
         const debugCount = document.getElementById('bbox-debug-count');
-
-        const btnDraw    = document.getElementById('tb-draw');
-        const btnSelect  = document.getElementById('tb-select');
-        const btnDel     = document.getElementById('tb-del');
-        const btnUndo    = document.getElementById('tb-undo');
-        const btnClear   = document.getElementById('tb-clear');
-        const btnChange  = document.getElementById('tb-change-img');
-        
-        const uploadPrompt = document.getElementById('upload-prompt');
-        const fileInput    = document.getElementById('custom-file-input');
-
-        if (!canvas || !wrap || !debugCount || !btnDraw || !fileInput) {
+        const dropOverlay= document.getElementById('bbox-drop-overlay');
+        const imageInfo  = document.getElementById('bbox-image-info');
+
+        const btnDraw     = document.getElementById('tb-draw');
+        const btnSelect   = document.getElementById('tb-select');
+        const btnUpload   = document.getElementById('tb-upload');
+        const btnDel      = document.getElementById('tb-del');
+        const btnUndo     = document.getElementById('tb-undo');
+        const btnClear    = document.getElementById('tb-clear');
+        const btnRemoveImg= document.getElementById('tb-remove-img');
+        const fileInput   = document.getElementById('bbox-file-input');
+
+        if (!canvas || !wrap || !debugCount || !btnDraw) {
             console.log('[BBox] waiting for DOM...');
             setTimeout(initCanvasBbox, 250);
             return;
@@ -453,7 +446,8 @@ bbox_drawer_js = r"""
         window.__bboxBoxes = boxes;
 
         let baseImg = null;
-        let dispW = 512, dispH = 400;
+        let originalFile = null;
+        let dispW = 512, dispH = 450;
         let selectedIdx = -1;
         let mode = 'draw';
 
@@ -466,7 +460,9 @@ bbox_drawer_js = r"""
         const RED_STROKE_WIDTH = 3;
         const SEL_STROKE = 'rgba(0,120,255,0.95)';
 
-        function n2px(b) { return {x1:b.x1*dispW, y1:b.y1*dispH, x2:b.x2*dispW, y2:b.y2*dispH}; }
+        function n2px(b) {
+            return {x1:b.x1*dispW, y1:b.y1*dispH, x2:b.x2*dispW, y2:b.y2*dispH};
+        }
         function px2n(x1,y1,x2,y2) {
             return {
                 x1: Math.min(x1,x2)/dispW, y1: Math.min(y1,y2)/dispH,
@@ -475,7 +471,7 @@ bbox_drawer_js = r"""
         }
         function clamp01(v){return Math.max(0,Math.min(1,v));}
         function fitSize(nw, nh) {
-            const mw = wrap.clientWidth || 512, mh = 500;
+            const mw = wrap.clientWidth || 512, mh = 550;
             const r = Math.min(mw/nw, mh/nh, 1);
             dispW = Math.round(nw*r); dispH = Math.round(nh*r);
             canvas.width  = dispW; canvas.height = dispH;
@@ -503,53 +499,79 @@ bbox_drawer_js = r"""
             }
 
             const container = document.getElementById('boxes-json-input');
-            if (!container) return;
+            if (!container) {
+                console.warn('[BBox] #boxes-json-input not in DOM');
+                return;
+            }
             const targets = [
                 ...container.querySelectorAll('textarea'),
-                ...container.querySelectorAll('input:not([type="file"])')
+                ...container.querySelectorAll('input[type="text"]'),
+                ...container.querySelectorAll('input:not([type])')
             ];
             targets.forEach(el => {
-                const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+                const proto = el.tagName === 'TEXTAREA'
+                    ? HTMLTextAreaElement.prototype
+                    : HTMLInputElement.prototype;
                 const ns = Object.getOwnPropertyDescriptor(proto, 'value');
                 if (ns && ns.set) {
                     ns.set.call(el, jsonStr);
                     el.dispatchEvent(new Event('input',  {bubbles:true, composed:true}));
                     el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+                    el.dispatchEvent(new Event('blur',   {bubbles:true, composed:true}));
                 }
             });
         }
 
-        function syncImageToGradio(dataUrl) {
-            const container = document.getElementById('hidden-image-b64');
+        /* Push image data to hidden Gradio Image component */
+        function pushImageToGradio(dataURL) {
+            const container = document.getElementById('source-image-component');
             if (!container) return;
-            const targets = [
-                ...container.querySelectorAll('textarea'),
-                ...container.querySelectorAll('input')
-            ];
-            targets.forEach(el => {
-                const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-                const ns = Object.getOwnPropertyDescriptor(proto, 'value');
-                if (ns && ns.set) {
-                    ns.set.call(el, dataUrl);
-                    el.dispatchEvent(new Event('input', {bubbles:true, composed:true}));
-                    el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
-                }
-            });
+
+            /* Convert data URL to File and use Gradio's upload mechanism */
+            fetch(dataURL)
+                .then(res => res.blob())
+                .then(blob => {
+                    const file = new File([blob], 'canvas-image.png', {type: 'image/png'});
+                    const dt = new DataTransfer();
+                    dt.items.add(file);
+
+                    const inp = container.querySelector('input[type="file"]');
+                    if (inp) {
+                        inp.files = dt.files;
+                        inp.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+                        console.log('[BBox] pushed image to Gradio component');
+                    } else {
+                        /* Fallback: try drop event */
+                        const dropTarget = container.querySelector('.upload-container, .image-container, [data-testid]') || container;
+                        const dropEvt = new DragEvent('drop', {bubbles:true, composed:true, dataTransfer: dt});
+                        dropTarget.dispatchEvent(dropEvt);
+                        console.log('[BBox] pushed image via drop event');
+                    }
+                });
+        }
+
+        function placeholder() {
+            ctx.fillStyle='#2a2a2a'; ctx.fillRect(0,0,dispW,dispH);
+            ctx.strokeStyle='#7E22CE'; ctx.lineWidth=2; ctx.setLineDash([8,4]);
+            ctx.strokeRect(20,20,dispW-40,dispH-40); ctx.setLineDash([]);
+            ctx.fillStyle='#A855F7'; ctx.font='bold 18px Outfit,sans-serif';
+            ctx.textAlign='center'; ctx.textBaseline='middle';
+            ctx.fillText('📷 Drop image here or click Upload',dispW/2,dispH/2-20);
+            ctx.font='14px Outfit'; ctx.fillStyle='#888';
+            ctx.fillText('Supports PNG, JPG, WEBP',dispW/2,dispH/2+10);
+            ctx.font='12px Outfit'; ctx.fillStyle='#666';
+            ctx.fillText('Then draw red boxes on objects to remove',dispW/2,dispH/2+32);
         }
 
         function redraw(tempRect) {
             ctx.clearRect(0,0,dispW,dispH);
-            if (!baseImg) { 
-                ctx.fillStyle='#1a1a1a'; ctx.fillRect(0,0,dispW,dispH);
-                updateBadge(); return; 
-            }
+            if (!baseImg) { placeholder(); updateBadge(); return; }
             ctx.drawImage(baseImg, 0, 0, dispW, dispH);
 
             boxes.forEach((b,i) => {
                 const p = n2px(b);
                 const lx=p.x1, ty=p.y1, w=p.x2-p.x1, h=p.y2-p.y1;
 
-                /* RED OUTLINE ONLY — no fill */
                 if (i === selectedIdx) {
                     ctx.strokeStyle = SEL_STROKE;
                     ctx.lineWidth = RED_STROKE_WIDTH + 1;
@@ -562,7 +584,6 @@ bbox_drawer_js = r"""
                 ctx.strokeRect(lx, ty, w, h);
                 ctx.setLineDash([]);
 
-                /* label tag */
                 ctx.fillStyle = i===selectedIdx ? 'rgba(0,120,255,0.85)' : 'rgba(255,0,0,0.85)';
                 ctx.font = 'bold 11px IBM Plex Mono,monospace';
                 ctx.textAlign = 'left'; ctx.textBaseline = 'top';
@@ -575,7 +596,6 @@ bbox_drawer_js = r"""
                 if (i === selectedIdx) drawHandles(p);
             });
 
-            /* temp drawing rect — outline only */
             if (tempRect) {
                 const rx = Math.min(tempRect.x1,tempRect.x2);
                 const ry = Math.min(tempRect.y1,tempRect.y2);
@@ -651,6 +671,121 @@ bbox_drawer_js = r"""
         }
         function hideStatus() { status.style.display = 'none'; }
 
+        function updateImageInfo() {
+            if (baseImg && imageInfo) {
+                imageInfo.style.display = 'block';
+                imageInfo.textContent = '🖼 Image: ' + baseImg.naturalWidth + '×' + baseImg.naturalHeight + ' px';
+            } else if (imageInfo) {
+                imageInfo.style.display = 'none';
+            }
+        }
+
+        /* ---- Image loading ---- */
+        function loadImageFromSource(src) {
+            const img = new window.Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                baseImg = img;
+                boxes.length = 0;
+                window.__bboxBoxes = boxes;
+                selectedIdx = -1;
+                fitSize(img.naturalWidth, img.naturalHeight);
+                syncToGradio(); redraw(); hideStatus();
+                updateImageInfo();
+                showStatus('Image loaded – draw boxes now!');
+                setTimeout(hideStatus, 2000);
+                console.log('[BBox] loaded image', img.naturalWidth, 'x', img.naturalHeight);
+
+                /* Push to hidden Gradio component */
+                const tmpCanvas = document.createElement('canvas');
+                tmpCanvas.width = img.naturalWidth;
+                tmpCanvas.height = img.naturalHeight;
+                const tmpCtx = tmpCanvas.getContext('2d');
+                tmpCtx.drawImage(img, 0, 0);
+                const dataURL = tmpCanvas.toDataURL('image/png');
+                pushImageToGradio(dataURL);
+            };
+            img.onerror = () => {
+                console.warn('[BBox] image load failed');
+                showStatus('Failed to load image');
+            };
+            img.src = src;
+        }
+
+        function loadImageFromFile(file) {
+            if (!file || !file.type.startsWith('image/')) return;
+            originalFile = file;
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                loadImageFromSource(ev.target.result);
+            };
+            reader.readAsDataURL(file);
+        }
+
+        function removeImage() {
+            baseImg = null;
+            originalFile = null;
+            boxes.length = 0;
+            window.__bboxBoxes = boxes;
+            selectedIdx = -1;
+            fitSize(512, 450);
+            syncToGradio(); redraw(); hideStatus();
+            updateImageInfo();
+
+            /* Clear hidden Gradio component */
+            const container = document.getElementById('source-image-component');
+            if (container) {
+                const clearBtn = container.querySelector('button[aria-label="Clear"], button.clear-btn, [data-testid="clear-btn"]');
+                if (clearBtn) clearBtn.click();
+            }
+        }
+
+        /* ---- File input button ---- */
+        btnUpload.addEventListener('click', () => {
+            fileInput.click();
+        });
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files && e.target.files[0]) {
+                loadImageFromFile(e.target.files[0]);
+            }
+            e.target.value = '';
+        });
+
+        /* ---- Remove image button ---- */
+        btnRemoveImg.addEventListener('click', removeImage);
+
+        /* ---- Drag & Drop on canvas ---- */
+        wrap.addEventListener('dragenter', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            dropOverlay.classList.add('active');
+        });
+        wrap.addEventListener('dragover', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            dropOverlay.classList.add('active');
+        });
+        wrap.addEventListener('dragleave', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            if (!wrap.contains(e.relatedTarget)) {
+                dropOverlay.classList.remove('active');
+            }
+        });
+        wrap.addEventListener('drop', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            dropOverlay.classList.remove('active');
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                loadImageFromFile(e.dataTransfer.files[0]);
+            }
+        });
+
+        /* ---- Also allow click on canvas to upload when no image ---- */
+        canvas.addEventListener('dblclick', (e) => {
+            if (!baseImg) {
+                e.preventDefault();
+                fileInput.click();
+            }
+        });
+
+        /* ---- Drawing handlers ---- */
         function onDown(e) {
             if (!baseImg) return;
             e.preventDefault();
@@ -779,59 +914,6 @@ bbox_drawer_js = r"""
         canvas.addEventListener('touchend',   onUp,   {passive:false});
         canvas.addEventListener('touchcancel',(e)=>{e.preventDefault();dragging=false;redraw();},{passive:false});
 
-        // --- File Upload Logic ---
-        function processFile(file) {
-            if (!file || !file.type.startsWith('image/')) return;
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                const dataUrl = event.target.result;
-                const img = new window.Image();
-                img.crossOrigin = 'anonymous';
-                img.onload = () => {
-                    baseImg = img;
-                    boxes.length = 0;
-                    window.__bboxBoxes = boxes;
-                    selectedIdx = -1;
-                    fitSize(img.naturalWidth, img.naturalHeight);
-                    syncToGradio(); redraw(); hideStatus();
-                    uploadPrompt.style.display = 'none';
-                    syncImageToGradio(dataUrl);
-                };
-                img.src = dataUrl;
-            };
-            reader.readAsDataURL(file);
-        }
-
-        uploadPrompt.addEventListener('click', (e) => {
-            if(e.target !== fileInput) fileInput.click();
-        });
-        btnChange.addEventListener('click', () => fileInput.click());
-        
-        fileInput.addEventListener('change', (e) => {
-            processFile(e.target.files[0]);
-            e.target.value = ''; // Reset input to allow re-upload of same file
-        });
-
-        wrap.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            wrap.style.borderColor = '#A855F7';
-            wrap.style.boxShadow = '0 0 15px rgba(168,85,247,0.3)';
-        });
-        wrap.addEventListener('dragleave', (e) => {
-            e.preventDefault();
-            wrap.style.borderColor = '';
-            wrap.style.boxShadow = '';
-        });
-        wrap.addEventListener('drop', (e) => {
-            e.preventDefault();
-            wrap.style.borderColor = '';
-            wrap.style.boxShadow = '';
-            if (e.dataTransfer.files.length) {
-                processFile(e.dataTransfer.files[0]);
-            }
-        });
-
-        // --- Toolbar Logic ---
         btnDraw.addEventListener('click',   ()=>setMode('draw'));
         btnSelect.addEventListener('click', ()=>setMode('select'));
 
@@ -865,12 +947,15 @@ bbox_drawer_js = r"""
             syncToGradio(); redraw(); hideStatus();
         });
 
+        /* Periodic sync */
+        setInterval(() => { syncToGradio(); }, 500);
+
         new ResizeObserver(() => {
             if (baseImg) { fitSize(baseImg.naturalWidth, baseImg.naturalHeight); redraw(); }
         }).observe(wrap);
 
         setMode('draw');
-        fitSize(512,400); redraw();
+        fitSize(512,450); redraw();
         syncToGradio();
     }
 
@@ -883,74 +968,72 @@ with gr.Blocks(css=css, theme=purple_theme) as demo:
     gr.Markdown("# **QIE-Object-Remover-Bbox**", elem_id="main-title")
     gr.Markdown(
         "Perform diverse image edits using a specialized [LoRA](https://huggingface.co/prithivMLmods/QIE-2511-Object-Remover-v2). "
-        "Upload an image directly into the bounding box editor area below, draw red bounding boxes over the objects you want to remove, and click Remove Object. "
+        "Upload an image directly into the canvas below, draw red bounding boxes over the objects you want to remove, and click Remove Object. "
         "Multiple boxes supported. Select, move, resize or delete individual boxes.",
         elem_id="subtitle",
     )
 
     with gr.Row():
         with gr.Column(scale=1):
-            
-            hidden_image_b64 = gr.Textbox(
-                elem_id="hidden-image-b64", 
-                elem_classes="hidden-input", 
-                container=False
+            # Hidden source image component (receives image data from canvas JS)
+            source_image = gr.Image(
+                label="Upload Image",
+                type="pil",
+                height=350,
+                elem_id="source-image-component",
+                visible=False,
             )
 
             gr.Markdown("# **Bbox Edit Controller**")
+            gr.HTML(
+                '<div class="bbox-hint">'
+                "📷 <b>Upload:</b> Click <b>Upload</b> button, drag & drop onto the canvas, or <b>double-click</b> the canvas. "
+                "<b>Draw mode:</b> Click & drag to create red rectangles. "
+                "<b>Select mode:</b> Click a box to select it → drag to <b>move</b>, "
+                "drag handles to <b>resize</b>. Use <b>Delete Selected</b> to remove one box."
+                "</div>"
+            )
 
             gr.HTML(
                 """
                 <div id="bbox-draw-wrap">
-                    <div id="upload-prompt">
-                        <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                            <polyline points="17 8 12 3 7 8"></polyline>
-                            <line x1="12" y1="3" x2="12" y2="15"></line>
-                        </svg>
-                        <p>Upload Image</p>
-                        <span class="upload-subtext">Drag and drop or click to browse</span>
-                        <input type="file" id="custom-file-input" accept="image/*" style="display:none;" />
-                    </div>
-                    <canvas id="bbox-draw-canvas" width="512" height="400"></canvas>
+                    <canvas id="bbox-draw-canvas" width="512" height="450"></canvas>
                     <div id="bbox-status"></div>
                     <div id="bbox-count"></div>
+                    <div id="bbox-drop-overlay"><span>📷 Drop image here</span></div>
                 </div>
+                <input type="file" id="bbox-file-input" accept="image/*">
                 """
             )
 
             gr.HTML(
                 """
                 <div class="bbox-toolbar-section">
+                    <span class="toolbar-label">📷 Image:</span>
+                    <button id="tb-upload"     class="bbox-tb-upload"      title="Upload an image">📁 Upload</button>
+                    <button id="tb-remove-img" class="bbox-tb-remove-img"  title="Remove current image">🗑 Remove Image</button>
+                    <div class="toolbar-divider"></div>
                     <span class="toolbar-label">🛠 Tools:</span>
                     <button id="tb-draw"   class="bbox-tb-draw active"  title="Draw new boxes">✏️ Draw</button>
                     <button id="tb-select" class="bbox-tb-select"       title="Select / move / resize">🔲 Select</button>
                     <div class="toolbar-divider"></div>
                     <span class="toolbar-label">Actions:</span>
-                    <button id="tb-del"    class="bbox-tb-del"          title="Delete selected box">✕ Delete</button>
+                    <button id="tb-del"    class="bbox-tb-del"          title="Delete selected box">✕ Delete Selected</button>
                     <button id="tb-undo"   class="bbox-tb-undo"         title="Remove last box">↩ Undo</button>
                     <button id="tb-clear"  class="bbox-tb-clear"        title="Remove all boxes">🗑 Clear All</button>
-                    <div class="toolbar-divider"></div>
-                    <button id="tb-change-img" class="bbox-tb-change"   title="Upload a different image">📸 Change Image</button>
                 </div>
                 """
             )
-            
-            gr.HTML(
-                '<div class="bbox-hint">'
-                "<b>Draw mode:</b> Click & drag to create red rectangles. "
-                "<b>Select mode:</b> Click a box to select it \u2192 drag to <b>move</b>, "
-                "drag handles to <b>resize</b>. Use <b>Delete Selected</b> to remove one box."
-                "</div>"
-            )
-            
+
+            gr.HTML('<div id="bbox-image-info"></div>')
             gr.HTML('<div id="bbox-debug-count">\u2B1C No boxes drawn yet</div>')
 
             boxes_json = gr.Textbox(
                 value="[]",
+                visible=True,
+                interactive=True,
                 elem_id="boxes-json-input",
-                elem_classes="hidden-input",
-                container=False
+                label="boxes-json",
             )
 
             prompt = gr.Textbox(
@@ -982,7 +1065,7 @@ with gr.Blocks(css=css, theme=purple_theme) as demo:
                     "[prithivMLmods](https://huggingface.co/prithivMLmods). "
                     "Adapter: [QIE-2511-Object-Remover-v2]"
                     "(https://huggingface.co/prithivMLmods/QIE-2511-Object-Remover-v2). "
-                    "More adapters \u2192 [Qwen-Image-Edit-LoRAs]"
+                    "More adapters → [Qwen-Image-Edit-LoRAs]"
                     "(https://huggingface.co/models?other=base_model:adapter:Qwen/Qwen-Image-Edit-2509)."
                 )
 
@@ -990,23 +1073,24 @@ with gr.Blocks(css=css, theme=purple_theme) as demo:
 
     run_btn.click(
         fn=infer_object_removal,
-        inputs=[hidden_image_b64, boxes_json, prompt, seed, randomize_seed,
+        inputs=[source_image, boxes_json, prompt, seed, randomize_seed,
                 guidance_scale, num_inference_steps, height_slider, width_slider],
         outputs=[result, seed, preview],
-        js="""(b64, bj, p, s, rs, gs, nis, h, w) => {
+        js="""(src, bj, p, s, rs, gs, nis, h, w) => {
             const boxes = window.__bboxBoxes || [];
             const json  = JSON.stringify(boxes);
             console.log('[BBox] submitting', boxes.length, 'boxes:', json);
-            return [b64, json, p, s, rs, gs, nis, h, w];
+            return [src, json, p, s, rs, gs, nis, h, w];
         }""",
     )
 
-    hidden_image_b64.change(
+    source_image.upload(
         fn=update_dimensions_on_upload,
-        inputs=[hidden_image_b64],
+        inputs=[source_image],
         outputs=[width_slider, height_slider],
     )
 
+
 if __name__ == "__main__":
     demo.launch(
         css=css, theme=purple_theme,