Image comparison slider component for Streamlit

Overview

Streamlit Image Comparison Component

pypi version HuggingFace Spaces

A simple Streamlit Component to compare images with a slider in Streamlit apps using Knightlab's JuxtaposeJS. It accepts images in any format and makes it possible to set all parameters of the JS component via Python. Live demo at Huggingface Spaces

Installation

  • Install via pip:
pip install streamlit
pip install streamlit-image-comparison

Example

# Streamlit Image-Comparison Component Example

import streamlit as st
from streamlit_image_comparison import image_comparison

# set page config
st.set_page_config(page_title="Image-Comparison Example", layout="centered")

# render image-comparison
image_comparison(
    img1="image1.jpg",
    img2="image2.jpg",
)

Supported Image Formats

# image path
image = "image.jpg"

# image url
image = "https://some-url.com/image.jpg"

# pil image
from PIL import Image
image = Image.open("image.jpg")

# opencv image
import cv2
image = cv2.cvtColor(cv2.imread("image.jpg"), cv2.COLOR_BGR2RGB)

# render image-comparison
image_comparison(
    img1=image,
    img2=image,
)

Customization

image_comparison(
    img1="image1.jpg",
    img2="image2.jpg",
    label1="text1",
    label2="text1",
    width=700,
    starting_position=50,
    show_labels=True,
    make_responsive=True,
    in_memory=True,
)

Improvements

What is the difference between this repo and robmarkcole's?

  • This is a pypi installable package
  • This does not require the images to be saved under site-packages/streamlit/static/
  • This accepts any type of image as input (doesn't have to be present in local)
  • This can utilize all parameters of the JS component
  • This has an additional dependency sahi

References

Comments
  • predict is not working

    predict is not working

    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]
    
    opened by kadirnar 4
  • Removed margin from body element

    Removed margin from body element

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

    image

    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. :)

    opened by darkeclipz 1
  • Suggestion

    Suggestion

    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

    opened by robmarkcole 1
  • Using plots/images directly within Streamlit app without saving them

    Using plots/images directly within Streamlit app without saving them

    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

    help wanted 
    opened by rdzudzar 3
  • Inherit scale and location properties

    Inherit scale and location properties

    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. Screenshot from 2022-04-14 16-44-52

    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

    help wanted 
    opened by DirkRemmers 1
Releases(0.0.3)
  • 0.0.3(Dec 12, 2022)

    What's Changed

    • Removed margin from body element by @darkeclipz in https://github.com/fcakyon/streamlit-image-comparison/pull/12

    New Contributors

    • @darkeclipz made their first contribution in https://github.com/fcakyon/streamlit-image-comparison/pull/12

    Full Changelog: https://github.com/fcakyon/streamlit-image-comparison/compare/0.0.2...0.0.3

    Source code(tar.gz)
    Source code(zip)
  • 0.0.2(Dec 1, 2021)

    What's Changed

    • update sahi version by @fcakyon in https://github.com/fcakyon/streamlit-image-comparison/pull/4
    • update readme by @fcakyon in https://github.com/fcakyon/streamlit-image-comparison/pull/3

    Full Changelog: https://github.com/fcakyon/streamlit-image-comparison/compare/0.0.1...0.0.2

    Source code(tar.gz)
    Source code(zip)
  • 0.0.1(Nov 25, 2021)

    initial release (v0.0.1)

    A simple Streamlit Component to compare images with a slider in Streamlit apps using Knightlab's JuxtaposeJS. It accepts images in any format and makes it possible to set all parameters of the JS component via Python. Try it on ...

    Installation

    • Install via pip:
    pip install streamlit
    pip install streamlit-image-comparison
    

    Example

    # Streamlit Image-Comparison Component Example
    
    import streamlit as st
    from streamlit_image_comparison import image_comparison
    
    # set page config
    st.set_page_config(page_title="Image-Comparison Example", layout="centered")
    
    # render image-comparison
    image_comparison(
        img1="image1.jpg",
        img2="image2.jpg",
    )
    

    Supported Image Formats

    
    # image path
    image = "image.jpg"
    
    # image url
    image = "https://some-url.com/image.jpg"
    
    # pil image
    from PIL import Image
    image = Image.open("image.jpg")
    
    # opencv image
    import cv2
    image = cv2.cvtColor(cv2.imread("image.jpg"), cv2.COLOR_BGR2RGB)
    
    # render image-comparison
    image_comparison(
        img1=image,
        img2=image,
    )
    

    Customization

    image_comparison(
        img1="image1.jpg",
        img2="image2.jpg",
        label1="text1",
        label2="text1",
        width=700,
        starting_position=50,
        show_labels=True,
        make_responsive=True,
        in_memory=True,
    )
    
    Source code(tar.gz)
    Source code(zip)
Owner
fatih
senior machine learning engineer    phd candidate             metu & bilkent alum.
fatih
Quickly 'anonymize' all people in an image. This script will put a black bar over all eye-pairs in an image

