Suggestions for Improving the Functionality of the gr.Gallery Component

[avan06]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Currently, as an interactive component used as an input, the gr.Gallery has several areas that could be improved. For instance, it should support pasting images from the clipboard, allow users to upload new images after the initial upload, and provide the ability to remove specific images.

Describe the solution you'd like
I achieved the functionality I wanted by using additional gr.Image and gr.Button components, as shown below.

with gr.Column(variant="panel"):
    # Create an Image component for uploading images
    image_input = gr.Image(label="Upload an Image or clicking paste from clipboard button", type="filepath", sources=["upload", "clipboard"], height=150)
    gallery = gr.Gallery(columns=5, rows=5, show_share_button=False, interactive=True, height="500px", label="Gallery that displaying a grid of images")
    with gr.Row():
        upload_button = gr.UploadButton("Upload multiple images", file_types=["image"], file_count="multiple", size="sm")
        remove_button = gr.Button("Remove Selected Image", size="sm")

# Define the event listener to add the uploaded image to the gallery
image_input.change(add_images_to_gallery, inputs=[gallery, image_input], outputs=gallery)

# When the upload button is clicked, add the new images to the gallery
upload_button.upload(add_images_to_gallery, inputs=[gallery, upload_button], outputs=gallery)
# Event to update the selected image when an image is clicked in the gallery
selected_image = gr.Textbox(label="Selected Image", visible=False)
gallery.select(get_selection_from_gallery, inputs=gallery, outputs=[selected_image, sorted_general_strings, rating, character_res, general_res])
# Event to remove a selected image from the gallery
remove_button.click(remove_image_from_gallery, inputs=[gallery, selected_image], outputs=gallery)

def get_selection_from_gallery(gallery: list, selected_state: gr.SelectData):
    if not selected_state:
        return selected_state

    tag_result = { "strings": "", "rating": "", "character_res": "", "general_res": "" }
    if selected_state.value["image"]["path"] in tag_results:
        tag_result = tag_results[selected_state.value["image"]["path"]]

    return (selected_state.value["image"]["path"], selected_state.value["caption"]), tag_result["strings"], tag_result["rating"], tag_result["character_res"], tag_result["general_res"]

def add_images_to_gallery(gallery: list, images):
    if gallery is None:
        gallery = []
    if not images:
        return gallery
    
    # Combine the new images with the existing gallery images
    if type(images) is str:
        gallery.append(images)
    else:
        gallery.extend(images)
    return gallery

def remove_image_from_gallery(gallery: list, selected_image: str):
    if not gallery or not selected_image:
        return gallery

    selected_image = eval(selected_image)
    # Remove the selected image from the gallery
    if selected_image in gallery:
        gallery.remove(selected_image)
    return gallery

Additional context
Although the custom implementation mentioned above achieves the desired functionality, it is clearly lacking in integration. If Gradio could implement these features as built-in functionality within the gr.Gallery component, it would be extremely useful.

Thank to the gradio team!

[abidlabs]

These are good suggestions, thanks @avan06! If you'd like to open a PR with any of these changes, we'd be supportive.