Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vivien000/st-clickable-images
https://github.com/vivien000/st-clickable-images
streamlit
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vivien000/st-clickable-images
- Owner: vivien000
- License: mit
- Created: 2022-01-31T22:09:45.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:21:08.000Z (about 2 years ago)
- Last Synced: 2024-04-25T20:21:45.155Z (9 months ago)
- Topics: streamlit
- Language: Python
- Homepage:
- Size: 817 KB
- Stars: 31
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# st-clickable-image
***[You might be interested by [st-click-detector](https://github.com/vivien000/st-click-detector) which generalizes this component]***
`st-clickable-images` is a [Streamlit](https://streamlit.io) component to display one or several images and detect when they are clicked on.
A more advanced example can be seen live [here](https://huggingface.co/spaces/vivien/clip).
## Installation
```bash
pip install st-clickable-images
```
## Quickstart
```python
import streamlit as st
from st_clickable_images import clickable_images
clicked = clickable_images(
[
"https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=700",
"https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=700",
"https://images.unsplash.com/photo-1582550945154-66ea8fff25e1?w=700",
"https://images.unsplash.com/photo-1591797442444-039f23ddcc14?w=700",
"https://images.unsplash.com/photo-1518727818782-ed5341dbd476?w=700",
],
titles=[f"Image #{str(i)}" for i in range(5)],
div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"},
img_style={"margin": "5px", "height": "200px"},
)
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked")
```
This works as well with local images if you use `base64` encodings:
```python
import base64
import streamlit as st
from st_clickable_images import clickable_images
images = []
for file in ["image1.jpeg", "image2.jpeg"]:
with open(file, "rb") as image:
encoded = base64.b64encode(image.read()).decode()
images.append(f"data:image/jpeg;base64,{encoded}")
clicked = clickable_images(
images,
titles=[f"Image #{str(i)}" for i in range(len(images))],
div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"},
img_style={"margin": "5px", "height": "200px"},
)
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked")
```
## Usage
**clickable_images(paths,
titles=[],
div_style={},
img_style={},
key=None
)**
Displays one or several images and returns the index of the last image clicked on (or -1 before any click)
### Parameters
- `paths` (list): the list of URLs of the images
- `titles` (list): the (optional) titles of the images
- `div_style` (dict): a dictionary with the CSS property/value pairs for the div container
- `img_style` (dict): a dictionary with the CSS property/value pairs for the images
- `key` (str or None): an optional key that uniquely identifies this component. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state