http://tacodataset.org/annotate

1<!DOCTYPE html>
2<html lang="en-US">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8
9    <link rel="stylesheet" href="/css/main.css">
10    <link rel="stylesheet" href="/css/font-awesome.min.css">
11
12    <link rel="shortcut icon" href="/favicon.ico?1">
13    <!-- Begin Jekyll SEO tag v2.5.0 -->
14<meta name="generator" content="Jekyll v3.8.4" />
15<meta property="og:locale" content="en_US" />
16<meta name="description" content="TACO website" />
17<meta property="og:description" content="TACO website" />
18<link rel="canonical" href="http://0.0.0.0:4000/annotate.html" />
19<meta property="og:url" content="http://0.0.0.0:4000/annotate.html" />

20<script type="application/ld+json">
21{"description":"TACO website","@type":"WebPage","url":"http://0.0.0.0:4000/annotate.html","@context":"http://schema.org"}</script>

21
22<!-- End Jekyll SEO tag -->
23
24
25    <link rel="canonical" href="http://0.0.0.0:4000/annotate.html">
26    <link rel="alternate" type="application/rss+xml" title="" href="http://0.0.0.0:4000/feed.xml" />
27</head>
28
29
30<body>
31
32    <nav class="navbar navbar-default navbar-fixed-top">
33    <div class="container navbar-container">
34        <div class="navbar-header">
35            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
36              <span class="sr-only">Toggle navigation</span>
37              <span class="icon-bar"></span>
38              <span class="icon-bar"></span>
39              <span class="icon-bar"></span>
40            </button>
41            <a class="navbar-brand" href="/">
42                <span><img src="/img/logonav.png" alt="Logo"></span> 
43            </a>
44        </div>
45        <div id="navbar" class="collapse navbar-collapse">
46            <ul class="nav navbar-nav">
47                <li ><a href=explore>Explore</a></li>
48                <li ><a href=taxonomy>Taxonomy</a></li>
49                <li ><a href=stats>Stats</a></li>
50                <li ><a href=annotate onclick="doClick(); return false;">Annotate</a></li>
51                <li ><a href=upload>Upload</a></li>
52                <li ><a href=team>Team</a></li>
53            </ul>
54            <div class="navbar-right">
55              <ul class="nav navbar-nav">
56                    <li><a href="https://github.com/pedropro/TACO"><i class="fa fa-github" aria-hidden="true"></i></a></li>
57                </ul>
58            </div>
59        </div>
60        

60<script>
61        function doClick() {
62           window.location.href = "./annotate";
63
64           var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
65            if (isMobile) {
66              window.location.href = "./annotate_mobile";
67            }else{
68              window.location.href = "./annotate";
69            }
70        }
71        </script>

