Upload 3 files

README.md

@@ -89,22 +89,23 @@ The Gradio conversion itself does not change this storage rule.
 
 ## Annotation workflow
 
-In the **Annotate** tab:
+In the **Annotate** tab the actual uploaded training image is displayed directly using Gradio's Image component. This avoids browser canvas/JavaScript issues that can make the preview appear black.
 
 1. Select a training image.
-2. Select the class.
-3. Enter the bounding box in the original image's pixel coordinates:
-   - X
-   - Y
+2. The real image appears in the preview.
+3. Read the image dimensions shown below it.
+4. Select the product class.
+5. Enter the bounding box in original-image pixel coordinates:
+   - X (left)
+   - Y (top)
    - Width
    - Height
-4. Click **Add Box**.
-5. Repeat for every ice cream.
-6. Use **Delete Box** or **Clear All Boxes** when needed.
+6. Click **Save Box**.
+7. Saved boxes are drawn in red on the real image.
+8. Repeat for every ice cream.
+9. Use **Delete Box** or **Clear All Boxes** when needed.
 
-The preview displays the saved boxes.
-
-This coordinate-based annotation UI is intentionally implemented entirely in Gradio/Python so it does not depend on a custom JavaScript/FastAPI frontend.
+This version prioritizes a reliable visible image over the previous JavaScript canvas approach.
 
 ## Training
 
@@ -145,13 +146,15 @@ The result image also shows the detected bounding boxes and confidence values.
 ## Default classes
 
 ```text
-cornetto
-magnum
-correto
-cone
-cup
-sandwich
-stick
+Carnavalita
+Kimo-COno
+Squizz
+Oreo
+Moro
+Dulce
+KitKat
+Cadbury
+Mega
 other
 ```
 

app.py

@@ -186,48 +186,91 @@ 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):
+
+def annotation_preview_image(image_id):
+    """Return the real PIL image for Gradio's Image component."""
     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",[])
+        return None
+    p = image_path(image_id)
+    if not p.exists():
+        return None
+    try:
+        return Image.open(p).convert("RGB")
+    except Exception:
+        return None
+
+
+def annotation_preview_with_boxes(image_id):
+    image = annotation_preview_image(image_id)
+    if image is None:
+        return None
+    data = load_dataset()
+    item = next((x for x in data["images"] if x["id"] == image_id), None)
+    if not item:
+        return image
+    out = image.copy()
+    draw = ImageDraw.Draw(out)
+    for i, a in enumerate(item.get("annotations", []), 1):
+        x, y, w, h = a["box"]
+        draw.rectangle([x, y, x+w, y+h], outline="red", width=5)
+        label = f"{i}. {a['class']}"
+        y0 = max(0, y-24)
+        draw.rectangle([x, y0, x+max(130, len(label)*9), y0+24], fill="red")
+        draw.text((x+4, y0+4), label, fill="white")
+    return out
 
 
+def refresh_editor(image_id):
+    if not image_id:
+        return 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 None,"Image not found.",[]
+    return annotation_preview_with_boxes(image_id), f"**{item['filename']}** — {item['width']} × {item['height']} px", item.get("annotations",[])
+
 def draw_annotations(image_id):
     """Render the annotation canvas for the selected image."""
     return annotation_canvas_html(image_id)
 
 
 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.",[]
+    if not image_id:return None,"Select an image first.",[]
+    if not cls:return annotation_preview_with_boxes(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"]
+    except:return annotation_preview_with_boxes(image_id),"Enter box coordinates first.",[]
+    if w<=0 or h<=0:return annotation_preview_with_boxes(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 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_preview_with_boxes(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.",[]
+    if not image_id:return 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 None,"Image not found.",[]
     try:idx=int(index)-1
-    except:return annotation_canvas_html(image_id),"Enter an annotation number.",item.get("annotations",[])
+    except:return annotation_preview_with_boxes(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
+    if idx<0 or idx>=len(anns):return annotation_preview_with_boxes(image_id),"Annotation number not found.",anns
+    deleted=anns.pop(idx);save_dataset(data)
+    return annotation_preview_with_boxes(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.",[]
+    if not image_id:return 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 None,"Image not found.",[]
+    item["annotations"]=[];save_dataset(data)
+    return annotation_preview_image(image_id),"Annotations cleared.",[]
+
 
 def save_classes(text):
     classes = [x.strip() for x in (text or "").splitlines() if x.strip()]
@@ -413,30 +456,29 @@ 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("### 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.")
+        gr.Markdown("### See the real training image and annotate it")
+        gr.Markdown("The actual uploaded photo is displayed below. Select a class and enter the box coordinates in the original image pixels, then click **Save Box**. Saved boxes appear in red.")
         with gr.Row():
             with gr.Column(scale=3):
-                annotation_canvas = gr.HTML(annotation_canvas_html(None), elem_id="annotation-canvas-panel")
+                annotation_preview = gr.Image(label="Training image", type="pil", interactive=False, height=650)
                 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)
-                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")
+                x = gr.Number(label="X (left)", value=0, precision=0)
+                y = gr.Number(label="Y (top)", value=0, precision=0)
+                w = gr.Number(label="Width", value=0, precision=0)
+                h = gr.Number(label="Height", value=0, precision=0)
                 add_btn = gr.Button("💾 Save Box", variant="primary")
-                gr.Markdown('<div id="anno-hint">Draw a box on the image.</div>')
+                gr.Markdown("Example: X=120, Y=80, Width=180, Height=300.")
                 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()
-        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])
+        image_select.change(refresh_editor, image_select, [annotation_preview, editor_info, annotations])
+        add_btn.click(add_annotation, [image_select, ann_class, x, y, w, h], [annotation_preview, ann_msg, annotations])
+        delete_btn.click(remove_annotation, [image_select, delete_index], [annotation_preview, ann_msg, annotations])
+        clear_btn.click(clear_annotations, image_select, [annotation_preview, ann_msg, annotations])
 
     with gr.Tab("3 · Training"):
         gr.Markdown("### Train RT-DETR")