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