implemented counting ui

eggcount/gradient.py

@@ -140,7 +140,8 @@ def contour_thresh(
     img: np.ndarray,
     color_thresh: int = 75,
     avg_area: float = 800,
-    kernal_size: tuple[int, int] = (3, 3)
+    kernal_size: tuple[int, int] = (3, 3),
+    max_eggs: Optional[int] = None
 ) -> Dict:
     visualization_img = img.copy()
     img_gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
@@ -158,6 +159,11 @@ def contour_thresh(
         area = cv2.contourArea(cnt)
 
         if area > avg_area / 2:
+            curr_num = round(area / avg_area)
+
+            if max_eggs and (curr_num > max_eggs):
+                continue
+
             cv2.drawContours(visualization_img, [cnt], -1, (255, 0, 0), 2)
             curr_num = round(area / avg_area)
             num += curr_num

eggcount/pages/home.py

@@ -1,9 +1,22 @@
 from dash import html, dcc, callback, Input, Output, State
 from dash.exceptions import PreventUpdate
-from typing import Tuple, Any, Dict
+from typing import Tuple, Any, Dict, Optional
+from functools import partial
 from io import BytesIO
 from PIL import Image
 from pillow_heif import register_heif_opener
+from eggcount.gradient import (
+    component_thesh,
+    component_filter_thresh,
+    contour_thresh
+)
+from eggcount.ui.ui_utils import (
+    get_cc_ui,
+    get_cc_filter_ui,
+    get_contour_ui,
+    display_slider_value,
+    get_results_container
+)
 
 import plotly.express as px
 import base64
@@ -16,6 +29,14 @@ dash.register_page(__name__, path = "/")
 
 UPLOAD_HEIGHT = "25vh"
 
+COUNT_FUNCS = {
+    "Gradient CC": get_cc_ui,
+    "Gradient CC w/ filter": get_cc_filter_ui,
+    "Contour": get_contour_ui
+}
+
+DEFAULT_STRATEGY = "Gradient CC"
+
 def get_initial_upload_container() -> dbc.Container:
     return dcc.Upload(
         id = "upload-data",
@@ -88,6 +109,25 @@ layout = dbc.Container(
             ],
             is_open = False,
             id = "upload-modal"
+        ),
+        html.H4("Select Counting Strategy", className = "text-start mt-3"),
+        dcc.Dropdown(
+            options = [name for name in COUNT_FUNCS],
+            value = DEFAULT_STRATEGY,
+            id = "strat-picker",
+            className = "my-2 w-100"
+        ),
+        dbc.Container(
+            id = "count-ui-container",
+            className = "mt-1 mx-0 px-0" 
+        ),
+        dcc.Loading(
+            children = dbc.Container(
+                id = "count-res-container",
+                className = "mt-4 mx-0 px-0" 
+            ),
+            type = "default",
+            color = "black"
         )
     ],
     class_name = "text-center mt-3"
@@ -129,3 +169,158 @@ def on_image_upload(
             str(e),
             True
         )
