Upload 4 files

README.md

@@ -145,15 +145,13 @@ The result image also shows the detected bounding boxes and confidence values.
 ## Default classes
 
 ```text
-Carnavalita
-Kimo-COno
-Squizz
-Oreo
-Moro
-Dulce
-KitKat
-Cadbury
-Mega
+cornetto
+magnum
+correto
+cone
+cup
+sandwich
+stick
 other
 ```
 

app.py

@@ -148,44 +148,81 @@ def upload_training_images(files):
     return dataset_status(), gr.update(choices=image_choices()), msg
 
 
-def load_editor(image_id):
-    if not image_id:
-        return None, "Select an image.", [], None, None
-    data = load_dataset()
-    item = next((x for x in data["images"] if x["id"] == image_id), None)
-    if not item:
-        return None, "Image not found.", [], None, None
+def image_data_uri(image_id):
+    import base64
     p = image_path(image_id)
-    return (
-        str(p),
-        f"**{item['filename']}** — {item['width']} × {item['height']} px",
-        item.get("annotations", []),
-        item["width"],
-        item["height"],
-    )
+    if not p.exists():
+        return ""
+    return "data:image/jpeg;base64," + base64.b64encode(p.read_bytes()).decode("ascii")
 
 
-def draw_annotations(image_id):
+def annotation_canvas_html(image_id):
     if not image_id:
-        return None
-    p = image_path(image_id)
-    if not p.exists():
-        return None
-    image = Image.open(p).convert("RGB")
+        return '<div class="anno-empty">Select an image from the Dataset tab.</div>'
     data = load_dataset()
     item = next((x for x in data["images"] if x["id"] == image_id), None)
     if not item:
-        return image
-    draw = ImageDraw.Draw(image)
-    for i, a in enumerate(item.get("annotations", []), 1):
-        x, y, w, h = a["box"]
-        color = "red"
-        draw.rectangle([x, y, x+w, y+h], outline=color, width=4)
-        label = f"{i}. {a['class']}"
-        draw.rectangle([x, max(0, y-22), x+max(100, len(label)*8), y], fill=color)
-        draw.text((x+3, max(0, y-20)), label, fill="white")
-    return image
+        return '<div class="anno-empty">Image not found.</div>'
+    src = image_data_uri(image_id)
+    boxes = json.dumps(item.get("annotations", []), ensure_ascii=False)
+    return """<div class="anno-wrap">
+<div class="anno-toolbar"><b>Draw boxes directly on the image</b><span>Click + drag + release = create box</span><span>Choose the class first</span></div>
+<div class="anno-canvas-wrap"><canvas id="anno-canvas"></canvas></div>
+<div class="anno-help">Drag from one corner of the object to the opposite corner, then release. Repeat for every object.</div>
+</div>
+<script>
+(function(){
+const imgSrc=%s, imageW=%d, imageH=%d, saved=%s;
+const canvas=document.getElementById('anno-canvas'); if(!canvas)return;
+const ctx=canvas.getContext('2d'), img=new Image(); let drawing=false,sx=0,sy=0,current=null;
+function fit(){const maxW=Math.min(1100,window.innerWidth-80),maxH=Math.max(400,window.innerHeight*.62),scale=Math.min(maxW/imageW,maxH/imageH,1);canvas.width=Math.max(1,Math.round(imageW*scale));canvas.height=Math.max(1,Math.round(imageH*scale));canvas.dataset.scale=scale;redraw();}
+function redraw(){if(!img.complete)return;const sc=+canvas.dataset.scale||1;ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0,canvas.width,canvas.height);saved.forEach((a,i)=>{const b=a.box||[];const x=b[0]*sc,y=b[1]*sc,w=b[2]*sc,h=b[3]*sc;ctx.strokeStyle='#ff3030';ctx.lineWidth=3;ctx.strokeRect(x,y,w,h);ctx.fillStyle='#ff3030';ctx.fillRect(x,Math.max(0,y-22),120,22);ctx.fillStyle='#fff';ctx.font='14px sans-serif';ctx.fillText((i+1)+'. '+a.class,x+5,Math.max(16,y-6));});if(current){ctx.strokeStyle='#00ff88';ctx.lineWidth=3;ctx.setLineDash([7,5]);ctx.strokeRect(current.x,current.y,current.w,current.h);ctx.setLineDash([]);}}
+function pos(e){const r=canvas.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top};}
+function setField(id,val){const box=document.querySelector('#'+id);const el=box?.querySelector('input,textarea');if(!el)return;const setter=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value')?.set||Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value')?.set;if(setter)setter.call(el,String(val));else el.value=String(val);el.dispatchEvent(new Event('input',{bubbles:true}));el.dispatchEvent(new Event('change',{bubbles:true}));}
+canvas.addEventListener('pointerdown',e=>{e.preventDefault();canvas.setPointerCapture(e.pointerId);const p=pos(e);sx=p.x;sy=p.y;drawing=true;current={x:sx,y:sy,w:0,h:0};redraw();});
+canvas.addEventListener('pointermove',e=>{if(!drawing)return;const p=pos(e);current={x:Math.min(sx,p.x),y:Math.min(sy,p.y),w:Math.abs(p.x-sx),h:Math.abs(p.y-sy)};redraw();});
+canvas.addEventListener('pointerup',e=>{if(!drawing)return;drawing=false;const p=pos(e),sc=+canvas.dataset.scale||1;const x=Math.min(sx,p.x)/sc,y=Math.min(sy,p.y)/sc,w=Math.abs(p.x-sx)/sc,h=Math.abs(p.y-sy)/sc;current=null;redraw();if(w<3||h<3)return;setField('anno-x',Math.round(x));setField('anno-y',Math.round(y));setField('anno-w',Math.round(w));setField('anno-h',Math.round(h));const hint=document.getElementById('anno-hint');if(hint)hint.textContent='Box created. Click “Save Box” to store it.';});
+img.onload=fit;img.src=imgSrc;window.addEventListener('resize',fit);
+})();</script>""" % (json.dumps(src), int(item["width"]), int(item["height"]), boxes)
+
+
+def refresh_editor(image_id):
+    if not image_id:
+        return annotation_canvas_html(None), "Select an image.", []
+    data=load_dataset(); item=next((x for x in data["images"] if x["id"]==image_id),None)
+    if not item:return annotation_canvas_html(None),"Image not found.",[]
+    return annotation_canvas_html(image_id),f"**{item['filename']}** — {item['width']} × {item['height']} px",item.get("annotations",[])
+
 
