Web platform for sharing free data for ML and research

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 picture-annotation.html

View raw Download
text/html • 3.0 kiB
HTML document, ASCII text
        
            
1
{% extends "default.html" %}
2
{% block title %}Picture | gigadata{% endblock %}
3
{% block content %}
4
<style>
5
py-script {
6
display: none;
7
}
8
/* Full PyScript style is too much, but we still need to hide the Python code */
9
</style>
10
<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
11
12
<x-frame style="--width: 768px">
13
<h1>Annotating: {{ resource.title }}</h1>
14
<p id="annotation-helper-message">Please wait for Python to load...</p>
15
</x-frame>
16
<x-frame id="main-area">
17
<x-buttonbox id="shape-selector">
18
<button class="button-flat" title="selection" id="select">
19
<iconify-icon icon="mdi:cursor-default"></iconify-icon>
20
</button>
21
<button class="button-flat" title="rectangle" id="shape-bbox">
22
<iconify-icon icon="mdi:square"></iconify-icon>
23
</button>
24
<button class="button-flat" title="polygon" id="shape-polygon">
25
<iconify-icon icon="mdi:pentagon"></iconify-icon>
26
</button>
27
<button class="button-flat" title="line" id="shape-line">
28
<iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
29
</button>
30
<button class="button-flat" title="point" id="shape-point">
31
<iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
32
</button>
33
<button class="button-flat" title="whole picture" id="shape-all">
34
<iconify-icon icon="mdi:image"></iconify-icon>
35
</button>
36
</x-buttonbox>
37
<div id="annotation-zone">
38
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
39
<div id="annotation-ruler-vertical" class="annotation-ruler"></div>
40
<div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
41
<div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
42
<div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
43
</div>
44
<x-buttonbox style="display: none;" id="shape-options">
45
<button class="button-flat" title="cancel" id="annotation-cancel">
46
<iconify-icon icon="mdi:close"></iconify-icon>
47
</button>
48
<button class="button-flat" title="apply" id="annotation-confirm">
49
<iconify-icon icon="mdi:check"></iconify-icon>
50
</button>
51
<button class="button-flat" title="remove last point" id="annotation-backspace">
52
<iconify-icon icon="mdi:backspace"></iconify-icon>
53
</button>
54
<button class="button-flat" title="delete shape" id="annotation-delete">
55
<iconify-icon icon="mdi:delete"></iconify-icon>
56
</button>
57
</x-buttonbox>
58
<x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
59
</x-vbox>
60
</x-frame>
61
<script type="py" src="/static/picture-annotation.py"></script>
62
{% endblock %}