picture-annotation.py
Python script, ASCII text executable
1from pyscript import document, fetch as pyfetch 2from pyscript.ffi import create_proxy 3import asyncio 4import json 5 6document.getElementById("shape-options").style.display = "flex" 7 8image = document.getElementById("annotation-image") 9zone = document.getElementById("annotation-zone") 10confirm_button = document.getElementById("annotation-confirm") 11cancel_button = document.getElementById("annotation-cancel") 12backspace_button = document.getElementById("annotation-backspace") 13delete_button = document.getElementById("annotation-delete") 14previous_button = document.getElementById("annotation-previous") 15next_button = document.getElementById("annotation-next") 16save_button = document.getElementById("annotation-save") 17 18object_list = document.getElementById("object-types") 19 20confirm_button.style.display = "none" 21cancel_button.style.display = "none" 22backspace_button.style.display = "none" 23delete_button.style.display = "none" 24previous_button.style.display = "none" 25next_button.style.display = "none" 26shape_type = "" 27bbox_pos = None 28new_shape = None 29selected_shape = None 30 31 32def make_shape_container(): 33shape = document.createElementNS("http://www.w3.org/2000/svg", "svg") 34shape.setAttribute("width", "100%") 35shape.setAttribute("height", "100%") 36shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}") 37shape.classList.add("shape-container") 38 39return shape 40 41 42async def get_all_objects(): 43response = await pyfetch("/api/object-types") 44if response.ok: 45return await response.json() 46 47 48def follow_cursor(event): 49rect = zone.getBoundingClientRect() 50x = event.clientX - rect.left 51y = event.clientY - rect.top 52vertical_ruler.style.left = str(x) + "px" 53horizontal_ruler.style.top = str(y) + "px" 54 55 56def change_object_type(event): 57global selected_shape 58if selected_shape is None: 59return 60selected_shape.setAttribute("data-object-type", event.currentTarget.value) 61 62 63change_object_type_proxy = create_proxy(change_object_type) 64 65 66def list_shapes(): 67shapes = list(zone.getElementsByClassName("shape")) 68json_shapes = [] 69for shape in shapes: 70shape_dict = {} 71if shape.tagName == "rect": 72shape_dict["type"] = "bbox" 73shape_dict["shape"] = { 74"x": float(shape.getAttribute("x")) / image.naturalWidth, 75"y": float(shape.getAttribute("y")) / image.naturalHeight, 76"w": float(shape.getAttribute("width")) / image.naturalWidth, 77"h": float(shape.getAttribute("height")) / image.naturalHeight 78} 79elif shape.tagName == "polygon" or shape.tagName == "polyline": 80if shape.tagName == "polygon": 81shape_dict["type"] = "polygon" 82elif shape.tagName == "polyline": 83shape_dict["type"] = "polyline" 84 85points = shape.getAttribute("points").split(" ") 86json_points = [] 87for point in points: 88x, y = point.split(",") 89x, y = float(x), float(y) 90json_points.append({ 91"x": x / image.naturalWidth, 92"y": y / image.naturalHeight 93}) 94 95shape_dict["shape"] = json_points 96elif shape.tagName == "circle" and shape.classList.contains("shape-point"): 97shape_dict["type"] = "point" 98shape_dict["shape"] = { 99"x": float(shape.getAttribute("cx")) / image.naturalWidth, 100"y": float(shape.getAttribute("cy")) / image.naturalHeight 101} 102else: 103continue 104 105shape_dict["object"] = shape.getAttribute("data-object-type") 106json_shapes.append(shape_dict) 107 108return json_shapes 109 110 111def put_shapes(json_shapes): 112for shape in json_shapes: 113new_shape = make_shape_container() 114zone_rect = zone.getBoundingClientRect() 115 116if shape["type"] == "bbox": 117rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect") 118rectangle.setAttribute("x", str(shape["shape"]["x"] * image.naturalWidth)) 119rectangle.setAttribute("y", str(shape["shape"]["y"] * image.naturalHeight)) 120rectangle.setAttribute("width", str(shape["shape"]["w"] * image.naturalWidth)) 121rectangle.setAttribute("height", str(shape["shape"]["h"] * image.naturalHeight)) 122rectangle.setAttribute("fill", "none") 123rectangle.setAttribute("data-object-type", shape["object"] or "") 124rectangle.classList.add("shape-bbox") 125rectangle.classList.add("shape") 126new_shape.appendChild(rectangle) 127elif shape["type"] == "polygon" or shape["type"] == "polyline": 128polygon = document.createElementNS("http://www.w3.org/2000/svg", shape["type"]) 129points = " ".join( 130[f"{point['x'] * image.naturalWidth},{point['y'] * image.naturalHeight}" for point in shape["shape"]]) 131polygon.setAttribute("points", points) 132polygon.setAttribute("fill", "none") 133polygon.setAttribute("data-object-type", shape["object"] or "") 134polygon.classList.add(f"shape-{shape['type']}") 135polygon.classList.add("shape") 136new_shape.appendChild(polygon) 137elif shape["type"] == "point": 138point = document.createElementNS("http://www.w3.org/2000/svg", "circle") 139point.setAttribute("cx", str(shape["shape"]["x"] * image.naturalWidth)) 140point.setAttribute("cy", str(shape["shape"]["y"] * image.naturalHeight)) 141point.setAttribute("r", "0") 142point.classList.add("shape-point") 143point.classList.add("shape") 144point.setAttribute("data-object-type", shape["object"] or "") 145new_shape.appendChild(point) 146 147zone.appendChild(new_shape) 148 149 150async def load_shapes(): 151resource_id = document.getElementById("resource-id").value 152response = await pyfetch(f"/picture/{resource_id}/get-annotations") 153if response.ok: 154shapes = await response.json() 155return shapes 156 157 158async def save_shapes(event): 159shapes = list_shapes() 160resource_id = document.getElementById("resource-id").value 161print("Saving shapes:", shapes) 162response = await pyfetch(f"/picture/{resource_id}/save-annotations", 163method="POST", 164headers={ 165"Content-Type": "application/json" 166}, 167body=json.dumps(shapes) 168) 169if response.ok: 170return await response 171 172 173save_shapes_proxy = create_proxy(save_shapes) 174save_button.addEventListener("click", save_shapes_proxy) 175 176 177async def focus_shape(shape): 178global selected_shape 179 180if shape_type != "select": 181return 182if selected_shape is not None: 183selected_shape.classList.remove("selected") 184 185selected_shape = shape 186 187selected_shape.classList.add("selected") 188 189objects = await get_all_objects() 190 191delete_button.style.display = "block" 192next_button.style.display = "block" 193previous_button.style.display = "block" 194 195object_list.innerHTML = "" 196 197new_radio = document.createElement("input") 198new_radio.setAttribute("type", "radio") 199new_radio.setAttribute("name", "object-type") 200new_radio.setAttribute("value", "") 201new_label = document.createElement("label") 202new_label.appendChild(new_radio) 203new_label.append("Undefined") 204object_list.appendChild(new_label) 205new_radio.addEventListener("change", change_object_type_proxy) 206 207selected_object = selected_shape.getAttribute("data-object-type") 208if not selected_object: 209new_radio.setAttribute("checked", "") 210 211for object, description in objects.items(): 212new_radio = document.createElement("input") 213new_radio.setAttribute("type", "radio") 214new_radio.setAttribute("name", "object-type") 215new_radio.setAttribute("value", object) 216if selected_object == object: 217new_radio.setAttribute("checked", "") 218new_label = document.createElement("label") 219new_label.appendChild(new_radio) 220new_label.append(object) 221object_list.appendChild(new_label) 222new_radio.addEventListener("change", change_object_type_proxy) 223 224 225async def select_shape(event): 226await focus_shape(event.target) 227 228 229async def next_shape(event): 230global selected_shape 231if selected_shape is None: 232return 233 234selected_svg = selected_shape.parentNode 235 236while selected_svg is not None: 237next_sibling = selected_svg.nextElementSibling 238if next_sibling and next_sibling.classList.contains("shape-container"): 239selected_svg = next_sibling 240break 241elif next_sibling is None: 242# If no more siblings, loop back to the first child 243selected_svg = selected_svg.parentNode.firstElementChild 244while selected_svg is not None and not selected_svg.classList.contains( 245"shape-container"): 246selected_svg = selected_svg.nextElementSibling 247break 248else: 249selected_svg = next_sibling 250 251if selected_svg: 252shape = selected_svg.firstElementChild 253await focus_shape(shape) 254 255 256async def previous_shape(event): 257global selected_shape 258if selected_shape is None: 259return 260 261selected_svg = selected_shape.parentNode 262 263while selected_svg is not None: 264next_sibling = selected_svg.previousElementSibling 265if next_sibling and next_sibling.classList.contains("shape-container"): 266selected_svg = next_sibling 267break 268elif next_sibling is None: 269# If no more siblings, loop back to the last child 270selected_svg = selected_svg.parentNode.lastElementChild 271while selected_svg is not None and not selected_svg.classList.contains( 272"shape-container"): 273selected_svg = selected_svg.previousElementSibling 274break 275else: 276selected_svg = next_sibling 277 278if selected_svg: 279shape = selected_svg.firstElementChild 280await focus_shape(shape) 281 282 283def unselect_shape(event): 284global selected_shape 285 286if selected_shape is not None: 287selected_shape.classList.remove("selected") 288selected_shape = None 289 290object_list.innerHTML = "" 291delete_button.style.display = "none" 292next_button.style.display = "none" 293previous_button.style.display = "none" 294 295 296def delete_shape(event): 297global selected_shape 298if selected_shape is None: 299return 300# Shape is SVG shape inside SVG so we need to remove the parent SVG 301selected_shape.parentNode.remove() 302selected_shape = None 303object_list.innerHTML = "" 304delete_button.style.display = "none" 305next_button.style.display = "none" 306previous_button.style.display = "none" 307 308 309select_shape_proxy = create_proxy(select_shape) 310unselect_shape_proxy = create_proxy(unselect_shape) 311delete_shape_proxy = create_proxy(delete_shape) 312next_shape_proxy = create_proxy(next_shape) 313previous_shape_proxy = create_proxy(previous_shape) 314 315delete_button.addEventListener("click", delete_shape_proxy) 316next_button.addEventListener("click", next_shape_proxy) 317previous_button.addEventListener("click", previous_shape_proxy) 318 319# These are functions usable in JS 320cancel_bbox_proxy = create_proxy(lambda event: cancel_bbox(event)) 321make_bbox_proxy = create_proxy(lambda event: make_bbox(event)) 322make_polygon_proxy = create_proxy(lambda event: make_polygon(event)) 323follow_cursor_proxy = create_proxy(follow_cursor) 324 325 326def switch_shape(event): 327global shape_type 328object_list.innerHTML = "" 329unselect_shape(None) 330shape = event.currentTarget.id 331shape_type = shape 332if shape_type == "select": 333# Add event listeners to existing shapes 334print(len(list(document.getElementsByClassName("shape"))), "shapes found") 335for shape in document.getElementsByClassName("shape"): 336print("Adding event listener to shape:", shape) 337shape.addEventListener("click", select_shape_proxy) 338image.addEventListener("click", unselect_shape_proxy) 339helper_message.innerText = "Click on a shape to select" 340# Cancel the current shape creation 341if shape_type == "shape-bbox": 342cancel_bbox(None) 343elif shape_type == "shape-polygon": 344cancel_polygon(None) 345elif shape_type == "shape-polyline": 346cancel_polygon(None) 347else: 348# Remove event listeners for selection 349for shape in document.getElementsByClassName("shape"): 350print("Removing event listener from shape:", shape) 351shape.removeEventListener("click", select_shape_proxy) 352image.removeEventListener("click", unselect_shape_proxy) 353helper_message.innerText = "Select a shape type then click on the image to begin defining it" 354print("Shape is now of type:", shape) 355 356 357vertical_ruler = document.getElementById("annotation-ruler-vertical") 358horizontal_ruler = document.getElementById("annotation-ruler-horizontal") 359vertical_ruler_2 = document.getElementById("annotation-ruler-vertical-secondary") 360horizontal_ruler_2 = document.getElementById("annotation-ruler-horizontal-secondary") 361helper_message = document.getElementById("annotation-helper-message") 362 363helper_message.innerText = "Select a shape type then click on the image to begin defining it" 364 365 366def cancel_bbox(event): 367global bbox_pos, new_shape 368 369# Key must be ESCAPE 370if event is not None and hasattr(event, "key") and event.key != "Escape": 371return 372 373if new_shape is not None and event is not None: 374# Require event so the shape is kept when it ends normally 375new_shape.remove() 376zone.removeEventListener("click", make_bbox_proxy) 377document.removeEventListener("keydown", cancel_bbox_proxy) 378cancel_button.removeEventListener("click", cancel_bbox_proxy) 379 380bbox_pos = None 381vertical_ruler.style.display = "none" 382horizontal_ruler.style.display = "none" 383vertical_ruler_2.style.display = "none" 384horizontal_ruler_2.style.display = "none" 385zone.style.cursor = "auto" 386cancel_button.style.display = "none" 387helper_message.innerText = "Select a shape type then click on the image to begin defining it" 388new_shape = None 389 390 391def make_bbox(event): 392global new_shape, bbox_pos 393zone_rect = zone.getBoundingClientRect() 394 395if bbox_pos is None: 396helper_message.innerText = "Now define the second point" 397 398bbox_pos = [(event.clientX - zone_rect.left) / zone_rect.width, 399(event.clientY - zone_rect.top) / zone_rect.height] 400vertical_ruler_2.style.left = str(bbox_pos[0] * 100) + "%" 401horizontal_ruler_2.style.top = str(bbox_pos[1] * 100) + "%" 402vertical_ruler_2.style.display = "block" 403horizontal_ruler_2.style.display = "block" 404 405else: 406x0, y0 = bbox_pos.copy() 407x1 = (event.clientX - zone_rect.left) / zone_rect.width 408y1 = (event.clientY - zone_rect.top) / zone_rect.height 409 410rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect") 411 412new_shape = make_shape_container() 413zone_rect = zone.getBoundingClientRect() 414 415new_shape.appendChild(rectangle) 416zone.appendChild(new_shape) 417 418minx = min(x0, x1) 419miny = min(y0, y1) 420maxx = max(x0, x1) 421maxy = max(y0, y1) 422 423rectangle.setAttribute("x", str(minx * image.naturalWidth)) 424rectangle.setAttribute("y", str(miny * image.naturalHeight)) 425rectangle.setAttribute("width", str((maxx - minx) * image.naturalWidth)) 426rectangle.setAttribute("height", str((maxy - miny) * image.naturalHeight)) 427rectangle.setAttribute("fill", "none") 428rectangle.setAttribute("data-object-type", "") 429rectangle.classList.add("shape-bbox") 430rectangle.classList.add("shape") 431 432# Add event listeners to the new shape 433rectangle.addEventListener("click", select_shape_proxy) 434 435cancel_bbox(None) 436 437 438polygon_points = [] 439 440 441def make_polygon(event): 442global new_shape, polygon_points 443 444polygon = new_shape.children[0] 445 446zone_rect = zone.getBoundingClientRect() 447 448polygon_points.append(((event.clientX - zone_rect.left) / zone_rect.width, 449(event.clientY - zone_rect.top) / zone_rect.height)) 450 451# Update the polygon 452polygon.setAttribute("points", " ".join( 453[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in 454polygon_points])) 455 456 457def reset_polygon(): 458global new_shape, polygon_points 459 460zone.removeEventListener("click", make_polygon_proxy) 461document.removeEventListener("keydown", close_polygon_proxy) 462document.removeEventListener("keydown", cancel_polygon_proxy) 463document.removeEventListener("keydown", backspace_polygon_proxy) 464confirm_button.style.display = "none" 465cancel_button.style.display = "none" 466backspace_button.style.display = "none" 467confirm_button.removeEventListener("click", close_polygon_proxy) 468cancel_button.removeEventListener("click", cancel_polygon_proxy) 469backspace_button.removeEventListener("click", backspace_polygon_proxy) 470polygon_points.clear() 471 472zone.style.cursor = "auto" 473new_shape = None 474 475 476def close_polygon(event): 477if event is not None and hasattr(event, "key") and event.key != "Enter": 478return 479# Polygon is already there, but we need to remove the events 480reset_polygon() 481 482 483def cancel_polygon(event): 484if event is not None and hasattr(event, "key") and event.key != "Escape": 485return 486# Delete the polygon 487new_shape.remove() 488reset_polygon() 489 490 491def backspace_polygon(event): 492if event is not None and hasattr(event, "key") and event.key != "Backspace": 493return 494if not polygon_points: 495return 496polygon_points.pop() 497polygon = new_shape.children[0] 498polygon.setAttribute("points", " ".join( 499[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in 500polygon_points])) 501 502 503close_polygon_proxy = create_proxy(close_polygon) 504cancel_polygon_proxy = create_proxy(cancel_polygon) 505backspace_polygon_proxy = create_proxy(backspace_polygon) 506 507 508def open_shape(event): 509global new_shape, bbox_pos 510if bbox_pos or shape_type == "select": 511return 512print("Creating a new shape of type:", shape_type) 513 514if shape_type == "shape-bbox": 515helper_message.innerText = ("Define the first point at the intersection of the lines " 516"by clicking on the image, or click the cross to cancel") 517 518cancel_button.addEventListener("click", cancel_bbox_proxy) 519document.addEventListener("keydown", cancel_bbox_proxy) 520cancel_button.style.display = "block" 521bbox_pos = None 522zone.addEventListener("click", make_bbox_proxy) 523vertical_ruler.style.display = "block" 524horizontal_ruler.style.display = "block" 525zone.style.cursor = "crosshair" 526elif shape_type == "shape-polygon" or shape_type == "shape-polyline": 527if shape_type == "shape-polygon": 528helper_message.innerText = ("Click on the image to define the points of the polygon, " 529"press escape to cancel, enter to close, or backspace to " 530"remove the last point") 531elif shape_type == "shape-polyline": 532helper_message.innerText = ("Click on the image to define the points of the polyline, " 533"press escape to cancel, enter to finish, or backspace to " 534"remove the last point") 535 536if not polygon_points and not new_shape: 537new_shape = make_shape_container() 538zone_rect = zone.getBoundingClientRect() 539 540if not polygon_points and int(new_shape.children.length) == 0: 541zone.addEventListener("click", make_polygon_proxy) 542document.addEventListener("keydown", close_polygon_proxy) 543document.addEventListener("keydown", cancel_polygon_proxy) 544document.addEventListener("keydown", backspace_polygon_proxy) 545cancel_button.addEventListener("click", cancel_polygon_proxy) 546cancel_button.style.display = "block" 547confirm_button.addEventListener("click", close_polygon_proxy) 548confirm_button.style.display = "block" 549backspace_button.addEventListener("click", backspace_polygon_proxy) 550backspace_button.style.display = "block" 551if shape_type == "shape-polygon": 552polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon") 553polygon.classList.add("shape-polygon") 554elif shape_type == "shape-polyline": 555polygon = document.createElementNS("http://www.w3.org/2000/svg", "polyline") 556polygon.classList.add("shape-polyline") 557polygon.setAttribute("fill", "none") 558polygon.setAttribute("data-object-type", "") 559polygon.classList.add("shape") 560new_shape.appendChild(polygon) 561zone.appendChild(new_shape) 562zone.style.cursor = "crosshair" 563elif shape_type == "shape-point": 564point = document.createElementNS("http://www.w3.org/2000/svg", "circle") 565zone_rect = zone.getBoundingClientRect() 566point.setAttribute("cx", str((event.clientX - zone_rect.left) / zone_rect.width * image.naturalWidth)) 567point.setAttribute("cy", str((event.clientY - zone_rect.top) / zone_rect.height * image.naturalHeight)) 568point.setAttribute("r", "0") 569point.classList.add("shape-point") 570point.classList.add("shape") 571point.setAttribute("data-object-type", "") 572 573new_shape = make_shape_container() 574zone_rect = zone.getBoundingClientRect() 575 576new_shape.appendChild(point) 577zone.appendChild(new_shape) 578 579new_shape = None 580 581 582 583for button in list(document.getElementById("shape-selector").children): 584button.addEventListener("click", create_proxy(switch_shape)) 585print("Shape", button.id, "is available") 586 587zone.addEventListener("mousemove", follow_cursor_proxy) 588zone.addEventListener("click", create_proxy(open_shape)) 589 590# Load existing annotations, if any 591put_shapes(await load_shapes()) 592print("Ready!") 593