feat: Add MediaGallery custom component for mixed media assets

- Custom Gradio component supporting images, videos, and audio in unified grid
- Responsive grid layout (2-5 columns based on screen size)
- Square thumbnails with media type badges
- Add Media button for uploading additional files
- Audio preview with gradient background
- File upload handling with proper media type detection
- Examples display up to 5 previews without hover effects

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import spaces
+from gradio_mediagallery import MediaGallery
 
 from PIL import Image
 from moviepy.editor import VideoFileClip, AudioFileClip
@@ -56,7 +57,37 @@ allowed_medias = [
 ]
 
 
+class FileWrapper:
+    """Wrapper to provide .name attribute for MediaGallery output tuples."""
+
+    def __init__(self, path):
+        self.name = path if isinstance(path, str) else str(path)
+
+
+def normalize_files(files):
+    """Convert MediaGallery output or gr.File output to list of file-like objects."""
+    if not files:
+        return []
+
+    result = []
+    for item in files:
+        if isinstance(item, tuple):
+            # MediaGallery returns (path, caption) tuples
+            path = item[0]
+            result.append(FileWrapper(path))
+        elif hasattr(item, "name"):
+            # gr.File returns objects with .name attribute
+            result.append(item)
+        elif isinstance(item, str):
+            # Direct file path
+            result.append(FileWrapper(item))
+        else:
+            result.append(FileWrapper(str(item)))
+    return result
+
+
 def get_files_infos(files):
+    files = normalize_files(files)
     results = []
     for file in files:
         file_path = Path(file.name)
@@ -236,19 +267,22 @@ Remember: Simpler is better. Only use advanced ffmpeg features if absolutely nec
     else:
         # Use existing conversation history
         messages = conversation_history[:]
-        
+
         # If there's a previous error, add it as a separate message exchange
         if previous_error and previous_command:
             # Add the failed command as assistant response
-            messages.append({
-                "role": "assistant", 
-                "content": f"I'll execute this FFmpeg command:\n\n```bash\n{previous_command}\n```"
-            })
-            
+            messages.append(
+                {
+                    "role": "assistant",
+                    "content": f"I'll execute this FFmpeg command:\n\n```bash\n{previous_command}\n```",
+                }
+            )
+
             # Add the error as user feedback
-            messages.append({
-                "role": "user",
-                "content": f"""The command failed with the following error:
+            messages.append(
+                {
+                    "role": "user",
+                    "content": f"""The command failed with the following error:
 
 ERROR MESSAGE:
 {previous_error}
@@ -266,14 +300,17 @@ FORMAT DETECTION KEYWORDS:
 - "horizontal", "landscape", "16:9", "YouTube", "TV" → Use 1920x1080 (default)
 - "square", "1:1", "Instagram post" → Use 1080x1080
 
-Please provide a corrected FFmpeg command."""
-            })
+Please provide a corrected FFmpeg command.""",
+                }
+            )
         else:
             # Add new user request to existing conversation
-            messages.append({
-                "role": "user",
-                "content": user_content,
-            })
+            messages.append(
+                {
+                    "role": "user",
+                    "content": user_content,
+                }
+            )
     try:
         # Print the complete prompt
         print("\n=== COMPLETE PROMPT ===")
@@ -299,18 +336,19 @@ Please provide a corrected FFmpeg command."""
         )
         content = completion.choices[0].message.content
         print(f"\n=== RAW API RESPONSE ===\n{content}\n========================\n")
-        
+
         # Extract command from code block if present
         import re
+
         command = None
-        
+
         # Try multiple code block patterns
         code_patterns = [
             r"```(?:bash|sh|shell)?\n(.*?)\n```",  # Standard code blocks
             r"```\n(.*?)\n```",  # Plain code blocks
             r"`([^`]*ffmpeg[^`]*)`",  # Inline code with ffmpeg
         ]
-        
+
         for pattern in code_patterns:
             matches = re.findall(pattern, content, re.DOTALL | re.IGNORECASE)
             for match in matches:
@@ -319,7 +357,7 @@ Please provide a corrected FFmpeg command."""
                     break
             if command:
                 break
