add sliding image comparator

app.py

@@ -1,11 +1,12 @@
 import streamlit as st
 import sahi.utils.mmdet
 import sahi.model
-import sahi.predict
 from PIL import Image
-import numpy
 import random
-
+from utils import imagecompare
+from utils import sahi_mmdet_inference
+import pathlib
+import os
 
 MMDET_YOLACT_MODEL_URL = "https://download.openmmlab.com/mmdetection/v2.0/yolact/yolact_r50_1x8_coco/yolact_r50_1x8_coco_20200908-f38d58df.pth"
 MMDET_YOLOX_MODEL_URL = "https://download.openmmlab.com/mmdetection/v2.0/yolox/yolox_tiny_8x8_300e_coco/yolox_tiny_8x8_300e_coco_20210806_234250-4ff3b67e.pth"
@@ -71,79 +72,39 @@ def get_mmdet_model(model_name: str):
     return detection_model
 
 
-def sahi_mmdet_inference(
-    image,
-    detection_model,
-    slice_height=512,
-    slice_width=512,
-    overlap_height_ratio=0.2,
-    overlap_width_ratio=0.2,
-    image_size=640,
-    postprocess_type="UNIONMERGE",
-    postprocess_match_metric="IOS",
-    postprocess_match_threshold=0.5,
-    postprocess_class_agnostic=False,
-):
-
-    # standard inference
-    prediction_result_1 = sahi.predict.get_prediction(
-        image=image, detection_model=detection_model, image_size=image_size
-    )
-    visual_result_1 = sahi.utils.cv.visualize_object_predictions(
-        image=numpy.array(image),
-        object_prediction_list=prediction_result_1.object_prediction_list,
-    )
-    output_1 = Image.fromarray(visual_result_1["image"])
-
-    # sliced inference
-    prediction_result_2 = sahi.predict.get_sliced_prediction(
-        image=image,
-        detection_model=detection_model,
-        image_size=image_size,
-        slice_height=slice_height,
-        slice_width=slice_width,
-        overlap_height_ratio=overlap_height_ratio,
-        overlap_width_ratio=overlap_width_ratio,
-        postprocess_type=postprocess_type,
-        postprocess_match_metric=postprocess_match_metric,
-        postprocess_match_threshold=postprocess_match_threshold,
-        postprocess_class_agnostic=postprocess_class_agnostic,
-    )
-    visual_result_2 = sahi.utils.cv.visualize_object_predictions(
-        image=numpy.array(image),
-        object_prediction_list=prediction_result_2.object_prediction_list,
-    )
-
-    output_2 = Image.fromarray(visual_result_2["image"])
-
-    return output_1, output_2
-
-
 st.set_page_config(
-    page_title="Small Object Detection with SAHI + MMDetection",
-    page_icon="",
+    page_title="Small Object Detection with SAHI + YOLOX",
+    page_icon="🚀",
     layout="centered",
     initial_sidebar_state="auto",
 )
 
 st.markdown(
-    """<h2 style='text-align: center'>
+    """
+    <h2 style='text-align: center'>
     Small Object Detection <br />
-    with SAHI + MMDetection
-    </h2>""",
+    with SAHI + YOLOX
+    </h2>
+    """,
     unsafe_allow_html=True,
 )
 st.markdown(
-    "<p style='text-align: center'>SAHI is a lightweight vision library for performing large scale object detection and instance segmentation.. <a href='https://github.com/obss/sahi'>SAHI Github</a> | <a href='https://medium.com/codable/sahi-a-vision-library-for-performing-sliced-inference-on-large-images-small-objects-c8b086af3b80'>SAHI Blog</a> | <a href='https://huggingface.co/spaces/fcakyon/sahi-yolov5'>SAHI+YOLOv5 Demo</a> </p>",
+    """
+    <p style='text-align: center'>
+    <a href='https://github.com/obss/sahi'>SAHI Github</a> | <a href='https://github.com/open-mmlab/mmdetection/tree/master/configs/yolox'>YOLOX Github</a> | <a href='https://huggingface.co/spaces/fcakyon/sahi-yolov5'>SAHI+YOLOv5 Demo</a>
+    <br />
+    Follow me on <a href='https://twitter.com/fcakyon'>twitter</a>, <a href='https://www.linkedin.com/in/fcakyon/'>linkedin</a> and <a href='https://fcakyon.medium.com/'>medium</a> for more..
+    </p>
+    """,
     unsafe_allow_html=True,
 )
 
