Streamlit Image Comparison Component
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-comparisonExample
# 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