-        
+
         # If no code block found, try to find ffmpeg lines directly
         if not command:
             ffmpeg_lines = [
@@ -329,7 +367,7 @@ Please provide a corrected FFmpeg command."""
             ]
             if ffmpeg_lines:
                 command = ffmpeg_lines[0]
-        
+
         # Last resort: look for any line containing ffmpeg
         if not command:
             for line in content.split("\n"):
@@ -337,21 +375,18 @@ Please provide a corrected FFmpeg command."""
                 if "ffmpeg" in line.lower() and len(line) > 10:
                     command = line
                     break
-        
+
         if not command:
             print(f"ERROR: No ffmpeg command found in response")
             command = content.replace("\n", " ").strip()
-        
+
         print(f"=== EXTRACTED COMMAND ===\n{command}\n========================\n")
-        
+
         # remove output.mp4 with the actual output file path
         command = command.replace("output.mp4", "")
 
         # Add the assistant's response to conversation history
-        messages.append({
-            "role": "assistant",
-            "content": content
-        })
+        messages.append({"role": "assistant", "content": content})
 
         return command, messages
     except Exception as e:
@@ -377,8 +412,8 @@ def compose_video(
     """
     Compose videos from existing media assets using natural language instructions.
 
-    This tool is NOT for AI video generation. Instead, it uses AI to generate FFmpeg 
-    commands that combine, edit, and transform your uploaded images, videos, and audio 
+    This tool is NOT for AI video generation. Instead, it uses AI to generate FFmpeg
+    commands that combine, edit, and transform your uploaded images, videos, and audio
     files based on natural language descriptions.
 
     Args:
@@ -407,6 +442,8 @@ def update(
     if prompt == "":
         raise gr.Error("Please enter a prompt.")
 
+    # Normalize files from MediaGallery or gr.File format
+    files = normalize_files(files)
     files_info = get_files_infos(files)
     # disable this if you're running the app locally or on your own server
     for file_info in files_info:
@@ -564,10 +601,11 @@ with gr.Blocks() as demo:
     )
     with gr.Row():
         with gr.Column():
-            user_files = gr.File(
-                file_count="multiple",
-                label="Media files",
+            user_files = MediaGallery(
                 file_types=allowed_medias,
+                label="Media Assets",
+                columns=3,
+                interactive=True,
             )
             user_prompt = gr.Textbox(
                 placeholder="eg: Remove the 3 first seconds of the video",

mediagallery/.gitignore

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

mediagallery/README.md

@@ -0,0 +1,490 @@
+
+# `gradio_mediagallery`
+<a href="https://pypi.org/project/gradio_mediagallery/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_mediagallery"></a>  
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_mediagallery
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_mediagallery import MediaGallery
+
+
+example = MediaGallery().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        MediaGallery(label="Blank"),  # blank component
+        MediaGallery(value=example, label="Populated"),  # populated component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `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>format</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"webp"</code></td>
+<td align="left">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.</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
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</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>
+</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 |
+| `upload` | This listener is triggered when the user uploads a file into the MediaGallery. |
+| `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. |
+| `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 |
+
+
+
+### 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, passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
+- **As input:** Should return, expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
+
+ ```python
+ def predict(
+     value: list[tuple[str, str | None]]
+    | list[tuple[PIL.Image.Image, str | None]]
+    | list[tuple[numpy.ndarray, str | None]]
+    | None
+ ) -> list[
+        typing.Union[
+            numpy.ndarray,
+            PIL.Image.Image,
+            pathlib.Path,
+            str,
+            tuple[
+                typing.Union[
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ],
+                str,
+            ],
+        ][
+            numpy.ndarray,
+            PIL.Image.Image,
+            pathlib.Path,
+            str,
+            tuple[
+                typing.Union[
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ][
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ],
+                str,
+            ],
+        ]
+    ]
+    | None:
+     return value
+ ```
+ 

mediagallery/backend/gradio_mediagallery/__init__.py

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

mediagallery/backend/gradio_mediagallery/mediagallery.py

@@ -0,0 +1,374 @@
+"""gr.Gallery() component."""
+
+from __future__ import annotations
+
+from collections.abc import Callable, Sequence
+from concurrent.futures import ThreadPoolExecutor
+from pathlib import Path
+from typing import (
+    TYPE_CHECKING,
+    Any,
+    Literal,
+    Optional,
+    Union,
+)
+from urllib.parse import quote, urlparse
+
+import numpy as np
+import PIL.Image
+from gradio_client import handle_file
+from gradio_client import utils as client_utils
+from gradio_client.documentation import document
+from gradio_client.utils import is_http_url_like
+
+from gradio import image_utils, processing_utils, utils
+try:
+    from gradio import wasm_utils
+    IS_WASM = wasm_utils.IS_WASM
+except ImportError:
+    IS_WASM = False
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel, GradioRootModel, ImageData
+from gradio.events import EventListener, Events
+from gradio.exceptions import Error
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+GalleryMediaType = Union[np.ndarray, PIL.Image.Image, Path, str]
+CaptionedGalleryMediaType = tuple[GalleryMediaType, str]
+
+
+class GalleryImage(GradioModel):
+    image: ImageData
+    caption: Optional[str] = None
+
+
+class GalleryVideo(GradioModel):
+    video: FileData
+    caption: Optional[str] = None
+
+
+class GalleryAudio(GradioModel):
+    audio: FileData
+    caption: Optional[str] = None
+
+
+class GalleryData(GradioRootModel):
+    root: list[Union[GalleryImage, GalleryVideo, GalleryAudio]]
+
+
+# File extension mappings for media type detection
+IMAGE_EXTENSIONS = {'.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.tiff', '.svg'}
+VIDEO_EXTENSIONS = {'.mp4', '.avi', '.mov', '.mkv', '.flv', '.wmv', '.webm', '.mpg', '.mpeg', '.m4v', '.3gp', '.3g2', '.3gpp'}
+AUDIO_EXTENSIONS = {'.mp3', '.wav', '.ogg', '.m4a', '.flac', '.aac'}
+
+
+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
+    """
+
+    EVENTS = [
+        Events.select,
+        Events.upload,
+        Events.change,
+        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",
+        ),
+    ]
+
+    data_model = GalleryData
+
+    def __init__(
+        self,
+        value: (
+            Sequence[np.ndarray | PIL.Image.Image | str | Path | tuple]
+            | Callable
+            | None
+        ) = None,
+        *,
+        format: str = "webp",
+        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 = 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,
+    ):
+        """
+        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.
+            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.
+        """
+        self.format = format
+        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
+        self.type = type
+        self.show_fullscreen_button = show_fullscreen_button
+        self.file_types = file_types
+
+        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
+    ) -> (
+        list[tuple[str, str | None]]
+        | list[tuple[PIL.Image.Image, str | None]]
+        | list[tuple[np.ndarray, str | None]]
+        | None
+    ):
+        """
+        Parameters:
+            payload: a list of images or videos, or list of (media, caption) tuples
+        Returns:
+            Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
+        """
+        if payload is None or not payload.root:
+            return None
+        data = []
+        for gallery_element in payload.root:
+            if isinstance(gallery_element, GalleryVideo):
+                file_path = gallery_element.video.path
+            elif isinstance(gallery_element, GalleryAudio):
+                file_path = gallery_element.audio.path
+            else:
+                file_path = gallery_element.image.path or ""
+            if self.file_types and not client_utils.is_valid_file(
+                file_path, self.file_types
+            ):
+                raise Error(
+                    f"Invalid file type. Please upload a file that is one of these formats: {self.file_types}"
+                )
+            else:
+                # Return file path for video and audio, convert images based on type
+                if isinstance(gallery_element, GalleryVideo):
+                    media = gallery_element.video.path
+                elif isinstance(gallery_element, GalleryAudio):
+                    media = gallery_element.audio.path
+                else:
+                    media = self.convert_to_type(gallery_element.image.path, self.type)  # type: ignore
+                data.append((media, gallery_element.caption))
+        return data
+
+    def postprocess(
+        self,
+        value: list[GalleryMediaType | CaptionedGalleryMediaType] | None,
+    ) -> GalleryData:
+        """
+        Parameters:
+            value: Expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
+        Returns:
+            a list of images or videos, or list of (media, caption) tuples
+        """
+        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 = []
+
+        def _save(img):
+            url = None
+            caption = None
+            orig_name = None
+            mime_type = None
+            if isinstance(img, (tuple, list)):
+                img, caption = img
+            if isinstance(img, np.ndarray):
+                file = processing_utils.save_img_array_to_cache(
+                    img, cache_dir=self.GRADIO_CACHE, format=self.format
+                )
+                file_path = str(utils.abspath(file))
+            elif isinstance(img, PIL.Image.Image):
+                file = processing_utils.save_pil_to_cache(
+                    img, cache_dir=self.GRADIO_CACHE, format=self.format
+                )
+                file_path = str(utils.abspath(file))
+            elif isinstance(img, str):
+                mime_type = client_utils.get_mimetype(img)
+                if img.lower().endswith(".svg"):
+                    svg_content = image_utils.extract_svg_content(img)
+                    orig_name = Path(img).name
+                    url = f"data:image/svg+xml,{quote(svg_content)}"
+                    file_path = None
+                elif is_http_url_like(img):
+                    url = img
+                    orig_name = Path(urlparse(img).path).name
+                    file_path = img
+                else:
+                    url = None
+                    orig_name = Path(img).name
+                    file_path = img
+            elif isinstance(img, Path):
+                file_path = str(img)
+                orig_name = img.name
+                mime_type = client_utils.get_mimetype(file_path)
+            else:
+                raise ValueError(f"Cannot process type as image: {type(img)}")
+            # Determine media type from mime_type or file extension
+            if mime_type is not None and "video" in mime_type:
+                return GalleryVideo(
+                    video=FileData(
+                        path=file_path,  # type: ignore
+                        url=url,
+                        orig_name=orig_name,
+                        mime_type=mime_type,
+                    ),
+                    caption=caption,
+                )
+            elif mime_type is not None and "audio" in mime_type:
+                return GalleryAudio(
+                    audio=FileData(
+                        path=file_path,  # type: ignore
+                        url=url,
+                        orig_name=orig_name,
+                        mime_type=mime_type,
+                    ),
+                    caption=caption,
+                )
+            else:
+                # Check file extension for audio files (fallback)
+                ext = Path(orig_name or file_path or "").suffix.lower() if (orig_name or file_path) else ""
+                if ext in AUDIO_EXTENSIONS:
+                    return GalleryAudio(
+                        audio=FileData(
+                            path=file_path,  # type: ignore
+                            url=url,
+                            orig_name=orig_name,
+                            mime_type=mime_type or "audio/mpeg",
+                        ),
+                        caption=caption,
+                    )
+                return GalleryImage(
+                    image=ImageData(
+                        path=file_path,
+                        url=url,
+                        orig_name=orig_name,
+                        mime_type=mime_type,
+                    ),
+                    caption=caption,
+                )
+
+        if IS_WASM:
+            for img in value:
+                output.append(_save(img))
+        else:
+            with ThreadPoolExecutor() as executor:
+                for o in executor.map(_save, value):
+                    output.append(o)
+        return GalleryData(root=output)
+
+    @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"
+        ]

