DESCRIPTION

We procure retail store shelf photos using our own mobile apps or using a thirdparty provider.

Every photo captured is assigned a unique id (imageUUID) and processed using CV algorithms. An analysis output is generated in JSON or TXT format (For this assigment we will be working with TXT format).

Every product detected (called as a "facing" and visually shown as a "bounding box" on the photo) has the following major properties

UPC = Unique product ID for the product detected on shelf.
x = X coordinate for the product bounding box (Top - Left)
y = Y coordinate for the product bounding box (Top - Left)
width = Width of the product bounding box
height = Height of the product bounding box
productShortName = Short name of the product
brandName = Product brand name
shelfLevel = Level in which the product sits in the shelf (TOP/MIDDLE/BOTTOM)

Sample Images and their corrosponding TXT files

1. Please find the sample images and detections txt files in this zip file
2. The above zip contains 2 folders images(containing images) and detections (containing detections .txt files)

You need to develop a web page and a small backend

---

Webpage will be having 2 pages:

1. A image upload page : where you will simulate the photo capture process using a input form to upload image and its detection output txt file.
2. A gallary page : where you need to show all previous uploaded images in a gallary view and images can be viewed in expanded view (Modal or Overlay).

   In the expanded view the photo can be displayed with bounding boxes drawn on top of the photo for each detection (facing) of a product and a few metrics generated from the shelf analysis data also need to be shown.

The backened would consist of 3 APIs

1. A API to recieve an image and detections txt file from Image upload page and save it to local disk on server
2. A API to return a list of images that were captured earlier.
3. A API to return the result of any given image for the expanded view visualization.

FUNCTIONAL REQUIREMENTS

Group 1 (Image capture)

1. User should be able to upload a photo and its detections file from their device
2. Server should store the photo and detections file on the disk and return the UI with success status if everything goes well.
3. In case of an error the server should response with error status and same should be reflected in UI

Group 2 (Image gallery)

1. User should be able to see all previous captured images
2. User should be able to sort images by date (i.e Latest First or Oldest First)
3. User should be able to click on an image and view it in expanded mode and see it's image result in the popup.

Group 3 (Image result - Image expanded view)

1. Show products detected in a table with columns: UPC, Product Short Name, No of Facings, Brand Name, Shelf Level. Please note that "number of facings" is the total number of occurences for a particular UPC in this photo.
2. User should be able to sort on all columns.
3. User should be able to filter on UPC, Product Short Name, Brand Name & Shelf Level columns.

Group 4 (Image result - Image expanded view)

1. Show the shelf image next to the table.

2. For all "facings", draw a bounding box (blue color) on the image by using the x, y, width and height values in shelf analysis JSON.

3. On hover on a particular facing, the corresponding "product short name" should be displayed as tool tip text.

4. On click of a particular product in the table, all bounding boxes corresponding to this product should get highlighted in yellow color.

5. If a filter is applied, bounding boxes drawn on the image should also get refreshed based on the filter condition. Please see a sample image with bounding boxes (blue colored) and hightlighted product (yellow colored) below:

   

Group 5 (Image result - Image expanded view)

1. Show a "brand share doughnut chart" for "top 5 brands".
2. To compute the brand share, use the following logic : "For a brand, count number of product facings belonging to that brand (across UPCs) divided by total product facings in image."
3. After top 5 brands having largest share are selected, group all other brands to a single generic group called "Other Brands".
4. On hovering on a brand in the chart, show the percentage and "facing count".
5. 

Group 6 (Image result - Image expanded view)

1. Show a drop down combobox with "distinct brands" available in shelf analysis JSON.
2. For the selected brand in the dropdown, show a "horizontal bar graph" for shelf levels.
3. This bar graph will always have 3 bars (TOP, MIDDLE, BOTTOM)
4. You need to find the percentage of brand facings belonging to each 3 levels, and plot the graph accordingly. For e.g. 50% facings of a selected brand belongs to TOP level, 25% in MIDDLE and 25% in BOTTOM. Logic: For a selected brand, (count number of facings with shelfLevel=TOP) / (total number of facings for the selected brand)