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.
3 Replies
iisakkirotko
iisakkirotko3mo 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.
icecream4
icecream43mo ago
Wow, awesome! Thanks a lot. This is really what I need 🔥
MaartenBreddels
MaartenBreddels3mo 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 🙂