mediagallery/demo/app.py

@@ -0,0 +1,15 @@
+
+import gradio as gr
+from gradio_mediagallery import MediaGallery
+
+
+example = MediaGallery().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        MediaGallery(label="Blank"),  # blank component
+        MediaGallery(value=example, label="Populated"),  # populated component
+
+
+if __name__ == "__main__":
+    demo.launch()

mediagallery/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;
+}

mediagallery/demo/space.py

@@ -0,0 +1,176 @@
+
+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.'}, 'format': {'type': 'str', 'default': '"webp"', 'description': "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': {'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', 'default': 'True', 'description': 'If False, component will be hidden.'}, '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.'}}, 'postprocess': {'value': {'type': 'list[\n        typing.Union[\n            numpy.ndarray,\n            PIL.Image.Image,\n            pathlib.Path,\n            str,\n            tuple[\n                typing.Union[\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ],\n                str,\n            ],\n        ][\n            numpy.ndarray,\n            PIL.Image.Image,\n            pathlib.Path,\n            str,\n            tuple[\n                typing.Union[\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ][\n                    numpy.ndarray,\n                    PIL.Image.Image,\n                    pathlib.Path,\n                    str,\n                ],\n                str,\n            ],\n        ]\n    ]\n    | None', 'description': 'Expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.'}}, 'preprocess': {'return': {'type': 'list[tuple[str, str | None]]\n    | list[tuple[PIL.Image.Image, str | None]]\n    | list[tuple[numpy.ndarray, str | None]]\n    | None', 'description': 'Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.'}, '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'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the MediaGallery.'}, '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.'}, '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'}}}, '__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.Default(
+        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
+
+import gradio as gr
+from gradio_mediagallery import MediaGallery
+
+
+example = MediaGallery().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        MediaGallery(label="Blank"),  # blank component
+        MediaGallery(value=example, label="Populated"),  # populated component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", 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, passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
+- **As output:** Should return, expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
+
+ ```python
+def predict(
+    value: list[tuple[str, str | None]]
+    | list[tuple[PIL.Image.Image, str | None]]
+    | list[tuple[numpy.ndarray, str | None]]
+    | None
+) -> list[
+        typing.Union[
+            numpy.ndarray,
+            PIL.Image.Image,
+            pathlib.Path,
+            str,
+            tuple[
+                typing.Union[
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ],
+                str,
+            ],
+        ][
+            numpy.ndarray,
+            PIL.Image.Image,
+            pathlib.Path,
+            str,
+            tuple[
+                typing.Union[
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ][
+                    numpy.ndarray,
+                    PIL.Image.Image,
+                    pathlib.Path,
+                    str,
+                ],
+                str,
+            ],
+        ]
+    ]
+    | 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()

mediagallery/frontend/Example.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import type { GalleryImage, GalleryVideo, GalleryAudio, GalleryData } from "./types";
+
+	export let value: GalleryData[] | 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, 5) as item}
+				{#if "image" in item && item.image}
+					<div class="image-container">
+						<img src={item.image.url} alt={item.caption || ""} />
+					</div>
+				{:else if "video" in item && item.video}
+					<div class="image-container">
+						<video
+							src={item.video.url}
+							controls={false}
+							muted
+							preload="metadata"
+						/>
+					</div>
+				{:else if "audio" in item && item.audio}
+					<div class="image-container audio">
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M9 18V5l12-2v13"></path>
+							<circle cx="6" cy="18" r="3"></circle>
+							<circle cx="18" cy="16" r="3"></circle>
+						</svg>
+					</div>
+				{/if}
+			{/each}
+			{#if value.length > 5}
+				<div class="more-indicator">+{value.length - 5}</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-sm);
+		font-weight: bold;
+		color: var(--body-text-color-subdued);
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-md);
+	}
+
+	.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));
+	}
+
+	.image-container img,
+	.image-container video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: var(--radius-md);
+	}
+
+	.image-container.audio {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		border-radius: var(--radius-md);
+		color: white;
+	}
+
+	/* Remove hover effects */
+	.container,
+	.container *,
+	.image-container,
+	.image-container img,
+	.image-container video {
+		transition: none !important;
+	}
+
+	.container:hover,
+	.image-container:hover,
+	.image-container:hover img,
+	.image-container:hover video {
+		transform: none !important;
+		filter: none !important;
+		opacity: 1 !important;
+	}
+</style>

mediagallery/frontend/Index.svelte

@@ -0,0 +1,193 @@
+<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, GalleryAudio, GalleryData } from "./types";
+	import type { FileData } from "@gradio/client";
+	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
+	import { Block, UploadText } from "@gradio/atoms";
+	import Gallery from "./shared/Gallery.svelte";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { createEventDispatcher } from "svelte";
+	import { BaseFileUpload } from "@gradio/file";
+
+	export let loading_status: LoadingStatus;
+	export let show_label: boolean;
+	export let label: string;
+	export let root: string;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: GalleryData[] | null = null;
+	export let file_types: string[] | null = ["image", "video", "audio"];
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let columns: number | number[] | undefined = [2];
+	export let rows: number | number[] | undefined = undefined;
+	export let height: number | "auto" = "auto";
+	export let preview: boolean;
+	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 show_share_button = false;
+	export let interactive: boolean;
+	export let show_download_button = false;
+	export let gradio: Gradio<{
+		change: typeof value;
+		upload: typeof value;
+		select: SelectData;
+		share: ShareData;
+		error: string;
+		prop_change: Record<string, any>;
+		clear_status: LoadingStatus;
+		preview_open: never;
+		preview_close: never;
+	}>;
+	export let show_fullscreen_button = true;
+	export let fullscreen = false;
+
+	const dispatch = createEventDispatcher();
+
+	$: no_value = value === null ? true : value.length === 0;
+	$: selected_index, dispatch("prop_change", { selected_index });
+
+	// Audio file extensions for detection
+	const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.flac', '.aac'];
+
+	function isAudioFile(file: FileData): boolean {
+		if (file.mime_type?.includes("audio")) return true;
+		const ext = (file.orig_name || file.path || "").toLowerCase();
+		return AUDIO_EXTENSIONS.some(e => ext.endsWith(e));
+	}
+
+	async function process_upload_files(
+		files: FileData[]
+	): Promise<GalleryData[]> {
+		const processed_files = await Promise.all(
+			files.map(async (x) => {
+				if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
+					const response = await fetch(x.url);
+					const svgContent = await response.text();
+					return {
+						...x,
+						url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+					};
+				}
+				return x;
+			})
+		);
+
+		return processed_files.map((x): GalleryData => {
+			if (x.mime_type?.includes("video")) {
+				return { video: x, caption: null };
+			} else if (isAudioFile(x)) {
+				return { audio: x, caption: null };
+			} else {
+				return { image: x, caption: null };
+			}
+		});
+	}
+
+	// Handle adding more files to existing gallery
+	async function handle_upload(e: CustomEvent<FileData | FileData[]>) {
+		const files = Array.isArray(e.detail) ? e.detail : [e.detail];
+		const new_items = await process_upload_files(files);
+
+		// Append to existing items instead of replacing
+		if (value && value.length > 0) {
+			value = [...value, ...new_items];
+		} else {
+			value = new_items;
+		}
+
+		gradio.dispatch("upload", value);
+		gradio.dispatch("change", value);
+	}
+</script>
+
+<Block
+	{visible}
+	variant="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}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	{#if interactive && no_value}
+		<!-- Initial upload area when gallery is empty -->
+		<BaseFileUpload
+			value={null}
+			{root}
+			{label}
+			{file_types}
+			max_file_size={gradio.max_file_size}
+			file_count={"multiple"}
+			i18n={gradio.i18n}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
+			on:upload={handle_upload}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+		>
+			<UploadText i18n={gradio.i18n} type="gallery" />
+		</BaseFileUpload>
+	{: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:upload={handle_upload}
+			{label}
+			{show_label}
+			{columns}
+			{rows}
+			{height}
+			{preview}
+			{object_fit}
+			{interactive}
+			{allow_preview}
+			bind:selected_index
+			bind:value
+			{show_share_button}
+			{show_download_button}
+			i18n={gradio.i18n}
+			_fetch={(...args) => gradio.client.fetch(...args)}
+			{show_fullscreen_button}
+			{fullscreen}
+			{root}
+			{file_types}
+			max_file_size={gradio.max_file_size}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
+		/>
+	{/if}
+</Block>
+
+<style>
+	/* Component styles are in Gallery.svelte */
+</style>

mediagallery/frontend/gradio.config.js

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

mediagallery/frontend/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gradio_mediagallery",
+  "version": "0.15.24",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.16.2",
+    "@gradio/client": "1.15.3",
+    "@gradio/icons": "0.12.0",
+    "@gradio/image": "0.22.10",
+    "@gradio/statustracker": "0.10.13",
+    "@gradio/upload": "0.16.8",
+    "@gradio/utils": "0.10.2",
+    "@gradio/video": "0.14.18",
+    "@gradio/file": "0.12.21",
+    "dequal": "^2.0.2"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.2"
+  },
+  "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"
+  }
+}

mediagallery/frontend/shared/Gallery.svelte

@@ -0,0 +1,1030 @@
+<script lang="ts">
+	import {
+		BlockLabel,
+		Empty,
+		ShareButton,
+		IconButton,
+		IconButtonWrapper,
+		FullscreenButton
+	} from "@gradio/atoms";
+	import { Upload } from "@gradio/upload";
+	import type { SelectData, I18nFormatter } 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, GalleryAudio, GalleryData } from "../types";
+	import { getMediaType, getMediaFile } from "../types";
+
+	import { Download, Image as ImageIcon, Clear, Play } from "@gradio/icons";
+	import { FileData } from "@gradio/client";
+	import type { Client } from "@gradio/client";
+	import { format_gallery_for_sharing } from "./utils";
+
+	export let show_label = true;
+	export let label: string;
+	export let value: GalleryData[] | null = null;
+	export let columns: number | number[] | undefined = [2];
+	export let rows: number | number[] | undefined = undefined;
+	export let height: number | "auto" = "auto";
+	export let preview: boolean;
+	export let allow_preview = true;
+	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
+		"cover";
+	export let show_share_button = false;
+	export let show_download_button = false;
+	export let i18n: I18nFormatter;
+	export let selected_index: number | null = null;
+	export let interactive: boolean;
+	export let _fetch: typeof fetch;
+	export let mode: "normal" | "minimal" = "normal";
+	export let show_fullscreen_button = true;
+	export let display_icon_button_wrapper_top_corner = false;
+	export let fullscreen = false;
+	export let root = "";
+	export let file_types: string[] | null = ["image", "video", "audio"];
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"] | undefined = undefined;
+	export let stream_handler: Client["stream"] | undefined = undefined;
+
+	let is_full_screen = false;
+	let image_container: HTMLElement;
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		select: SelectData;
+		preview_open: undefined;
+		preview_close: undefined;
+		fullscreen: boolean;
+		upload: FileData | FileData[];
+		error: string;
+	}>();
+
+	// tracks whether the value of the gallery was reset
+	let was_reset = true;
+
+	$: was_reset = value == null || value.length === 0 ? true : was_reset;
+
+	let resolved_value: GalleryData[] | null = null;
+
+	$: resolved_value =
+		value == null
+			? null
+			: (value.map((data) => {
+					if ("video" in data) {
+						return {
+							video: data.video as FileData,
+							caption: data.caption
+						};
+					} else if ("audio" in data) {
+						return {
+							audio: data.audio as FileData,
+							caption: data.caption
+						};
+					} else if ("image" in data) {
+						return { image: data.image as FileData, caption: data.caption };
+					}
+					return {};
+				}) as GalleryData[]);
+
+	let prev_value: GalleryData[] | null = value;
+	if (selected_index == null && preview && value?.length) {
+		selected_index = 0;
+	}
+	let old_selected_index: number | null = selected_index;
+
+	$: if (!dequal(prev_value, value)) {
+		// When value is falsy (clear button or first load),
+		// preview determines the selected image
+		if (was_reset) {
+			selected_index = preview && value?.length ? 0 : null;
+			was_reset = false;
+			// Otherwise we keep the selected_index the same if the
+			// gallery has at least as many elements as it did before
+		} else {
+			if (selected_index !== null && value !== null) {
+				selected_index = Math.max(
+					0,
+					Math.min(selected_index, value.length - 1)
+				);
+			} else {
+				selected_index = null;
+			}
+		}
+		dispatch("change");
+		prev_value = value;
+	}
+
+	$: previous =
+		((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) %
+		(resolved_value?.length ?? 0);
+	$: next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
+
+	function handle_preview_click(event: MouseEvent): void {
+		const element = event.target as HTMLElement;
+		const x = event.offsetX;
+		const width = element.offsetWidth;
+		const centerX = width / 2;
+
+		if (x < centerX) {
+			selected_index = previous;
+		} else {
+			selected_index = next;
+		}
+	}
+
+	function on_keydown(e: KeyboardEvent): void {
+		switch (e.code) {
+			case "Escape":
+				e.preventDefault();
+				selected_index = null;
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				selected_index = previous;
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				selected_index = next;
+				break;
+			default:
+				break;
+		}
+	}
+
+	$: {
+		if (selected_index !== old_selected_index) {
+			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);
+	}
+
+	let el: HTMLButtonElement[] = [];
+	let container_element: HTMLDivElement;
+
+	async function scroll_to_img(index: number | null): Promise<void> {
+		if (typeof index !== "number") return;
+		await tick();
+
+		if (el[index] === undefined) return;
+
+		el[index]?.focus();
+
+		const { left: container_left, width: container_width } =
+			container_element.getBoundingClientRect();
+		const { left, width } = el[index].getBoundingClientRect();
+
+		const relative_left = left - container_left;
+
+		const pos =
+			relative_left +
+			width / 2 -
+			container_width / 2 +
+			container_element.scrollLeft;
+
+		if (container_element && typeof container_element.scrollTo === "function") {
+			container_element.scrollTo({
+				left: pos < 0 ? 0 : pos,
+				behavior: "smooth"
+			});
+		}
+	}
+
+	let window_height = 0;
+
+	// Unlike `gr.Image()`, images specified via remote URLs are not cached in the server
+	// and their remote URLs are directly passed to the client as `value[].image.url`.
+	// The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download),
+	// so we need to download the image via JS as below.
+	async function download(file_url: string, name: string): Promise<void> {
+		let response;
+		try {
+			response = await _fetch(file_url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				// If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful),
+				// open the link in a new tab instead, mimicing the behavior of the `download` attribute for remote URLs,
+				// which is not ideal, but a reasonable fallback.
+				window.open(file_url, "_blank", "noreferrer");
+				return;
+			}
+
+			throw error;
+		}
+		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);
+	}
+
+	$: selected_media =
+		selected_index != null && resolved_value != null
+			? resolved_value[selected_index]
+			: null;
+
+	let thumbnails_overflow = false;
+
+	function check_thumbnails_overflow(): void {
+		if (container_element) {
+			thumbnails_overflow =
+				container_element.scrollWidth > container_element.clientWidth;
+		}
+	}
+
+	onMount(() => {
+		check_thumbnails_overflow();
+		document.addEventListener("fullscreenchange", () => {
+			is_full_screen = !!document.fullscreenElement;
+		});
+		window.addEventListener("resize", check_thumbnails_overflow);
+		return () =>
+			window.removeEventListener("resize", check_thumbnails_overflow);
+	});
+
+	$: resolved_value, check_thumbnails_overflow();
+	$: if (container_element) {
+		check_thumbnails_overflow();
+	}
+</script>
+
+<svelte:window bind:innerHeight={window_height} />
+
+{#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}>
+		{#if selected_media && allow_preview}
+			<button
+				on:keydown={on_keydown}
+				class="preview"
+				class:minimal={mode === "minimal"}
+			>
+				<IconButtonWrapper
+					display_top_corner={display_icon_button_wrapper_top_corner}
+				>
+					{#if show_download_button}
+						<IconButton
+							Icon={Download}
+							label={i18n("common.download")}
+							on:click={() => {
+								const file = getMediaFile(selected_media);
+								if (file == null) {
+									return;
+								}
+								const { url, orig_name } = file;
+								if (url) {
+									download(url, orig_name ?? "media");
+								}
+							}}
+						/>
+					{/if}
+
+					{#if show_fullscreen_button}
+						<FullscreenButton {fullscreen} on:fullscreen />
+					{/if}
+
+					{#if show_share_button}
+						<div class="icon-button">
+							<ShareButton
+								{i18n}
+								on:share
+								on:error
+								value={resolved_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-button"
+					on:click={"image" in selected_media
+						? (event) => handle_preview_click(event)
+						: null}
+					style="height: calc(100% - {selected_media.caption
+						? '80px'
+						: '60px'})"
+					aria-label="detailed view of selected media"
+				>
+					{#if "image" in selected_media}
+						<Image
+							data-testid="detailed-image"
+							src={selected_media.image.url}
+							alt={selected_media.caption || ""}
+							title={selected_media.caption || null}
+							class={selected_media.caption && "with-caption"}
+							loading="lazy"
+						/>
+					{:else if "video" in selected_media}
+						<Video
+							src={selected_media.video.url}
+							data-testid={"detailed-video"}
+							alt={selected_media.caption || ""}
+							loading="lazy"
+							loop={false}
+							is_stream={false}
+							muted={false}
+							controls={true}
+						/>
+					{:else if "audio" in selected_media}
+						<div class="audio-preview">
+							<div class="audio-icon-large">
+								<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+									<path d="M9 18V5l12-2v13"></path>
+									<circle cx="6" cy="18" r="3"></circle>
+									<circle cx="18" cy="16" r="3"></circle>
+								</svg>
+							</div>
+							<div class="audio-filename">{selected_media.audio.orig_name || "Audio"}</div>
+							<audio
+								src={selected_media.audio.url}
+								controls
+								class="audio-player"
+								data-testid="detailed-audio"
+							/>
+						</div>
+					{/if}
+				</button>
+				{#if selected_media?.caption}
+					<caption class="caption">
+						{selected_media.caption}
+					</caption>
+				{/if}
+				<div
+					bind:this={container_element}
+					class="thumbnails scroll-hide"
+					data-testid="container_el"
+					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}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+								/>
+							{:else if "video" in media}
+								<Play />
+								<Video
+									src={media.video.url}
+									title={media.caption || null}
+									is_stream={false}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+									loop={false}
+								/>
+							{:else if "audio" in media}
+								<div class="audio-thumbnail">
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M9 18V5l12-2v13"></path>
+										<circle cx="6" cy="18" r="3"></circle>
+										<circle cx="18" cy="16" r="3"></circle>
+									</svg>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			</button>
+		{/if}
+
+		<div
+			class="grid-wrap"
+			class:minimal={mode === "minimal"}
+			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
+			class:hidden={is_full_screen}
+		>
+			<div
+				class="grid-container"
+				style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
+				class:pt-6={show_label}
+			>
+				{#each resolved_value as entry, i}
+					<div class="thumbnail-wrapper">
+						<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={typeof entry.image === "string"
+										? entry.image
+										: entry.image.url}
+									loading="lazy"
+								/>
+								<div class="media-type-badge image">
+									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+										<circle cx="8.5" cy="8.5" r="1.5"></circle>
+										<polyline points="21 15 16 10 5 21"></polyline>
+									</svg>
+								</div>
+							{:else if "video" in entry}
+								<Play />
+								<Video
+									src={entry.video.url}
+									title={entry.caption || null}
+									is_stream={false}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+									loop={false}
+								/>
+								<div class="media-type-badge video">
+									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<polygon points="5 3 19 12 5 21 5 3"></polygon>
+									</svg>
+								</div>
+							{:else if "audio" in entry}
+								<div class="audio-thumbnail-lg">
+									<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M9 18V5l12-2v13"></path>
+										<circle cx="6" cy="18" r="3"></circle>
+										<circle cx="18" cy="16" r="3"></circle>
+									</svg>
+								</div>
+								<div class="media-type-badge audio">
+									<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M9 18V5l12-2v13"></path>
+										<circle cx="6" cy="18" r="3"></circle>
+										<circle cx="18" cy="16" r="3"></circle>
+									</svg>
+								</div>
+							{/if}
+						</button>
+						<!-- Remove button -->
+						{#if interactive}
+							<button
+								class="remove-btn"
+								on:click|stopPropagation={() => {
+									if (value) {
+										value = value.filter((_, idx) => idx !== i);
+										if (selected_index !== null && selected_index >= i) {
+											selected_index = selected_index > 0 ? selected_index - 1 : null;
+										}
+										dispatch("change");
+									}
+								}}
+								aria-label="Remove item"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						{/if}
+						<!-- Filename label -->
+						<div class="filename-label">
+							{#if "image" in entry}
+								{entry.image.orig_name || "Image"}
+							{:else if "video" in entry}
+								{entry.video.orig_name || "Video"}
+							{:else if "audio" in entry}
+								{entry.audio.orig_name || "Audio"}
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+		<!-- Add Media button below grid -->
+		{#if interactive && upload && stream_handler}
+			<div class="add-media-bar">
+				<Upload
+					filetype={file_types}
+					file_count="multiple"
+					{max_file_size}
+					{root}
+					{upload}
+					{stream_handler}
+					on:load={(e) => dispatch("upload", e.detail)}
+					on:error={(e) => dispatch("error", e.detail)}
+				>
+					<div class="add-media-btn">
+						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="12" y1="5" x2="12" y2="19"></line>
+							<line x1="5" y1="12" x2="19" y2="12"></line>
+						</svg>
+						<span>Add Media</span>
+					</div>
+				</Upload>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style lang="postcss">
+	.gallery-container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.image-container {
+		height: 100%;
+		position: relative;
+	}
+	.image-container :global(img),
+	button {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+		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.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);
+	}
+
+	.fixed-height {
+		min-height: var(--size-80);
+		max-height: 55vh;
+	}
+
+	@media (--screen-xl) {
+		.fixed-height {
+			min-height: 450px;
+		}
+	}
+
+	.media-button {
+		height: calc(100% - 60px);
+		width: 100%;
+		display: flex;
+	}
+	.media-button :global(img),
+	.media-button :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		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%;
+	}
+	.preview :global(img.with-caption) {
+		height: var(--size-full);
+	}
+
+	.preview.minimal :global(img.with-caption) {
+		height: auto;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.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(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);
+	}
+
+	.thumbnail-small > img {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: var(--object-fit);
+	}
+
+	.grid-wrap {
+		position: relative;
+		padding: var(--size-2);
+		max-height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		flex: 1;
+	}
+
+	.grid-container {
+		display: grid;
+		position: relative;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: var(--spacing-md);
+		width: 100%;
+	}
+
+	/* Responsive columns */
+	@media (min-width: 768px) {
+		.grid-container {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	@media (min-width: 1280px) {
+		.grid-container {
+			grid-template-columns: repeat(4, minmax(0, 1fr));
+		}
+	}
+
+	@media (min-width: 1536px) {
+		.grid-container {
+			grid-template-columns: repeat(5, minmax(0, 1fr));
+		}
+	}
+
+	.thumbnail-wrapper {
+		position: relative;
+		width: 100%;
+		padding-bottom: 100%; /* Square aspect ratio using padding trick */
+		min-width: 0;
+		overflow: hidden;
+		border-radius: var(--button-small-radius);
+		background: var(--background-fill-secondary);
+		aspect-ratio: 1 / 1;
+	}
+
+	.thumbnail-lg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	/* Force all images and videos to be square cropped */
+	.thumbnail-lg :global(img),
+	.thumbnail-lg :global(video) {
+		position: absolute !important;
+		top: 0 !important;
+		left: 0 !important;
+		width: 100% !important;
+		height: 100% !important;
+		object-fit: cover !important;
+		max-width: none !important;
+		max-height: none !important;
+		min-width: 100% !important;
+		min-height: 100% !important;
+	}
+
+	/* Picture elements from Image component */
+	.thumbnail-lg :global(picture) {
+		position: absolute !important;
+		top: 0 !important;
+		left: 0 !important;
+		width: 100% !important;
+		height: 100% !important;
+		overflow: hidden !important;
+	}
+
+	.grid-wrap.minimal {
+		padding: 0;
+	}
+
+	/* Audio thumbnail styles */
+	.audio-thumbnail {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+	}
+
+	.audio-thumbnail-lg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+		gap: var(--size-2);
+		padding: var(--size-2);
+	}
+
+	.audio-thumbnail-lg .audio-name {
+		font-size: var(--text-sm);
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		max-width: 100%;
+		text-align: center;
+	}
+
+	/* Audio preview styles */
+	.audio-preview {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+		gap: var(--size-4);
+		padding: var(--size-8);
+	}
+
+	.audio-icon-large {
+		opacity: 0.8;
+	}
+
+	.audio-filename {
+		font-size: var(--text-lg);
+		font-weight: var(--weight-semibold);
+		text-align: center;
+		max-width: 80%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.audio-player {
+		width: 80%;
+		max-width: 400px;
+	}
+
+	/* Media type badge styles */
+	.media-type-badge {
+		position: absolute;
+		bottom: var(--size-1);
+		left: var(--size-1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--size-1);
+		border-radius: var(--radius-sm);
+		background: rgba(0, 0, 0, 0.6);
+		color: white;
+		z-index: var(--layer-1);
+	}
+
+	.media-type-badge.image {
+		background: rgba(59, 130, 246, 0.8);
+	}
+
+	.media-type-badge.video {
+		background: rgba(239, 68, 68, 0.8);
+	}
+
+	.media-type-badge.audio {
+		background: rgba(139, 92, 246, 0.8);
+	}
+
+	.media-type-badge svg {
+		width: 12px;
+		height: 12px;
+	}
+
+	/* Remove button */
+	.remove-btn {
+		position: absolute;
+		top: var(--size-1);
+		right: var(--size-1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		border: none;
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 0.2s ease, background 0.2s ease;
+		z-index: var(--layer-2);
+	}
+
+	.thumbnail-wrapper:hover .remove-btn {
+		opacity: 1;
+	}
+
+	.remove-btn:hover {
+		background: rgba(239, 68, 68, 0.9);
+	}
+
+	.remove-btn svg {
+		width: 14px;
+		height: 14px;
+	}
+
+	/* Filename label */
+	.filename-label {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: var(--size-1) var(--size-2);
+		background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+		color: white;
+		font-size: var(--text-xs);
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		pointer-events: none;
+		border-radius: 0 0 var(--button-small-radius) var(--button-small-radius);
+		z-index: var(--layer-1);
+	}
+
+	/* Add Media button bar */
+	.add-media-bar {
+		padding: var(--size-2);
+		border-top: 1px solid var(--border-color-primary);
+	}
+
+	.add-media-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--size-2);
+		padding: var(--size-2) var(--size-4);
+		background: var(--background-fill-secondary);
+		border: 1px dashed var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		color: var(--body-text-color-subdued);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		width: 100%;
+	}
+
+	.add-media-btn:hover {
+		background: var(--background-fill-primary);
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
+
+	.add-media-btn input {
+		display: none;
+	}
+
+	.add-media-btn svg {
+		flex-shrink: 0;
+	}
+</style>

mediagallery/frontend/shared/utils.ts

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

mediagallery/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"]
+}

mediagallery/frontend/types.ts

@@ -0,0 +1,33 @@
+import type { FileData } from "@gradio/client";
+
+export interface GalleryImage {
+	image: FileData;
+	caption: string | null;
+}
+
+export interface GalleryVideo {
+	video: FileData;
+	caption: string | null;
+}
+
+export interface GalleryAudio {
+	audio: FileData;
+	caption: string | null;
+}
+
+export type GalleryData = GalleryImage | GalleryVideo | GalleryAudio;
+
+// Helper to detect media type
+export type MediaType = "image" | "video" | "audio";
+
+export function getMediaType(item: GalleryData): MediaType {
+	if ("video" in item) return "video";
+	if ("audio" in item) return "audio";
+	return "image";
+}
+
+export function getMediaFile(item: GalleryData): FileData {
+	if ("video" in item) return item.video;
+	if ("audio" in item) return item.audio;
+	return item.image;
+}

mediagallery/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 = "YOUR NAME", email = "YOUREMAIL@domain.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"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_mediagallery"]