Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fcakyon/streamlit-image-comparison

Image comparison slider component for Streamlit
https://github.com/fcakyon/streamlit-image-comparison

huggingface image-slider machine-learning pip pypi python streamlit visualization

Last synced: 4 days ago
JSON representation

Image comparison slider component for Streamlit

Awesome Lists containing this project

README

        



Streamlit Image Comparison Component



pypi version
total downloads
HuggingFace Spaces
fcakyon twitter

A simple Streamlit Component to compare images with a slider in Streamlit apps using [Knightlab's JuxtaposeJS](https://juxtapose.knightlab.com/). 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](https://huggingface.co/spaces/fcakyon/streamlit-image-comparison)


## Installation
- Install via pip:

```bash
pip install streamlit
pip install streamlit-image-comparison
```

## Example

```python
# 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

```python

# 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

```python
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](https://github.com/robmarkcole/streamlit-image-juxtapose)?

- 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

## References
- https://juxtapose.knightlab.com/
- https://github.com/robmarkcole/streamlit-image-juxtapose