+def add_annotation(image_id, cls, x, y, w, h):
+    if not image_id:return annotation_canvas_html(None),"Select an image first.",[]
+    if not cls:return annotation_canvas_html(image_id),"Select a class first.",[]
+    try:x,y,w,h=map(float,[x,y,w,h])
+    except:return annotation_canvas_html(image_id),"Draw a box on the image first.",[]
+    if w<=0 or h<=0:return annotation_canvas_html(image_id),"Box must have a width and height.",[]
+    data=load_dataset();item=next((z for z in data["images"] if z["id"]==image_id),None)
+    if not item:return annotation_canvas_html(None),"Image not found.",[]
+    x=max(0,min(x,item["width"]-1));y=max(0,min(y,item["height"]-1));w=min(w,item["width"]-x);h=min(h,item["height"]-y)
+    item.setdefault("annotations",[]).append({"class":cls,"box":[x,y,w,h]});save_dataset(data)
+    return annotation_canvas_html(image_id),f"Saved {cls}: [{x:.0f}, {y:.0f}, {w:.0f}, {h:.0f}]",item["annotations"]
+
+
+def remove_annotation(image_id,index):
+    if not image_id:return annotation_canvas_html(None),"Select an image first.",[]
+    data=load_dataset();item=next((z for z in data["images"] if z["id"]==image_id),None)
+    if not item:return annotation_canvas_html(None),"Image not found.",[]
+    try:idx=int(index)-1
+    except:return annotation_canvas_html(image_id),"Enter an annotation number.",item.get("annotations",[])
+    anns=item.get("annotations",[])
+    if idx<0 or idx>=len(anns):return annotation_canvas_html(image_id),"Annotation number not found.",anns
+    deleted=anns.pop(idx);save_dataset(data);return annotation_canvas_html(image_id),f"Deleted annotation {index}: {deleted['class']}",anns
+
+
+def clear_annotations(image_id):
+    if not image_id:return annotation_canvas_html(None),"Select an image first.",[]
+    data=load_dataset();item=next((z for z in data["images"] if z["id"]==image_id),None)
+    if not item:return annotation_canvas_html(None),"Image not found.",[]
+    item["annotations"]=[];save_dataset(data);return annotation_canvas_html(image_id),"Annotations cleared.",[]
 
 def save_classes(text):
     classes = [x.strip() for x in (text or "").splitlines() if x.strip()]
