Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/examples/folder1/Jensen.jpeg filter=lfs diff=lfs merge=lfs -text
+src/examples/folder1/newton_0.jpg filter=lfs diff=lfs merge=lfs -text
+src/examples/folder1/newton_2.png filter=lfs diff=lfs merge=lfs -text
+src/examples/folder1/sam1.jpg filter=lfs diff=lfs merge=lfs -text
+src/examples/folder2/butterfly_input.jpg filter=lfs diff=lfs merge=lfs -text
+src/examples/folder2/lemons_input.jpg filter=lfs diff=lfs merge=lfs -text
+src/examples/folder2/SampleVideo[[:space:]]720x480.mp4 filter=lfs diff=lfs merge=lfs -text
+src/examples/image_with_meta.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,13 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

README.md

@@ -1,12 +1,567 @@
----
-title: Gradio Mediagallery
-emoji: 🔥
-colorFrom: blue
-colorTo: pink
-sdk: gradio
-sdk_version: 5.49.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, gallery]
+title: gradio_mediagallery
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_mediagallery`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_mediagallery gradio_folderexplorer
+```
+
+## Usage
+
+```python
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Sequence[
+        np.ndarray | PIL.Image.Image | str | Path | tuple
+    ]
+    | Callable
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>file_types</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+
+<tr>
+<td align="left"><code>columns</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>2</code></td>
+<td align="left">Represents the number of images that should be shown in one row.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rows</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Represents the number of rows in the image grid.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | float | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>allow_preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, images in the gallery will be enlarged when they are clicked. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>selected_index</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.</td>
+</tr>
+
+<tr>
+<td align="left"><code>object_fit</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal[
+        "contain", "cover", "fill", "none", "scale-down"
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_share_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal["numpy", "pil", "filepath"]
+```
+
+</td>
+<td align="left"><code>"filepath"</code></td>
+<td align="left">The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_fullscreen_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>only_custom_metadata</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>500</code></td>
+<td align="left">The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").</td>
+</tr>
+</tbody></table>
+
+
+### 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` | This event is triggered when the MediaGallery preview is closed by the user |
+| `preview_open` | This event is 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. The event data will be a dictionary containing the 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, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+ def predict(
+     value: Any
+ ) -> list | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,108 @@
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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)

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1,2 @@
+gradio_mediagallery
+gradio_folderexplorer

space.py

