Solara•9mo ago

Image Select

Hi all. Can you help me. I'm trying to make an image selector, like the one made here by https://github.com/jrieke/streamlit-image-select for streamlit. I tried to do this using ToggleButtonsSingle, it worked for me, but all the buttons with pictures end up in one line, and I can have a lot of pictures, I tried to add GridFixed, but now everything crashes because it can’t find the value correctly.

GitHub

GitHub - jrieke/streamlit-image-select: 🖼️ An image select componen...

🖼️ An image select component for Streamlit. Contribute to jrieke/streamlit-image-select development by creating an account on GitHub.

image_select.py

3 Replies

iisakkirotko•9mo ago

Hi @icecream4! I think this should work for you:

...
selected_image = solara.reactive(0)

@solara.component
def Page():
    with solara.GridFixed(columns=3):
        for i, url in enumerate(images):
            def set_print(value = i):
                print("Image", value)
                selected_image.set(value)

            with solara.Button(on_click=set_print, style={"height": "150px", "width": "150px"}):
                solara.v.Img(src=url, height="150px", width="150px", contain=True, aspect_ratio="1/1", style_="border:" + "1px solid red" if selected_image.value == i else "1px solid black")

...
selected_image = solara.reactive(0)

@solara.component
def Page():
    with solara.GridFixed(columns=3):
        for i, url in enumerate(images):
            def set_print(value = i):
                print("Image", value)
                selected_image.set(value)

            with solara.Button(on_click=set_print, style={"height": "150px", "width": "150px"}):
                solara.v.Img(src=url, height="150px", width="150px", contain=True, aspect_ratio="1/1", style_="border:" + "1px solid red" if selected_image.value == i else "1px solid black")

I think the reason your original code didn't work is in the for loop; the value of i changes as we loop through, and the last reference ends up in the value of all buttons.

icecream4OP•9mo ago

Wow, awesome! Thanks a lot. This is really what I need 🔥

MaartenBreddels•9mo ago

import solara


images = [
    "https://t4.ftcdn.net/jpg/00/97/58/97/360_F_97589769_t45CqXyzjz0KXwoBZT9PRaWGHRk5hQqQ.jpg",
    "https://images.rawpixel.com/image_png_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvcHUyMzMxNjM2LWltYWdlLTAxLXJtNTAzXzMtbDBqOXFrNnEucG5n.png",
    "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D",

]
selected_image = solara.reactive(0)

@solara.component
def Page():
    with solara.ColumnsResponsive(12, 6, 4, 3):
        for i, url in enumerate(images):
            def set_print(value = i):
                print("Image", value)
                selected_image.set(value)

            with solara.Button(on_click=set_print, style={"height": "150px", "width": "150px"}):
                solara.v.Img(src=url, height="150px", width="150px", contain=True, aspect_ratio="1/1", style_="border:" + "1px solid red" if selected_image.value == i else "1px solid black")

import solara


images = [
    "https://t4.ftcdn.net/jpg/00/97/58/97/360_F_97589769_t45CqXyzjz0KXwoBZT9PRaWGHRk5hQqQ.jpg",
    "https://images.rawpixel.com/image_png_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvcHUyMzMxNjM2LWltYWdlLTAxLXJtNTAzXzMtbDBqOXFrNnEucG5n.png",
    "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D",

]
selected_image = solara.reactive(0)

@solara.component
def Page():
    with solara.ColumnsResponsive(12, 6, 4, 3):
        for i, url in enumerate(images):
            def set_print(value = i):
                print("Image", value)
                selected_image.set(value)

            with solara.Button(on_click=set_print, style={"height": "150px", "width": "150px"}):
                solara.v.Img(src=url, height="150px", width="150px", contain=True, aspect_ratio="1/1", style_="border:" + "1px solid red" if selected_image.value == i else "1px solid black")

Run and edit this code snippet at PyCafe Tried a live example with pycafe 🙂

Gaming

Programming

Image Select