This is a tool to annotate images with boxes and category labels. The utility of this tool is that you don't need to run a server, you can create the annotations on your local machine. Once you have finished annotating the images, you can download the annotations and use them to train or evaluate a machine learning system.

1. This tool requires the Google Chrome Browser.
2. Image files should be jpegs or pngs.

1. Annotate a bird photo and a spectrogram image by clicking the Browse button above and choosing the annotation_task folder 📁, found in the same directory as this index.html file.
   • Note, you should select the annotation_task folder 📁, not an individual file.

1. Create a folder in the same directory as the index.html file, call it annotation_task.
   • index.html is this file, the one you are currently reading.
   • The name annotation_task is not required, call the directory whatever you'd like. It just needs to be in the same directory as index.html.
2. Inside the annotation_task folder, create a JSON file called categories.json
   • This file should contain the list of categories you would like to annotate, having the following format:

     
                                             [{
                                                 "id" : 1,
                                                 "name" : "Bird",
                                                 "supercategory" : "Animal"
                                             },
                                             {
                                                 "id" : 2,
                                                 "name" : "Man",
                                                 "supercategory" : "Person"
                                             },
                                             {
                                                 "id" : 3,
                                                 "name" : "Bicycle",
                                                 "supercategory" : "Machine"
                                             },...]
                                         

3. Add images to the annotation_task folder in one of two ways:
   1. Simply inlcude jpeg or png image files. The image name (without the file extension) will be used as the image id. You can place these in their own directory (e.g. annotation_task/images)
   2. Create a JSON file called images.json, containing a list of images to annotate, having the following format:

      
                                              [{
                                                  "id" : "2044008b9b424bf98d1635251a0802c8",
                                                  "url" : "https://s3.amazonaws.com/vibe-content/photos/2044008b9b424bf98d1635251a0802c8.jpg"
                                              },...]
                                          

   3. You cannot have both image files and a images.json. It must be one or the other.
4. OPTIONAL: If you have an existing annotation file for the images you will annotate, then you can include it in the annotation_task folder. It must be named annotations.json.
5. OPTIONAL: Configure the tool using the options found at the top of the page.
6. Start annotating the images by clicking the Browse button above and choosing the annotation_task folder 📁.
   • Note, you should select the annotation_task folder 📁, not an individual file.
   • The browser will ask your permission to "upload" the files. Click the Upload button.
   • If the images don't render, then make sure that the annotation_task folder is in the same directory as index.html.
7. Once you have finished annotating, you can scroll to the bottom of the page and press the Export Annotations button to download an annotations.json file.
   • You can copy and paste the annotations.json file from your downloads folder to the annotation_task folder in order to review or edit your annotations at a later time.

• After drawing one box on an image, you can right click to duplicate that box at the current cursor location. This is convenient when annotating several instances of the same category.