02. Application Walkthrough

For this walkthrough, we will be using the image above.

Uploading Images

http://localhost:3000

Here, we can upload an image file either through drag and drop, or by clicking the button.

Objectives

Main

• ✅ Accept an image input

Error Handling

We have also provided error handling for the following: - File size. We restricted the file size to be less than 1 MB. - File type. We only accept image files. Namely `.jpg`, `.jpeg` and `.png`.

Processing Images

This occurs upon submission of a valid image file. Once done, the user is redirected to view their annotated image. If the image already exists in the database, image is not processed and the user is immediately redirected.

Objectives

Main

• ✅ Transfer the image to a backend server.
• ✅ Run an off-the-shelf YOLO model to detect objects.
• ✅ Store the bounding boxes for the image in a database with the image identifier being the MD5 hash for the image.

Bonus

• ✅ Auto tag objects detected in the images in the backend.

Viewing Images

http://localhost:3000/output/$MD5_HASH_IDENTIFIER

User is redirected to this page after the image has been successfully processed. This page can also be used to view other images in the database if its $MD5_HASH_IDENTIFIER is known.

Objectives

Main

• ✅ Return the object bounding box coordinates in the API to the frontend.
• ✅ Display the image with the bounding boxes overlaid.

Bonus

• ✅ Show tags associated with the image in the frontend.

Adding & Editing Boxes

In the same page, the user is also able to edit any existing bounding boxes as well as add new ones. Pressing the submit button will update these changes on to the database.

Objectives

Bonus

• ✅ Allow the user to add new bounding boxes in the frontend.
• ✅ Update DB record for this image with the new bounding boxes.