src/README.md

metadata

tags:
  - gradio-custom-component
  - gallery
title: gradio_mediagallery
short_description: A Media Gallery Explorer for Gradio UI
colorFrom: pink
colorTo: yellow
sdk: gradio
pinned: false
app_file: space.py

gradio_mediagallery

💻 Component GitHub Code

Media Gallery Explorer with Metadata Image Extraction for Gradio UI

Installation

pip install gradio_mediagallery

Usage

from typing import Any, List
import gradio as gr
from gradio_folderexplorer import FolderExplorer
from gradio_folderexplorer.helpers import load_media_from_folder
from gradio_mediagallery import MediaGallery
from gradio_mediagallery.helpers import transfer_metadata

# Configuration constant for the root directory containing media files
ROOT_DIR_PATH = "./src/examples"

def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
    """
    Processes image metadata by calling the `transfer_metadata` helper.

    Args:
        image_data (gr.EventData): Event data containing metadata from the MediaGallery component.

    Returns:
        List[Any]: A list of values to populate the output fields, or skipped updates if no data is provided.
    """
    if not image_data or not hasattr(image_data, "_data"):
        return [gr.skip()] * len(output_fields)

    return transfer_metadata(
        output_fields=output_fields,
        metadata=image_data._data,
        remove_prefix_from_keys=True
    )

# UI layout and logic
with gr.Blocks(theme=gr.themes.Ocean()) as demo:
    """
    A Gradio interface for browsing and displaying media files with metadata extraction.
    """
    gr.Markdown("# MediaGallery with Metadata Extraction")
    gr.Markdown(
        """
        **To Test:**
        1. Use the **FolderExplorer** on the left to select a folder containing images with metadata.
        2. Click on an image in the **Media Gallery** to open the preview mode.
        3. In the preview toolbar, click the 'Info' icon (ⓘ) to open the metadata popup.
        4. Click the **'Load Metadata'** button inside the popup.
        5. The fields in the **Metadata Viewer** below will be populated with the data from the image.
        """
    )
    with gr.Row(equal_height=True):
        with gr.Column(scale=1, min_width=300):
            folder_explorer = FolderExplorer(
                label="Select a Folder",
                root_dir=ROOT_DIR_PATH,
                value=ROOT_DIR_PATH
            )

        with gr.Column(scale=3):
            gallery = MediaGallery(
                label="Media in Folder",
                columns=6,
                height="auto",
                preview=False,
                show_download_button=False,
                only_custom_metadata=False,
                popup_metadata_width="40%",
            )

    gr.Markdown("## Metadata Viewer")
    with gr.Row():
        model_box = gr.Textbox(label="Model")
        fnumber_box = gr.Textbox(label="FNumber")
        iso_box = gr.Textbox(label="ISOSpeedRatings")
        s_churn = gr.Slider(label="Schurn", minimum=0.0, maximum=1.0, step=0.01)
        description_box = gr.Textbox(label="Description", lines=2)

    # Event handling
    output_fields = [
        model_box,
        fnumber_box,
        iso_box,
        s_churn,
        description_box
    ]

    # Populate the gallery when the folder changes
    folder_explorer.change(
        fn=load_media_from_folder,
        inputs=folder_explorer,
        outputs=gallery
    )

    # Populate the gallery on initial load
    demo.load(
        fn=load_media_from_folder,
        inputs=folder_explorer,
        outputs=gallery
    )

    # Handle the load_metadata event from MediaGallery
    gallery.load_metadata(
        fn=handle_load_metadata,
        inputs=None,
        outputs=output_fields
    )

if __name__ == "__main__":
    """
    Launches the Gradio interface in debug mode.
    """
    demo.launch(debug=True)

MediaGallery

Initialization

name	type	default	description
value	Sequence[ np.ndarray | PIL.Image.Image | str | Path | tuple ] | Callable | None	None	Initial list of images or videos, or a function to generate them.
file_types	list[str] | None	None	List of allowed file extensions or types for uploads (e.g., ['image', '.mp4']).
label	str | I18nData | None	None	Label displayed above the component.
every	Timer | float | None	None	Interval or Timer to refresh `value` if it's a function.
inputs	Component | Sequence[Component] | set[Component] | None	None	Components used as inputs to recalculate `value` if it's a function.
show_label	bool | None	None	Whether to display the label.
container	bool	True	Whether to place the component in a padded container.
scale	int | None	None	Relative size compared to adjacent components.
min_width	int	160	Minimum pixel width of the component.
visible	bool | Literal["hidden"]	True	Whether the component is visible or hidden.
elem_id	str | None	None	HTML ID for the component.
elem_classes	list[str] | str | None	None	HTML classes for the component.
render	bool	True	Whether to render the component in the Blocks context.
key	int | str | tuple[int | str, ...] | None	None	Identifier for preserving component state across re-renders.
preserved_by_key	list[str] | str | None	"value"	Parameters to preserve during re-renders.
columns	int | None	2	Number of columns in the grid.
rows	int | None	None	Number of rows in the grid.
height	int | float | str | None	None	Height of the gallery in pixels or CSS units.
allow_preview	bool	True	Whether images can be enlarged on click.
preview	bool | None	None	Whether to start in preview mode (requires allow_preview=True).
selected_index	int | None	None	Index of the initially selected media item.
object_fit	Literal[ "contain", "cover", "fill", "none", "scale-down" ] | None	None	CSS object-fit for thumbnails ("contain", "cover", etc.).
show_share_button	bool | None	None	Whether to show a share button (auto-enabled on Hugging Face Spaces).
show_download_button	bool | None	True	Whether to show a download button for the selected media.
interactive	bool | None	None	Whether the gallery allows uploads.
type	Literal["numpy", "pil", "filepath"]	"filepath"	Format for images passed to the prediction function ("numpy", "pil", "filepath").
show_fullscreen_button	bool	True	Whether to show a fullscreen button.
only_custom_metadata	bool	True	Whether to filter out technical EXIF metadata in the popup.
popup_metadata_width	int | str	500	Width of the metadata popup (pixels or CSS string).

Events

name	description
select	Event listener for when the user selects or deselects the MediaGallery. Uses event data gradio.SelectData to carry value referring to the label of the MediaGallery, and selected to refer to state of the MediaGallery. See EventData documentation on how to use this event data
change	Triggered when the value of the MediaGallery 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.
delete	This listener is triggered when the user deletes and item from the MediaGallery. Uses event data gradio.DeletedFileData to carry value referring to the file that was deleted as an instance of FileData. See EventData documentation on how to use this event data
preview_close	Triggered when the MediaGallery preview is closed by the user.
preview_open	Triggered when the MediaGallery preview is opened by the user.
load_metadata	Triggered when the user clicks the 'Load Metadata' button in the metadata popup. Returns a dictionary of image metadata.

User function

The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).

• When used as an Input, the component only impacts the input signature of the user function.
• When used as an output, the component only impacts the return signature of the user function.

The code snippet below is accurate in cases where the component is used as both an input and an output.

• As output: Is passed, list of tuples containing file paths and captions, or None if payload is None.
• As input: Should return, list of media items (images, videos, or tuples with captions).

def predict(
    value: Any
) -> list | None:
    return value