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) 175delete_shape_key_proxy = create_proxy(lambda event: event.key == "Delete" and delete_shape_proxy(None)) 176next_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowRight" and next_shape_proxy(None)) 177previous_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowLeft" and previous_shape_proxy(None)) 178 179 180def get_centre(shape): 181if shape.tagName == "rect": 182x = float(shape.getAttribute("x")) + float(shape.getAttribute("width")) / 2 183y = float(shape.getAttribute("y")) + float(shape.getAttribute("height")) / 2 184elif shape.tagName == "polygon": 185points = shape.getAttribute("points").split(" ") 186# Average of the extreme points 187sorted_x = sorted([float(point.split(",")[0]) for point in points]) 188sorted_y = sorted([float(point.split(",")[1]) for point in points]) 189top = sorted_y[0] 190bottom = sorted_y[-1] 191left = sorted_x[0] 192right = sorted_x[-1] 193 194x = (left + right) / 2 195y = (top + bottom) / 2 196elif shape.tagName == "polyline": 197points = shape.getAttribute("points").split(" ") 198# Median point 199x = float(points[len(points) // 2].split(",")[0]) 200y = float(points[len(points) // 2].split(",")[1]) 201elif shape.tagName == "circle" and shape.classList.contains("shape-point"): 202x = float(shape.getAttribute("cx")) 203y = float(shape.getAttribute("cy")) 204else: 205return None 206 207return x, y 208 209 210async def focus_shape(shape): 211global selected_shape 212 213if shape_type != "select": 214return 215if selected_shape is not None: 216selected_shape.classList.remove("selected") 217 218selected_shape = shape 219 220selected_shape.classList.add("selected") 221 222objects = await get_all_objects() 223 224delete_button.style.display = "block" 225next_button.style.display = "block" 226previous_button.style.display = "block" 227document.addEventListener("keydown", delete_shape_key_proxy) 228document.addEventListener("keydown", next_shape_key_proxy) 229document.addEventListener("keydown", previous_shape_key_proxy) 230 231object_list.innerHTML = "" 232 233new_radio = document.createElement("input") 234new_radio.setAttribute("type", "radio") 235new_radio.setAttribute("name", "object-type") 236new_radio.setAttribute("value", "") 237new_label = document.createElement("label") 238new_label.appendChild(new_radio) 239new_label.append("Undefined") 240object_list.appendChild(new_label) 241new_radio.addEventListener("change", change_object_type_proxy) 242 243selected_object = selected_shape.getAttribute("data-object-type") 244if not selected_object: 245new_radio.setAttribute("checked", "") 246 247for object, description in objects.items(): 248new_radio = document.createElement("input") 249new_radio.setAttribute("type", "radio") 250new_radio.setAttribute("name", "object-type") 251new_radio.setAttribute("value", object) 252if selected_object == object: 253new_radio.setAttribute("checked", "") 254new_label = document.createElement("label") 255new_label.appendChild(new_radio) 256new_label.append(object) 257object_list.appendChild(new_label) 258new_radio.addEventListener("change", change_object_type_proxy) 259 260object_list.style.display = "flex" 261object_list.style.left = str(get_centre(shape)[0] / image.naturalWidth * 100) + "%" 262object_list.style.top = str(get_centre(shape)[1] / image.naturalHeight * 100) + "%" 263object_list.style.right = "auto" 264object_list.style.bottom = "auto" 265object_list.style.maxHeight = str(image.height - get_centre(shape)[1] / image.naturalHeight * image.height) + "px" 266object_list.style.maxWidth = str(image.width - get_centre(shape)[0] / image.naturalWidth * image.width) + "px" 267 268if get_centre(shape)[0] / image.naturalWidth * image.width + object_list.offsetWidth > image.width: 269object_list.style.left = "auto" 270object_list.style.right = str((image.naturalWidth - get_centre(shape)[0]) / image.naturalWidth * 100) + "%" 271object_list.style.maxWidth = str(get_centre(shape)[0] / image.naturalWidth * image.width) + "px" 272 273if get_centre(shape)[1] / image.naturalHeight * image.height + object_list.offsetHeight > image.height: 274object_list.style.top = "auto" 275object_list.style.bottom = str((image.naturalHeight - get_centre(shape)[1]) / image.naturalHeight * 100) + "%" 276object_list.style.maxHeight = str(get_centre(shape)[1] / image.naturalHeight * image.height) + "px" 277 278 279async def select_shape(event): 280await focus_shape(event.target) 281 282 283async def next_shape(event): 284global selected_shape 285if selected_shape is None: 286return 287 288selected_svg = selected_shape.parentNode 289 290while selected_svg is not None: 291next_sibling = selected_svg.nextElementSibling 292if next_sibling and next_sibling.classList.contains("shape-container"): 293selected_svg = next_sibling 294break 295elif next_sibling is None: 296# If no more siblings, loop back to the first child 297selected_svg = selected_svg.parentNode.firstElementChild 298while selected_svg is not None and not selected_svg.classList.contains( 299"shape-container"): 300selected_svg = selected_svg.nextElementSibling 301break 302else: 303selected_svg = next_sibling 304 305if selected_svg: 306shape = selected_svg.firstElementChild 307await focus_shape(shape) 308 309 310async def previous_shape(event): 311global selected_shape 312if selected_shape is None: 313return 314 315selected_svg = selected_shape.parentNode 316 317while selected_svg is not None: 318next_sibling = selected_svg.previousElementSibling 319if next_sibling and next_sibling.classList.contains("shape-container"): 320selected_svg = next_sibling 321break 322elif next_sibling is None: 323# If no more siblings, loop back to the last child 324selected_svg = selected_svg.parentNode.lastElementChild 325while selected_svg is not None and not selected_svg.classList.contains( 326"shape-container"): 327selected_svg = selected_svg.previousElementSibling 328break 329else: 330selected_svg = next_sibling 331 332if selected_svg: 333shape = selected_svg.firstElementChild 334await focus_shape(shape) 335 336 337def unselect_shape(event): 338global selected_shape 339 340if selected_shape is not None: 341selected_shape.classList.remove("selected") 342selected_shape = None 343 344object_list.innerHTML = "" 345object_list.style.display = "none" 346delete_button.style.display = "none" 347next_button.style.display = "none" 348previous_button.style.display = "none" 349document.removeEventListener("keydown", delete_shape_key_proxy) 350document.removeEventListener("keydown", next_shape_key_proxy) 351document.removeEventListener("keydown", previous_shape_key_proxy) 352 353 354def delete_shape(event): 355global selected_shape 356if selected_shape is None: 357return 358# Shape is SVG shape inside SVG so we need to remove the parent SVG 359selected_shape.parentNode.remove() 360selected_shape = None 361object_list.innerHTML = "" 362object_list.style.display = "none" 363delete_button.style.display = "none" 364next_button.style.display = "none" 365previous_button.style.display = "none" 366document.removeEventListener("keydown", delete_shape_key_proxy) 367document.removeEventListener("keydown", next_shape_key_proxy) 368document.removeEventListener("keydown", previous_shape_key_proxy) 369 370 371select_shape_proxy = create_proxy(select_shape) 372unselect_shape_proxy = create_proxy(unselect_shape) 373delete_shape_proxy = create_proxy(delete_shape) 374next_shape_proxy = create_proxy(next_shape) 375previous_shape_proxy = create_proxy(previous_shape) 376 377delete_button.addEventListener("click", delete_shape_proxy) 378next_button.addEventListener("click", next_shape_proxy) 379previous_button.addEventListener("click", previous_shape_proxy) 380 381# These are functions usable in JS 382cancel_bbox_proxy = create_proxy(lambda event: cancel_bbox(event)) 383make_bbox_proxy = create_proxy(lambda event: make_bbox(event)) 384make_polygon_proxy = create_proxy(lambda event: make_polygon(event)) 385follow_cursor_proxy = create_proxy(follow_cursor) 386 387 388def switch_shape(event): 389global shape_type 390object_list.innerHTML = "" 391unselect_shape(None) 392shape = event.currentTarget.id 393shape_type = shape 394if shape_type == "select": 395# Add event listeners to existing shapes 396print(len(list(document.getElementsByClassName("shape"))), "shapes found") 397for shape in document.getElementsByClassName("shape"): 398print("Adding event listener to shape:", shape) 399shape.addEventListener("click", select_shape_proxy) 400image.addEventListener("click", unselect_shape_proxy) 401helper_message.innerText = "Click on a shape to select" 402# Cancel the current shape creation 403if shape_type == "shape-bbox": 404cancel_bbox(None) 405elif shape_type == "shape-polygon": 406cancel_polygon(None) 407elif shape_type == "shape-polyline": 408cancel_polygon(None) 409else: 410# Remove event listeners for selection 411for shape in document.getElementsByClassName("shape"): 412print("Removing event listener from shape:", shape) 413shape.removeEventListener("click", select_shape_proxy) 414image.removeEventListener("click", unselect_shape_proxy) 415helper_message.innerText = "Select a shape type then click on the image to begin defining it" 416print("Shape is now of type:", shape) 417 418 419def select_mode(): 420global shape_type 421shape_type = "select" 422document.getElementById("select").click() 423 424 425vertical_ruler = document.getElementById("annotation-ruler-vertical") 426horizontal_ruler = document.getElementById("annotation-ruler-horizontal") 427vertical_ruler_2 = document.getElementById("annotation-ruler-vertical-secondary") 428horizontal_ruler_2 = document.getElementById("annotation-ruler-horizontal-secondary") 429helper_message = document.getElementById("annotation-helper-message") 430 431helper_message.innerText = "Select a shape type then click on the image to begin defining it" 432 433 434def cancel_bbox(event): 435global bbox_pos, new_shape 436 437# Key must be ESCAPE 438if event is not None and hasattr(event, "key") and event.key != "Escape": 439return 440 441if new_shape is not None and event is not None: 442# Require event so the shape is kept when it ends normally 443new_shape.remove() 444zone.removeEventListener("click", make_bbox_proxy) 445document.removeEventListener("keydown", cancel_bbox_proxy) 446cancel_button.removeEventListener("click", cancel_bbox_proxy) 447 448bbox_pos = None 449vertical_ruler.style.display = "none" 450horizontal_ruler.style.display = "none" 451vertical_ruler_2.style.display = "none" 452horizontal_ruler_2.style.display = "none" 453zone.style.cursor = "auto" 454cancel_button.style.display = "none" 455helper_message.innerText = "Select a shape type then click on the image to begin defining it" 456new_shape = None 457 458 459def make_bbox(event): 460global new_shape, bbox_pos 461zone_rect = zone.getBoundingClientRect() 462 463if bbox_pos is None: 464helper_message.innerText = "Now define the second point" 465 466bbox_pos = [(event.clientX - zone_rect.left) / zone_rect.width, 467(event.clientY - zone_rect.top) / zone_rect.height] 468vertical_ruler_2.style.left = str(bbox_pos[0] * 100) + "%" 469horizontal_ruler_2.style.top = str(bbox_pos[1] * 100) + "%" 470vertical_ruler_2.style.display = "block" 471horizontal_ruler_2.style.display = "block" 472 473else: 474x0, y0 = bbox_pos.copy() 475x1 = (event.clientX - zone_rect.left) / zone_rect.width 476y1 = (event.clientY - zone_rect.top) / zone_rect.height 477 478rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect") 479 480new_shape = make_shape_container() 481zone_rect = zone.getBoundingClientRect() 482 483new_shape.appendChild(rectangle) 484zone.appendChild(new_shape) 485 486minx = min(x0, x1) 487miny = min(y0, y1) 488maxx = max(x0, x1) 489maxy = max(y0, y1) 490 491rectangle.setAttribute("x", str(minx * image.naturalWidth)) 492rectangle.setAttribute("y", str(miny * image.naturalHeight)) 493rectangle.setAttribute("width", str((maxx - minx) * image.naturalWidth)) 494rectangle.setAttribute("height", str((maxy - miny) * image.naturalHeight)) 495rectangle.setAttribute("fill", "none") 496rectangle.setAttribute("data-object-type", "") 497rectangle.classList.add("shape-bbox") 498rectangle.classList.add("shape") 499 500# Add event listeners to the new shape 501rectangle.addEventListener("click", select_shape_proxy) 502 503cancel_bbox(None) 504 505 506polygon_points = [] 507 508 509def make_polygon(event): 510global new_shape, polygon_points 511 512polygon = new_shape.children[0] 513 514zone_rect = zone.getBoundingClientRect() 515 516polygon_points.append(((event.clientX - zone_rect.left) / zone_rect.width, 517(event.clientY - zone_rect.top) / zone_rect.height)) 518 519# Update the polygon 520polygon.setAttribute("points", " ".join( 521[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in 522polygon_points])) 523 524 525def reset_polygon(): 526global new_shape, polygon_points 527 528zone.removeEventListener("click", make_polygon_proxy) 529document.removeEventListener("keydown", close_polygon_proxy) 530document.removeEventListener("keydown", cancel_polygon_proxy) 531document.removeEventListener("keydown", backspace_polygon_proxy) 532confirm_button.style.display = "none" 533cancel_button.style.display = "none" 534backspace_button.style.display = "none" 535confirm_button.removeEventListener("click", close_polygon_proxy) 536cancel_button.removeEventListener("click", cancel_polygon_proxy) 537backspace_button.removeEventListener("click", backspace_polygon_proxy) 538polygon_points.clear() 539 540zone.style.cursor = "auto" 541new_shape = None 542 543 544def close_polygon(event): 545if event is not None and hasattr(event, "key") and event.key != "Enter": 546return 547# Polygon is already there, but we need to remove the events 548reset_polygon() 549 550 551def cancel_polygon(event): 552if event is not None and hasattr(event, "key") and event.key != "Escape": 553return 554# Delete the polygon 555new_shape.remove() 556reset_polygon() 557 558 559def backspace_polygon(event): 560if event is not None and hasattr(event, "key") and event.key != "Backspace": 561return 562if not polygon_points: 563return 564polygon_points.pop() 565polygon = new_shape.children[0] 566polygon.setAttribute("points", " ".join( 567[f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in 568polygon_points])) 569 570 571close_polygon_proxy = create_proxy(close_polygon) 572cancel_polygon_proxy = create_proxy(cancel_polygon) 573backspace_polygon_proxy = create_proxy(backspace_polygon) 574 575 576def open_shape(event): 577global new_shape, bbox_pos 578if bbox_pos or shape_type == "select": 579return 580print("Creating a new shape of type:", shape_type) 581 582if shape_type == "shape-bbox": 583helper_message.innerText = ("Define the first point at the intersection of the lines " 584"by clicking on the image, or click the cross to cancel") 585 586cancel_button.addEventListener("click", cancel_bbox_proxy) 587document.addEventListener("keydown", cancel_bbox_proxy) 588cancel_button.style.display = "block" 589bbox_pos = None 590zone.addEventListener("click", make_bbox_proxy) 591vertical_ruler.style.display = "block" 592horizontal_ruler.style.display = "block" 593zone.style.cursor = "crosshair" 594elif shape_type == "shape-polygon" or shape_type == "shape-polyline": 595if shape_type == "shape-polygon": 596helper_message.innerText = ("Click on the image to define the points of the polygon, " 597"press escape to cancel, enter to close, or backspace to " 598"remove the last point") 599elif shape_type == "shape-polyline": 600helper_message.innerText = ("Click on the image to define the points of the polyline, " 601"press escape to cancel, enter to finish, or backspace to " 602"remove the last point") 603 604if not polygon_points and not new_shape: 605new_shape = make_shape_container() 606zone_rect = zone.getBoundingClientRect() 607 608if not polygon_points and int(new_shape.children.length) == 0: 609zone.addEventListener("click", make_polygon_proxy) 610document.addEventListener("keydown", close_polygon_proxy) 611document.addEventListener("keydown", cancel_polygon_proxy) 612document.addEventListener("keydown", backspace_polygon_proxy) 613cancel_button.addEventListener("click", cancel_polygon_proxy) 614cancel_button.style.display = "block" 615confirm_button.addEventListener("click", close_polygon_proxy) 616confirm_button.style.display = "block" 617backspace_button.addEventListener("click", backspace_polygon_proxy) 618backspace_button.style.display = "block" 619if shape_type == "shape-polygon": 620polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon") 621polygon.classList.add("shape-polygon") 622elif shape_type == "shape-polyline": 623polygon = document.createElementNS("http://www.w3.org/2000/svg", "polyline") 624polygon.classList.add("shape-polyline") 625polygon.setAttribute("fill", "none") 626polygon.setAttribute("data-object-type", "") 627polygon.classList.add("shape") 628new_shape.appendChild(polygon) 629zone.appendChild(new_shape) 630zone.style.cursor = "crosshair" 631elif shape_type == "shape-point": 632point = document.createElementNS("http://www.w3.org/2000/svg", "circle") 633zone_rect = zone.getBoundingClientRect() 634point.setAttribute("cx", str((event.clientX - zone_rect.left) / zone_rect.width * image.naturalWidth)) 635point.setAttribute("cy", str((event.clientY - zone_rect.top) / zone_rect.height * image.naturalHeight)) 636point.setAttribute("r", "0") 637point.classList.add("shape-point") 638point.classList.add("shape") 639point.setAttribute("data-object-type", "") 640 641new_shape = make_shape_container() 642zone_rect = zone.getBoundingClientRect() 643 644new_shape.appendChild(point) 645zone.appendChild(new_shape) 646 647new_shape = None 648 649 650 651for button in list(document.getElementById("shape-selector").children): 652button.addEventListener("click", create_proxy(switch_shape)) 653print("Shape", button.id, "is available") 654 655zone.addEventListener("mousemove", follow_cursor_proxy) 656zone.addEventListener("click", create_proxy(open_shape)) 657 658# Load existing annotations, if any 659put_shapes(await load_shapes()) 660print("Ready!") 661