Image multi-select component

[AyushExel]

Hey reflex team,
I just discovered this repo and I think it has a great potential. I'm the creator of this yoloexplorer project that allows users to iterate faster on their computer vision datasets. I want to port it over to reflex.
One of the main things that I need is "image multi-select component", where I can select multiple components in a grid and submit them to perform some sort of operation. In the current setting, I'm creating that using javascript, but I want to use reflex for the entire thing.
Is it possible to do that using reflex? Can someone point me to a similar example? Thanks!

[masenf]

I think you'd be able to use the rx.responsive_grid component, load some images, and update the selected state when the user clicks. Maybe something like this:

from pathlib import Path
import reflex as rx


IMAGES = tuple(
    image.name
    for image in (Path(__file__).parent.parent / "assets").glob("*.jpg")
)


class ImageInfo(rx.Base):
    image: str
    selected: bool


class State(rx.State):
    _selected_images: set[str] = set()

    def toggle_image(self, image: str):
        if image in self._selected_images:
            self._selected_images.remove(image)
        else:
            self._selected_images.add(image)

    def submit_images(self):
        print(self._selected_images)

    @rx.var
    def image_infos(self) -> list[ImageInfo]:
        return [
            ImageInfo(image=image, selected=image in self._selected_images)
            for image in IMAGES
        ]


def image_grid_item(image_info: ImageInfo) -> rx.Component:
    return rx.grid_item(
        rx.image(src=image_info.image, width="20vw", height="auto"),
        on_click=lambda: State.toggle_image(image_info.image),
        background_color=rx.cond(image_info.selected, "#ccc", "inherit"),
        padding="5px",
        cursor="pointer",
        _hover={"background-color": "#ddd"},
    )


def index() -> rx.Component:
    return rx.fragment(
        rx.color_mode_button(rx.color_mode_icon(), float="right"),
        rx.vstack(
            rx.heading("Select Images", font_size="2em"),
            rx.responsive_grid(
                rx.foreach(
                    State.image_infos,
                    image_grid_item,
                ),
                columns=[3],
                spacing="5px",
            ),
            rx.hstack(
                rx.foreach(
                    State.image_infos,
                    lambda image_info: rx.cond(image_info.selected, rx.text(image_info.image))
                )
            ),
            rx.button("Submit", on_click=State.submit_images),
            spacing="1.5em",
            padding_top="5%",
        ),
    )


app = rx.App()
app.add_page(index)
app.compile()

Screen.Recording.2023-08-29.at.2.03.51.PM.mov

hope this can help inspire you, and thanks for using reflex.