Streamsync Gallery Component

[polishdataengineer]

Is there any way to make an gallery (without using the HTML component)?
Im looking for an option like in Gradio 🙏🏻

[FabienArcellier]

Currently, there isn't any dedicated component to do a gallery. You can make something using the repeater and the image component.

component tree

import streamsync as ss

# This is a placeholder to get you started or refresh your memory.
# Delete it or adapt it as necessary.
# Documentation is available at https://streamsync.cloud

def click_img(state, context):
    state["image"] = context['item']

# Initialise the state

# "_my_private_element" won't be serialised or sent to the frontend,
# because it starts with an underscore

initial_state = ss.init_state({
    "my_app": {
        "title": "My App"
    },
    "images": {
        "1": {
            "caption": "curiosity",
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/PIA16239_High-Resolution_Self-Portrait_by_Curiosity_Rover_Arm_Camera_square.jpg/600px-PIA16239_High-Resolution_Self-Portrait_by_Curiosity_Rover_Arm_Camera_square.jpg"
        },
        "2": {
            "caption": "",
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/MarsCuriosityRover-Drilling-Sol170%2B%2B-2.jpg/542px-MarsCuriosityRover-Drilling-Sol170%2B%2B-2.jpg",
        },
        "3": {
            "caption": "",
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Mars_2020_selfie_containing_both_perseverance_rover_and_ingenuity.gif/800px-Mars_2020_selfie_containing_both_perseverance_rover_and_ingenuity.gif",
        },
        "4": {
            "caption": "",
            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/PIA16226-MarsCuriosityRover-FirstScoopOfSoil-20121007.jpg/1920px-PIA16226-MarsCuriosityRover-FirstScoopOfSoil-20121007.jpg",
        }
    },
    "image": {
        "caption": "curiosity",
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/PIA16239_High-Resolution_Self-Portrait_by_Curiosity_Rover_Arm_Camera_square.jpg/600px-PIA16239_High-Resolution_Self-Portrait_by_Curiosity_Rover_Arm_Camera_square.jpg"
    }
})

[FabienArcellier]

I have written an application sample you can run

https://github.com/FabienArcellier/spike-streamsync-gallery

[polishdataengineer]

Hello @FabienArcellier
After upgrading the streamsync to newest version i see that the solution stopped to work:

The parent (Reaperer) is not suitable for ithe image component.

[FabienArcellier]

Nice catch @polishdataengineer, I have updated it to use horizontal stack instead of column.

@ramedina86 @raaymax I think we may need a grid component compatible with repeater. We should be able to configure the number of column to handle the gallery usecase or maybe just add an optional field Split on Column Container to move columns at the next line.

[polishdataengineer]

@FabienArcellier it works like a charm :)!

And a grid component would be also nice 👍🏻