Provide a way to determine the selected image in a `Gallery`

[pcuenca]

• [x] I have searched to see if a similar issue already exists. Possibly related to #1379.

Is your feature request related to a problem? Please describe.
The use case is: generate a grid of images, using for example a text to image model, then select one of the results for further processing.

Describe the solution you'd like
I thought about two potential solutions:

• Update value to reflect the index of the currently selected image, so it can be checked as a response to some user action (click a button, for instance).
• Adopt Gallery.click and send that event whenever an image is clicked.

This sounds similar to the discussion in #1379, except for the upload ability. I think that exposing the selection would be useful even if upload is not yet supported.

[abidlabs]

Thanks for creating this issue @pcuenca! Agreed that this would be a useful addition to Gallery, and is a lower hanging fruit than making Gallery support full upload capabilities.

[abidlabs]

Another example of where this component would be useful is here: https://huggingface.co/spaces/NimaBoscarino/playlist-generator, where a person could simply click on one of the song pictures to get the lyrics

[yuvalkirstain]

@abidlabs Hi, I am also interested in this feature. Specifically for my use case, it would have been cool if we could highlight the selected image in the gallery and act in the backend after a user selects an image.

[temirov]

I want to display the images from a folder, and then allow a deletion of selected ones. The display part works but I can't find a way to know which image was clicked at. Resorting to custom JS would defeat the purpose of using Gradio in the first place :-)

[MohamedAliRashad]

@abidlabs I can use something like this. I want the user to be able to go through all the images in the gallery and if he wants to procecss a certain image further he can click on gr.Button and it will trigger a function that will read the selected image in gallery and make some processing on it.

Is there a way to do this ?

[abidlabs]

Yes, please take a look at https://github.com/gradio-app/gradio/pull/3399

[wwdok]

Hi, @abidlabs My gallery stores a list of images , I want when I click an image, I can get the image path just like one of list that passed into the argument value of gr.Gallery， I print out all attributes of evt,

# the function triggered by Gallery.select()
def get_select_value(evt: gr.SelectData):
    print(f"==>> evt.selected: {evt.selected}") # True
    print(f"==>> evt._data: {evt._data}") # {'index': 1, 'value': None}
    print(f"You selected {evt.value} at {evt.index} from {evt.target}") # You selected None at 1 from gallery
    return evt.value

As you can see in the annotaiton, there is no image path, does this normal ?