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