+
+@callback(
+    Output("count-ui-container", "children"),
+    Input("strat-picker", "value")
+)
+def on_select_strat(
+    curr_strat: str
+) -> Optional[dbc.Container]:
+    if curr_strat not in COUNT_FUNCS:
+        return None
+    
+    ui_fun = COUNT_FUNCS[curr_strat]
+    return ui_fun()
+
+@callback(
+    Output("count-res-container", "children", allow_duplicate = True),
+    Input("count-cc", "n_clicks"),
+    State("select-cc-color-thresh", "value"),
+    State("select-cc-avg-area", "value"),
+    State("select-cc-max-eggs", "value"),
+    State("img-data-store", "data"),
+    allow_duplicate = True,
+    prevent_initial_call = True
+)
+def on_count_cc(
+    n_clicks: int,
+    color_thresh: int,
+    avg_area: int,
+    max_eggs: Optional[int],
+    image_store: Dict,
+) -> dbc.Container:
+    if not n_clicks:
+        return None
+
+    decoded_bytes = base64.b64decode(image_store["img"])
+    image_data = BytesIO(decoded_bytes)
+    pil_img = Image.open(image_data)
+    img = np.array(pil_img)
+
+    color_thresh = int(color_thresh)
+    avg_area = int(avg_area)
+
+    if max_eggs:
+        max_eggs = int(max_eggs)
+
+    results = component_thesh(
+        img,
+        color_thresh = color_thresh,
+        avg_area = avg_area,
+        max_eggs = max_eggs
+    )
+
+    return get_results_container(results)
+
+@callback(
+    Output("count-res-container", "children", allow_duplicate = True),
+    Input("count-cc-filter", "n_clicks"),
+    State("select-cc-filter-color-thresh", "value"),
+    State("select-cc-filter-avg-area", "value"),
+    State("select-cc-filter-max-eggs", "value"),
+    State("select-cc-kernel-width", "value"),
+    State("select-cc-kernel-height", "value"),
+    State("img-data-store", "data"),
+    prevent_initial_call = True
+)
+def on_count_cc(
+    n_clicks: int,
+    color_thresh: int,
+    avg_area: int,
+    max_eggs: Optional[int],
+    kernel_width: int,
+    kernel_height: int,
+    image_store: Dict,
+) -> dbc.Container:
+    if not n_clicks:
+        return None
+
+    decoded_bytes = base64.b64decode(image_store["img"])
+    image_data = BytesIO(decoded_bytes)
+    pil_img = Image.open(image_data)
+    img = np.array(pil_img)
+
+    color_thresh = int(color_thresh)
+    avg_area = int(avg_area)
+    kernel_width = int(kernel_width)
+    kernel_height = int(kernel_height)
+
+    if max_eggs:
+        max_eggs = int(max_eggs)
+
+    results = component_filter_thresh(
+        img,
+        color_thresh = color_thresh,
+        avg_area = avg_area,
+        kernal_size = (kernel_width, kernel_height),
+        max_eggs = max_eggs
+    )
+
+    return get_results_container(results)
+
+@callback(
+    Output("count-res-container", "children", allow_duplicate = True),
+    Input("count-contour", "n_clicks"),
+    State("select-contour-color-thresh", "value"),
+    State("select-contour-avg-area", "value"),
+    State("select-contour-max-eggs", "value"),
+    State("select-contour-width", "value"),
+    State("select-contour-height", "value"),
+    State("img-data-store", "data"),
+    prevent_initial_call = True
+)
+def on_count_contour(
+    n_clicks: int,
+    color_thresh: int,
+    avg_area: int,
+    max_eggs: Optional[int],
+    kernel_width: int,
+    kernel_height: int,
+    image_store: Dict,
+) -> dbc.Container:
+    if not n_clicks:
+        return None
+
+    decoded_bytes = base64.b64decode(image_store["img"])
+    image_data = BytesIO(decoded_bytes)
+    pil_img = Image.open(image_data)
+    img = np.array(pil_img)
+
+    color_thresh = int(color_thresh)
+    avg_area = int(avg_area)
+    kernel_width = int(kernel_width)
+    kernel_height = int(kernel_height)
+
+    if max_eggs:
+        max_eggs = int(max_eggs)
+
+    results = contour_thresh(
+        img,
+        color_thresh = color_thresh,
+        avg_area = avg_area,
+        kernal_size = (kernel_width, kernel_height),
+        max_eggs = max_eggs
+    )
+
+    return get_results_container(results)
+    
+callback(
+    Output("display-cc-color-thresh", "children"),
+    Input("select-cc-color-thresh", "value")
+)(partial(display_slider_value, "Color Threshold"))
+
+callback(
+    Output("display-cc-filter-color-thresh", "children"),
+    Input("select-cc-filter-color-thresh", "value")
+)(partial(display_slider_value, "Color Threshold"))

eggcount/ui/ui_utils.py

@@ -1,3 +1,8 @@
+from dash import html, dcc
+from typing import Dict
+
+import plotly.express as px
+import numpy as np
 import dash_bootstrap_components as dbc
 
 NAVBAR_MIN_HEIGHT = "4rem"