@@ -402,6 +439,7 @@ def count_image(image):
 CSS = """
 .gradio-container { max-width: 1250px !important; }
 h1 { margin-bottom: 0.2rem !important; }
+.anno-wrap{width:100%}.anno-toolbar{display:flex;gap:14px;flex-wrap:wrap;padding:10px 12px;margin-bottom:8px;border-radius:10px;background:#20242a}.anno-toolbar span{opacity:.85}.anno-canvas-wrap{width:100%;overflow:auto;border:1px solid #555;border-radius:10px;background:#111;padding:8px}.anno-canvas-wrap canvas{display:block;max-width:none;cursor:crosshair;touch-action:none;margin:auto}.anno-help{padding:8px 2px;opacity:.75}.anno-empty{padding:50px;text-align:center;border:1px dashed #777;border-radius:10px}
 .status { padding: 10px 14px; border-radius: 10px; }
 """
 
@@ -426,38 +464,30 @@ with gr.Blocks(title="Ice Cream Dataset + Counter") as demo:
         # Class dropdown is updated after the Annotate tab creates it.
 
     with gr.Tab("2 · Annotate"):
-        gr.Markdown(
-            "Select an image. To create a box, enter **X, Y, Width, Height** in original image pixels. "
-            "The preview shows saved boxes. This is deliberately simple and works reliably inside Gradio Spaces."
-        )
+        gr.Markdown("### Draw bounding boxes directly on the image")
+        gr.Markdown("**How to use:** select a class → **click and drag** around the object → **release** → click **Save Box**. Repeat for every object.")
         with gr.Row():
-            with gr.Column(scale=2):
-                editor_image = gr.Image(label="Training image", type="pil", interactive=False)
+            with gr.Column(scale=3):
+                annotation_canvas = gr.HTML(annotation_canvas_html(None), elem_id="annotation-canvas-panel")
                 editor_info = gr.Markdown()
             with gr.Column(scale=1):
                 ann_class = gr.Dropdown(choices=read_classes(), value=(read_classes()[0] if read_classes() else None), label="Class")
                 save_class_btn.click(save_classes, class_text, [class_msg, ann_class, status], preprocess=False)
-                with gr.Row():
-                    x = gr.Number(label="X", value=0)
-                    y = gr.Number(label="Y", value=0)
-                with gr.Row():
-                    w = gr.Number(label="Width", value=100)
-                    h = gr.Number(label="Height", value=100)
-                add_btn = gr.Button("➕ Add Box", variant="primary")
+                x = gr.Number(label="X", value=0, elem_id="anno-x")
+                y = gr.Number(label="Y", value=0, elem_id="anno-y")
+                w = gr.Number(label="Width", value=0, elem_id="anno-w")
+                h = gr.Number(label="Height", value=0, elem_id="anno-h")
+                add_btn = gr.Button("💾 Save Box", variant="primary")
+                gr.Markdown('<div id="anno-hint">Draw a box on the image.</div>')
                 delete_index = gr.Number(label="Annotation # to delete", value=1, precision=0)
                 delete_btn = gr.Button("Delete Box")
                 clear_btn = gr.Button("Clear All Boxes")
         annotations = gr.JSON(label="Saved annotations")
         ann_msg = gr.Markdown()
-
-        def refresh_editor(image_id):
-            img, info, anns, _, _ = load_editor(image_id)
-            return draw_annotations(image_id), info, anns
-
-        image_select.change(refresh_editor, image_select, [editor_image, editor_info, annotations])
-        add_btn.click(add_annotation, [image_select, ann_class, x, y, w, h], [editor_image, ann_msg, annotations, annotations])
-        delete_btn.click(remove_annotation, [image_select, delete_index], [editor_image, ann_msg, annotations])
-        clear_btn.click(clear_annotations, image_select, [editor_image, ann_msg, annotations])
+        image_select.change(refresh_editor, image_select, [annotation_canvas, editor_info, annotations])
+        add_btn.click(add_annotation, [image_select, ann_class, x, y, w, h], [annotation_canvas, ann_msg, annotations])
+        delete_btn.click(remove_annotation, [image_select, delete_index], [annotation_canvas, ann_msg, annotations])
+        clear_btn.click(clear_annotations, image_select, [annotation_canvas, ann_msg, annotations])
 
     with gr.Tab("3 · Training"):
         gr.Markdown("### Train RT-DETR")