Image comparison slider component for Streamlit

It gives an error when I upload a photo and run it.

Error Mesage:

File "/home/user/.local/lib/python3.8/site-packages/streamlit/script_runner.py", line 354, in _run_script
    exec(code, module.__dict__)
File "/home/user/app/app.py", line 208, in <module>
    output_1, output_2 = sahi_mmdet_inference(
File "/home/user/app/utils.py", line 24, in sahi_mmdet_inference
    prediction_result_1 = sahi.predict.get_prediction(
File "/home/user/.local/lib/python3.8/site-packages/sahi/predict.py", line 80, in get_prediction
    detection_model.perform_inference(np.ascontiguousarray(image_as_pil), image_size=image_size)
File "/home/user/.local/lib/python3.8/site-packages/sahi/model.py", line 235, in perform_inference
    prediction_result = inference_detector(self.model, image)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/apis/inference.py", line 129, in inference_detector
    data = test_pipeline(data)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/datasets/pipelines/compose.py", line 41, in __call__
    data = t(data)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/datasets/pipelines/test_time_aug.py", line 107, in __call__
    data = self.transforms(_results)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/datasets/pipelines/compose.py", line 41, in __call__
    data = t(data)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/datasets/pipelines/transforms.py", line 656, in __call__
    self._pad_img(results)
File "/home/user/.local/lib/python3.8/site-packages/mmdet/datasets/pipelines/transforms.py", line 622, in _pad_img
    padded_img = mmcv.impad(
File "/home/user/.local/lib/python3.8/site-packages/mmcv/image/geometric.py", line 486, in impad
    assert len(pad_val) == img.shape[-1]

I have removed the margin from the body element with an extra style tag.

It might be worth noting that the default width (if the container size is not set to max) is 704 pixels. I also changed the default width to this.

This allows the component to render nicely in the container in which it is created. :)

This is a nice improvement, I suggest an addition in the comparison to my repo is to mention that there are additional dependencies in this version via sahi

Hi there,

Excellent Streamlit component, thanks for making it available!

I wanted to ask if there is a way of parsing directly figures from plot onto it, instead of using saved image files?

Example usage: Having fig1, fig2 created in matplotlib within Streamlit app and then using fig1 and fig2 directly in streamlit-image-comparison?

Cheers, Robert

Hey all, what a great visualization tool!

I might have a suggestoin that would make it even nicer to use.

The main thing that would improve the usability a lot would be 'automatic scaling'. Even with the use of different screen sizes, the image-comparison result will always have a fixed size (pixel based) If you're only working on one device, you can tailor it for this. Unfortunately this won't be the case for many uses though. Therefore I believe that it would be beneficial to make the size scalable, just as all 'default' streamlit plotting options, like st.image. At this moment, some funny things can happen when using columns, or calling other streamlit objects after calling image_comparison().

As a simplified example of what I mean, I added a screenshot of how my app looks, after I've called the following code:

# set columns
cols = st.columns(2)

# define which image you want to see
image_sel = cols[0].selectbox('Select the image you want to see.', image_name_list)

# next I want to see this image using image_comparison
image_comparison(image_1, image_2)

# beneath the image I want to call an expander to modify some settings of this image
modifier = cols[0].form('Modify this image')
with modifier:
    threshold = st.slider(f"Select a new threshold. The default threshold = 19.", 1, 100, 19, 1)
    if st.form_submit_button('Re-analyze image.'):
        image_dict = analyze_image(image_dict) # image_dict contains all metadata and images for this selected image, and is updated by using the different threshold

cols[1].plotly_chart(figure)

As you can see, the order of the calls does not correspond to the location of the image_comparison result.

In the end, I would imagine calling image_comparison like: st.image_comparison, or col1.image_comparison

I don't know how much work this is though. Let me know what you think, and again, thank you for the nice tool!

Cheer, Dirk