@@ -5,6 +10,16 @@ NAVBAR_MIN_HEIGHT = "4rem"
 def get_navbar() -> dbc.Nav:
     return dbc.Nav(
         children = [
+            html.A(
+                dbc.Row(
+                    [
+                        dbc.Col(html.Img(src = "/assets/mosquito-white.png", height = "30px")),
+                    ],
+                    align = "center",
+                    className = "g-0 px-2",
+                ),
+                style = {"textDecoration": "none"},
+            ),
             dbc.NavItem(
                 children = dbc.NavLink(
                     children = "Home",
@@ -27,8 +42,220 @@ def get_navbar() -> dbc.Nav:
                 )
             )
         ],
-        class_name = "bg-dark d-flex flex-row justify-content-start align-items-center",
+        className = "bg-dark d-flex flex-row justify-content-start align-items-center",
         style = {
             "min-height": NAVBAR_MIN_HEIGHT
         }
-    )
+    )
+
+def display_slider_value(name: str, value: int | float) -> str:
+    return f"{name}: {value}"
+
+def get_cc_ui() -> dbc.Container:
+    return dbc.Container(
+        children = [
+            html.H5(
+                children = "Color Threshold (0 - 255)",
+                className = "text-start my-3"
+            ),
+            dcc.Slider(
+                min = 0,
+                max = 255,
+                value = 75,
+                id = "select-cc-color-thresh",
+                className = "my-1"
+            ),
+            html.P(
+                children = display_slider_value("Color Threshold", 75),
+                id = "display-cc-color-thresh"
+            ),
+            html.H5(
+                children = "Average Area",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 800,
+                type = "number",
+                id = "select-cc-avg-area",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Max Eggs (optional)",
+                className = "text-start my-3 mt-3"
+            ),
+            dcc.Input(
+                type = "number",
+                id = "select-cc-max-eggs",
+                className = "w-50"
+            ),
+            dbc.Button(
+                children = "Count",
+                color = "primary",
+                className = "w-25 mt-4",
+                id = "count-cc"
+            )
+        ],
+        className = "p-3 m-0 border border-dark d-flex flex-column justify-content-center align-items-left"
+    )
+
+def get_cc_filter_ui() -> dbc.Container:
+    return dbc.Container(
+        children = [
+            html.H5(
+                children = "Color Threshold (0 - 255)",
+                className = "text-start my-3"
+            ),
+            dcc.Slider(
+                min = 0,
+                max = 255,
+                value = 75,
+                id = "select-cc-filter-color-thresh",
+                className = "my-1"
+            ),
+            html.P(
+                children = display_slider_value("Color Threshold", 75),
+                id = "display-cc-filter-color-thresh"
+            ),
+            html.H5(
+                children = "Average Area",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 800,
+                type = "number",
+                id = "select-cc-filter-avg-area",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Max Eggs (optional)",
+                className = "text-start my-3 mt-3"
+            ),
+            dcc.Input(
+                type = "number",
+                id = "select-cc-filter-max-eggs",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Kernel Width",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 3,
+                type = "number",
+                id = "select-cc-kernel-width",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Kernel Height",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 3,
+                type = "number",
+                id = "select-cc-kernel-height",
+                className = "w-50"
+            ),
+            dbc.Button(
+                children = "Count",
+                color = "primary",
+                className = "w-25 mt-4",
+                id = "count-cc-filter"
+            )
+        ],
+        className = "p-3 m-0 border border-dark d-flex flex-column justify-content-center align-items-left"
+    )
+
+def get_contour_ui() -> dbc.Container:
+    return dbc.Container(
+        children = [
+            html.H5(
+                children = "Color Threshold (0 - 255)",
+                className = "text-start my-3"
+            ),
+            dcc.Slider(
+                min = 0,
+                max = 255,
+                value = 75,
+                id = "select-contour-color-thresh",
+                className = "my-1"
+            ),
+            html.P(
+                children = display_slider_value("Color Threshold", 75),
+                id = "display-contour-color-thresh"
+            ),
+            html.H5(
+                children = "Average Area",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 800,
+                type = "number",
+                id = "select-contour-avg-area",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Max Eggs (optional)",
+                className = "text-start my-3 mt-3"
+            ),
+            dcc.Input(
+                type = "number",
+                id = "select-contour-max-eggs",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Kernel Width",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 3,
+                type = "number",
+                id = "select-contour-width",
+                className = "w-50"
+            ),
+            html.H5(
+                children = "Kernel Height",
+                className = "text-start my-3"
+            ),
+            dcc.Input(
+                value = 3,
+                type = "number",
+                id = "select-contour-height",
+                className = "w-50"
+            ),
+            dbc.Button(
+                children = "Count",
+                color = "primary",
+                className = "w-25 mt-4",
+                id = "count-contour"
+            )
+        ],
+        className = "p-3 m-0 border border-dark d-flex flex-column justify-content-center align-items-left"
+    )
+
+def get_results_container(result: Dict) -> dbc.Container:
+    children = list()
+
+    for stat_name, stat in result["stats"].items():
+        children.append(
+            html.H5(
+                children = f"{stat_name.replace('-', ' ')}: {stat}",
+                className = "text-start w-100"
+            ),
+        )
+
+    children.append(html.Hr(className = "border border-dark"))
+
+    for vis_name, vis_pic in result["vis"].items():
+        children.append(html.H4(vis_name.replace("-", " ")))
+        image_fig = px.imshow(vis_pic)
+        children.append(
+            dcc.Graph(
+                figure = image_fig,
+                className = "w-100"
+            )
+        )
+
+    return dbc.Container(
+        children = children,
+        className = "p-3 m-0 border border-dark d-flex flex-column justify-content-center align-items-center"
+    )