@@ -0,0 +1,229 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MediaGallery': {'description': 'Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.\nIf used as an output, the user can click on individual images or videos to view them at a higher resolution.\n', 'members': {'__init__': {'value': {'type': 'Sequence[\n        np.ndarray | PIL.Image.Image | str | Path | tuple\n    ]\n    | Callable\n    | None', 'default': 'None', 'description': 'List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'file_types': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of file extensions or types of files to be uploaded (e.g. [\'image\', \'.mp4\']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.'}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}, 'columns': {'type': 'int | None', 'default': '2', 'description': 'Represents the number of images that should be shown in one row.'}, 'rows': {'type': 'int | None', 'default': 'None', 'description': 'Represents the number of rows in the image grid.'}, 'height': {'type': 'int | float | str | None', 'default': 'None', 'description': 'The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.'}, 'allow_preview': {'type': 'bool', 'default': 'True', 'description': 'If True, images in the gallery will be enlarged when they are clicked. Default is True.'}, 'preview': {'type': 'bool | None', 'default': 'None', 'description': 'If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.'}, 'selected_index': {'type': 'int | None', 'default': 'None', 'description': 'The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.'}, 'object_fit': {'type': 'Literal[\n        "contain", "cover", "fill", "none", "scale-down"\n    ]\n    | None', 'default': 'None', 'description': 'CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".'}, 'show_share_button': {'type': 'bool | None', 'default': 'None', 'description': 'If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}, 'show_download_button': {'type': 'bool | None', 'default': 'True', 'description': 'If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.'}, 'type': {'type': 'Literal["numpy", "pil", "filepath"]', 'default': '"filepath"', 'description': 'The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.'}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}, 'only_custom_metadata': {'type': 'bool', 'default': 'True', 'description': 'If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.'}, 'popup_metadata_width': {'type': 'int | str', 'default': '500', 'description': 'The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").'}}, 'postprocess': {'value': {'type': 'list | None', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'select': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is closed by the user'}, 'preview_open': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is opened by the user'}, 'load_metadata': {'type': None, 'default': None, 'description': "Triggered when the user clicks the 'Load Metadata' button in the metadata popup. The event data will be a dictionary containing the image metadata."}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MediaGallery': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_mediagallery`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_mediagallery/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_mediagallery"></a>  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_mediagallery
+```
+
+## Usage
+
+```python
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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)
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MediaGallery`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MediaGallery"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MediaGallery"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### 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 input:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As output:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+def predict(
+    value: Any
+) -> list | None:
+    return value
+```
+""", elem_classes=["md-custom", "MediaGallery-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MediaGallery: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,13 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Debugger: Current File",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal",
+            "justMyCode": false
+        },
+        {
+            "name": "Gradio dev (Python attach)",
+            "type": "debugpy",
+            "request": "attach",
+            "processId": "${command:pickProcess}",
+            "justMyCode": false
+        },
+        {
+            "name": "Gradio dev (Svelte attach)",
+            "type": "chrome",
+            "request": "attach",
+            "port": 9222,
+        }
+    ]
+}

src/README.md

@@ -0,0 +1,567 @@
+---
+tags: [gradio-custom-component, gallery]
+title: gradio_mediagallery
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_mediagallery`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_mediagallery gradio_folderexplorer
+```
+
+## Usage
+
+```python
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Sequence[
+        np.ndarray | PIL.Image.Image | str | Path | tuple
+    ]
+    | Callable
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>file_types</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+
+<tr>
+<td align="left"><code>columns</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>2</code></td>
+<td align="left">Represents the number of images that should be shown in one row.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rows</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Represents the number of rows in the image grid.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | float | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>allow_preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, images in the gallery will be enlarged when they are clicked. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>selected_index</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.</td>
+</tr>
+
+<tr>
+<td align="left"><code>object_fit</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal[
+        "contain", "cover", "fill", "none", "scale-down"
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_share_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal["numpy", "pil", "filepath"]
+```
+
+</td>
+<td align="left"><code>"filepath"</code></td>
+<td align="left">The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_fullscreen_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>only_custom_metadata</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>500</code></td>
+<td align="left">The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").</td>
+</tr>
+</tbody></table>
+
+
+### 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` | This event is triggered when the MediaGallery preview is closed by the user |
+| `preview_open` | This event is 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. The event data will be a dictionary containing the 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, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+ def predict(
+     value: Any
+ ) -> list | None:
+     return value
+ ```
+ 

src/README_TEMPLATE.md

@@ -0,0 +1,565 @@
+---
+tags: [gradio-custom-component, gallery]
+title: gradio_mediagallery
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_mediagallery`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_mediagallery gradio_folderexplorer
+```
+
+## Usage
+
+```python
+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 extract_metadata, transfer_metadata
+import os
+
+
+
+# --- Configuration Constants ---
+ROOT_DIR_PATH = "./examples" # Use uma pasta com imagens com metadados para teste
+
+# --- Event Callback Function ---
+
+# Esta função é chamada quando o evento `load_metadata` é disparado do frontend.
+def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
+    """
+    Processes image metadata by calling the agnostic `transfer_metadata` helper.
+    """
+    if not image_data or not hasattr(image_data, "_data"):
+        return [gr.skip()] * len(output_fields)
+
+    # Call the agnostic helper function to do the heavy lifting.
+    return transfer_metadata(
+        output_fields=output_fields,
+        metadata=image_data._data,      
+        remove_prefix_from_keys=True
+    )
+
+# --- UI Layout and Logic ---
+
+with gr.Blocks() as demo:
+    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):
+            # Usando nosso MediaGallery customizado
+            gallery = MediaGallery(
+                label="Media in Folder",
+                columns=6,
+                height="auto",
+                preview=False,
+                show_download_button=False,
+                only_custom_metadata=False, # Agora mostra todos os metadados
+                popup_metadata_width="40%",  # Popup mais largo
+                
+            )
+
+    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 ---
+
+    # Evento para popular a galeria quando a pasta muda
+    folder_explorer.change(
+        fn=load_media_from_folder,
+        inputs=folder_explorer,
+        outputs=gallery
+    )
+    
+    # Evento para popular a galeria no carregamento inicial
+    demo.load(
+        fn=load_media_from_folder,
+        inputs=folder_explorer,
+        outputs=gallery
+    )
+    
+    output_fields = [
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+
+    # --- NOVO EVENTO DE METADADOS ---
+    # Liga o evento `load_metadata` do nosso MediaGallery à função de callback.
+    gallery.load_metadata(
+        fn=handle_load_metadata,
+        inputs=None, # O dado vem do payload do evento, não de um input explícito.
+        outputs=output_fields
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+```
+
+## `MediaGallery`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Sequence[
+        np.ndarray | PIL.Image.Image | str | Path | tuple
+    ]
+    | Callable
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>file_types</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+
+<tr>
+<td align="left"><code>columns</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>2</code></td>
+<td align="left">Represents the number of images that should be shown in one row.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rows</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Represents the number of rows in the image grid.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | float | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>allow_preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, images in the gallery will be enlarged when they are clicked. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>selected_index</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.</td>
+</tr>
+
+<tr>
+<td align="left"><code>object_fit</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal[
+        "contain", "cover", "fill", "none", "scale-down"
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_share_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal["numpy", "pil", "filepath"]
+```
+
+</td>
+<td align="left"><code>"filepath"</code></td>
+<td align="left">The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_fullscreen_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.</td>
+</tr>
+
+<tr>
+<td align="left"><code>only_custom_metadata</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>500</code></td>
+<td align="left">The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").</td>
+</tr>
+</tbody></table>
+
+
+### 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` | This event is triggered when the MediaGallery preview is closed by the user |
+| `preview_open` | This event is 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. The event data will be a dictionary containing the 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, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+ def predict(
+     value: Any
+ ) -> list | None:
+     return value
+ ```
+ 

src/backend/gradio_mediagallery/__init__.py

@@ -0,0 +1,4 @@
+
+from .mediagallery import MediaGallery
+
+__all__ = ['MediaGallery']

src/backend/gradio_mediagallery/helpers.py

@@ -0,0 +1,315 @@
+from dataclasses import fields, is_dataclass
+import os
+import numpy as np
+from pathlib import Path
+from typing import Any, Dict, List, Optional, Type
+from PIL import Image, PngImagePlugin, ExifTags
+
+def infer_type(s: str):
+    """
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
+
+    Args:
+        s: The input string to be converted.
+
+    Returns:
+        The converted value (int, float, bool) or the original string.
+    """
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
+    
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
+
+def build_path_to_metadata_key_map(cls: Type, prefix_list: List[str]) -> Dict[str, str]:
+    """
+    Builds a map from a dataclass field path (e.g., 'image_settings.model') to the
+    expected key in the metadata dictionary (e.g., 'Image Settings - Model').
+    """
+    path_map = {}
+    if not is_dataclass(cls):
+        return {}
+
+    for f in fields(cls):
+        current_path = f.name
+        
+        if is_dataclass(f.type):
+            parent_label = f.metadata.get("label", f.name.replace("_", " ").title())
+            new_prefix_list = prefix_list + [parent_label]
+            nested_map = build_path_to_metadata_key_map(f.type, new_prefix_list)
+            for nested_path, metadata_key in nested_map.items():
+                path_map[f"{current_path}.{nested_path}"] = metadata_key
+        else:
+            label = f.metadata.get("label", f.name.replace("_", " ").title())
+            full_prefix = " - ".join(prefix_list)
+            metadata_key = f"{full_prefix} - {label}" if full_prefix else label
+            path_map[current_path] = metadata_key
+            
+    return path_map
+
+def extract_metadata(image_data: str | Path | Image.Image | np.ndarray | None, only_custom_metadata: bool = True) -> Dict[str, Any]:
+    """
+    Extracts metadata from an image.
+
+    Args:
+        image_data: Image data as a filepath, Path, PIL Image, NumPy array, or None.
+        only_custom_metadata: If True, excludes technical metadata (e.g., ImageWidth, ImageHeight). Defaults to True.
+
+    Returns:
+        Dictionary of extracted metadata. Returns empty dictionary if no metadata is available or extraction fails.
+    """
+    if not image_data:
+        return {}
+
+    try:
+        # Convert image_data to PIL.Image
+        if isinstance(image_data, (str, Path)):
+            image = Image.open(image_data)
+        elif isinstance(image_data, np.ndarray):
+            image = Image.fromarray(image_data)
+        elif isinstance(image_data, Image.Image):
+            image = image_data
+        elif hasattr(image_data, 'path'):  # For ImageMetaData
+            image = Image.open(image_data.path)
+        else:
+            return {}
+
+        decoded_meta = {}
+        if image.format == "PNG":
+            if not only_custom_metadata:
+                decoded_meta["ImageWidth"] = image.width
+                decoded_meta["ImageHeight"] = image.height
+            metadata = image.info
+            if metadata:
+                for key, value in metadata.items():
+                    if isinstance(value, bytes):
+                        value = value.decode(errors='ignore')
+                    decoded_meta[str(key)] = value
+        else:
+            exif_data = image.getexif()
+            if exif_data:
+                for tag_id, value in exif_data.items():
+                    tag = ExifTags.TAGS.get(tag_id, tag_id)
+                    if isinstance(value, bytes):
+                        value = value.decode(errors='ignore')
+                    decoded_meta[str(tag)] = value
+            if not only_custom_metadata:
+                decoded_meta["ImageWidth"] = image.width
+                decoded_meta["ImageHeight"] = image.height
+
+        return decoded_meta
+    except Exception:
+        return {}
+
+def add_metadata(image_data: str | Path | Image.Image | np.ndarray, save_path: str, metadata: Dict[str, Any]) -> bool:
+    """
+    Adds metadata to an image and saves it to the specified path.
+
+    Args:
+        image_data: Image data as a filepath, Path, PIL Image, or NumPy array.
+        save_path: Filepath where the modified image will be saved.
+        metadata: Dictionary of metadata to add to the image.
+
+    Returns:
+        True if metadata was added and image was saved successfully, False otherwise.
+    """
+    try:
+        if not bool(save_path):
+            return False        
+        
+        # Convert image_data to PIL.Image
+        if isinstance(image_data, (str, Path)):
+            image = Image.open(image_data)
+        elif isinstance(image_data, np.ndarray):
+            image = Image.fromarray(image_data)
+        elif isinstance(image_data, Image.Image):
+            image = image_data
+        elif hasattr(image_data, 'path'):  # For ImageMetaData
+            image = Image.open(image_data.path)
+        else:
+            return False
+
+        _, ext = os.path.splitext(save_path)
+        image_copy = image.copy()
+        
+        if (image.format if image.format is not None else ext.replace('.','').upper()) == "PNG":
+            meta = None
+            if metadata:
+                meta = PngImagePlugin.PngInfo()
+                for key, value in metadata.items():
+                    meta.add_text(str(key), str(value))
+                image_copy.info.update(metadata)  # For reference, but requires pnginfo when saving
+            image_copy.save(save_path, pnginfo=meta)
+        else:
+            if metadata:
+                exif = image_copy.getexif() or Image.Exif()
+                for key, value in metadata.items():
+                    tag_id = next((k for k, v in ExifTags.TAGS.items() if v == key), None)
+                    if tag_id:
+                        exif[tag_id] = value
+                image_copy.exif = exif
+            image_copy.save(save_path)    
+        return True
+    except Exception:
+        return False
+
+def transfer_metadata(
+    output_fields: List[Any], 
+    metadata: Dict[str, Any],
+    propertysheet_map: Optional[Dict[int, Dict[str, Any]]] = None,
+    gradio_component_map: Optional[Dict[int, str]] = None,
+    remove_prefix_from_keys: bool = False
+) -> List[Any]:
+    """
+    Maps a flat metadata dictionary to a list of Gradio UI components, with
+    flexible and powerful matching logic for all component types.
+
+    This function is UI-agnostic. For PropertySheets, it uses the `propertysheet_map`
+    to reconstruct nested dataclass instances. It intelligently builds the expected
+    metadata keys by interpreting the `prefixes` list: strings found as keys in the
+    `metadata` are replaced by their values, while other strings are used literally.
+
+    For standard Gradio components, it uses a three-tiered priority system:
+    1.  **Explicit Mapping (Highest Priority):** If `gradio_component_map` is provided,
+        it uses the specified metadata key for a given component ID.
+    2.  **Base Label Matching:** If `remove_prefix_from_keys=True` and no explicit map
+        is found, it matches the component's `.label` against "base" (prefix-stripped)
+        metadata keys.
+    3.  **Exact Label Matching (Default):** Otherwise, it attempts an exact match
+        between the component's `.label` and a metadata key.
+
+    Args:
+        output_fields (List[Any]): The list of Gradio components to be updated.
+        metadata (Dict[str, Any]): The flat dictionary of metadata from an image.
+        propertysheet_map (Optional[Dict[int, Dict[str, Any]]]): 
+            A map from a PropertySheet's `id()` to its configuration dict, which
+            should contain its `type` and a list of `prefixes`.
+        gradio_component_map (Optional[Dict[int, str]]):
+            An optional map from a standard component's `id()` to the exact
+            metadata key that should populate it.
+        remove_prefix_from_keys (bool): If True, enables fallback matching
+            by stripping prefixes from metadata keys for standard components.
+
+    Returns:
+        List[Any]: A list of `gr.update` or `gr.skip()` objects.
+    """
+    if propertysheet_map is None: propertysheet_map = {}
+    if gradio_component_map is None: gradio_component_map = {}
+        
+    output_values = [None] * len(output_fields)
+    component_to_index = {id(comp): i for i, comp in enumerate(output_fields)}
+
+    # Pre-process metadata to create a map of base labels if needed.
+    base_label_map = {}
+    if remove_prefix_from_keys:
+        base_label_map = {key.rsplit(' - ', 1)[-1]: value for key, value in metadata.items()}
+    
+    for component in output_fields:
+        comp_id = id(component)
+        output_index = component_to_index.get(comp_id)
+        if output_index is None:
+            continue
+            
+        # --- Logic for PropertySheets ---
+        if comp_id in propertysheet_map:
+            sheet_info = propertysheet_map[comp_id]
+            dc_type = sheet_info.get("type")
+            prefix_definitions = sheet_info.get("prefixes", [])
+        
+            # Build the list of actual prefix strings by interpreting the definitions.
+            prefix_values = []
+            for p_def in prefix_definitions:
+                # If the prefix definition is a key in the metadata, use its value.
+                if p_def in metadata:
+                    prefix_values.append(str(metadata[p_def]))
+                # Otherwise, treat it as a literal string.
+                else:
+                    prefix_values.append(p_def)
+            
+            prefix_values = [p for p in prefix_values if p]
+
+            if not dc_type or not is_dataclass(dc_type):
+                continue
+            
+            # Build the map from the dataclass structure to the expected full metadata keys.
+            path_to_key_map = build_path_to_metadata_key_map(dc_type, prefix_values)
+            
+            # Get the base instance to start populating.
+            instance_to_populate = getattr(component, '_dataclass_value', dc_type())
+            if not is_dataclass(instance_to_populate):
+                 instance_to_populate = dc_type()
+
+            # Populate the instance by iterating through the path map.
+            for path, metadata_key in path_to_key_map.items():
+                if metadata_key in metadata:
+                    value_from_meta = metadata[metadata_key]
+                    
+                    parts = path.split('.')
+                    obj_to_set = instance_to_populate
+                    try:
+                        for part in parts[:-1]:
+                            obj_to_set = getattr(obj_to_set, part)
+                        
+                        final_field_name = parts[-1]                        
+                        converted_value = infer_type(value_from_meta)                           
+                        setattr(obj_to_set, final_field_name, converted_value)
+                    except (AttributeError, KeyError, ValueError, TypeError) as e:
+                        print(f"Warning (transfer_metadata): Could not set value for path '{path}'. Error: {e}")
+            
+            output_values[output_index] = instance_to_populate
+            
+        # --- Unified Logic for Standard Gradio Components ---
+        else:
+            value_to_set = None
+            
+            # Priority 1: Check for an explicit mapping via gradio_component_map.
+            if comp_id in gradio_component_map:
+                metadata_key = gradio_component_map[comp_id]
+                if metadata_key in metadata:
+                    value_to_set = metadata[metadata_key]
+            
+            # If no explicit mapping was found, proceed to label-based matching.
+            if value_to_set is None:
+                label = getattr(component, 'label', None)
+                if label:
+                    # Priority 2: Check for a base label match if the flag is set.
+                    if remove_prefix_from_keys and label in base_label_map:
+                        value_to_set = base_label_map[label]
+                    # Priority 3: Fallback to an exact label match.
+                    elif label in metadata:
+                        value_to_set = metadata[label]
+
+            # If a value was found by any method, create the update object.
+            if value_to_set is not None:
+                output_values[output_index] = infer_type(value_to_set)
+    
+    return output_values

src/backend/gradio_mediagallery/mediagallery.py

@@ -0,0 +1,281 @@
+"""gr.Gallery() component."""
+
+from __future__ import annotations
+from collections.abc import Sequence
+from concurrent.futures import ThreadPoolExecutor
+from pathlib import Path
+from typing import (
+    TYPE_CHECKING,
+    Any,
+    Callable,
+    Literal,
+    Union,
+)
+from urllib.parse import urlparse
+import PIL.Image
+import numpy as np
+from gradio_client import handle_file, utils as client_utils
+from gradio_client.utils import is_http_url_like
+from gradio import processing_utils, utils
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel, GradioRootModel, ImageData
+from gradio.events import EventListener, Events # Remova EventListener se não for usado
+# Remova todas as importações e classes relacionadas à árvore (TreeNode, JsonData, etc.)
+
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+# --- DEFINIÇÕES DE MODELO SIMPLIFICADAS ---
+
+class GalleryImage(GradioModel):
+    image: ImageData
+    caption: str | None = None
+
+class GalleryVideo(GradioModel):
+    video: FileData
+    caption: str | None = None
+
+class GalleryData(GradioRootModel): # Voltamos a usar GradioRootModel
+    root: list[Union[GalleryImage, GalleryVideo]]
+
+class MediaGallery(Component):
+    """
+    Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.
+    If used as an output, the user can click on individual images or videos to view them at a higher resolution.
+
+    Demos: fake_gan, gif_maker
+    """
+
+    EVENTS = [
+        Events.select,      
+        Events.change,
+        Events.delete,
+        EventListener(
+            "preview_close",
+            doc="This event is triggered when the MediaGallery preview is closed by the user",
+        ),
+        EventListener(
+            "preview_open",
+            doc="This event is triggered when the MediaGallery preview is opened by the user",
+        ),
+        EventListener(
+            "load_metadata",
+            doc="Triggered when the user clicks the 'Load Metadata' button in the metadata popup. The event data will be a dictionary containing the image metadata.",
+        ),
+    ]
+
+    data_model = GalleryData
+
+    def __init__(
+        self,
+        value: (
+            Sequence[np.ndarray | PIL.Image.Image | str | Path | tuple]
+            | Callable
+            | None
+        ) = None,
+        *,       
+        file_types: list[str] | None = None,
+        label: str | I18nData | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool | Literal["hidden"] = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = "value",
+        columns: int | None = 2,
+        rows: int | None = None,
+        height: int | float | str | None = None,
+        allow_preview: bool = True,
+        preview: bool | None = None,
+        selected_index: int | None = None,
+        object_fit: (
+            Literal["contain", "cover", "fill", "none", "scale-down"] | None
+        ) = None,
+        show_share_button: bool | None = None,
+        show_download_button: bool | None = True,
+        interactive: bool | None = None,
+        type: Literal["numpy", "pil", "filepath"] = "filepath",
+        show_fullscreen_button: bool = True,
+        only_custom_metadata: bool = True,
+        popup_metadata_width: int | str = 500        
+    ):
+        """
+        Parameters:
+            value: List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
+            format: Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library.
+            file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            visible: If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.
+            preserved_by_key: A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.
+            columns: Represents the number of images that should be shown in one row.
+            rows: Represents the number of rows in the image grid.
+            height: The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.
+            allow_preview: If True, images in the gallery will be enlarged when they are clicked. Default is True.
+            preview: If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.
+            selected_index: The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.
+            object_fit: CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".
+            show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            show_download_button: If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.
+            interactive: If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.
+            type: The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.
+            show_fullscreen_button: If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            only_custom_metadata: If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.
+            popup_metadata_width: The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").           
+        """     
+        self.columns = columns
+        self.rows = rows
+        self.height = height
+        self.preview = preview
+        self.object_fit = object_fit
+        self.allow_preview = allow_preview
+        self.show_download_button = (
+            (utils.get_space() is not None)
+            if show_download_button is None
+            else show_download_button
+        )
+        self.selected_index = selected_index
+        if type not in ["numpy", "pil", "filepath"]:
+            raise ValueError(
+                f"Invalid type: {type}. Must be one of ['numpy', 'pil', 'filepath']"
+            )
+        self.type = type
+        self.show_fullscreen_button = show_fullscreen_button
+        self.file_types = file_types
+
+        self.only_custom_metadata = only_custom_metadata
+        self.popup_metadata_width = popup_metadata_width
+                
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+            value=value,
+            interactive=interactive,
+        )
+        self._value_description = f"a list of {'string filepaths' if type == 'filepath' else 'numpy arrays' if type == 'numpy' else 'PIL images'}"
+
+    def preprocess(self, payload: GalleryData  | None) -> Any:
+        if payload is None:
+            return None
+        return [
+            (item.video.path if isinstance(item, GalleryVideo) else item.image.path, item.caption)
+            for item in payload.root
+        ] # Extrai os dados do wrapper
+
+    def postprocess(
+        self,
+        value: list | None,
+    ) -> GalleryData: # Assinatura está correta: retorna um dicionário
+        
+        if value is None:
+            return GalleryData(root=[])
+        
+        if isinstance(value, str):
+            raise ValueError(
+                "The `value` passed into `gr.Gallery` must be a list of images or videos, or list of (media, caption) tuples."
+            )
+            
+        output_items = []
+
+        def _save_item(item):
+            img, caption = (item, None) if not isinstance(item, (tuple, list)) else item
+
+            # Lógica para extrair nome original (importante para nossa UI)
+            orig_name = None
+            if hasattr(img, 'filename') and img.filename:
+                orig_name = Path(img.filename).name
+
+            # Lógica de salvar no cache e preparar dados
+            if isinstance(img, np.ndarray):
+                file = processing_utils.save_img_array_to_cache(img, cache_dir=self.GRADIO_CACHE, format="png")
+                file_path = str(utils.abspath(file))
+                url = None
+            elif isinstance(img, PIL.Image.Image):
+                file = processing_utils.save_pil_to_cache(img, cache_dir=self.GRADIO_CACHE, format=str(img.format).lower())
+                file_path = str(utils.abspath(file))
+                url = None
+            elif isinstance(img, (str, Path)):
+                file_path = str(img)
+                if not orig_name:
+                    orig_name = Path(file_path).name
+                url = file_path if is_http_url_like(file_path) else None
+            else:
+                raise ValueError(f"Cannot process type: {type(img)}")
+
+            mime_type = client_utils.get_mimetype(file_path)
+
+            if mime_type and "video" in mime_type:
+                file = processing_utils.save_file_to_cache(img, cache_dir=self.GRADIO_CACHE)
+                file_path = str(utils.abspath(file))
+                return GalleryVideo(
+                    video=FileData(path=file_path, url=url, orig_name=orig_name, mime_type=mime_type),
+                    caption=caption
+                )
+            else:
+                return GalleryImage(
+                    image=ImageData(path=file_path, url=url, orig_name=orig_name, mime_type=mime_type),
+                    caption=caption
+                )
+
+        with ThreadPoolExecutor() as executor:
+            for item in executor.map(_save_item, value):
+                if item:
+                    output_items.append(item)
+
+        return GalleryData(root=output_items)
+
+    @staticmethod
+    def convert_to_type(img: str, type: Literal["filepath", "numpy", "pil"]):
+        if type == "filepath":
+            return img
+        else:
+            converted_image = PIL.Image.open(img)
+            if type == "numpy":
+                converted_image = np.array(converted_image)
+            return converted_image
+
+    def example_payload(self) -> Any:
+        return [
+            {
+                "image": handle_file(
+                    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+                )
+            },
+        ]
+
+    def example_value(self) -> Any:
+        return [
+            "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+        ]

src/backend/gradio_mediagallery/templates/component/assets/worker-BAOIWoxA.js

@@ -0,0 +1 @@
+(function(){"use strict";const i="https://unpkg.com/@ffmpeg/core@0.12.9/dist/umd/ffmpeg-core.js";var E;(function(t){t.LOAD="LOAD",t.EXEC="EXEC",t.FFPROBE="FFPROBE",t.WRITE_FILE="WRITE_FILE",t.READ_FILE="READ_FILE",t.DELETE_FILE="DELETE_FILE",t.RENAME="RENAME",t.CREATE_DIR="CREATE_DIR",t.LIST_DIR="LIST_DIR",t.DELETE_DIR="DELETE_DIR",t.ERROR="ERROR",t.DOWNLOAD="DOWNLOAD",t.PROGRESS="PROGRESS",t.LOG="LOG",t.MOUNT="MOUNT",t.UNMOUNT="UNMOUNT"})(E||(E={}));const f=new Error("unknown message type"),a=new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),u=new Error("failed to import ffmpeg-core.js");let r;const O=async({coreURL:t,wasmURL:n,workerURL:e})=>{const o=!r;try{t||(t=i),importScripts(t)}catch{if((!t||t===i)&&(t=i.replace("/umd/","/esm/")),self.createFFmpegCore=(await import(t)).default,!self.createFFmpegCore)throw u}const s=t,c=n||t.replace(/.js$/g,".wasm"),p=e||t.replace(/.js$/g,".worker.js");return r=await self.createFFmpegCore({mainScriptUrlOrBlob:`${s}#${btoa(JSON.stringify({wasmURL:c,workerURL:p}))}`}),r.setLogger(R=>self.postMessage({type:E.LOG,data:R})),r.setProgress(R=>self.postMessage({type:E.PROGRESS,data:R})),o},m=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.exec(...t);const e=r.ret;return r.reset(),e},l=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.ffprobe(...t);const e=r.ret;return r.reset(),e},D=({path:t,data:n})=>(r.FS.writeFile(t,n),!0),S=({path:t,encoding:n})=>r.FS.readFile(t,{encoding:n}),I=({path:t})=>(r.FS.unlink(t),!0),L=({oldPath:t,newPath:n})=>(r.FS.rename(t,n),!0),N=({path:t})=>(r.FS.mkdir(t),!0),A=({path:t})=>{const n=r.FS.readdir(t),e=[];for(const o of n){const s=r.FS.stat(`${t}/${o}`),c=r.FS.isDir(s.mode);e.push({name:o,isDir:c})}return e},k=({path:t})=>(r.FS.rmdir(t),!0),w=({fsType:t,options:n,mountPoint:e})=>{const o=t,s=r.FS.filesystems[o];return s?(r.FS.mount(s,n,e),!0):!1},b=({mountPoint:t})=>(r.FS.unmount(t),!0);self.onmessage=async({data:{id:t,type:n,data:e}})=>{const o=[];let s;try{if(n!==E.LOAD&&!r)throw a;switch(n){case E.LOAD:s=await O(e);break;case E.EXEC:s=m(e);break;case E.FFPROBE:s=l(e);break;case E.WRITE_FILE:s=D(e);break;case E.READ_FILE:s=S(e);break;case E.DELETE_FILE:s=I(e);break;case E.RENAME:s=L(e);break;case E.CREATE_DIR:s=N(e);break;case E.LIST_DIR:s=A(e);break;case E.DELETE_DIR:s=k(e);break;case E.MOUNT:s=w(e);break;case E.UNMOUNT:s=b(e);break;default:throw f}}catch(c){self.postMessage({id:t,type:E.ERROR,data:c.toString()});return}s instanceof Uint8Array&&o.push(s.buffer),self.postMessage({id:t,type:n,data:s},o)}})();

src/backend/gradio_mediagallery/templates/component/style.css

@@ -0,0 +1 @@
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-igqdol.svelte-igqdol{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-igqdol.svelte-igqdol{border-top-left-radius:0}label.float.svelte-igqdol.svelte-igqdol{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-igqdol.svelte-igqdol:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-igqdol.svelte-igqdol{display:none}span.svelte-igqdol.svelte-igqdol{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-igqdol.svelte-igqdol{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-igqdol.svelte-igqdol{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-igqdol span.svelte-igqdol{margin-left:var(--size-2);margin-right:0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}button.svelte-y0enk4{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid var(--border-color);padding:var(--spacing-xxs)}button.svelte-y0enk4:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-y0enk4{opacity:.5;box-shadow:none}button[disabled].svelte-y0enk4:hover{cursor:not-allowed}.padded.svelte-y0enk4{background:var(--bg-color)}button.svelte-y0enk4:hover,button.highlight.svelte-y0enk4{cursor:pointer;color:var(--color-accent)}.padded.svelte-y0enk4:hover{color:var(--block-label-text-color)}span.svelte-y0enk4{padding:0 1px;font-size:10px}div.svelte-y0enk4{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-y0enk4{width:10px;height:10px}.small.svelte-y0enk4{width:14px;height:14px}.medium.svelte-y0enk4{width:20px;height:20px}.large.svelte-y0enk4{width:22px;height:22px}.pending.svelte-y0enk4{animation:svelte-y0enk4-flash .5s infinite}@keyframes svelte-y0enk4-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-y0enk4{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.overlay.svelte-1pwzuub{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1pwzuub{display:none}.load-wrap.svelte-1pwzuub{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1pwzuub{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1pwzuub-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1pwzuub-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.gallery-container.svelte-1crbckc.svelte-1crbckc{position:relative;width:100%;height:100%}button.svelte-1crbckc.svelte-1crbckc{width:var(--size-full);height:var(--size-full);display:block;border-radius:var(--radius-lg)}.preview.svelte-1crbckc.svelte-1crbckc{display:flex;position:absolute;flex-direction:column;z-index:var(--layer-2);border-radius:calc(var(--block-radius) - var(--block-border-width));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:var(--size-full);height:var(--size-full)}.preview.svelte-1crbckc.svelte-1crbckc:focus-visible{outline:none}.preview.minimal.svelte-1crbckc.svelte-1crbckc{width:fit-content;height:fit-content}.preview.svelte-1crbckc.svelte-1crbckc:before{content:"";position:absolute;z-index:var(--layer-below);background:var(--background-fill-primary);opacity:.9;width:var(--size-full);height:var(--size-full)}.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:var(--size-80);max-height:65vh}@media (--screen-xl){.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:450px}}.media-container.svelte-1crbckc.svelte-1crbckc{height:calc(100% - var(--size-14));width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.media-container.svelte-1crbckc img,.media-container.svelte-1crbckc video{max-width:100%;max-height:100%;object-fit:contain}.thumbnails.svelte-1crbckc img{object-fit:cover;width:var(--size-full);height:var(--size-full)}.thumbnails.svelte-1crbckc svg{position:absolute;top:var(--size-2);left:var(--size-2);width:50%;height:50%;opacity:50%}.caption.svelte-1crbckc.svelte-1crbckc{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails.svelte-1crbckc.svelte-1crbckc{display:flex;position:absolute;bottom:0;justify-content:flex-start;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item.svelte-1crbckc.svelte-1crbckc{--ring-color:transparent;position:relative;box-shadow:inset 0 0 0 1px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item.svelte-1crbckc.svelte-1crbckc:hover{--ring-color:var(--color-accent);border-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected.svelte-1crbckc.svelte-1crbckc{--ring-color:var(--color-accent);border-color:var(--color-accent)}.thumbnail-item.svelte-1crbckc svg{position:absolute;top:50%;left:50%;width:50%;height:50%;opacity:50%;transform:translate(-50%,-50%)}.thumbnail-item.svelte-1crbckc video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-small.svelte-1crbckc.svelte-1crbckc{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected.svelte-1crbckc.svelte-1crbckc{--ring-color:var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.grid-wrap.svelte-1crbckc.svelte-1crbckc{position:relative;padding:var(--size-2);overflow-y:auto}.grid-wrap.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:var(--size-80);max-height:65vh}.grid-container.svelte-1crbckc.svelte-1crbckc{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.single-item-wrapper.svelte-1crbckc.svelte-1crbckc{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xxl);box-sizing:border-box}.single-item-wrapper.svelte-1crbckc .gallery-item-with-name.svelte-1crbckc{width:100%;height:100%;max-width:min(300px,80vw);max-height:min(320px,calc(80vh - var(--size-4)));display:flex;flex-direction:column;align-items:center}.single-item-wrapper.svelte-1crbckc .gallery-item.svelte-1crbckc{width:100%;height:100%;max-width:100%;max-height:100%}.single-item-wrapper.svelte-1crbckc .thumbnail-item.thumbnail-lg.svelte-1crbckc{display:flex!important;align-items:center!important;justify-content:center!important}.single-item-wrapper.svelte-1crbckc .thumbnail-filename.svelte-1crbckc{height:var(--size-4);line-height:var(--size-4)}.single-item-wrapper.svelte-1crbckc .thumbnail-lg.svelte-1crbckc>img,.single-item-wrapper.svelte-1crbckc .thumbnail-lg.svelte-1crbckc>video{object-fit:var(--object-fit)!important}.thumbnail-lg.svelte-1crbckc>img,.thumbnail-lg.svelte-1crbckc>video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg.svelte-1crbckc:hover .caption-label.svelte-1crbckc{opacity:.5}.caption-label.svelte-1crbckc.svelte-1crbckc{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.grid-wrap.minimal.svelte-1crbckc.svelte-1crbckc{padding:0}.gallery-item-with-name.svelte-1crbckc.svelte-1crbckc{display:flex;flex-direction:column;gap:var(--size-1);width:100%;height:100%}.thumbnail-filename.svelte-1crbckc.svelte-1crbckc{font-size:var(--text-xs);color:var(--body-text-color);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--size-1)}.gallery-item.svelte-1crbckc.svelte-1crbckc{position:relative;width:100%;height:100%}.metadata-popup.svelte-1crbckc.svelte-1crbckc{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;max-width:min(90%,600px);max-height:min(50vh,calc(100% - 2rem));min-height:200px;display:flex;flex-direction:column;pointer-events:auto}.popup-content.svelte-1crbckc.svelte-1crbckc{padding:1rem;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow-y:auto;position:relative}.close-button.svelte-1crbckc.svelte-1crbckc{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.25rem;cursor:pointer;z-index:20;color:var(--body-text-color);padding:.25rem;line-height:1;width:24px;height:24px;text-align:center}.popup-title.svelte-1crbckc.svelte-1crbckc{font-weight:700;margin:0 0 1rem;flex-shrink:0;padding-right:2.5rem}.metadata-table-container.svelte-1crbckc.svelte-1crbckc{flex-grow:1;overflow-y:auto;max-height:calc(100% - 5rem);min-height:0;margin-bottom:1rem}.metadata-table.svelte-1crbckc.svelte-1crbckc{width:100%;border-collapse:collapse;table-layout:auto}.metadata-label.svelte-1crbckc.svelte-1crbckc{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:35%}.metadata-value.svelte-1crbckc.svelte-1crbckc{text-align:left;padding:.5rem;white-space:pre-wrap;word-break:break-all;vertical-align:top}.load-metadata-button.svelte-1crbckc.svelte-1crbckc{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center;flex-shrink:0}.load-metadata-button.svelte-1crbckc.svelte-1crbckc:hover{background-color:var(--button-primary-background-fill-hover)}.no-metadata-message.svelte-1crbckc.svelte-1crbckc{flex-grow:1;display:flex;align-items:center;justify-content:center;color:var(--body-text-color-subdued)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-3);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);overflow:hidden;pointer-events:none}.wrap.center.svelte-vusapu.svelte-vusapu{top:0;right:0;left:0}.wrap.default.svelte-vusapu.svelte-vusapu{top:0;right:0;bottom:0;left:0}.hide.svelte-vusapu.svelte-vusapu{opacity:0;pointer-events:none}.generating.svelte-vusapu.svelte-vusapu{animation:svelte-vusapu-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-vusapu-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-vusapu.svelte-vusapu{background:none}@keyframes svelte-vusapu-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-vusapu-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-vusapu.svelte-vusapu{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-vusapu.svelte-vusapu{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-vusapu.svelte-vusapu{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-vusapu.svelte-vusapu{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-vusapu.svelte-vusapu{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-vusapu.svelte-vusapu{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-vusapu.svelte-vusapu{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.validation-error.svelte-vusapu.svelte-vusapu{pointer-events:auto;color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font);position:absolute;background:var(--error-background-fill);top:0;right:0;z-index:var(--layer-3);padding:var(--size-1) var(--size-2);font-size:var(--text-md);text-align:center;border-bottom-left-radius:var(--radius-sm);border-bottom:1px solid var(--error-border-color);border-left:1px solid var(--error-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.minimal.svelte-vusapu.svelte-vusapu{pointer-events:none}.minimal.svelte-vusapu .progress-text.svelte-vusapu{background:var(--block-background-fill)}.border.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary)}.clear-status.svelte-vusapu.svelte-vusapu{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-je2isz{--toast-top:var(--size-4);display:flex;position:fixed;top:calc(var(--toast-top) + var(--size-4));right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-je2isz{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:global(*::-webkit-scrollbar){width:8px;height:8px;background-color:transparent}:global(*::-webkit-scrollbar-track){background:transparent;border-radius:10px}:global(*::-webkit-scrollbar-thumb){background-color:#8886;border-radius:10px;border:2px solid transparent;background-clip:content-box}:global(*::-webkit-scrollbar-thumb:hover){background-color:#888888b3}:global(html){scrollbar-width:thin;scrollbar-color:rgba(136,136,136,.7) transparent}.gallery-container{position:relative;width:100%;height:100%}button{width:var(--size-full);height:var(--size-full);display:block;border-radius:var(--radius-lg)}.preview{display:flex;position:absolute;flex-direction:column;z-index:var(--layer-2);border-radius:calc(var(--block-radius) - var(--block-border-width));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:var(--size-full);height:var(--size-full)}.preview:focus-visible{outline:none}.preview.minimal{width:fit-content;height:fit-content}.preview:before{content:"";position:absolute;z-index:var(--layer-below);background:var(--background-fill-primary);opacity:.9;width:var(--size-full);height:var(--size-full)}.fixed-height{min-height:var(--size-80);max-height:65vh}@media (--screen-xl){.fixed-height{min-height:450px}}.media-container{height:calc(100% - var(--size-14));width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.media-container :global(img),.media-container :global(video){max-width:100%;max-height:100%;object-fit:contain}.thumbnails :global(img){object-fit:cover;width:var(--size-full);height:var(--size-full)}.thumbnails :global(svg){position:absolute;top:var(--size-2);left:var(--size-2);width:50%;height:50%;opacity:50%}.caption{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails{display:flex;position:absolute;bottom:0;justify-content:flex-start;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item{--ring-color: transparent;position:relative;box-shadow:inset 0 0 0 1px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item:hover{--ring-color: var(--color-accent);border-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected{--ring-color: var(--color-accent);border-color:var(--color-accent)}.thumbnail-item :global(svg){position:absolute;top:50%;left:50%;width:50%;height:50%;opacity:50%;transform:translate(-50%,-50%)}.thumbnail-item :global(video){width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-small{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected{--ring-color: var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.grid-wrap{position:relative;padding:var(--size-2);overflow-y:auto}.grid-wrap.fixed-height{min-height:var(--size-80);max-height:65vh}.grid-container{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.single-item-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xxl);box-sizing:border-box}.single-item-wrapper .gallery-item-with-name{width:100%;height:100%;max-width:min(300px,80vw);max-height:min(320px,calc(80vh - var(--size-4)));display:flex;flex-direction:column;align-items:center}.single-item-wrapper .gallery-item{width:100%;height:100%;max-width:100%;max-height:100%}.single-item-wrapper .thumbnail-item.thumbnail-lg{display:flex!important;align-items:center!important;justify-content:center!important}.single-item-wrapper .thumbnail-filename{height:var(--size-4);line-height:var(--size-4)}.single-item-wrapper .thumbnail-lg>:global(img),.single-item-wrapper .thumbnail-lg>:global(video){object-fit:var(--object-fit)!important}.thumbnail-lg>:global(img),.thumbnail-lg>:global(video){width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg:hover .caption-label{opacity:.5}.caption-label{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.grid-wrap.minimal{padding:0}.gallery-item-with-name{display:flex;flex-direction:column;gap:var(--size-1);width:100%;height:100%}.thumbnail-filename{font-size:var(--text-xs);color:var(--body-text-color);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--size-1)}.gallery-item{position:relative;width:100%;height:100%}.metadata-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;max-width:min(90%,600px);max-height:min(50vh,calc(100% - 2rem));min-height:200px;display:flex;flex-direction:column;pointer-events:auto}.popup-content{padding:1rem;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow-y:auto;position:relative}.close-button{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.25rem;cursor:pointer;z-index:20;color:var(--body-text-color);padding:.25rem;line-height:1;width:24px;height:24px;text-align:center}.popup-title{font-weight:700;margin:0 0 1rem;flex-shrink:0;padding-right:2.5rem}.metadata-table-container{flex-grow:1;overflow-y:auto;max-height:calc(100% - 5rem);min-height:0;margin-bottom:1rem}.metadata-table{width:100%;border-collapse:collapse;table-layout:auto}.metadata-label{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:35%}.metadata-value{text-align:left;padding:.5rem;white-space:pre-wrap;word-break:break-all;vertical-align:top}.load-metadata-button{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center;flex-shrink:0}.load-metadata-button:hover{background-color:var(--button-primary-background-fill-hover)}.no-metadata-message{flex-grow:1;display:flex;align-items:center;justify-content:center;color:var(--body-text-color-subdued)}.container.svelte-1onbytl.svelte-1onbytl{border-radius:var(--radius-lg);overflow:hidden}.container.selected.svelte-1onbytl.svelte-1onbytl{border:2px solid var(--border-color-accent)}.images-wrapper.svelte-1onbytl.svelte-1onbytl{display:flex;gap:var(--spacing-sm)}.container.table.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);background:var(--background-fill-secondary)}.container.gallery.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;gap:0}.image-container.svelte-1onbytl.svelte-1onbytl{position:relative;flex-shrink:0}.container.table.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl:first-child{margin-left:0}.more-indicator.svelte-1onbytl.svelte-1onbytl{display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--border-color-primary)}.container.table.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8));margin-right:calc(-1 * var(--size-6))}.image-container.svelte-1onbytl img.svelte-1onbytl,.image-container.svelte-1onbytl video.svelte-1onbytl{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.caption.svelte-1onbytl.svelte-1onbytl{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:var(--spacing-xs);font-size:var(--text-xs);text-align:center;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.table.svelte-1onbytl .caption.svelte-1onbytl{display:none}

src/backend/gradio_mediagallery/templates/example/index.js

@@ -0,0 +1,342 @@
+const {
+  SvelteComponent: j,
+  append_hydration: d,
+  attr: f,
+  children: v,
+  claim_element: u,
+  claim_space: g,
+  claim_text: q,
+  destroy_each: G,
+  detach: o,
+  element: _,
+  empty: k,
+  ensure_array_like: E,
+  get_svelte_dataset: M,
+  init: O,
+  insert_hydration: h,
+  noop: I,
+  safe_not_equal: z,
+  set_data: A,
+  space: b,
+  src_url_equal: p,
+  text: P,
+  toggle_class: m
+} = window.__gradio__svelte__internal;
+function D(a, e, i) {
+  const s = a.slice();
+  return s[3] = e[i], s;
+}
+function V(a) {
+  let e, i, s = E(
+    /*value*/
+    a[0].slice(0, 3)
+  ), l = [];
+  for (let n = 0; n < s.length; n += 1)
+    l[n] = N(D(a, s, n));
+  let t = (
+    /*value*/
+    a[0].length > 3 && S()
+  );
+  return {
+    c() {
+      e = _("div");
+      for (let n = 0; n < l.length; n += 1)
+        l[n].c();
+      i = b(), t && t.c(), this.h();
+    },
+    l(n) {
+      e = u(n, "DIV", { class: !0 });
+      var r = v(e);
+      for (let c = 0; c < l.length; c += 1)
+        l[c].l(r);
+      i = g(r), t && t.l(r), r.forEach(o), this.h();
+    },
+    h() {
+      f(e, "class", "images-wrapper svelte-1onbytl");
+    },
+    m(n, r) {
+      h(n, e, r);
+      for (let c = 0; c < l.length; c += 1)
+        l[c] && l[c].m(e, null);
+      d(e, i), t && t.m(e, null);
+    },
+    p(n, r) {
+      if (r & /*value*/
+      1) {
+        s = E(
+          /*value*/
+          n[0].slice(0, 3)
+        );
+        let c;
+        for (c = 0; c < s.length; c += 1) {
+          const y = D(n, s, c);
+          l[c] ? l[c].p(y, r) : (l[c] = N(y), l[c].c(), l[c].m(e, i));
+        }
+        for (; c < l.length; c += 1)
+          l[c].d(1);
+        l.length = s.length;
+      }
+      /*value*/
+      n[0].length > 3 ? t || (t = S(), t.c(), t.m(e, null)) : t && (t.d(1), t = null);
+    },
+    d(n) {
+      n && o(e), G(l, n), t && t.d();
+    }
+  };
+}
+function B(a) {
+  let e, i, s, l, t = (
+    /*item*/
+    a[3].caption && C(a)
+  );
+  return {
+    c() {
+      e = _("div"), i = _("video"), l = b(), t && t.c(), this.h();
+    },
+    l(n) {
+      e = u(n, "DIV", { class: !0 });
+      var r = v(e);
+      i = u(r, "VIDEO", { src: !0, preload: !0, class: !0 }), v(i).forEach(o), l = g(r), t && t.l(r), r.forEach(o), this.h();
+    },
+    h() {
+      p(i.src, s = /*item*/
+      a[3].video.url) || f(i, "src", s), i.controls = !1, i.muted = !0, f(i, "preload", "metadata"), f(i, "class", "svelte-1onbytl"), f(e, "class", "image-container svelte-1onbytl");
+    },
+    m(n, r) {
+      h(n, e, r), d(e, i), d(e, l), t && t.m(e, null);
+    },
+    p(n, r) {
+      r & /*value*/
+      1 && !p(i.src, s = /*item*/
+      n[3].video.url) && f(i, "src", s), /*item*/
+      n[3].caption ? t ? t.p(n, r) : (t = C(n), t.c(), t.m(e, null)) : t && (t.d(1), t = null);
+    },
+    d(n) {
+      n && o(e), t && t.d();
+    }
+  };
+}
+function F(a) {
+  let e, i, s, l, t, n = (
+    /*item*/
+    a[3].caption && w(a)
+  );
+  return {
+    c() {
+      e = _("div"), i = _("img"), t = b(), n && n.c(), this.h();
+    },
+    l(r) {
+      e = u(r, "DIV", { class: !0 });
+      var c = v(e);
+      i = u(c, "IMG", { src: !0, alt: !0, class: !0 }), t = g(c), n && n.l(c), c.forEach(o), this.h();
+    },
+    h() {
+      p(i.src, s = /*item*/
+      a[3].image.url) || f(i, "src", s), f(i, "alt", l = /*item*/
+      a[3].caption || ""), f(i, "class", "svelte-1onbytl"), f(e, "class", "image-container svelte-1onbytl");
+    },
+    m(r, c) {
+      h(r, e, c), d(e, i), d(e, t), n && n.m(e, null);
+    },
+    p(r, c) {
+      c & /*value*/
+      1 && !p(i.src, s = /*item*/
+      r[3].image.url) && f(i, "src", s), c & /*value*/
+      1 && l !== (l = /*item*/
+      r[3].caption || "") && f(i, "alt", l), /*item*/
+      r[3].caption ? n ? n.p(r, c) : (n = w(r), n.c(), n.m(e, null)) : n && (n.d(1), n = null);
+    },
+    d(r) {
+      r && o(e), n && n.d();
+    }
+  };
+}
+function C(a) {
+  let e, i = (
+    /*item*/
+    a[3].caption + ""
+  ), s;
+  return {
+    c() {
+      e = _("span"), s = P(i), this.h();
+    },
+    l(l) {
+      e = u(l, "SPAN", { class: !0 });
+      var t = v(e);
+      s = q(t, i), t.forEach(o), this.h();
+    },
+    h() {
+      f(e, "class", "caption svelte-1onbytl");
+    },
+    m(l, t) {
+      h(l, e, t), d(e, s);
+    },
+    p(l, t) {
+      t & /*value*/
+      1 && i !== (i = /*item*/
+      l[3].caption + "") && A(s, i);
+    },
+    d(l) {
+      l && o(e);
+    }
+  };
+}
+function w(a) {
+  let e, i = (
+    /*item*/
+    a[3].caption + ""
+  ), s;
+  return {
+    c() {
+      e = _("span"), s = P(i), this.h();
+    },
+    l(l) {
+      e = u(l, "SPAN", { class: !0 });
+      var t = v(e);
+      s = q(t, i), t.forEach(o), this.h();
+    },
+    h() {
+      f(e, "class", "caption svelte-1onbytl");
+    },
+    m(l, t) {
+      h(l, e, t), d(e, s);
+    },
+    p(l, t) {
+      t & /*value*/
+      1 && i !== (i = /*item*/
+      l[3].caption + "") && A(s, i);
+    },
+    d(l) {
+      l && o(e);
+    }
+  };
+}
+function N(a) {
+  let e;
+  function i(t, n) {
+    if ("image" in /*item*/
+    t[3] && /*item*/
+    t[3].image) return F;
+    if ("video" in /*item*/
+    t[3] && /*item*/
+    t[3].video) return B;
+  }
+  let s = i(a), l = s && s(a);
+  return {
+    c() {
+      l && l.c(), e = k();
+    },
+    l(t) {
+      l && l.l(t), e = k();
+    },
+    m(t, n) {
+      l && l.m(t, n), h(t, e, n);
+    },
+    p(t, n) {
+      s === (s = i(t)) && l ? l.p(t, n) : (l && l.d(1), l = s && s(t), l && (l.c(), l.m(e.parentNode, e)));
+    },
+    d(t) {
+      t && o(e), l && l.d(t);
+    }
+  };
+}
+function S(a) {
+  let e, i = "…";
+  return {
+    c() {
+      e = _("div"), e.textContent = i, this.h();
+    },
+    l(s) {
+      e = u(s, "DIV", { class: !0, "data-svelte-h": !0 }), M(e) !== "svelte-1u6jrni" && (e.textContent = i), this.h();
+    },
+    h() {
+      f(e, "class", "more-indicator svelte-1onbytl");
+    },
+    m(s, l) {
+      h(s, e, l);
+    },
+    d(s) {
+      s && o(e);
+    }
+  };
+}
+function H(a) {
+  let e, i = (
+    /*value*/
+    a[0] && /*value*/
+    a[0].length > 0 && V(a)
+  );
+  return {
+    c() {
+      e = _("div"), i && i.c(), this.h();
+    },
+    l(s) {
+      e = u(s, "DIV", { class: !0 });
+      var l = v(e);
+      i && i.l(l), l.forEach(o), this.h();
+    },
+    h() {
+      f(e, "class", "container svelte-1onbytl"), m(
+        e,
+        "table",
+        /*type*/
+        a[1] === "table"
+      ), m(
+        e,
+        "gallery",
+        /*type*/
+        a[1] === "gallery"
+      ), m(
+        e,
+        "selected",
+        /*selected*/
+        a[2]
+      );
+    },
+    m(s, l) {
+      h(s, e, l), i && i.m(e, null);
+    },
+    p(s, [l]) {
+      /*value*/
+      s[0] && /*value*/
+      s[0].length > 0 ? i ? i.p(s, l) : (i = V(s), i.c(), i.m(e, null)) : i && (i.d(1), i = null), l & /*type*/
+      2 && m(
+        e,
+        "table",
+        /*type*/
+        s[1] === "table"
+      ), l & /*type*/
+      2 && m(
+        e,
+        "gallery",
+        /*type*/
+        s[1] === "gallery"
+      ), l & /*selected*/
+      4 && m(
+        e,
+        "selected",
+        /*selected*/
+        s[2]
+      );
+    },
+    i: I,
+    o: I,
+    d(s) {
+      s && o(e), i && i.d();
+    }
+  };
+}
+function J(a, e, i) {
+  let { value: s } = e, { type: l } = e, { selected: t = !1 } = e;
+  return a.$$set = (n) => {
+    "value" in n && i(0, s = n.value), "type" in n && i(1, l = n.type), "selected" in n && i(2, t = n.selected);
+  }, [s, l, t];
+}
+class K extends j {
+  constructor(e) {
+    super(), O(this, e, J, H, z, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  K as default
+};

src/backend/gradio_mediagallery/templates/example/style.css

@@ -0,0 +1 @@
+.container.svelte-1onbytl.svelte-1onbytl{border-radius:var(--radius-lg);overflow:hidden}.container.selected.svelte-1onbytl.svelte-1onbytl{border:2px solid var(--border-color-accent)}.images-wrapper.svelte-1onbytl.svelte-1onbytl{display:flex;gap:var(--spacing-sm)}.container.table.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);background:var(--background-fill-secondary)}.container.gallery.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;gap:0}.image-container.svelte-1onbytl.svelte-1onbytl{position:relative;flex-shrink:0}.container.table.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl:first-child{margin-left:0}.more-indicator.svelte-1onbytl.svelte-1onbytl{display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--border-color-primary)}.container.table.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8));margin-right:calc(-1 * var(--size-6))}.image-container.svelte-1onbytl img.svelte-1onbytl,.image-container.svelte-1onbytl video.svelte-1onbytl{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.caption.svelte-1onbytl.svelte-1onbytl{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:var(--spacing-xs);font-size:var(--text-xs);text-align:center;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.table.svelte-1onbytl .caption.svelte-1onbytl{display:none}

src/demo/app.py

@@ -0,0 +1,108 @@
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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)

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1,2 @@
+gradio_mediagallery
+gradio_folderexplorer

src/demo/space.py

@@ -0,0 +1,229 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MediaGallery': {'description': 'Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.\nIf used as an output, the user can click on individual images or videos to view them at a higher resolution.\n', 'members': {'__init__': {'value': {'type': 'Sequence[\n        np.ndarray | PIL.Image.Image | str | Path | tuple\n    ]\n    | Callable\n    | None', 'default': 'None', 'description': 'List of images or videos to display in the gallery by default. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'file_types': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of file extensions or types of files to be uploaded (e.g. [\'image\', \'.mp4\']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.'}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'If False, component will be hidden. If "hidden", component will be visually hidden and not take up space in the layout but still exist in the DOM'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}, 'columns': {'type': 'int | None', 'default': '2', 'description': 'Represents the number of images that should be shown in one row.'}, 'rows': {'type': 'int | None', 'default': 'None', 'description': 'Represents the number of rows in the image grid.'}, 'height': {'type': 'int | float | str | None', 'default': 'None', 'description': 'The height of the gallery component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more images are displayed than can fit in the height, a scrollbar will appear.'}, 'allow_preview': {'type': 'bool', 'default': 'True', 'description': 'If True, images in the gallery will be enlarged when they are clicked. Default is True.'}, 'preview': {'type': 'bool | None', 'default': 'None', 'description': 'If True, MediaGallery will start in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size. Only works if allow_preview is True.'}, 'selected_index': {'type': 'int | None', 'default': 'None', 'description': 'The index of the image that should be initially selected. If None, no image will be selected at start. If provided, will set MediaGallery to preview mode unless allow_preview is set to False.'}, 'object_fit': {'type': 'Literal[\n        "contain", "cover", "fill", "none", "scale-down"\n    ]\n    | None', 'default': 'None', 'description': 'CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".'}, 'show_share_button': {'type': 'bool | None', 'default': 'None', 'description': 'If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}, 'show_download_button': {'type': 'bool | None', 'default': 'True', 'description': 'If True, will show a download button in the corner of the selected image. If False, the icon does not appear. Default is True.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the gallery will be interactive, allowing the user to upload images. If False, the gallery will be static. Default is True.'}, 'type': {'type': 'Literal["numpy", "pil", "filepath"]', 'default': '"filepath"', 'description': 'The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned.'}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will show a fullscreen icon in the corner of the component that allows user to view the gallery in fullscreen mode. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.'}, 'only_custom_metadata': {'type': 'bool', 'default': 'True', 'description': 'If True, the metadata popup will filter out common technical EXIF data (like ImageWidth, ColorType, etc.), showing only custom or descriptive metadata.'}, 'popup_metadata_width': {'type': 'int | str', 'default': '500', 'description': 'The width of the metadata popup modal, specified in pixels (e.g., 500) or as a CSS string (e.g., "50%").'}}, 'postprocess': {'value': {'type': 'list | None', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'select': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is closed by the user'}, 'preview_open': {'type': None, 'default': None, 'description': 'This event is triggered when the MediaGallery preview is opened by the user'}, 'load_metadata': {'type': None, 'default': None, 'description': "Triggered when the user clicks the 'Load Metadata' button in the metadata popup. The event data will be a dictionary containing the image metadata."}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MediaGallery': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_mediagallery`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_mediagallery/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_mediagallery"></a>  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_mediagallery
+```
+
+## Usage
+
+```python
+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 extract_metadata, transfer_metadata
+import os
+
+# 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() 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)
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MediaGallery`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MediaGallery"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MediaGallery"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### 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 input:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As output:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+def predict(
+    value: Any
+) -> list | None:
+    return value
+```
+""", elem_classes=["md-custom", "MediaGallery-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MediaGallery: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/examples/folder2/SampleVideo 720x480.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:91a5373da22bc8f34aa5664588b4728f88eeddb42abbfff362c7eb822a2b94cb
+size 186695

src/frontend/Example.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { GalleryImage, GalleryVideo } from "./types";
+
+	export let value: (GalleryImage | GalleryVideo)[] | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class="container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{#if value && value.length > 0}
+		<div class="images-wrapper">
+			{#each value.slice(0, 3) as item}
+				{#if "image" in item && item.image}
+					<div class="image-container">
+						<img src={item.image.url} alt={item.caption || ""} />
+						{#if item.caption}
+							<span class="caption">{item.caption}</span>
+						{/if}
+					</div>
+				{:else if "video" in item && item.video}
+					<div class="image-container">
+						<video
+							src={item.video.url}
+							controls={false}
+							muted
+							preload="metadata"
+						/>
+						{#if item.caption}
+							<span class="caption">{item.caption}</span>
+						{/if}
+					</div>
+				{/if}
+			{/each}
+			{#if value.length > 3}
+				<div class="more-indicator">…</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+	}
+
+	.container.selected {
+		border: 2px solid var(--border-color-accent);
+	}
+
+	.images-wrapper {
+		display: flex;
+		gap: var(--spacing-sm);
+	}
+
+	.container.table .images-wrapper {
+		flex-direction: row;
+		align-items: center;
+		padding: var(--spacing-sm);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		background: var(--background-fill-secondary);
+	}
+
+	.container.gallery .images-wrapper {
+		flex-direction: row;
+		gap: 0;
+	}
+
+	.image-container {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.container.table .image-container {
+		width: var(--size-12);
+		height: var(--size-12);
+	}
+
+	.container.gallery .image-container {
+		width: var(--size-20);
+		height: var(--size-20);
+		margin-left: calc(-1 * var(--size-8));
+	}
+
+	.container.gallery .image-container:first-child {
+		margin-left: 0;
+	}
+
+	.more-indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--text-lg);
+		font-weight: bold;
+		color: var(--border-color-primary);
+	}
+
+	.container.table .more-indicator {
+		width: var(--size-12);
+		height: var(--size-12);
+	}
+
+	.container.gallery .more-indicator {
+		width: var(--size-20);
+		height: var(--size-20);
+		margin-left: calc(-1 * var(--size-8));
+		margin-right: calc(-1 * var(--size-6));
+	}
+
+	.image-container img,
+	.image-container video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: var(--radius-md);
+	}
+
+	.caption {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: var(--spacing-xs);
+		font-size: var(--text-xs);
+		text-align: center;
+		border-radius: 0 0 var(--radius-md) var(--radius-md);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.container.table .caption {
+		display: none;
+	}
+</style>

src/frontend/Gallery.css

@@ -0,0 +1,471 @@
+   :global(*::-webkit-scrollbar) {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+  }
+
+  :global(*::-webkit-scrollbar-track) {
+    background: transparent;
+    border-radius: 10px;
+  }
+
+  :global(*::-webkit-scrollbar-thumb) {
+    background-color: rgba(136, 136, 136, 0.4);
+    border-radius: 10px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  :global(*::-webkit-scrollbar-thumb:hover) {
+    background-color: rgba(136, 136, 136, 0.7);
+  }
+
+  /* Para Firefox */
+  :global(html) {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(136, 136, 136, 0.7) transparent;
+  }
+  
+ /**
+   * Styles for the gallery container, which holds the entire component.
+   */
+  .gallery-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  /**
+   * Styles for buttons to ensure they fill their container.
+   */
+  button {
+    width: var(--size-full);
+    height: var(--size-full);
+    display: block;
+    border-radius: var(--radius-lg);
+  }
+
+  /**
+   * Styles for the preview mode, displaying a selected media item.
+   */
+  .preview {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    z-index: var(--layer-2);
+    border-radius: calc(var(--block-radius) - var(--block-border-width));
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  .preview:focus-visible {
+    outline: none;
+  }
+
+  .preview.minimal {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .preview::before {
+    content: "";
+    position: absolute;
+    z-index: var(--layer-below);
+    background: var(--background-fill-primary);
+    opacity: 0.9;
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  /**
+   * Styles for the grid wrapper with fixed height constraints.
+   */
+  .fixed-height {
+    min-height: var(--size-80);
+    max-height: 65vh;
+  }
+
+  @media (--screen-xl) {
+    .fixed-height {
+      min-height: 450px;
+    }
+  }
+
+  /**
+   * Styles for the media container in preview mode.
+   */
+  .media-container {
+    height: calc(100% - var(--size-14));
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .media-container :global(img),
+  .media-container :global(video) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  /**
+   * Styles for thumbnails in the preview mode carousel.
+   */
+  .thumbnails :global(img) {
+    object-fit: cover;
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  .thumbnails :global(svg) {
+    position: absolute;
+    top: var(--size-2);
+    left: var(--size-2);
+    width: 50%;
+    height: 50%;
+    opacity: 50%;
+  }
+
+  /**
+   * Styles for captions in preview mode.
+   */
+  .caption {
+    padding: var(--size-2) var(--size-3);
+    overflow: hidden;
+    color: var(--block-label-text-color);
+    font-weight: var(--weight-semibold);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-self: center;
+  }
+
+  /**
+   * Styles for the thumbnails carousel in preview mode.
+   */
+  .thumbnails {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-lg);
+    width: var(--size-full);
+    height: var(--size-14);
+    overflow-x: scroll;
+  }
+
+  /**
+   * Styles for individual thumbnail items.
+   */
+  .thumbnail-item {
+    --ring-color: transparent;
+    position: relative;
+    box-shadow: inset 0 0 0 1px var(--ring-color), var(--shadow-drop);
+    border: 1px solid var(--border-color-primary);
+    border-radius: var(--button-small-radius);
+    background: var(--background-fill-secondary);
+    aspect-ratio: var(--ratio-square);
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: clip;
+  }
+
+  .thumbnail-item:hover {
+    --ring-color: var(--color-accent);
+    border-color: var(--color-accent);
+    filter: brightness(1.1);
+  }
+
+  .thumbnail-item.selected {
+    --ring-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .thumbnail-item :global(svg) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+    opacity: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .thumbnail-item :global(video) {
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: hidden;
+    object-fit: cover;
+  }
+
+  /**
+   * Styles for small thumbnails in the preview carousel.
+   */
+  .thumbnail-small {
+    flex: none;
+    transform: scale(0.9);
+    transition: 0.075s;
+    width: var(--size-9);
+    height: var(--size-9);
+  }
+
+  .thumbnail-small.selected {
+    --ring-color: var(--color-accent);
+    transform: scale(1);
+    border-color: var(--color-accent);
+  }
+
+  /**
+   * Styles for the grid wrapper containing the gallery items.
+   */
+  .grid-wrap {
+    position: relative;
+    padding: var(--size-2);
+    overflow-y: auto;
+  }
+
+  .grid-wrap.fixed-height {
+    min-height: var(--size-80);
+    max-height: 65vh;
+  }
+
+  /**
+   * Styles for the grid container for multiple items.
+   */
+  .grid-container {
+    display: grid;
+    position: relative;
+    grid-template-rows: repeat(var(--grid-rows), minmax(100px, 1fr));
+    grid-template-columns: repeat(var(--grid-cols), minmax(100px, 1fr));
+    grid-auto-rows: minmax(100px, 1fr);
+    gap: var(--spacing-lg);
+  }
+
+  /**
+   * Styles for single-item view wrapper.
+   */
+  .single-item-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-xxl);
+    box-sizing: border-box;
+  }
+
+  .single-item-wrapper .gallery-item-with-name {
+    width: 100%;
+    height: 100%;
+    max-width: min(300px, 80vw);
+    max-height: min(320px, calc(80vh - var(--size-4)));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .single-item-wrapper .gallery-item {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .single-item-wrapper .thumbnail-item.thumbnail-lg {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .single-item-wrapper .thumbnail-filename {
+    height: var(--size-4);
+    line-height: var(--size-4);
+  }
+
+  .single-item-wrapper .thumbnail-lg > :global(img),
+  .single-item-wrapper .thumbnail-lg > :global(video) {
+    object-fit: var(--object-fit) !important;
+  }
+
+  /**
+   * Styles for large thumbnails in the grid or single-item view.
+   */
+  .thumbnail-lg > :global(img),
+  .thumbnail-lg > :global(video) {
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: hidden;
+    object-fit: var(--object-fit);
+  }
+
+  .thumbnail-lg:hover .caption-label {
+    opacity: 0.5;
+  }
+
+  /**
+   * Styles for captions in the grid or single-item view.
+   */
+  .caption-label {
+    position: absolute;
+    right: var(--block-label-margin);
+    bottom: var(--block-label-margin);
+    z-index: var(--layer-1);
+    border-top: 1px solid var(--border-color-primary);
+    border-left: 1px solid var(--border-color-primary);
+    border-radius: var(--block-label-radius);
+    background: var(--background-fill-secondary);
+    padding: var(--block-label-padding);
+    max-width: 80%;
+    overflow: hidden;
+    font-size: var(--block-label-text-size);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .grid-wrap.minimal {
+    padding: 0;
+  }
+
+  /**
+   * Styles for gallery items with associated filenames.
+   */
+  .gallery-item-with-name {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-1);
+    width: 100%;
+    height: 100%;
+  }
+
+  .thumbnail-filename {
+    font-size: var(--text-xs);
+    color: var(--body-text-color);
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 var(--size-1);
+  }
+
+  .gallery-item {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  /**
+   * Styles for the metadata popup displayed in preview mode.
+   */
+  .metadata-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--background-fill-primary, white);
+    border: 1px solid var(--border-color-primary);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    border-radius: 8px;
+    max-width: min(90%, 600px);
+    max-height: min(50vh, calc(100% - 2rem));
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+  }
+
+  .popup-content {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    cursor: pointer;
+    z-index: 20;
+    color: var(--body-text-color);
+    padding: 0.25rem;
+    line-height: 1;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+  }
+
+  .popup-title {
+    font-weight: bold;
+    margin: 0 0 1rem 0;
+    flex-shrink: 0;
+    padding-right: 2.5rem;
+  }
+
+  .metadata-table-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: calc(100% - 5rem);
+    min-height: 0;
+    margin-bottom: 1rem;
+  }
+
+  .metadata-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  .metadata-label {
+    background: var(--background-fill-secondary, #f5f5f5);
+    padding: 0.5rem;
+    font-weight: bold;
+    text-align: left;
+    vertical-align: top;
+    width: 35%;
+  }
+
+  .metadata-value {
+    text-align: left;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    vertical-align: top;
+  }
+
+  .load-metadata-button {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--button-primary-background-fill);
+    color: var(--button-primary-text-color);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  .load-metadata-button:hover {
+    background-color: var(--button-primary-background-fill-hover);
+  }
+
+  .no-metadata-message {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--body-text-color-subdued);
+  }

src/frontend/Index.svelte

@@ -0,0 +1,105 @@
+<script context="module" lang="ts">
+	export { default as BaseGallery } from "./shared/Gallery.svelte";
+	export { default as BaseExample } from "./Example.svelte";	
+</script>
+
+<script lang="ts">
+	import type { GalleryImage, GalleryVideo } from "./types";
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import { Block, Empty } from "@gradio/atoms";
+	import Gallery from "./shared/Gallery.svelte";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { Image } from "@gradio/icons";
+	
+	type GalleryData = GalleryImage | GalleryVideo;
+
+	export let loading_status: LoadingStatus;
+	export let show_label: boolean;
+	export let label: string;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible: boolean | "hidden" = true;
+    // O `value` agora é uma lista simples de arquivos
+	export let value: GalleryData[] | null = null;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let columns: number | number[] | undefined = [5];
+	export let height: number | "auto" = "auto";
+	export let preview: boolean = true;
+	export let allow_preview = true;
+	export let selected_index: number | null = null;
+	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" = "cover";	
+	export let gradio: Gradio<{
+		change: typeof value;
+		select: SelectData;
+		share: ShareData;
+		error: string;		
+		prop_change: Record<string, any>;
+		clear_status: LoadingStatus;
+		preview_open: never;
+		preview_close: never;
+		load_metadata: Record<string, any>;
+	}>;
+	export let show_fullscreen_button = true;
+	export let show_download_button = false;
+	export let show_share_button = false;
+	export let fullscreen = false;
+	export let popup_metadata_width: number | string = "50%";  	
+	import "./Gallery.css";
+</script>
+
+<Block
+	{visible}
+	variant={value === null || value.length === 0 ? "dashed" : "solid"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	height={typeof height === "number" ? height : undefined}
+	bind:fullscreen
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+	{#if value === null || value.length === 0}
+		<Empty unpadded_box={true} size="large"><Image /></Empty>
+	{:else}
+		<Gallery
+			on:change={() => gradio.dispatch("change", value)}
+				on:select={(e) => gradio.dispatch("select", e.detail)}
+				on:share={(e) => gradio.dispatch("share", e.detail)}
+				on:error={(e) => gradio.dispatch("error", e.detail)}
+				on:preview_open={() => gradio.dispatch("preview_open")}
+				on:preview_close={() => gradio.dispatch("preview_close")}
+				on:fullscreen={({ detail }) => {
+					fullscreen = detail;
+				}}
+				on:load_metadata={(e) => gradio.dispatch("load_metadata", e.detail)}
+			{label}
+			{show_label}
+			{columns}
+			height={"auto"}
+			{preview}
+			{object_fit}			
+			{allow_preview}
+			bind:selected_index
+			bind:value			
+			i18n={gradio.i18n}
+			_fetch={(...args) => gradio.client.fetch(...args)}
+			{show_fullscreen_button}
+			{show_download_button}
+			{show_share_button}
+			{fullscreen}
+			{popup_metadata_width}			
+
+		/>
+	{/if}
+</Block>
+

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "gradio_mediagallery",
+  "version": "0.15.34",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.18.1",
+    "@gradio/client": "1.19.1",
+    "@gradio/file": "0.13.0",
+    "@gradio/icons": "0.14.0",
+    "@gradio/image": "0.23.1",
+    "@gradio/statustracker": "0.11.1",
+    "@gradio/upload": "0.17.1",
+    "@gradio/utils": "0.10.2",
+    "@gradio/video": "0.16.0",
+    "dequal": "^2.0.2",
+    "exifr": "^7.1.3",
+    "marked": "^16.3.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "main": "./Index.svelte",
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./base": {
+      "gradio": "./shared/Gallery.svelte",
+      "svelte": "./dist/shared/Gallery.svelte",
+      "types": "./dist/shared/Gallery.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/gallery"
+  }
+}

src/frontend/shared/Gallery.svelte

@@ -0,0 +1,1099 @@
+<script lang="ts">
+  import {
+    BlockLabel,
+    Empty,
+    ShareButton,
+    IconButton,
+    IconButtonWrapper,
+    FullscreenButton,
+  } from "@gradio/atoms";
+  import type { SelectData } from "@gradio/utils";
+  import { Image } from "@gradio/image/shared";
+  import { Video } from "@gradio/video/shared";
+  import { dequal } from "dequal";
+  import { createEventDispatcher, onMount } from "svelte";
+  import { tick } from "svelte";
+  import type { GalleryImage, GalleryVideo } from "../types";
+  import { Download, Image as ImageIcon, Clear, Play, Info } from "@gradio/icons";
+  import { FileData } from "@gradio/client";
+  import { format_gallery_for_sharing } from "./utils";
+  import type { I18nFormatter } from "@gradio/utils";
+  import * as exifr from "exifr";
+
+  type GalleryData = GalleryImage | GalleryVideo;
+
+  /**
+   * @component Gallery
+   * @description A Svelte component for displaying a gallery of images or videos with optional preview mode, fullscreen support, and metadata popup for images.
+   */
+
+  // Component props
+  /** @prop {boolean} show_label - Whether to display the gallery label. Defaults to true. */
+  export let show_label = true;
+  /** @prop {string} label - The label text for the gallery. */
+  export let label: string;
+  /** @prop {GalleryData[] | null} value - Array of gallery items (images or videos). */
+  export let value: GalleryData[] | null = null;
+  /** @prop {number | number[] | undefined} columns - Number of grid columns or array of column counts per breakpoint. Defaults to [2]. */
+  export let columns: number | number[] | undefined = [2];
+  /** @prop {number | number[] | undefined} rows - Number of grid rows or array of row counts per breakpoint. */
+  export let rows: number | number[] | undefined = undefined;
+  /** @prop {number | "auto"} height - Gallery height in pixels or "auto". Defaults to "auto". */
+  export let height: number | "auto" = "auto";
+  /** @prop {boolean} preview - Whether to start in preview mode if a value is provided. */
+  export let preview: boolean;
+  /** @prop {boolean} allow_preview - Whether preview mode is enabled. Defaults to true. */
+  export let allow_preview = true;
+  /** @prop {"contain" | "cover" | "fill" | "none" | "scale-down"} object_fit - CSS object-fit for media. Defaults to "cover". */
+  export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" = "cover";
+  /** @prop {boolean} show_share_button - Whether to show the share button. Defaults to false. */
+  export let show_share_button = false;
+  /** @prop {boolean} show_download_button - Whether to show the download button. Defaults to false. */
+  export let show_download_button = false;
+  /** @prop {I18nFormatter} i18n - Internationalization formatter for labels. */
+  export let i18n: I18nFormatter;
+  /** @prop {number | null} selected_index - Index of the selected media item. Defaults to null. */
+  export let selected_index: number | null = null;
+  /** @prop {boolean} interactive - Whether the gallery is interactive (not used). Defaults to false. */
+  export const interactive = false;
+  /** @prop {typeof fetch} _fetch - Fetch function for downloading files. */
+  export let _fetch: typeof fetch;
+  /** @prop {"normal" | "minimal"} mode - Display mode for the gallery. Defaults to "normal". */
+  export let mode: "normal" | "minimal" = "normal";
+  /** @prop {boolean} show_fullscreen_button - Whether to show the fullscreen button. Defaults to true. */
+  export let show_fullscreen_button = true;
+  /** @prop {boolean} display_icon_button_wrapper_top_corner - Whether to position icon buttons in the top corner. Defaults to false. */
+  export let display_icon_button_wrapper_top_corner = false;
+  /** @prop {boolean} fullscreen - Whether the gallery is in fullscreen mode. Defaults to false. */
+  export let fullscreen = false;
+  /** @prop {boolean} only_custom_metadata - Whether to show only custom metadata in the popup. Defaults to true. */
+  export let only_custom_metadata: boolean = true;
+  /** @prop {number | string} popup_metadata_width - Width of the metadata popup. Defaults to "50%". */
+  export let popup_metadata_width: number | string = "50%";
+  
+
+  const dispatch = createEventDispatcher<{
+    change: undefined;
+    select: SelectData;
+    preview_open: undefined;
+    preview_close: undefined;
+    fullscreen: boolean;
+    error: string;
+    load_metadata: Record<string, any>;
+  }>();
+
+  // Gallery state
+  let is_full_screen = false;
+  let image_container: HTMLElement;
+  let was_reset = true;
+  let resolved_value: GalleryData[] | null = null;
+  let effective_columns: number | number[] | undefined = columns;
+  let prev_value: GalleryData[] | null = value;
+  let old_selected_index: number | null = selected_index;
+  let el: HTMLButtonElement[] = [];
+  let container_element: HTMLDivElement;
+  let thumbnails_overflow = false;
+  let preview_element: HTMLDivElement | null = null;
+
+  // Metadata state
+  let metadata: Record<string, any> | null = null;
+  let showMetadataPopup: boolean = false;
+  let is_extracting_metadata = false;
+  const technicalMetadata: string[] = [
+    "ImageWidth",
+    "ImageHeight",
+    "BitDepth",
+    "ColorType",
+    "Compression",
+    "Filter",
+    "Interlace",
+  ];
+
+  $: filteredMetadata = only_custom_metadata && metadata
+    ? Object.fromEntries(
+        Object.entries(metadata).filter(([key]) => !technicalMetadata.includes(key))
+      )
+    : metadata;
+
+  /**
+   * Extracts metadata from an image file using the exifr library.
+   * @param fileData - The file data containing the image URL.
+   * @returns A promise resolving to the extracted metadata or null if extraction fails or is not applicable.
+   */
+  async function extractMetadata(fileData: FileData): Promise<Record<string, any> | null> {
+    if (!fileData?.url) return null;
+    if (
+      fileData.url.toLowerCase().endsWith(".png") ||
+      fileData.url.toLowerCase().endsWith(".jpg") ||
+      fileData.url.toLowerCase().endsWith(".jpeg")
+    ) {
+      try {
+        const data = await exifr.parse(fileData.url, true);
+        let parsed_meta: Record<string, any> = {};
+        if (data) {
+          for (const [key, value] of Object.entries(data)) {
+            if (
+              typeof value === "string" ||
+              typeof value === "number" ||
+              typeof value === "boolean"
+            ) {
+              parsed_meta[key] = value;
+            }
+          }
+        }
+        return parsed_meta;
+      } catch (error) {
+        return {};
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Toggles the metadata popup visibility and extracts metadata if needed.
+   */
+  async function toggleMetadataPopup(): Promise<void> {
+    if (showMetadataPopup) {
+      showMetadataPopup = false;
+      return;
+    }
+    if (!selected_media) return;
+    const media_file = "image" in selected_media ? selected_media.image : null;
+    if (!media_file) return;
+    is_extracting_metadata = true;
+    metadata = await extractMetadata(media_file);
+    is_extracting_metadata = false;
+    showMetadataPopup = true;
+  }
+
+  /**
+   * Dispatches the load_metadata event with filtered metadata and closes the popup.
+   */
+  function dispatchLoadMetadata(): void {
+    if (filteredMetadata !== null) {
+      dispatch("load_metadata", filteredMetadata);
+      closePopup();
+    }
+  }
+
+  /**
+   * Closes the metadata popup.
+   */
+  function closePopup(): void {
+    showMetadataPopup = false;
+  }
+
+  $: was_reset = value == null || value.length === 0;
+  $: resolved_value = value
+    ? (value.map((data) =>
+        "video" in data
+          ? { video: data.video as FileData, caption: data.caption }
+          : { image: data.image as FileData, caption: data.caption }
+      ) as GalleryData[])
+    : null;
+
+  $: {
+    if (resolved_value && columns) {
+      const item_count = resolved_value.length;
+      if (Array.isArray(columns)) {
+        effective_columns = columns.map((col) => Math.min(col, item_count));
+      } else {
+        effective_columns = Math.min(columns, item_count);
+      }
+    } else {
+      effective_columns = columns;
+    }
+  }
+
+  $: if (!dequal(prev_value, value)) {
+    selected_index = null;
+    if (preview && value && value.length > 0) {
+      selected_index = 0;
+    }
+    dispatch("change");
+    prev_value = value;
+  }
+
+  $: selected_media =
+    selected_index != null && resolved_value != null
+      ? resolved_value[selected_index]
+      : null;
+
+  $: has_extractable_metadata =
+    selected_media &&
+    "image" in selected_media &&
+    (selected_media.image.url?.toLowerCase().endsWith(".png") ||
+      selected_media.image.url?.toLowerCase().endsWith(".jpg") ||
+      selected_media.image.url?.toLowerCase().endsWith(".jpeg"));
+
+  $: previous = ((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) % (resolved_value?.length ?? 0);
+  $: next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
+
+  /**
+   * Handles click events on the preview image to navigate to the previous or next item.
+   * @param event - The mouse click event.
+   */
+  function handle_preview_click(event: MouseEvent): void {
+    const element = event.target as HTMLElement;
+    const x = event.offsetX;
+    const centerX = element.offsetWidth / 2;
+    selected_index = x < centerX ? previous : next;
+  }
+
+  /**
+   * Handles keyboard navigation in preview mode.
+   * @param e - The keyboard event.
+   */
+  function on_keydown(e: KeyboardEvent): void {
+    switch (e.code) {
+      case "Escape":
+        e.preventDefault();
+        selected_index = null;
+        dispatch("preview_close");
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        selected_index = previous;
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        selected_index = next;
+        break;
+    }
+  }
+
+  $: {
+    if (selected_index !== old_selected_index) {
+      showMetadataPopup = false;
+      metadata = null;
+      old_selected_index = selected_index;
+      if (selected_index !== null) {
+        if (resolved_value != null) {
+          selected_index = Math.max(0, Math.min(selected_index, resolved_value.length - 1));
+        }
+        dispatch("select", {
+          index: selected_index,
+          value: resolved_value?.[selected_index],
+        });
+      }
+    }
+  }
+
+  $: if (allow_preview) {
+    scroll_to_img(selected_index);
+  }
+
+  $: if (selected_index !== null && preview_element) {
+    tick().then(() => {
+      preview_element?.focus();
+    });
+  }
+
+  /**
+   * Scrolls to the selected thumbnail in the thumbnails container.
+   * @param index - The index of the thumbnail to scroll to.
+   */
+  async function scroll_to_img(index: number | null): Promise<void> {
+    if (typeof index !== "number" || !container_element) return;
+    await tick();
+    if (!el[index]) return;
+    el[index].focus();
+    const { left: container_left, width: container_width } = container_element.getBoundingClientRect();
+    const { left, width } = el[index].getBoundingClientRect();
+    const pos = left - container_left + width / 2 - container_width / 2 + container_element.scrollLeft;
+    container_element.scrollTo({ left: pos < 0 ? 0 : pos, behavior: "smooth" });
+  }
+
+  /**
+   * Downloads a file from the provided URL.
+   * @param file_url - The URL of the file to download.
+   * @param name - The name to use for the downloaded file.
+   */
+  async function download(file_url: string, name: string): Promise<void> {
+    try {
+      const response = await _fetch(file_url);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      if (error instanceof TypeError) {
+        window.open(file_url, "_blank", "noreferrer");
+        return;
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Checks if the thumbnails container overflows horizontally.
+   */
+  function check_thumbnails_overflow(): void {
+    if (container_element) {
+      thumbnails_overflow = container_element.scrollWidth > container_element.clientWidth;
+    }
+  }
+
+  /**
+   * Initializes the component, setting up event listeners for fullscreen and resize events.
+   */
+  onMount(() => {
+    check_thumbnails_overflow();
+    document.addEventListener("fullscreenchange", () => {
+      is_full_screen = !!document.fullscreenElement;
+      fullscreen = is_full_screen;
+    });
+    window.addEventListener("resize", check_thumbnails_overflow);
+    return () => {
+      window.removeEventListener("resize", check_thumbnails_overflow);
+      document.removeEventListener("fullscreenchange", () => {
+        is_full_screen = !!document.fullscreenElement;
+        fullscreen = is_full_screen;
+      });
+    };
+  });
+
+  $: resolved_value, check_thumbnails_overflow();
+  $: if (container_element) check_thumbnails_overflow();
+</script>
+
+<svelte:window />
+
+{#if show_label}
+  <BlockLabel {show_label} Icon={ImageIcon} label={label || "Gallery"} />
+{/if}
+
+{#if value == null || resolved_value == null || resolved_value.length === 0}
+  <Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+  <div class="gallery-container" bind:this={image_container}>
+    <!-- Preview Mode -->
+    {#if selected_media && allow_preview}
+      <button
+        class="preview"
+        bind:this={preview_element}
+        class:minimal={mode === "minimal"}                
+        aria-label="Image Preview"
+        tabindex="-1"
+        on:keydown={on_keydown}
+      >
+        <IconButtonWrapper {display_icon_button_wrapper_top_corner}>
+          {#if show_download_button}
+            <IconButton
+              Icon={Download}
+              label={i18n("common.download")}
+              on:click={() => {
+                const media =
+                  "image" in selected_media
+                    ? selected_media.image
+                    : selected_media.video;
+                if (media?.url) download(media.url, media.orig_name ?? "media");
+              }}
+            />
+          {/if}
+          {#if show_fullscreen_button}
+            <FullscreenButton
+              {fullscreen}
+              on:fullscreen={() => {
+                fullscreen = !fullscreen;
+                if (fullscreen) {
+                  preview_element?.requestFullscreen();
+                } else if (document.fullscreenElement) {
+                  document.exitFullscreen();
+                }
+              }}
+            />
+          {/if}
+          {#if has_extractable_metadata}
+            <IconButton
+              Icon={Info}
+              label="View Metadata"
+              pending={is_extracting_metadata}
+              on:click={(event) => {
+                event.stopPropagation();
+                toggleMetadataPopup();
+              }}
+            />
+          {/if}
+          {#if show_share_button}
+            <div class="icon-button">
+              <ShareButton
+                {i18n}
+                on:share
+                on:error
+                {value}
+                formatter={format_gallery_for_sharing}
+              />
+            </div>
+          {/if}
+          {#if !is_full_screen}
+            <IconButton
+              Icon={Clear}
+              label="Close"
+              on:click={() => {
+                selected_index = null;
+                dispatch("preview_close");
+              }}
+            />
+          {/if}
+        </IconButtonWrapper>
+
+        <button
+          class="media-container"
+          on:click={"image" in selected_media ? handle_preview_click : null}
+        >
+          {#if "image" in selected_media}
+            <Image
+              src={selected_media.image.url}
+              alt={selected_media.caption || ""}
+              loading="lazy"
+            />
+          {:else}
+            <Video
+              src={selected_media.video.url}
+              alt={selected_media.caption || ""}
+              loading="lazy"
+              controls={true}
+            />
+          {/if}
+      </button>
+
+        {#if selected_media?.caption}
+          <caption class="caption">{selected_media.caption}</caption>
+        {/if}
+
+        <div
+          bind:this={container_element}
+          class="thumbnails scroll-hide"
+          style="justify-content: {thumbnails_overflow ? 'flex-start' : 'center'};"
+        >
+          {#each resolved_value as media, i}
+            <button
+              bind:this={el[i]}
+              on:click={() => (selected_index = i)}
+              class="thumbnail-item thumbnail-small"
+              class:selected={selected_index === i && mode !== "minimal"}
+              aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
+            >
+              {#if "image" in media}
+                <Image
+                  src={media.image.url}
+                  title={media.caption || null}
+                  alt=""
+                  loading="lazy"
+                />
+              {:else}
+                <Play />
+                <Video
+                  src={media.video.url}
+                  title={media.caption || null}
+                  is_stream={false}
+                  alt=""
+                  loading="lazy"
+                  loop={false}
+                />
+              {/if}
+            </button>
+          {/each}
+        </div>
+
+        {#if showMetadataPopup && filteredMetadata !== null}
+          <div
+            class="metadata-popup"
+            on:click|stopPropagation
+            role="presentation"
+            style:width={typeof popup_metadata_width === "number" ? `${popup_metadata_width}px` : popup_metadata_width}
+          >
+            <div class="popup-content">
+              <button class="close-button" on:click={closePopup}>X</button>
+              <h3 class="popup-title">Image Metadata</h3>
+              {#if Object.keys(filteredMetadata).length > 0}
+                <div class="metadata-table-container">
+                  <table class="metadata-table">
+                    <tbody>
+                      {#each Object.entries(filteredMetadata) as [key, val]}
+                        {#if val}
+                          <tr>
+                            <td class="metadata-label">{key}</td>
+                            <td class="metadata-value">{val}</td>
+                          </tr>
+                        {/if}
+                      {/each}
+                    </tbody>
+                  </table>
+                </div>
+                <button
+                  class="load-metadata-button"
+                  on:click={dispatchLoadMetadata}
+                >Load Metadata</button>
+              {:else}
+                <p class="no-metadata-message">No custom metadata found.</p>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </button>
+    {/if}
+
+    <!-- Main Grid / Single Item View -->
+    <div
+      class="grid-wrap"
+      class:minimal={mode === "minimal"}
+      class:fixed-height={!height || height == "auto"}
+      class:hidden={is_full_screen || (selected_media && allow_preview)}
+      style:height={height !== "auto" ? `${height}px` : null}
+    >
+      <!-- Multi-item grid -->
+      {#if resolved_value && resolved_value.length > 1}
+        <div
+          class="grid-container"
+          style:--grid-cols={effective_columns}
+          style:--grid-rows={rows}
+          style:--object-fit={object_fit}
+          class:pt-6={show_label}
+        >
+          {#each resolved_value as entry, i}
+            {@const file_name = "image" in entry ? entry.image.orig_name : entry.video.orig_name}
+            <div class="gallery-item-with-name">
+              <div class="gallery-item">
+                <button
+                  class="thumbnail-item thumbnail-lg"
+                  class:selected={selected_index === i}
+                  on:click={() => {
+                    if (selected_index === null && allow_preview)
+                      dispatch("preview_open");
+                    selected_index = i;
+                  }}
+                  aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
+                >
+                  {#if "image" in entry}
+                    <Image
+                      alt={entry.caption || ""}
+                      src={entry.image.url}
+                      loading="lazy"
+                    />
+                  {:else}
+                    <Play />
+                    <Video
+                      src={entry.video.url}
+                      title={entry.caption || null}
+                      is_stream={false}
+                      alt=""
+                      loading="lazy"
+                      loop={false}
+                    />
+                  {/if}
+                  {#if entry.caption}
+                    <div class="caption-label">{entry.caption}</div>
+                  {/if}
+                </button>
+              </div>
+              {#if file_name}
+                <div class="thumbnail-filename" title={file_name}>
+                  {file_name}
+                </div>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      <!-- Single-item view -->
+      {:else if resolved_value && resolved_value.length === 1}
+        {@const entry = resolved_value[0]}
+        {@const file_name = "image" in entry ? entry.image.orig_name : entry.video.orig_name}
+        <div class="single-item-wrapper" style:--object-fit={object_fit}>
+          <div class="gallery-item-with-name">
+            <div class="gallery-item">
+              <button
+                class="thumbnail-item thumbnail-lg"
+                on:click={() => {
+                  if (allow_preview) {
+                    dispatch("preview_open");
+                    selected_index = 0;
+                  }
+                }}
+                aria-label="View single item in preview mode"
+              >
+                {#if "image" in entry}
+                  <Image
+                    alt={entry.caption || ""}
+                    src={entry.image.url}
+                    loading="lazy"
+                  />
+                {:else}
+                  <Play />
+                  <Video
+                    src={entry.video.url}
+                    title={entry.caption || null}
+                    is_stream={false}
+                    alt=""
+                    loading="lazy"
+                    loop={false}
+                  />
+                {/if}
+                {#if entry.caption}
+                  <div class="caption-label">{entry.caption}</div>
+                {/if}
+              </button>
+            </div>
+            {#if file_name}
+              <div class="thumbnail-filename" title={file_name}>
+                {file_name}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  /**
+   * Styles for the gallery container, which holds the entire component.
+   */
+  .gallery-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  /**
+   * Styles for buttons to ensure they fill their container.
+   */
+  button {
+    width: var(--size-full);
+    height: var(--size-full);
+    display: block;
+    border-radius: var(--radius-lg);
+  }
+
+  /**
+   * Styles for the preview mode, displaying a selected media item.
+   */
+  .preview {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    z-index: var(--layer-2);
+    border-radius: calc(var(--block-radius) - var(--block-border-width));
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  .preview:focus-visible {
+    outline: none;
+  }
+
+  .preview.minimal {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .preview::before {
+    content: "";
+    position: absolute;
+    z-index: var(--layer-below);
+    background: var(--background-fill-primary);
+    opacity: 0.9;
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  /**
+   * Styles for the grid wrapper with fixed height constraints.
+   */
+  .fixed-height {
+    min-height: var(--size-80);
+    max-height: 65vh;
+  }
+
+  @media (--screen-xl) {
+    .fixed-height {
+      min-height: 450px;
+    }
+  }
+
+  /**
+   * Styles for the media container in preview mode.
+   */
+  .media-container {
+    height: calc(100% - var(--size-14));
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .media-container :global(img),
+  .media-container :global(video) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  /**
+   * Styles for thumbnails in the preview mode carousel.
+   */
+  .thumbnails :global(img) {
+    object-fit: cover;
+    width: var(--size-full);
+    height: var(--size-full);
+  }
+
+  .thumbnails :global(svg) {
+    position: absolute;
+    top: var(--size-2);
+    left: var(--size-2);
+    width: 50%;
+    height: 50%;
+    opacity: 50%;
+  }
+
+  /**
+   * Styles for captions in preview mode.
+   */
+  .caption {
+    padding: var(--size-2) var(--size-3);
+    overflow: hidden;
+    color: var(--block-label-text-color);
+    font-weight: var(--weight-semibold);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-self: center;
+  }
+
+  /**
+   * Styles for the thumbnails carousel in preview mode.
+   */
+  .thumbnails {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-lg);
+    width: var(--size-full);
+    height: var(--size-14);
+    overflow-x: scroll;
+  }
+
+  /**
+   * Styles for individual thumbnail items.
+   */
+  .thumbnail-item {
+    --ring-color: transparent;
+    position: relative;
+    box-shadow: inset 0 0 0 1px var(--ring-color), var(--shadow-drop);
+    border: 1px solid var(--border-color-primary);
+    border-radius: var(--button-small-radius);
+    background: var(--background-fill-secondary);
+    aspect-ratio: var(--ratio-square);
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: clip;
+  }
+
+  .thumbnail-item:hover {
+    --ring-color: var(--color-accent);
+    border-color: var(--color-accent);
+    filter: brightness(1.1);
+  }
+
+  .thumbnail-item.selected {
+    --ring-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .thumbnail-item :global(svg) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+    opacity: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .thumbnail-item :global(video) {
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: hidden;
+    object-fit: cover;
+  }
+
+  /**
+   * Styles for small thumbnails in the preview carousel.
+   */
+  .thumbnail-small {
+    flex: none;
+    transform: scale(0.9);
+    transition: 0.075s;
+    width: var(--size-9);
+    height: var(--size-9);
+  }
+
+  .thumbnail-small.selected {
+    --ring-color: var(--color-accent);
+    transform: scale(1);
+    border-color: var(--color-accent);
+  }
+
+  /**
+   * Styles for the grid wrapper containing the gallery items.
+   */
+  .grid-wrap {
+    position: relative;
+    padding: var(--size-2);
+    overflow-y: auto;
+  }
+
+  .grid-wrap.fixed-height {
+    min-height: var(--size-80);
+    max-height: 65vh;
+  }
+
+  /**
+   * Styles for the grid container for multiple items.
+   */
+  .grid-container {
+    display: grid;
+    position: relative;
+    grid-template-rows: repeat(var(--grid-rows), minmax(100px, 1fr));
+    grid-template-columns: repeat(var(--grid-cols), minmax(100px, 1fr));
+    grid-auto-rows: minmax(100px, 1fr);
+    gap: var(--spacing-lg);
+  }
+
+  /**
+   * Styles for single-item view wrapper.
+   */
+  .single-item-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-xxl);
+    box-sizing: border-box;
+  }
+
+  .single-item-wrapper .gallery-item-with-name {
+    width: 100%;
+    height: 100%;
+    max-width: min(300px, 80vw);
+    max-height: min(320px, calc(80vh - var(--size-4)));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .single-item-wrapper .gallery-item {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .single-item-wrapper .thumbnail-item.thumbnail-lg {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .single-item-wrapper .thumbnail-filename {
+    height: var(--size-4);
+    line-height: var(--size-4);
+  }
+
+  .single-item-wrapper .thumbnail-lg > :global(img),
+  .single-item-wrapper .thumbnail-lg > :global(video) {
+    object-fit: var(--object-fit) !important;
+  }
+
+  /**
+   * Styles for large thumbnails in the grid or single-item view.
+   */
+  .thumbnail-lg > :global(img),
+  .thumbnail-lg > :global(video) {
+    width: var(--size-full);
+    height: var(--size-full);
+    overflow: hidden;
+    object-fit: var(--object-fit);
+  }
+
+  .thumbnail-lg:hover .caption-label {
+    opacity: 0.5;
+  }
+
+  /**
+   * Styles for captions in the grid or single-item view.
+   */
+  .caption-label {
+    position: absolute;
+    right: var(--block-label-margin);
+    bottom: var(--block-label-margin);
+    z-index: var(--layer-1);
+    border-top: 1px solid var(--border-color-primary);
+    border-left: 1px solid var(--border-color-primary);
+    border-radius: var(--block-label-radius);
+    background: var(--background-fill-secondary);
+    padding: var(--block-label-padding);
+    max-width: 80%;
+    overflow: hidden;
+    font-size: var(--block-label-text-size);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .grid-wrap.minimal {
+    padding: 0;
+  }
+
+  /**
+   * Styles for gallery items with associated filenames.
+   */
+  .gallery-item-with-name {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-1);
+    width: 100%;
+    height: 100%;
+  }
+
+  .thumbnail-filename {
+    font-size: var(--text-xs);
+    color: var(--body-text-color);
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 var(--size-1);
+  }
+
+  .gallery-item {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  /**
+   * Styles for the metadata popup displayed in preview mode.
+   */
+  .metadata-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--background-fill-primary, white);
+    border: 1px solid var(--border-color-primary);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    border-radius: 8px;
+    max-width: min(90%, 600px);
+    max-height: min(50vh, calc(100% - 2rem));
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+  }
+
+  .popup-content {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    cursor: pointer;
+    z-index: 20;
+    color: var(--body-text-color);
+    padding: 0.25rem;
+    line-height: 1;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+  }
+
+  .popup-title {
+    font-weight: bold;
+    margin: 0 0 1rem 0;
+    flex-shrink: 0;
+    padding-right: 2.5rem;
+  }
+
+  .metadata-table-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: calc(100% - 5rem);
+    min-height: 0;
+    margin-bottom: 1rem;
+  }
+
+  .metadata-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  .metadata-label {
+    background: var(--background-fill-secondary, #f5f5f5);
+    padding: 0.5rem;
+    font-weight: bold;
+    text-align: left;
+    vertical-align: top;
+    width: 35%;
+  }
+
+  .metadata-value {
+    text-align: left;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    vertical-align: top;
+  }
+
+  .load-metadata-button {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--button-primary-background-fill);
+    color: var(--button-primary-text-color);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  .load-metadata-button:hover {
+    background-color: var(--button-primary-background-fill-hover);
+  }
+
+  .no-metadata-message {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--body-text-color-subdued);
+  }
+
+
+</style>

src/frontend/shared/utils.ts

@@ -0,0 +1,18 @@
+import { uploadToHuggingFace } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+
+export async function format_gallery_for_sharing(
+	value: [FileData, string | null][] | null
+): Promise<string> {
+	if (!value) return "";
+	let urls = await Promise.all(
+		value.map(async ([image, _]) => {
+			if (image === null || !image.url) return "";
+			return await uploadToHuggingFace(image.url, "url");
+		})
+	);
+
+	return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls
+		.map((url) => `<img src="${url}" style="height: 400px" />`)
+		.join("")}</div>`;
+}

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/frontend/types.ts

@@ -0,0 +1,11 @@
+import type { FileData } from "@gradio/client";
+
+export interface GalleryImage {
+	image: FileData;
+	caption: string | null;
+}
+
+export interface GalleryVideo {
+	video: FileData;
+	caption: string | null;
+}

src/pyproject.toml

@@ -0,0 +1,54 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_mediagallery"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "Eliseu Silva", email = "elismasilva@gmail.com" }]
+keywords = [
+  "gradio-custom-component",
+  "gradio-template-Gallery"
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_mediagallery/templates", "*.pyi", "/\\backend\\gradio_mediagallery\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_mediagallery"]