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
A large-scale dataset of both raw MRI measurements and clinical MRI images

fastMRI is a collaborative research project from Facebook AI Research (FAIR) and NYU Langone Health to investigate the use of AI to make MRI scans faster. NYU Langone Health has released fully anonym

Facebook Research 907 Jan 04, 2023
Make your master artistic punk avatar through machine learning world famous paintings

Master-art-punk Make your master artistic punk avatar through machine learning world famous paintings. 通过机器学习世界名画制作属于你的大师级艺术朋克头像 Nowadays, NFT is beco

蒋虎成 23 Jan 04, 2022
Glyph-graph - A simple, yet versatile, package for graphing equations on a 2-dimensional text canvas

Glyth Graph Revision for 0.01 A simple, yet versatile, package for graphing equations on a 2-dimensional text canvas List of contents: Brief Introduct

Ivan 2 Oct 21, 2022
clesperanto is a graphical user interface for GPU-accelerated image processing.

clesperanto is a graphical user interface for a multi-platform multi-language framework for GPU-accelerated image processing. It is based on napari and the pyclesperanto-prototype.

1 Jan 02, 2022
QR-code Generator with a basic GUI.

Qr_generator_python Qr code generator with a basic GUI. ❔ About the QR-Code-Generator This project Generates QR codes to sites, e-mails and plain text

Tecixck 2 Oct 11, 2021
The InvGears workbench for FreeCAD allows the creation of gear systems

FreeCAD InvGears workbench Current version 0.1.1 Overview The InvGears workbench allows the creation of gear systems. The gear generation algorithm is

Sebastian Ernesto Garcia 8 Dec 10, 2021
Tools for making image cutouts from sets of TESS full frame images

Cutout tools for astronomical images Astrocut provides tools for making cutouts from sets of astronomical images with shared footprints. It is under a

Space Telescope Science Institute 20 Dec 16, 2022
Instagram-like image filters.

PyGram Instagram-like image filters. Usage First, import the client: from filters import * Instanciate a filter and apply it: f = Nashville("image.jp

Ajay Kumar Nagaraj 0 Oct 18, 2022
image-processing exercises.

image_processing Assignment 21 Checkered Board Create a chess table using numpy and opencv. view: Color Correction Reverse black and white colors with

Benyamin Zojaji 25 Dec 15, 2022
Extracts random colours from an image

EXTRACT COLOURS This repo contains all the project files. Project Description A Program that extracts 10 random colours from an image and saves the rg

David .K. Danso 3 Dec 13, 2021
SALaD (Semi-Automatic Landslide Detection) is a landslide mapping system

SALaD (Semi-Automatic Landslide Detection) is a landslide mapping system. SALaD utilizes Object-based Image Analysis and Random Forest to map landslides.

NASA 14 Jan 04, 2023
Script For Importing Image sequences into scrap mechanic via blueprints

To use dowload and extract "video makes.zip" Python has to be installed https://www.python.org/ (may not work on version lower than 3.9) Has to be run

2 Oct 30, 2021
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
An example which streams RGB-D images over spout.

Spout RGB-D Example An example which streams RGB-D images over spout with visiongraph. Due to the spout dependency this currently only works on Window

Florian Bruggisser 4 Nov 14, 2022
GIMP script to export bitmap as GRAPHICS 4 file (aka SCREEN 5)

gimpfu-msx-gr4.py GIMP script to export bitmap as GRAPHICS 4 file (aka SCREEN 5). GRAPHICS 4 specs are: 256x212 (or 256x192); 16 color palette (from 5

Pedro de Medeiros 4 Oct 17, 2022
MaryJane is a simple MJPEG server written in Python.

MaryJane is a simple MJPEG server written in Python.

bootrino 152 Dec 13, 2022
Easily turn large sets of image urls to an image dataset. Can download, resize and package 100M urls in 20h on one machine.

img2dataset Easily turn large sets of image urls to an image dataset. Can download, resize and package 100M urls in 20h on one machine. Also supports

Romain Beaumont 1.4k Jan 01, 2023
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
PyLibTiff - a wrapper to the libtiff library to Python using ctypes

PyLibTiff is a package that provides: a wrapper to the libtiff library to Python using ctypes. a pure Python module for reading and writing TIFF and L

Pearu Peterson 105 Dec 21, 2022