71
72    </div>
73</nav>
74
75
76    <div class="page-content">
77        <div class="wrapper">
78            <style>
79  .control_panel {
80     margin-bottom: 1em;
81  }
82  .custom-select {
83     margin-left: 1em;
84     margin-right: 1em;
85  }
86  .button {
87     background-color: #E7EBEE; /* Green background */
88     border: 1px solid #2A63FF; /* Green border */
89     color: #2A63FF; /* White text */
90     padding: 2px 24px; /* Some padding */
91     cursor: pointer; /* Pointer/hand icon */
92     float: left; /* Float the buttons side by side */
93     margin-right: 0.2em;
94    /* margin-bottom:1em; */
95  }
96  /* Add a background color on hover */
97  .button:hover {background-color: #BCBEBF}
98
99  .custom-select {
100    margin-bottom:1em;
101  }
102
103  /* Clear floats (clearfix hack) */
104  .btn-group:after {
105    content: "";
106    clear: both;
107    display: table;
108  }
109
110}
111</style>
112
113<body onload="load_image()">
114  <div class="container">
115    <p>Draw points over the contour of an object by pressing <strong>Left Click</strong> to insert a new point
116      and click on the initial point to close the polygon.
117      After adding all TACO objects in the image, press
118      <strong>submit</strong>.</p>
119      <p> <strong> Tips:</strong> Press <code>h</code> to switch between image resolutions. Undo by clicking on the last point.
120      To edit/delete object click on the object label. If you have any doubts, check our <a href="./index"> FAQ section</a>.</p>
121      <p><span style="color: red;">Annotations are currently closed. All images have been annotated.</span></p>
122    <hr>
123    <div class="control_panel" align="left">
124      <div class="btn-group" style="width:100%">
125        <button class="button" style="width:20%" id="skip_btn" onclick="load_image()">  Skip Image >> </button>
126        <button class="button" id ="hr_button" onclick="change_resolution()">HR </button>
127        <button onclick="showTutorial()" style="width:20%" class="button">Tutorial</button>
128        <button class="button" style="width:20%" onclick="clear_canvas()"> Clear </button>
129        <!-- <button onclick="undo()" style="width:20%" class="button">Undo</button> -->
130        <button class="button" style="width:20%" onclick="submit_step_1()">  Submit </button>
131      </div>
132    </div>
133
134    <div id="object_btn_list"></div>
135
136    <div id="spinner" align="center"><img src='img/iconLoader.gif'></img></div>
137
138    <canvas id="jPolygon" style="cursor:crosshair" data-imgsrc="img/annotation_test.JPG" onmousedown="point_it(event)" onmousemove="hover(event)" oncontextmenu="return false;">
139                Your browser does not support the HTML5 canvas tag.
140    </canvas>
141
142  <!-- Modal #0: Demo -->
143    <div id="modal_demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
144      <div class="modal-dialog">
145          <div class="modal-content">
146              <div class="modal-header">
147                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
148              </div>
149              <div class="modal-body">
150                  <iframe width="560" height="315" src="https://www.youtube.com/embed/KHMBNvQxfiU" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
151              </div>
152          </div>
153      </div>
154    </div>
155
156    <!-- Modal #1: Ask user to add object or continue segmenting it -->
157    <div class="modal fade bd-example-modal-sm" id="modal_1" tabindex="-1" role="dialog">
158      <div class="modal-dialog modal-dialog-centered" role="document">
159        <div class="modal-content">
160          <div class="modal-header">
161            <h5 class="modal-title" id="exampleModalLongTitle">Are you done with this object?</h5>
162          </div>
163          <div class="modal-footer">
164            <button type="button" class="btn btn-secondary" data-dismiss="modal">Not yet</button>
165            <button type="button" class="btn btn-success" onclick="add_object_step_1()">Yes</button>
166          </div>
167        </div>
168      </div>
169    </div>
170    <!-- End or Modal #1 -->
171
172    <!-- Modal #2: Object class? Is this litter? -->
173    <div class="modal fade bd-example-modal-sm" id="modal_2" tabindex="-1" role="dialog">
174      <div class="modal-dialog" role="document">
175        <div class="modal-content">
176          <div class="modal-header">
177            <h5 class="modal-title">Adding object</h5>
178            <hr>
179          </div>
180          <div class="modal-body">
181            <div class="control_panel">
182              <p class="lead">Object class <font color="#ff0000">*</font> : </p>
183              <!-- <strong>Class: </strong> -->
184              <select id="option_cat" class="custom-select"></select>
185            </div>
186            <p><font color="#ff0000">*</font> If you are not sure check our <a href="./taxonomy" target="_blank">Taxonomy</a> or choose <strong>Unlabeled Litter</strong></p>
187              <p class="lead">Is this litter?</p>
188              <input type="radio" name="contex" value="litter"> Yes<br>
189              <input type="radio" name="contex" value="notlitter"> No<br>
190              <input type="radio" name="contex" value="unknown"> Don't know<br>
191            </div>
192          <div class="modal-footer">
193            <button type="button" class="btn btn-primary" onclick="add_object_step_2()">Add</button>
194          </div>
195        </div>
196      </div>
197    </div>
198
199    <!-- Modal #3: Image submission -->
200    <div class="modal fade" id="modal_3" tabindex="-1" role="dialog">
201      <div class="modal-dialog" role="document">
202        <div class="modal-content">
203          <div class="modal-header">
204            <h5 class="modal-title">Submission</h5>
205            <hr>
206          </div>
207          <div class="modal-body">
208            <div class="control_panel">
209              <p class="lead">Check all boxes that describe the background.</p>
210              <form>
211                <input type="checkbox" id="vegetation" value="5"> Vegetation </br>
212                <input type="checkbox" id="road" value="2"> Pavement or road </br>
213                <input type="checkbox" id="sand" value="3"> Sand, dirt, rocks </br>
214                <input type="checkbox" id="water" value="6"> Water </br>
215                <input type="checkbox" id="trash" value="4"> Trash </br>
216                <input type="checkbox" id="indoor" value="1"> Indoor, man-made
217              </form>
218              <div>
219                </br>
220                <p class="lead">User details</p>
221                Username <font color="#ff0000">*</font>: <input type="text" id="username" value=" ">
222                </br>
223                E-mail address <font color="#ff0000">*</font>: <input type="text" id="email" value=" ">
224                </br>
225                <p><font color="#ff0000">*</font> Optional. If you want to be in our
226                  leaderboard and subscription list.
227              </div>
228            </div>
229          </div>
230          <div class="modal-footer">
231            <button type="button" class="btn btn-primary" onclick="submit_step_2()">Add</button>
232          </div>
233        </div>
234      </div>
235    </div>
236
237    <!-- Modal #4: Object editor -->
238    <div class="modal fade" id="modal_4" tabindex="-1" role="dialog">
239      <div class="modal-dialog" role="document">
240        <div class="modal-content">
241          <div class="modal-header">
242            <h5 class="modal-title">Object annotation</h5>
243            <hr>
244          </div>
245          <div class="modal-body">
246            <div class="control_panel">
247              <p class="lead">Object class <font color="#ff0000">*</font> : </p>
248              <!-- <strong>Class: </strong> -->
249              <select id="option_cat_edit" class="custom-select"></select>
250            </div>
251              <p class="lead">Is this litter?</p>
252              <input type="radio" name="contex_edit" value="litter" id="ctx_litter"> Yes<br>
253              <input type="radio" name="contex_edit" value="notlitter" id="ctx_notlitter"> No<br>
254              <input type="radio" name="contex_edit" value="unknown" id="ctx_unknown"> Don't know<br>
255          </div>
256          <div class="modal-footer">
257            <button type="button" class="btn btn-secondary" onclick="delete_object()">Delete</button>
258            <button type="button" class="btn btn-success" onclick="change_object_class()">Save</button>
259          </div>
260        </div>
261      </div>
262    </div>
263
264    <div>
265      <p id="jobs_counter" >Jobs completed during this session: <code>0</code> </p>
266    </div>
267    </div>
268    <hr>
269        

269<script src="https://code.jquery.com/jquery-1.12.4.min.js"
270        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
271        crossorigin="anonymous">
272        </script>

272
273        

273<script type="text/javascript" src="js/annotator.js"></script>

273
274        

274<script src="js/load-image.all.min.js"></script>

274
275</body>
276
277        </div>
278    </div>
279
280    <footer class="footer">
281    <div class="container">
282
283        <p class="text-center">
284             &copy Pedro Proença 2026 |
285            Powered by <a href="https://github.com/aksakalli/jekyll-doc-theme">Jekyll Doc Theme</a>
286        </p>
287        <!-- <p class="text-muted">Place sticky footer content here.</p> -->
288    </div>
289</footer>
290
291    

291<script>
292  var baseurl = ''
293</script>

293

294<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

294

295<script src="/js/bootstrap.min.js "></script>

295

296<script src="/js/typeahead.bundle.min.js "></script>

296
297

298<script src="/js/main.js "></script>

298
299
300</body>
301
302</html>