🖼️ streamlit-image-select: An image select component for Streamlit

Custom Components
1

Hey all :wave:

I created a new component recently. It shows an image gallery, lets the viewer select an image, and returns the selected image on the Python side. Very useful if you want to show some example images in a computer vision app!

Check it out and let me know what you build!

12 Likes
2

This is Great! I was waiting for this functionality for so long, thanks for sharing @jrieke !!

1 Like
3

Looks super cool! And you added it to the tracker, that’s awesome :smiling_face_with_tear:

1 Like
4

@jrieke Nice design! But do you know how can I center these images in sidebar and change the size of these images? I would really appreciate your help!

images = [“xx.png”, “xxx.png”]

with st.sidebar:
clicked = image_select(“”, images, key=‘click_images’)

5

Is there a way to select and return info for multiple images? For instance, load five images on a page, select two of them and then return associated info for the two. Thanks! and nice job!

6

@junchi @rnobalr Thanks for the suggestions! Both things (changing alignment/size + multi-selection) are currently not implemented. Can you open Github issues on the repo? I currently don’t have plans or time to work on this but let’s track it on Github, so I can come back to it when I do have time!

1 Like
7

@junchi I just added a parameter use_container_width in v0.3, which lets you stretch the width of the images to the container width. Does that already work for you to display them properly in the sidebar? If not, feel free to still open that Github issue and describe exactly what you want (mocks/screenshots would help!).

1 Like
8

This is great, thanks for sharing!

9

Good morning,

I think I found a kind of bug. The image-select is not updating the changes when reloading the page with new images

attendee_option = image_select(label = 'Which employee should be confirmed?', images = images, captions = attendees_desc, index = 0, return_value = 'index')

for the image_list I create temp files to store database blob image data in it. After the image-select I delete the temp. files. But still after a page reload it shows the old images. Helped myself to concatenate datetime in it, to make sure the image path will be always different.

10

Is there a way to show a grid of images where the user can select any number of images. I was thinking of hacking this by using streamlit-image-select and having a separate list for every image. The issue however is that the image is always clicked.
@jrieke

1 Like
11

@DrBenjamin @Ritwick_Chaudhry Can you file GitHub issues here? I don’t have time to work on this at the moment (unfortunately!) but would be great to track these issues there so I can pick them up whenever I have time.

12

I figured out that it is the caching, so I disabled it for me locally.

13

Occasionally, when selecting an image, the entire page will be reloaded，How to solve it？

14

Hello ! is it possible to select multiple images ?

15

HI ! this is great! Unfortunately, image_select sometimes fails to load images, when this happens, the component looks like never called before, there is nothing wrong with the image, it loads perfectly using st.image, I assumed that while the image was loading, another component already appeared. Is there any suggestion?

1 Like
16

I have the same problem and am looking for a solution… :frowning: