Introducing Gradio Clients


New to Gradio? Start here: Getting Started

See the Release History


import gradio as gr with gr.Blocks() as demo: cheetahs = [ "", "", ",width-650,imgsize-129520,,resizemode-4,quality-100/.jpg", "", "", ] gr.Gallery(value=cheetahs, columns=4) demo.launch()


Creates a gallery component that allows displaying a grid of images, and optionally captions. If used as an input, the user can upload images to the gallery. If used as an output, the user can click on individual images to view them at a higher resolution.


As input component: Passes the list of images as a list of (image, caption) tuples, or a list of (image, None) tuples if no captions are provided (which is usually the case). The image can be a str file path, a numpy array, or a PIL.Image object depending on type.

Your function should accept one of these types:
def predict(
	value: List[tuple[str, str | None]] | List[tuple[PIL.Image.Image, str | None]] | List[tuple[np.ndarray, str | None]] | None

As output component: Expects the function to return a list of images, or list of (image, str caption) tuples. Each image can be a str file path, a numpy array, or a PIL.Image object.

Your function should return one of these types:
def predict(ยทยทยท) -> list[GalleryImageType | CaptionedGalleryImageType] | None
	return value




Class Interface String Shortcut Initialization



Uses default values


# This demo needs to be run from the repo folder. # python demo/fake_gan/ import random import gradio as gr def fake_gan(): images = [ (random.choice( [ "", "", "", "", "", ] ), f"label {i}") for i in range(3) ] return images with gr.Blocks() as demo: gallery = gr.Gallery( label="Generated images", show_label=False, elem_id="gallery" , columns=[3], rows=[1], object_fit="contain", height="auto") btn = gr.Button("Generate images", scale=0), None, gallery) if __name__ == "__main__": demo.launch()

Event Listeners


Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.

Supported Event Listeners

The Gallery component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below.

Listener Description, ยทยทยท)

Event listener for when the user selects or deselects the Gallery. Uses event data gradio.SelectData to carry value referring to the label of the Gallery, and selected to refer to state of the Gallery. See EventData documentation on how to use this event data

Gallery.upload(fn, ยทยทยท)

This listener is triggered when the user uploads a file into the Gallery.

Gallery.change(fn, ยทยทยท)

Triggered when the value of the Gallery changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.

Event Parameters