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
Multi-view 3D reconstruction using neural rendering. Unofficial implementation of UNISURF, VolSDF, NeuS and more.

Multi-view 3D reconstruction using neural rendering. Unofficial implementation of UNISURF, VolSDF, NeuS and more.

Jianfei Guo 683 Jan 04, 2023
Fix datetime EXIF data in photos downloaded from Google Takeout

fix-google-takeout Warning Use at your own risk. Backup your photos. Overview Google takeout for photos

Mayank Mandava 20 Nov 05, 2022
ProsePainter combines direct digital painting with real-time guided machine-learning based image optimization.

ProsePainter Create images by painting with words. ProsePainter combines direct digital painting with real-time guided machine-learning based image op

Morphogen 276 Dec 17, 2022
Optimize/Compress images using python

Image Optimization Using Python steps to run the script run the command to install the required libraries pip install -r requirements.txt create a dir

Shekhar Gupta 1 Oct 15, 2021
Simple Python package to convert an image into a quantized image using a customizable palette

Simple Python package to convert an image into a quantized image using a customizable palette. Resulting image can be displayed by ePaper displays such as Waveshare displays.

Luis Obis 3 Apr 13, 2022
Fuzzware is a project for automated, self-configuring fuzzing of firmware images

Fuzzware Fuzzware is a project for automated, self-configuring fuzzing of firmware images. The idea of this project is to configure the memory ranges

190 Dec 21, 2022
Ascify-Art - An easy to use, GUI based and user-friendly colored ASCII art generator from images!

Ascify-Art This is a python based colored ASCII art generator for free! How to Install? You can download and use the python version if you want, modul

Akash Bora 14 Dec 31, 2022
Generate different types of random avatars.

avatar-generator Generate different types of random avatars. Requirements Python3 pytorch=1.6 cv2=3.4 tqdm 1. Github-like avatars python generate_gi

Ming 11 Apr 02, 2022
Validate arbitrary image uploads from incoming data urls while preserving file integrity but removing EXIF and unwanted artifacts and RCE exploit potential

Validate arbitrary base64-encoded image uploads as incoming data urls while preserving image integrity but removing EXIF and unwanted artifacts and mitigating RCE-exploit potential.

A3R0 1 Jan 10, 2022
Python framework for creating and scaling up production of vector graphics assets.

Board Game Factory Contributors are welcome here! See the end of readme. This is a vector-graphics framework intended for creating and scaling up prod

Adam Volný 5 Jul 13, 2022
Fast Image Retrieval is an open source image retrieval framework

Fast Image Retrieval is an open source image retrieval framework release by Center of Image and Signal Processing Lab (CISiP Lab), Universiti Malaya. This framework implements most of the major binar

CISiP Lab 39 Nov 25, 2022
Polyfoto - Create image mosaics.

Polyfoto Create image mosaics. Showcase "Before and After Science" by Brian Eno "Scott 3" by Scott Walker Installation Clone this repository to your l

Shane Drabing 149 Dec 25, 2022
pix2tex: Using a ViT to convert images of equations into LaTeX code.

The goal of this project is to create a learning based system that takes an image of a math formula and returns corresponding LaTeX code.

Lukas Blecher 2.6k Dec 30, 2022
3D printer / slicing GUI built on top of the Uranium framework

Cura Ultimaker Cura is a state-of-the-art slicer application to prepare your 3D models for printing with a 3D printer. With hundreds of settings and h

Ultimaker 4.4k Jan 02, 2023
A Icon Maker GUI Made - Convert your image into icon ( .ico format ).

Icon-Maker-GUI A Icon Maker GUI Made Using Python 3.9.0 . It will take any image and convert it to ICO file, for web site favicon or Windows applicati

Insanecodes 12 Dec 15, 2021
A tool to maintain an archive/mirror of your Google Photos library for backup purposes.

Google Photos Archiver Updated Instructions 8/9/2021 Version 2.0.6 Instructions: Download the script (exe or python script listed below) Follow the in

Nick Dawson 116 Jan 03, 2023
Samila is a generative art generator written in Python

Samila is a generative art generator written in Python, Samila let's you create arts based on many thousand points. The position of every single point is calculated by a formula, which has random par

Sepand Haghighi 947 Dec 30, 2022
A simple plugin to view APR images in napari

napari-apr-viewer A simple plugin to view APR images in napari This napari plugin was generated with Cookiecutter using @napari's cookiecutter-napari-

5 Jan 24, 2022
Napari 3D Ortho Viewer - an ortho viewer for napari for 3D images

napari-3d-ortho-viewer Napari 3D Ortho Viewer - an ortho viewer for napari for 3D images This napari plugin was generated with Cookiecutter using @nap

niklas netter 5 Nov 28, 2022
This is the official source code of FreeCAD, a free and opensource multiplatform 3D parametric modeler.

Freedom to build what you want FreeCAD is an open-source parametric 3D modeler made primarily to design real-life objects of any size. Parametric modeling allows you to easily modify your design by g

FreeCAD 12.9k Jan 07, 2023