Face-Detacher Quickly 'anonymize' all people in an image. This script will put a black bar over all eye-pairs in an image This is a small python scrip

Don Cato 1 Oct 29, 2021
Hacking github graph with a easy python script

Hacking-Github-Graph Hacking github graph with a easy python script Requirements git latest version installed. A text editor (eg: vs code, sublime tex

SENPAI LEGEND 1 Nov 01, 2021
Seaborn-image is a Python image visualization library based on matplotlib and provides a high-level API to draw attractive and informative images quickly and effectively.

seaborn-image: image data visualization Description Seaborn-image is a Python image visualization library based on matplotlib and provides a high-leve

48 Jan 05, 2023
A small Python module for BMP image processing.

micropython-microbmp A small Python module for BMP image processing. It supports BMP image of 1/2/4/8/24-bit colour depth. Loading supports compressio

Quan Lin 4 Nov 02, 2022
API to help generating QR-code for ZATCA's e-invoice known as Fatoora with any programming language

You can try it @ api-fatoora api-fatoora API to help generating QR-code for ZATCA's e-invoice known as Fatoora with any programming language Disclaime

نافع الهلالي 12 Oct 05, 2022
Semi-hash-based Image Generator

pixel-planet Semi-hash-based Image Generator Utilizable for NFTs Generation Process Input is salted and hashed Colors (background, planet, stars) are

Bill Ni 3 Sep 01, 2022
🛹 Turn an SVG into an STL for stencil creation purposes

svg2stl This repository provides a script which takes as input an SVG such as this one: It outputs an STL file like this one: You can also see an inte

Max Halford 3 Dec 29, 2021
Pyconvert is a python script that you can use to convert image files to another image format! (eg. PNG to ICO)

Pyconvert is a python script that you can use to convert image files to another image format! (eg. PNG to ICO)

1 Jan 16, 2022
A Blender add-on to create interesting meshes using symmetry

Procedural Symmetries This Blender add-on automates the process of iteratively applying a set of reflection planes to a base mesh. The result will con

1 Dec 29, 2021
The aim is to extract timeseries water level 2D information for any designed boundaries within the EasyGSH model domain

bct_file_generator_for_EasyGSH The aim is to extract timeseries water level 2D information for any designed boundaries within the EasyGSH model domain

Clayton Soares 1 Jul 08, 2022
Convert any binary data to a PNG image file and vice versa.

What is PngBin? The name PngBin comes from an image format file extension PNG (Portable Network Graphics) and the word Binary. An image produced by Pn

Nathan Young 87 Dec 22, 2022
Xmas-Tree-GIF-Tool - Convert any given animated gif file into an animation in GIFT CSV format

This repo is made to participate in Matt Parker's XmasTree 2021 event. Convert a

Aven Zitzelberger 2 Dec 30, 2021
A quick and dirty QT Statusbar implementation for grabbing GIFs from Tenor, since there is no offical or unofficial one I found. This was intended for use under Linux, however it was also functional enough on MacOS.

Statusbar-TenorGIF App for Linux A quick and dirty QT Statusbar implementation for grabbing GIFs from Tenor, since there is no offical one and I didnt

Luigi DaVinci 1 Nov 01, 2021
FrostedGlass is a translucent frosted glass effect widget, that creates a context with the background behind it.

FrostedGlass FrostedGlass is a translucent frosted glass effect widget, that creates a context with the background behind it. The effect is drawn on t

Kivy Garden 24 Dec 10, 2022
QR code python application which can read(decode) and generate(encode) QR codes.

QR Code Application This is a basic QR Code application. Using this application you can generate QR code for you text/links. Using this application yo

Atharva Parkhe 1 Aug 09, 2022
Archive of the image generator stuff from my API

alex_api_archive Archive of the image generator stuff from my API FAQ Q: Why? A: Because I am removing these components from the API Q: How do I run i

AlexFlipnote 26 Nov 17, 2022
A simple image-level annotation tool supporting multi-channel images for napari.

napari-labelimg4classification A simple image-level annotation tool supporting multi-channel images for napari. This napari plugin was generated with

4 May 16, 2022
OctoPrint is the snappy web interface for your 3D printer!

OctoPrint OctoPrint provides a snappy web interface for controlling consumer 3D printers. It is Free Software and released under the GNU Affero Genera

OctoPrint 7.1k Jan 03, 2023
kikuchipy is an open-source Python library for processing and analysis of electron backscatter diffraction (EBSD) patterns

kikuchipy is an open-source Python library for processing and analysis of electron backscatter diffraction (EBSD) patterns. The library builds on the

pyxem 53 Dec 29, 2022
This Web App lets you convert your Normal Image to a SKETCHED one within a minute

This Web App lets you convert your Normal Image to a SKETCHED one within a minute

Avinash M 25 Nov 10, 2022