-st.markdown(
-    "<h3 style='text-align: center'> Parameters: </h1>",
-    unsafe_allow_html=True,
-)
+st.write("##")
+
 col1, col2, col3 = st.columns([6, 1, 6])
 with col1:
+    st.markdown(f"##### Set input image:")
+
     image_file = st.file_uploader(
         "Upload an image to test:", type=["jpg", "jpeg", "png"]
     )
@@ -165,11 +126,13 @@ with col1:
     image = Image.open(slider)
     st.image(image, caption=slider, width=300)
 with col3:
-    model_name = st.selectbox(
-        "Select MMDetection model:", ("faster_rcnn", "yolact", "yolox"), index=2
+    st.markdown(f"##### Set SAHI parameters:")
+
+    model_name = "yolox"
+    slice_size = st.number_input("slice_size", min_value=256, value=512, step=256)
+    overlap_ratio = st.number_input(
+        "overlap_ratio", min_value=0.0, max_value=0.6, value=0.2, step=0.2
     )
-    slice_size = st.number_input("slice_size", 256, value=512, step=256)
-    overlap_ratio = st.number_input("overlap_ratio", 0.0, 0.6, value=0.2, step=0.2)
     postprocess_type = st.selectbox(
         "postprocess_type", options=["NMS", "UNIONMERGE"], index=1
     )
@@ -224,11 +187,6 @@ if "last_spinner_texts" not in st.session_state:
 
 if submit:
     # perform prediction
-    st.markdown(
-        "<h3 style='text-align: center'> Results: </h1>",
-        unsafe_allow_html=True,
-    )
-
     with st.spinner(
         text="Downloading model weight.. "
         + st.session_state["last_spinner_texts"].get()
@@ -257,7 +215,14 @@ if submit:
             postprocess_class_agnostic=postprocess_class_agnostic,
         )
 
-    st.markdown(f"##### Standard {model_name} Prediction:")
-    st.image(output_1, width=700)
-    st.markdown(f"##### Sliced {model_name} Prediction:")
-    st.image(output_2, width=700)
+    st.markdown(f"##### YOLOX Standard vs SAHI Prediction:")
+    imagecompare(
+        output_1,
+        output_2,
+        label1="YOLOX",
+        label2="SAHI+YOLOX",
+        width=700,
+        starting_position=50,
+        show_labels=True,
+        make_responsive=True,
+    )

utils.py

@@ -0,0 +1,148 @@
+import streamlit.components.v1 as components
+import streamlit as st
+import numpy
+import sahi.predict
+import sahi.utils
+from PIL import Image
+import pathlib
+import os
+import uuid
+
+STREAMLIT_STATIC_PATH = pathlib.Path(st.__path__[0]) / "static"
+
+
+def sahi_mmdet_inference(
+    image,
+    detection_model,
+    slice_height=512,
+    slice_width=512,
+    overlap_height_ratio=0.2,
+    overlap_width_ratio=0.2,
+    image_size=640,
+    postprocess_type="UNIONMERGE",
+    postprocess_match_metric="IOS",
+    postprocess_match_threshold=0.5,
+    postprocess_class_agnostic=False,
+):
+
+    # standard inference
+    prediction_result_1 = sahi.predict.get_prediction(
+        image=image, detection_model=detection_model, image_size=image_size
+    )
+    visual_result_1 = sahi.utils.cv.visualize_object_predictions(
+        image=numpy.array(image),
+        object_prediction_list=prediction_result_1.object_prediction_list,
+    )
+    output_1 = Image.fromarray(visual_result_1["image"])
+
+    # sliced inference
+    prediction_result_2 = sahi.predict.get_sliced_prediction(
+        image=image,
+        detection_model=detection_model,
+        image_size=image_size,
+        slice_height=slice_height,
+        slice_width=slice_width,
+        overlap_height_ratio=overlap_height_ratio,
+        overlap_width_ratio=overlap_width_ratio,
+        postprocess_type=postprocess_type,
+        postprocess_match_metric=postprocess_match_metric,
+        postprocess_match_threshold=postprocess_match_threshold,
+        postprocess_class_agnostic=postprocess_class_agnostic,
+    )
+    visual_result_2 = sahi.utils.cv.visualize_object_predictions(
+        image=numpy.array(image),
+        object_prediction_list=prediction_result_2.object_prediction_list,
+    )
+
+    output_2 = Image.fromarray(visual_result_2["image"])
+
+    return output_1, output_2
+
+
+def imagecompare(
+    img1: str,
+    img2: str,
+    label1: str = "1",
+    label2: str = "2",
+    width: int = 700,
+    show_labels: bool = True,
+    starting_position: int = 50,
+    make_responsive: bool = True,
+):
+    """Create a new juxtapose component.
+    Parameters
+    ----------
+    img1: str, PosixPath, PIL.Image or URL
+        Input image to compare
+    img2: str, PosixPath, PIL.Image or URL
+        Input image to compare
+    label1: str or None
+        Label for image 1
+    label2: str or None
+        Label for image 2
+    width: int or None
+        Width of the component in px
+    show_labels: bool or None
+        Show given labels on images
+    starting_position: int or None
+        Starting position of the slider as percent (0-100)
+    make_responsive: bool or None
+        Enable responsive mode
+    Returns
+    -------
+    static_component: Boolean
+        Returns a static component with a timeline
+    """
+    # prepare images
+    for file_ in os.listdir(STREAMLIT_STATIC_PATH):
+        if file_.endswith(".png") and "favicon" not in file_:
+            os.remove(str(STREAMLIT_STATIC_PATH / file_))
+
+    image_1_name = str(uuid.uuid4()) + ".png"
+    image_1_path = STREAMLIT_STATIC_PATH / image_1_name
+    image_1_path = str(image_1_path.resolve())
+    sahi.utils.cv.read_image_as_pil(img1).save(image_1_path)
+
+    image_2_name = str(uuid.uuid4()) + ".png"
+    image_2_path = STREAMLIT_STATIC_PATH / image_2_name
+    image_2_path = str(image_2_path.resolve())
+    sahi.utils.cv.read_image_as_pil(img2).save(image_2_path)
+
+    img_width, img_height = img1.size
+    h_to_w = img_height / img_width
+    height = width * h_to_w - 20
+
+    # load css + js
+    cdn_path = "https://cdn.knightlab.com/libs/juxtapose/latest"
+    css_block = f'<link rel="stylesheet" href="{cdn_path}/css/juxtapose.css">'
+    js_block = f'<script src="{cdn_path}/js/juxtapose.min.js"></script>'
+
+    # write html block
+    htmlcode = f"""
+        {css_block}
+        {js_block}
+        <div id="foo"style="height: '%100'; width: {width or '%100'};"></div>
+        <script>
+        slider = new juxtapose.JXSlider('#foo',
+            [
+                {{
+                    src: '{image_1_name}',
+                    label: '{label1}',
+                }},
+                {{
+                    src: '{image_2_name}',
+                    label: '{label2}',
+                }}
+            ],
+            {{
+                animate: true,
+                showLabels: {'true' if show_labels else 'false'},
+                showCredits: true,
+                startingPosition: "{starting_position}%",
+                makeResponsive: {'true' if make_responsive else 'false'},
+            }});
+        </script>
+        """
+    static_component = components.html(htmlcode, height=height, width=width)
+
+    return static_component