Develop a front-end page for labeling bounding boxes

[yenchiah]

Keep the same structure as the currently way of labeling videos. We need another page to label 16 images. On top of each image, we need to draw a bounding box. You can assume that the images are square. Below are the suggested steps. Please feel free to deviate from the steps based on your judgement.

• Create a new labeling HTML page "bbox.html", using label.html as a template.
• Create a new JavaScript file "bbox.js" to write necessary functions to support bounding box labeling in the "bbox.html" page. Use label.js as a template.
• Create a new file "BboxLabelingTool.js" using VideoLabelingTool.js as the template. This file contains code for handling communications between the front-end and back-end (e.g., getting batches from the back-end and sending labels to the back-end)

Avoid duplicating functions. Try reusing existing functions if possible.

You can assume that the batch (using 4 images as an example) returned from the server will have the format below. Please create some fake bounding boxes and images for testing. Keep in mind that the bounding box location and size is based on the original image size (NOT the size of the image container on the HTML). You need to compute the correct location and size of the bounding box on the image container based on the "bbox" data returned from the server.

{
    "data": [
        {
            "file_name": "d4Xd-8ZI3wY-0",
            "id": 635,
            "url_part": "d4Xd-8ZI3wY",
            "url_root": "https://ijmondcam.multix.io/videos/",
            "bbox": {"left": 10, "top": 100, "width": 20, "height": 50, "image_width", 400, "image_height": 400}}
        },
        {
            "file_name": "0qp8J6qREUE-4",
            "id": 716,
            "url_part": "0qp8J6qREUE",
            "url_root": "https://ijmondcam.multix.io/videos/",
            "bbox": {"left": 10, "top": 100, "width": 20, "height": 50, "image_width", 400, "image_height": 400}}
        },
        {
            "file_name": "yp8tlmwD0OI-0",
            "id": 499,
            "url_part": "yp8tlmwD0OI",
            "url_root": "https://ijmondcam.multix.io/videos/",
            "bbox": {"left": 10, "top": 100, "width": 20, "height": 50, "image_width", 400, "image_height": 400}}
        },
        {
            "file_name": "klhIKvkwk24-4",
            "id": 791,
            "url_part": "klhIKvkwk24",
            "url_root": "https://ijmondcam.multix.io/videos/",
            "bbox": {"left": 10, "top": 100, "width": 20, "height": 50, "image_width", 400, "image_height": 400}}
        }
    ],
    "video_token": "SOME_TOKEN"
}

After labeling, we need to send the labels back to the back-end using the following format (using 4 images as an example). Label 0 means the bounding box has no smoke, and label 1 means the bounding box contains smoke.

{
    "video_token": "SOME_TOKEN",
    "data":[
            {"bbox_id": 635, "label": 0},
            {"bbox_id": 716, "label": 1},
            {"bbox_id": 499, "label": 0},
            {"bbox_id": 791, "label": 1}
        ]
}