Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/.gradio/cached_examples/24/Upload[[:space:]]Image[[:space:]]All[[:space:]]metadata/7a159874ef63b94d8fa4/image_with_meta.png filter=lfs diff=lfs merge=lfs -text
+src/.gradio/cached_examples/24/Upload[[:space:]]Image[[:space:]]Custom[[:space:]]metadata[[:space:]]only/8a0de8f0e921a79b67a8/image_with_meta.png filter=lfs diff=lfs merge=lfs -text
+src/examples/image_with_meta.png filter=lfs diff=lfs merge=lfs -text

.gitignore

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

README.md

@@ -1,12 +1,673 @@
----
-title: Gradio Imagemeta
-emoji: 🌍
-colorFrom: indigo
-colorTo: blue
-sdk: gradio
-sdk_version: 5.42.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, Image]
+title: gradio_imagemeta
+short_description: Image Preview with Metadata for Gradio Interface
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_imagemeta`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Image Preview with Metadata for Gradio Interface
+
+## Installation
+
+```bash
+pip install gradio_imagemeta
+```
+
+## Usage
+
+```python
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    """Configuration for image metadata settings."""
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    """Root configuration for image properties, including nested image settings."""
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    """
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    """
+    # Verify file existence
+    if not Path(img_custom_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return str(img_custom_path), str(img_all_path)
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    """
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    """
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    """
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    """
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        """
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        """
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,
+            disable_preprocess=False,
+            interactive=True
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            width=300,
+            height=400,
+            popup_metadata_height=400,
+            popup_metadata_width=500
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        """
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        """
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()
+```
+
+## `ImageMeta`
+
+### 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
+str | Image.Image | np.ndarray | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A PIL Image, numpy array, path or URL for the default value that Image component is going to take. 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">File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>image_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal[
+        "1",
+        "L",
+        "P",
+        "RGB",
+        "RGBA",
+        "CMYK",
+        "YCbCr",
+        "LAB",
+        "HSV",
+        "I",
+        "F",
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>"RGB"</code></td>
+<td align="left">The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).</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>"numpy"</code></td>
+<td align="left">The format the image is converted 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. To support animated GIFs in input, the `type` should be set to "filepath" or "pil". To support SVGs, the `type` should be set to "filepath".</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>show_download_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 display button to download image. Only applies if interactive is False (e.g. if the component is used as an output).</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>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, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</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>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>placeholder</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.</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 image in fullscreen mode. If False, icon does not appear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>only_custom_metadata</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, extracts only custom metadata, excluding technical metadata like ImageWidth or ImageHeight. Defaults to True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>disable_preprocess</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, skips preprocessing and returns the raw ImageMetaData payload. Defaults to True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>400</code></td>
+<td align="left">Metadata popup width in pixels or CSS units. Defaults to 400.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>300</code></td>
+<td align="left">Metadata popup height in pixels or CSS units. Defaults to 300.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the ImageMeta using the clear button for the component. |
+| `change` | Triggered when the value of the ImageMeta 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. |
+| `select` | Event listener for when the user selects or deselects the ImageMeta. Uses event data gradio.SelectData to carry `value` referring to the label of the ImageMeta, and `selected` to refer to state of the ImageMeta. See EventData documentation on how to use this event data |
+| `upload` | This listener is triggered when the user uploads a file into the ImageMeta. |
+| `input` | This listener is triggered when the user changes the value of the ImageMeta. |
+| `load_metadata` | Triggered when the user clicks the 'Load Metadata' button, expecting ImageMetaData as input. |
+
+
+
+### 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, preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.
+- **As input:** Should return, input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.
+
+ ```python
+ def predict(
+     value: numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None
+ ) -> numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None:
+     return value
+ ```
+ 
+
+## `ImageMetaData`
+```python
+class ImageMetaData(ImageData):
+    pass
+```

app.py

@@ -0,0 +1,216 @@
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    """Configuration for image metadata settings."""
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    """Root configuration for image properties, including nested image settings."""
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    """
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    """
+    # Verify file existence
+    if not Path(img_custom_path.path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path.path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return img_custom_path.path, img_all_path.path
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    """
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    """
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    """
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    """
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        """
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        """
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,            
+            interactive=False
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            type="filepath",
+            width=300,
+            height=400,            
+            popup_metadata_height=400,
+            popup_metadata_width=500,
+            interactive=False
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        """
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        """
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()

css.css

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

requirements.txt

@@ -0,0 +1,2 @@
+gradio_imagemeta
+gradio_propertysheet

space.py

@@ -0,0 +1,344 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'ImageMeta': {'description': "A Gradio component for uploading or displaying images, with support for metadata extraction and a custom load_metadata event.\n\nThis component allows users to upload images (as input) or display images (as output). It includes a custom event for loading metadata, triggered by a 'Load Metadata' button in the UI, which expects ImageMetaData as input.", 'members': {'__init__': {'value': {'type': 'str | Image.Image | np.ndarray | Callable | None', 'default': 'None', 'description': 'A PIL Image, numpy array, path or URL for the default value that Image component is going to take. 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': 'File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.'}, 'image_mode': {'type': 'Literal[\n        "1",\n        "L",\n        "P",\n        "RGB",\n        "RGBA",\n        "CMYK",\n        "YCbCr",\n        "LAB",\n        "HSV",\n        "I",\n        "F",\n    ]\n    | None', 'default': '"RGB"', 'description': 'The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).'}, 'type': {'type': 'Literal["numpy", "pil", "filepath"]', 'default': '"numpy"', 'description': 'The format the image is converted 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. To support animated GIFs in input, the `type` should be set to "filepath" or "pil". To support SVGs, the `type` should be set to "filepath".'}, '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.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download image. Only applies if interactive is False (e.g. if the component is used as an output).'}, '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.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, '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."}, '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.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.'}, '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 image in fullscreen mode. If False, icon does not appear.'}, 'only_custom_metadata': {'type': 'bool', 'default': 'True', 'description': 'If True, extracts only custom metadata, excluding technical metadata like ImageWidth or ImageHeight. Defaults to True.'}, 'disable_preprocess': {'type': 'bool', 'default': 'True', 'description': 'If True, skips preprocessing and returns the raw ImageMetaData payload. Defaults to True.'}, 'popup_metadata_width': {'type': 'int | str', 'default': '400', 'description': 'Metadata popup width in pixels or CSS units. Defaults to 400.'}, 'popup_metadata_height': {'type': 'int | str', 'default': '300', 'description': 'Metadata popup height in pixels or CSS units. Defaults to 300.'}}, 'postprocess': {'value': {'type': 'numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None', 'description': 'Input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.'}}, 'preprocess': {'return': {'type': 'numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None', 'description': 'Preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the ImageMeta using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the ImageMeta 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.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the ImageMeta. Uses event data gradio.SelectData to carry `value` referring to the label of the ImageMeta, and `selected` to refer to state of the ImageMeta. 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 ImageMeta.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the ImageMeta.'}, 'load_metadata': {'type': None, 'default': None, 'description': "Triggered when the user clicks the 'Load Metadata' button, expecting ImageMetaData as input."}}}, '__meta__': {'additional_interfaces': {'ImageMetaData': {'source': 'class ImageMetaData(ImageData):\n    pass'}}, 'user_fn_refs': {'ImageMeta': ['ImageMetaData']}}}
+
+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_imagemeta`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Image Preview with Metadata for Gradio Interface
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_imagemeta
+```
+
+## Usage
+
+```python
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    \"\"\"Configuration for image metadata settings.\"\"\"
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    \"\"\"Root configuration for image properties, including nested image settings.\"\"\"
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    \"\"\"
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    \"\"\"
+    # Verify file existence
+    if not Path(img_custom_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return str(img_custom_path), str(img_all_path)
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    \"\"\"
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    \"\"\"
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    \"\"\"
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    \"\"\"
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        \"\"\"
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        \"\"\"
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,
+            disable_preprocess=False,
+            interactive=True
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            width=300,
+            height=400,
+            popup_metadata_height=400,
+            popup_metadata_width=500
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        \"\"\"
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        \"\"\"
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `ImageMeta`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["ImageMeta"]["members"]["__init__"], linkify=['ImageMetaData'])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["ImageMeta"]["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, preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.
+- **As output:** Should return, input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.
+
+ ```python
+def predict(
+    value: numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None
+) -> numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None:
+    return value
+```
+""", elem_classes=["md-custom", "ImageMeta-user-fn"], header_links=True)
+
+
+
+
+    code_ImageMetaData = gr.Markdown("""
+## `ImageMetaData`
+```python
+class ImageMetaData(ImageData):
+    pass
+```""", elem_classes=["md-custom", "ImageMetaData"], header_links=True)
+
+    demo.load(None, js=r"""function() {
+    const refs = {
+            ImageMetaData: [], };
+    const user_fn_refs = {
+          ImageMeta: ['ImageMetaData'], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/.gradio/cached_examples/24/indices.csv

@@ -0,0 +1 @@
+0

src/.gradio/cached_examples/24/log.csv

@@ -0,0 +1,2 @@
+Upload Image (Custom metadata only),Upload Image (All metadata),timestamp
+"{""path"": "".gradio\\cached_examples\\24\\Upload Image Custom metadata only\\8a0de8f0e921a79b67a8\\image_with_meta.png"", ""url"": ""/gradio_api/file=C:\\Users\\pelol\\AppData\\Local\\Temp\\gradio\\8712b2e1fb048f8ef5b4cc59f8a9aa7d34a5f09f2ae3384b5b3b4afe6c5bc52a\\image_with_meta.png"", ""size"": null, ""orig_name"": ""image_with_meta.png"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}","{""path"": "".gradio\\cached_examples\\24\\Upload Image All metadata\\7a159874ef63b94d8fa4\\image_with_meta.png"", ""url"": ""/gradio_api/file=C:\\Users\\pelol\\AppData\\Local\\Temp\\gradio\\8712b2e1fb048f8ef5b4cc59f8a9aa7d34a5f09f2ae3384b5b3b4afe6c5bc52a\\image_with_meta.png"", ""size"": null, ""orig_name"": ""image_with_meta.png"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}",2025-08-11 19:51:20.821323

src/.vscode/launch.json

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

src/README.md

@@ -0,0 +1,673 @@
+---
+tags: [gradio-custom-component, Image]
+title: gradio_imagemeta
+short_description: Image Preview with Metadata for Gradio Interface
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_imagemeta`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Image Preview with Metadata for Gradio Interface
+
+## Installation
+
+```bash
+pip install gradio_imagemeta
+```
+
+## Usage
+
+```python
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    """Configuration for image metadata settings."""
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    """Root configuration for image properties, including nested image settings."""
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    """
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    """
+    # Verify file existence
+    if not Path(img_custom_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return str(img_custom_path), str(img_all_path)
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    """
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    """
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    """
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    """
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        """
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        """
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,
+            disable_preprocess=False,
+            interactive=True
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            width=300,
+            height=400,
+            popup_metadata_height=400,
+            popup_metadata_width=500
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        """
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        """
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()
+```
+
+## `ImageMeta`
+
+### 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
+str | Image.Image | np.ndarray | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A PIL Image, numpy array, path or URL for the default value that Image component is going to take. 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">File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.</td>
+</tr>
+
+<tr>
+<td align="left"><code>image_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal[
+        "1",
+        "L",
+        "P",
+        "RGB",
+        "RGBA",
+        "CMYK",
+        "YCbCr",
+        "LAB",
+        "HSV",
+        "I",
+        "F",
+    ]
+    | None
+```
+
+</td>
+<td align="left"><code>"RGB"</code></td>
+<td align="left">The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).</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>"numpy"</code></td>
+<td align="left">The format the image is converted 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. To support animated GIFs in input, the `type` should be set to "filepath" or "pil". To support SVGs, the `type` should be set to "filepath".</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>show_download_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 display button to download image. Only applies if interactive is False (e.g. if the component is used as an output).</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>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, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</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>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>placeholder</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.</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 image in fullscreen mode. If False, icon does not appear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>only_custom_metadata</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, extracts only custom metadata, excluding technical metadata like ImageWidth or ImageHeight. Defaults to True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>disable_preprocess</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, skips preprocessing and returns the raw ImageMetaData payload. Defaults to True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>400</code></td>
+<td align="left">Metadata popup width in pixels or CSS units. Defaults to 400.</td>
+</tr>
+
+<tr>
+<td align="left"><code>popup_metadata_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>300</code></td>
+<td align="left">Metadata popup height in pixels or CSS units. Defaults to 300.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the ImageMeta using the clear button for the component. |
+| `change` | Triggered when the value of the ImageMeta 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. |
+| `select` | Event listener for when the user selects or deselects the ImageMeta. Uses event data gradio.SelectData to carry `value` referring to the label of the ImageMeta, and `selected` to refer to state of the ImageMeta. See EventData documentation on how to use this event data |
+| `upload` | This listener is triggered when the user uploads a file into the ImageMeta. |
+| `input` | This listener is triggered when the user changes the value of the ImageMeta. |
+| `load_metadata` | Triggered when the user clicks the 'Load Metadata' button, expecting ImageMetaData as input. |
+
+
+
+### 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, preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.
+- **As input:** Should return, input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.
+
+ ```python
+ def predict(
+     value: numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None
+ ) -> numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None:
+     return value
+ ```
+ 
+
+## `ImageMetaData`
+```python
+class ImageMetaData(ImageData):
+    pass
+```

src/backend/gradio_imagemeta/__init__.py

@@ -0,0 +1,4 @@
+
+from .imagemeta import ImageMeta
+
+__all__ = ['ImageMeta']

src/backend/gradio_imagemeta/helpers.py

@@ -0,0 +1,182 @@
+from dataclasses import fields
+from pathlib import Path
+from typing import Any, Dict, List
+from PIL import Image, PngImagePlugin, ExifTags
+import numpy as np
+from gradio import image_utils
+
+def extract_metadata(image_data: str | Path | Image.Image | np.ndarray | None, only_custom_metadata: bool = True) -> Dict[str, Any]:
+    """
+    Extracts metadata from an image.
+
+    Args:
+        image_data: Image data as a filepath, Path, PIL Image, NumPy array, or None.
+        only_custom_metadata: If True, excludes technical metadata (e.g., ImageWidth, ImageHeight). Defaults to True.
+
+    Returns:
+        Dictionary of extracted metadata. Returns empty dictionary if no metadata is available or extraction fails.
+    """
+    if not image_data:
+        return {}
+
+    try:
+        # Convert image_data to PIL.Image
+        if isinstance(image_data, (str, Path)):
+            image = Image.open(image_data)
+        elif isinstance(image_data, np.ndarray):
+            image = Image.fromarray(image_data)
+        elif isinstance(image_data, Image.Image):
+            image = image_data
+        elif hasattr(image_data, 'path'):  # For ImageMetaData
+            image = Image.open(image_data.path)
+        else:
+            return {}
+
+        decoded_meta = {}
+        if image.format == "PNG":
+            if not only_custom_metadata:
+                decoded_meta["ImageWidth"] = image.width
+                decoded_meta["ImageHeight"] = image.height
+            metadata = image.info
+            if metadata:
+                for key, value in metadata.items():
+                    if isinstance(value, bytes):
+                        value = value.decode(errors='ignore')
+                    decoded_meta[str(key)] = value
+        else:
+            exif_data = image.getexif()
+            if exif_data:
+                for tag_id, value in exif_data.items():
+                    tag = ExifTags.TAGS.get(tag_id, tag_id)
+                    if isinstance(value, bytes):
+                        value = value.decode(errors='ignore')
+                    decoded_meta[str(tag)] = value
+            if not only_custom_metadata:
+                decoded_meta["ImageWidth"] = image.width
+                decoded_meta["ImageHeight"] = image.height
+
+        return decoded_meta
+    except Exception:
+        return {}
+
+def preprocess_image(image_data: str | Path | Image.Image | np.ndarray, type: str = "numpy") -> np.ndarray | Image.Image:
+    """
+    Processes an image to the specified format.
+
+    Args:
+        image_data: Image data as a filepath, Path, PIL Image, or NumPy array.
+        type: Output format, either "numpy" (array with shape (height, width, 3)) or "pil" (PIL Image). Defaults to "numpy".
+
+    Returns:
+        Processed image as a NumPy array or PIL Image.
+
+    Raises:
+        ValueError: If image_data type or output type is unsupported.
+    """
+    if isinstance(image_data, (str, Path)):
+        payload = image_data
+    elif isinstance(image_data, Image.Image):
+        payload = image_data
+    elif isinstance(image_data, np.ndarray):
+        payload = image_data
+    elif hasattr(image_data, 'path'):  # For ImageMetaData
+        payload = image_data.path
+    else:
+        raise ValueError(f"Unsupported image_data type: {type(image_data)}")
+
+    if type == "numpy":
+        return image_utils.preprocess_image(payload, type="numpy")
+    elif type == "pil":
+        return image_utils.preprocess_image(payload, type="pil")
+    else:
+        raise ValueError(f"Unsupported type: {type}")
+
+def add_metadata(image_data: str | Path | Image.Image | np.ndarray, metadata: Dict[str, Any], save_path: str) -> bool:
+    """
+    Adds metadata to an image and saves it to the specified path.
+
+    Args:
+        image_data: Image data as a filepath, Path, PIL Image, or NumPy array.
+        metadata: Dictionary of metadata to add to the image.
+        save_path: Filepath where the modified image will be saved.
+
+    Returns:
+        True if metadata was added and image was saved successfully, False otherwise.
+    """
+    try:
+        if not bool(save_path):
+            return False
+        
+        # Convert image_data to PIL.Image
+        if isinstance(image_data, (str, Path)):
+            image = Image.open(image_data)
+        elif isinstance(image_data, np.ndarray):
+            image = Image.fromarray(image_data)
+        elif isinstance(image_data, Image.Image):
+            image = image_data
+        elif hasattr(image_data, 'path'):  # For ImageMetaData
+            image = Image.open(image_data.path)
+        else:
+            return False
+
+        image_copy = image.copy()
+        if image.format == "PNG":
+            meta = PngImagePlugin.PngInfo()
+            for key, value in metadata.items():
+                meta.add_text(str(key), str(value))
+            image_copy.info.update(metadata)  # For reference, but requires pnginfo when saving
+            image_copy.save(save_path, pnginfo=meta)
+        else:
+            exif = image_copy.getexif() or Image.Exif()
+            for key, value in metadata.items():
+                tag_id = next((k for k, v in ExifTags.TAGS.items() if v == key), None)
+                if tag_id:
+                    exif[tag_id] = value
+            image_copy.exif = exif
+            image_copy.save(save_path)    
+        return True
+    except Exception:
+        return False
+    
+def transfer_metadata(output_fields: List[Any], metadata: Dict[str, Any], dataclass_fields: Dict[str, str]) -> List[Any]:
+    """
+    Maps metadata to a list of output components based on their labels.
+
+    Args:
+        output_fields: List of components (e.g., Textbox, PropertySheet).
+        metadata: Dictionary of extracted image metadata.
+        dataclass_fields: Dictionary mapping component labels (e.g., 'Model') to field paths (e.g., 'image_settings.model' or 'description').
+
+    Returns:
+        List of values (strings for Textbox, nested dictionary for PropertySheet) in the same order as output_fields.
+    """
+    output_values = [None] * len(output_fields)
+    for i, component in enumerate(output_fields):
+        label = getattr(component, 'label', None)
+
+        # Check if the component is a PropertySheet via root_label attribute
+        is_property_sheet = hasattr(component, 'root_label')
+        if is_property_sheet:
+            # Create nested dictionary for PropertySheet
+            updated_config = {}
+            for dataclass_label, field_path in dataclass_fields.items():
+                value = str(metadata.get(dataclass_label, 'None'))
+                value = None if value == 'None' else value
+                # Split field_path into parts (e.g., 'image_settings.model' -> ['image_settings', 'model'])
+                parts = field_path.split('.')
+                # Build nested structure in dictionary
+                current = updated_config
+                for part in parts[:-1]:
+                    if part not in current:
+                        current[part] = {}
+                    current = current[part]
+                # Assign value to final field
+                current[parts[-1]] = value
+            output_values[i] = updated_config
+        else:
+            # For other components (e.g., Textbox), assign raw value
+            value = str(metadata.get(label, None)) if label else None
+            value = None if value == 'None' else value
+            output_values[i] = value
+    
+    return output_values

src/backend/gradio_imagemeta/imagemeta.py

@@ -0,0 +1,231 @@
+from __future__ import annotations
+from collections.abc import Callable, Sequence
+from pathlib import Path
+from PIL import Image
+import numpy as np
+from typing import TYPE_CHECKING, Any, Literal
+from gradio_client import handle_file
+from gradio.components.base import Component
+from gradio.data_classes import Base64ImageData, ImageData
+from gradio.events import Events, EventListener
+from gradio import image_utils, utils
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+Image.init()
+
+class ImageMetaData(ImageData):
+    """Custom data model for image data with metadata support."""
+    pass
+
+class ImageMeta(Component):
+    """
+    A Gradio component for uploading or displaying images, with support for metadata extraction and a custom load_metadata event.
+
+    This component allows users to upload images (as input) or display images (as output). It includes a custom event for loading metadata, triggered by a 'Load Metadata' button in the UI, which expects ImageMetaData as input.
+    """
+    load_metadata = EventListener(
+        "load_metadata",
+        doc="Triggered when the user clicks the 'Load Metadata' button, expecting ImageMetaData as input."
+    )
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.select,
+        Events.upload,
+        Events.input,
+        load_metadata,
+    ]
+
+    data_model = ImageMetaData
+    image_mode: Literal["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"] | None
+    type: Literal["numpy", "pil", "filepath"]
+
+    def __init__(
+        self,
+        value: str | Image.Image | np.ndarray | Callable | None = None,
+        *,
+        format: str = "webp",
+        height: int | str | None = None,
+        width: int | str | None = None,
+        image_mode: Literal["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"] | None = "RGB",
+        type: Literal["numpy", "pil", "filepath"] = "numpy",
+        label: str | I18nData | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        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",
+        show_share_button: bool | None = None,
+        placeholder: str | None = None,
+        show_fullscreen_button: bool = True,
+        only_custom_metadata: bool = True,
+        disable_preprocess: bool = True,
+        popup_metadata_width: int | str = 400,
+        popup_metadata_height: int | str = 300,
+    ):
+        """
+        Initializes the ImageMeta component.
+
+        Args:
+            value: A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
+            format: File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
+            width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
+            image_mode: The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).
+            type: The format the image is converted 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. To support animated GIFs in input, the `type` should be set to "filepath" or "pil". To support SVGs, the `type` should be set to "filepath".
+            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.
+            show_download_button: If True, will display button to download image. Only applies if interactive is False (e.g. if the component is used as an output).
+            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.
+            interactive: If True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
+            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.
+            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.
+            placeholder: Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.
+            show_fullscreen_button: If True, will show a fullscreen icon in the corner of the component that allows user to view the image in fullscreen mode. If False, icon does not appear.
+            only_custom_metadata: If True, extracts only custom metadata, excluding technical metadata like ImageWidth or ImageHeight. Defaults to True.
+            disable_preprocess: If True, skips preprocessing and returns the raw ImageMetaData payload. Defaults to True.
+            popup_metadata_width: Metadata popup width in pixels or CSS units. Defaults to 400.
+            popup_metadata_height: Metadata popup height in pixels or CSS units. Defaults to 300.
+        """
+        self.format = format
+        self.height = height
+        self.width = width
+        self.image_mode = image_mode
+        valid_types = ["numpy", "pil", "filepath"]
+        if type not in valid_types:
+            raise ValueError(f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}")
+        self.type = type
+        self.show_download_button = show_download_button
+        self.show_share_button = (utils.get_space() is not None) if show_share_button is None else show_share_button
+        self.show_fullscreen_button = show_fullscreen_button
+        self.placeholder = placeholder
+        self.only_custom_metadata = only_custom_metadata
+        self.disable_preprocess = disable_preprocess
+        self.popup_metadata_width = popup_metadata_width
+        self.popup_metadata_height = popup_metadata_height
+
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+            value=value,
+        )
+        self._value_description = (
+            "a filepath to an image" if self.type == "filepath" else
+            ("a numpy array representing an image" if self.type == "numpy" else "a PIL Image")
+        )
+
+    def preprocess(
+        self, payload: ImageMetaData | None
+    ) -> np.ndarray | Image.Image | str | ImageMetaData | None:
+        """
+        Preprocesses the input image data for use in the application.
+
+        Args:
+            payload: ImageMetaData object containing image data and metadata, or None.
+
+        Returns:
+            Preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.
+        """
+        if payload is None or not hasattr(payload, "path"):
+            return None
+        
+        if self.disable_preprocess:
+            return payload
+                                
+        return image_utils.preprocess_image(
+            payload,
+            cache_dir=self.GRADIO_CACHE,
+            format=self.format,
+            image_mode=self.image_mode,
+            type=self.type,
+        )
+
+    def postprocess(
+        self, value: np.ndarray | Image.Image | str | Path | None
+    ) -> ImageMetaData | Base64ImageData | None:
+        """
+        Post-processes the input image to prepare it for rendering, preserving the original format when interactive=False.
+
+        Args:
+            value: Input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.
+
+        Returns:
+            Processed image data as ImageMetaData, Base64ImageData, or None.
+        """
+        format = self.format
+        if not self.interactive:
+            if isinstance(value, Image.Image) and value.format:
+                format = value.format.lower()
+            elif isinstance(value, (str, Path)):
+                ext = str(value).rsplit(".", 1)[-1].lower() if "." in str(value) else None
+                if ext in ["png", "jpg", "jpeg", "webp", "gif"]:
+                    format = ext
+        
+        return image_utils.postprocess_image(
+            value,
+            cache_dir=self.GRADIO_CACHE,
+            format=format,
+        )
+
+    def api_info_as_output(self) -> dict[str, Any]:
+        """
+        Provides API information for the component as an output.
+
+        Returns:
+            A dictionary containing API metadata for the component.
+        """
+        return self.api_info()
+
+    def example_payload(self) -> Any:
+        """
+        Returns an example payload for testing the component.
+
+        Returns:
+            A processed file object for a sample image.
+        """
+        return handle_file(
+            "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+        )
+
+    def example_value(self) -> Any:
+        """
+        Returns an example value for the component.
+
+        Returns:
+            A URL to a sample image.
+        """
+        return "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"

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

@@ -0,0 +1 @@
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-157jyrf.svelte-157jyrf{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-157jyrf button.svelte-157jyrf{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-157jyrf img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-157jyrf.svelte-157jyrf{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-157jyrf.svelte-157jyrf{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.metadata-popup.svelte-157jyrf.svelte-157jyrf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;overflow:hidden}.popup-content.svelte-157jyrf.svelte-157jyrf{position:relative;padding:1rem;display:flex;flex-direction:column;height:100%}.popup-title.svelte-157jyrf.svelte-157jyrf{font-weight:700;margin:0 0 1rem}.close-button.svelte-157jyrf.svelte-157jyrf{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1rem;cursor:pointer}.metadata-table-container.svelte-157jyrf.svelte-157jyrf{flex:1;overflow:auto}.metadata-table.svelte-157jyrf.svelte-157jyrf{width:100%;border-collapse:collapse}.metadata-label.svelte-157jyrf.svelte-157jyrf{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:40%}.metadata-value.svelte-157jyrf.svelte-157jyrf{padding:.5rem;white-space:nowrap;vertical-align:top}.load-metadata-button.svelte-157jyrf.svelte-157jyrf{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center}.load-metadata-button.svelte-157jyrf.svelte-157jyrf:hover{background-color:var(--button-primary-background-fill-hover)}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1o7nwih{cursor:pointer;width:var(--size-full)}.center.svelte-1o7nwih{display:flex;justify-content:center}.flex.svelte-1o7nwih{display:flex;flex-direction:column;justify-content:center;align-items:center}.hidden.svelte-1o7nwih{display:none;position:absolute;flex-grow:0}.hidden.svelte-1o7nwih svg{display:none}.disable_click.svelte-1o7nwih{cursor:default}.icon-mode.svelte-1o7nwih{position:absolute!important;width:var(--size-4);height:var(--size-4);padding:0;min-height:0;border-radius:var(--radius-circle)}.icon-mode.svelte-1o7nwih svg{width:var(--size-4);height:var(--size-4)}.image-frame.svelte-16v1i9j img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.upload-container.svelte-16v1i9j{display:flex;align-items:center;justify-content:center;height:100%;flex-shrink:1;max-height:100%}.image-container.svelte-16v1i9j{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%;position:relative}.selectable.svelte-16v1i9j{cursor:crosshair}.image-frame.svelte-16v1i9j{object-fit:cover;width:100%;height:100%}.metadata-popup.svelte-16v1i9j{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;overflow:hidden}.popup-content.svelte-16v1i9j{position:relative;padding:1rem;display:flex;flex-direction:column;height:100%}.popup-title.svelte-16v1i9j{font-weight:700;margin:0 0 1rem}.close-button.svelte-16v1i9j{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1rem;cursor:pointer}.metadata-table-container.svelte-16v1i9j{flex:1;overflow:auto}.metadata-table.svelte-16v1i9j{width:100%;border-collapse:collapse}.metadata-label.svelte-16v1i9j{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:40%}.metadata-value.svelte-16v1i9j{padding:.5rem;white-space:nowrap;vertical-align:top}.load-metadata-button.svelte-16v1i9j{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center}.load-metadata-button.svelte-16v1i9j:hover{background-color:var(--button-primary-background-fill-hover)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}

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

@@ -0,0 +1,316 @@
+const { setContext: ie, getContext: E } = window.__gradio__svelte__internal, C = "WORKER_PROXY_CONTEXT_KEY";
+function k() {
+  return E(C);
+}
+const R = "lite.local";
+function O(n) {
+  return n.host === window.location.host || n.host === "localhost:7860" || n.host === "127.0.0.1:7860" || // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
+  n.host === R;
+}
+function q(n, e) {
+  const r = e.toLowerCase();
+  for (const [t, o] of Object.entries(n))
+    if (t.toLowerCase() === r)
+      return o;
+}
+function L(n) {
+  const e = typeof window < "u";
+  if (n == null || !e)
+    return !1;
+  const r = new URL(n, window.location.href);
+  return !(!O(r) || r.protocol !== "http:" && r.protocol !== "https:");
+}
+let u;
+async function T(n) {
+  const e = typeof window < "u";
+  if (n == null || !e || !L(n))
+    return n;
+  if (u == null)
+    try {
+      u = k();
+    } catch {
+      return n;
+    }
+  if (u == null)
+    return n;
+  const t = new URL(n, window.location.href).pathname;
+  return u.httpRequest({
+    method: "GET",
+    path: t,
+    headers: {},
+    query_string: ""
+  }).then((o) => {
+    if (o.status !== 200)
+      throw new Error(`Failed to get file ${t} from the Wasm worker.`);
+    const l = new Blob([o.body], {
+      type: q(o.headers, "content-type")
+    });
+    return URL.createObjectURL(l);
+  });
+}
+const {
+  SvelteComponent: ae,
+  assign: _e,
+  check_outros: ce,
+  children: ue,
+  claim_element: fe,
+  compute_rest_props: de,
+  create_slot: me,
+  detach: he,
+  element: ge,
+  empty: pe,
+  exclude_internal_props: we,
+  get_all_dirty_from_scope: be,
+  get_slot_changes: ye,
+  get_spread_update: ve,
+  group_outros: Ee,
+  init: Ce,
+  insert_hydration: ke,
+  listen: Re,
+  prevent_default: Oe,
+  safe_not_equal: qe,
+  set_attributes: Le,
+  set_style: Te,
+  toggle_class: Ke,
+  transition_in: Se,
+  transition_out: Ue,
+  update_slot_base: Pe
+} = window.__gradio__svelte__internal, { createEventDispatcher: We, onMount: $e } = window.__gradio__svelte__internal, {
+  SvelteComponent: K,
+  assign: d,
+  bubble: S,
+  claim_element: U,
+  compute_rest_props: h,
+  detach: P,
+  element: W,
+  exclude_internal_props: $,
+  get_spread_update: I,
+  init: X,
+  insert_hydration: Y,
+  listen: j,
+  noop: g,
+  safe_not_equal: D,
+  set_attributes: p,
+  src_url_equal: F,
+  toggle_class: w
+} = window.__gradio__svelte__internal;
+function G(n) {
+  let e, r, t, o, l = [
+    {
+      src: r = /*resolved_src*/
+      n[0]
+    },
+    /*$$restProps*/
+    n[1]
+  ], s = {};
+  for (let i = 0; i < l.length; i += 1)
+    s = d(s, l[i]);
+  return {
+    c() {
+      e = W("img"), this.h();
+    },
+    l(i) {
+      e = U(i, "IMG", { src: !0 }), this.h();
+    },
+    h() {
+      p(e, s), w(e, "svelte-kxeri3", !0);
+    },
+    m(i, c) {
+      Y(i, e, c), t || (o = j(
+        e,
+        "load",
+        /*load_handler*/
+        n[4]
+      ), t = !0);
+    },
+    p(i, [c]) {
+      p(e, s = I(l, [
+        c & /*resolved_src*/
+        1 && !F(e.src, r = /*resolved_src*/
+        i[0]) && { src: r },
+        c & /*$$restProps*/
+        2 && /*$$restProps*/
+        i[1]
+      ])), w(e, "svelte-kxeri3", !0);
+    },
+    i: g,
+    o: g,
+    d(i) {
+      i && P(e), t = !1, o();
+    }
+  };
+}
+function H(n, e, r) {
+  const t = ["src"];
+  let o = h(e, t), { src: l = void 0 } = e, s, i;
+  function c(a) {
+    S.call(this, n, a);
+  }
+  return n.$$set = (a) => {
+    e = d(d({}, e), $(a)), r(1, o = h(e, t)), "src" in a && r(2, l = a.src);
+  }, n.$$.update = () => {
+    if (n.$$.dirty & /*src, latest_src*/
+    12) {
+      r(0, s = l), r(3, i = l);
+      const a = l;
+      T(a).then((v) => {
+        i === a && r(0, s = v);
+      });
+    }
+  }, [s, o, l, i, c];
+}
+class M extends K {
+  constructor(e) {
+    super(), X(this, e, H, G, D, { src: 2 });
+  }
+}
+const {
+  SvelteComponent: N,
+  attr: V,
+  check_outros: x,
+  children: A,
+  claim_component: B,
+  claim_element: z,
+  create_component: J,
+  destroy_component: Q,
+  detach: b,
+  element: Z,
+  group_outros: ee,
+  init: te,
+  insert_hydration: ne,
+  mount_component: oe,
+  safe_not_equal: re,
+  toggle_class: _,
+  transition_in: f,
+  transition_out: m
+} = window.__gradio__svelte__internal;
+function y(n) {
+  let e, r;
+  return e = new M({
+    props: { src: (
+      /*value*/
+      n[0].url
+    ), alt: "" }
+  }), {
+    c() {
+      J(e.$$.fragment);
+    },
+    l(t) {
+      B(e.$$.fragment, t);
+    },
+    m(t, o) {
+      oe(e, t, o), r = !0;
+    },
+    p(t, o) {
+      const l = {};
+      o & /*value*/
+      1 && (l.src = /*value*/
+      t[0].url), e.$set(l);
+    },
+    i(t) {
+      r || (f(e.$$.fragment, t), r = !0);
+    },
+    o(t) {
+      m(e.$$.fragment, t), r = !1;
+    },
+    d(t) {
+      Q(e, t);
+    }
+  };
+}
+function le(n) {
+  let e, r, t = (
+    /*value*/
+    n[0] && y(n)
+  );
+  return {
+    c() {
+      e = Z("div"), t && t.c(), this.h();
+    },
+    l(o) {
+      e = z(o, "DIV", { class: !0 });
+      var l = A(e);
+      t && t.l(l), l.forEach(b), this.h();
+    },
+    h() {
+      V(e, "class", "container svelte-1sgcyba"), _(
+        e,
+        "table",
+        /*type*/
+        n[1] === "table"
+      ), _(
+        e,
+        "gallery",
+        /*type*/
+        n[1] === "gallery"
+      ), _(
+        e,
+        "selected",
+        /*selected*/
+        n[2]
+      ), _(
+        e,
+        "border",
+        /*value*/
+        n[0]
+      );
+    },
+    m(o, l) {
+      ne(o, e, l), t && t.m(e, null), r = !0;
+    },
+    p(o, [l]) {
+      /*value*/
+      o[0] ? t ? (t.p(o, l), l & /*value*/
+      1 && f(t, 1)) : (t = y(o), t.c(), f(t, 1), t.m(e, null)) : t && (ee(), m(t, 1, 1, () => {
+        t = null;
+      }), x()), (!r || l & /*type*/
+      2) && _(
+        e,
+        "table",
+        /*type*/
+        o[1] === "table"
+      ), (!r || l & /*type*/
+      2) && _(
+        e,
+        "gallery",
+        /*type*/
+        o[1] === "gallery"
+      ), (!r || l & /*selected*/
+      4) && _(
+        e,
+        "selected",
+        /*selected*/
+        o[2]
+      ), (!r || l & /*value*/
+      1) && _(
+        e,
+        "border",
+        /*value*/
+        o[0]
+      );
+    },
+    i(o) {
+      r || (f(t), r = !0);
+    },
+    o(o) {
+      m(t), r = !1;
+    },
+    d(o) {
+      o && b(e), t && t.d();
+    }
+  };
+}
+function se(n, e, r) {
+  let { value: t } = e, { type: o } = e, { selected: l = !1 } = e;
+  return n.$$set = (s) => {
+    "value" in s && r(0, t = s.value), "type" in s && r(1, o = s.type), "selected" in s && r(2, l = s.selected);
+  }, [t, o, l];
+}
+class Ie extends N {
+  constructor(e) {
+    super(), te(this, e, se, le, re, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  Ie as default
+};

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

@@ -0,0 +1 @@
+.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}

src/demo/app.py

@@ -0,0 +1,216 @@
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    """Configuration for image metadata settings."""
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    """Root configuration for image properties, including nested image settings."""
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    """
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    """
+    # Verify file existence
+    if not Path(img_custom_path.path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path.path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return img_custom_path.path, img_all_path.path
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    """
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    """
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    """
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    """
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        """
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        """
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,            
+            interactive=False
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            type="filepath",
+            width=300,
+            height=400,            
+            popup_metadata_height=400,
+            popup_metadata_width=500,
+            interactive=False
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        """
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        """
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

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

src/demo/requirements.txt

@@ -0,0 +1,2 @@
+gradio_imagemeta
+gradio_propertysheet

src/demo/space.py

@@ -0,0 +1,344 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'ImageMeta': {'description': "A Gradio component for uploading or displaying images, with support for metadata extraction and a custom load_metadata event.\n\nThis component allows users to upload images (as input) or display images (as output). It includes a custom event for loading metadata, triggered by a 'Load Metadata' button in the UI, which expects ImageMetaData as input.", 'members': {'__init__': {'value': {'type': 'str | Image.Image | np.ndarray | Callable | None', 'default': 'None', 'description': 'A PIL Image, numpy array, path or URL for the default value that Image component is going to take. 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': 'File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.'}, 'image_mode': {'type': 'Literal[\n        "1",\n        "L",\n        "P",\n        "RGB",\n        "RGBA",\n        "CMYK",\n        "YCbCr",\n        "LAB",\n        "HSV",\n        "I",\n        "F",\n    ]\n    | None', 'default': '"RGB"', 'description': 'The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).'}, 'type': {'type': 'Literal["numpy", "pil", "filepath"]', 'default': '"numpy"', 'description': 'The format the image is converted 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. To support animated GIFs in input, the `type` should be set to "filepath" or "pil". To support SVGs, the `type` should be set to "filepath".'}, '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.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'If True, will display button to download image. Only applies if interactive is False (e.g. if the component is used as an output).'}, '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.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.'}, '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."}, '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.'}, 'placeholder': {'type': 'str | None', 'default': 'None', 'description': 'Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.'}, '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 image in fullscreen mode. If False, icon does not appear.'}, 'only_custom_metadata': {'type': 'bool', 'default': 'True', 'description': 'If True, extracts only custom metadata, excluding technical metadata like ImageWidth or ImageHeight. Defaults to True.'}, 'disable_preprocess': {'type': 'bool', 'default': 'True', 'description': 'If True, skips preprocessing and returns the raw ImageMetaData payload. Defaults to True.'}, 'popup_metadata_width': {'type': 'int | str', 'default': '400', 'description': 'Metadata popup width in pixels or CSS units. Defaults to 400.'}, 'popup_metadata_height': {'type': 'int | str', 'default': '300', 'description': 'Metadata popup height in pixels or CSS units. Defaults to 300.'}}, 'postprocess': {'value': {'type': 'numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None', 'description': 'Input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.'}}, 'preprocess': {'return': {'type': 'numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None', 'description': 'Preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the ImageMeta using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the ImageMeta 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.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the ImageMeta. Uses event data gradio.SelectData to carry `value` referring to the label of the ImageMeta, and `selected` to refer to state of the ImageMeta. 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 ImageMeta.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the ImageMeta.'}, 'load_metadata': {'type': None, 'default': None, 'description': "Triggered when the user clicks the 'Load Metadata' button, expecting ImageMetaData as input."}}}, '__meta__': {'additional_interfaces': {'ImageMetaData': {'source': 'class ImageMetaData(ImageData):\n    pass'}}, 'user_fn_refs': {'ImageMeta': ['ImageMetaData']}}}
+
+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_imagemeta`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Image Preview with Metadata for Gradio Interface
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_imagemeta
+```
+
+## Usage
+
+```python
+from dataclasses import dataclass, field
+from typing import List, Any
+import gradio as gr
+from gradio_imagemeta import ImageMeta
+from gradio_imagemeta.helpers import extract_metadata, add_metadata, transfer_metadata
+from gradio_propertysheet import PropertySheet
+from gradio_propertysheet.helpers import build_dataclass_fields, create_dataclass_instance
+from pathlib import Path
+
+output_dir = Path("outputs")
+output_dir.mkdir(exist_ok=True)
+
+@dataclass
+class ImageSettings:
+    \"\"\"Configuration for image metadata settings.\"\"\"
+    model: str = field(default="", metadata={"label": "Model"})
+    f_number: str = field(default="", metadata={"label": "FNumber"})
+    iso_speed_ratings: str = field(default="", metadata={"label": "ISOSpeedRatings"})
+    s_churn: float = field(
+        default=0.0,
+        metadata={"component": "slider", "label": "Schurn", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+    )
+
+@dataclass
+class PropertyConfig:
+    \"\"\"Root configuration for image properties, including nested image settings.\"\"\"
+    image_settings: ImageSettings = field(default_factory=ImageSettings)
+    description: str = field(default="", metadata={"label": "Description"})
+
+def process_example_images(img_custom_path: str, img_all_path: str) -> tuple[str, str]:
+    \"\"\"
+    Processes example image paths for display in ImageMeta components.
+
+    Args:
+        img_custom_path: File path for the image to display in img_custom.
+        img_all_path: File path for the image to display in img_all.
+
+    Returns:
+        Tuple of file paths for img_custom and img_all outputs.
+    \"\"\"
+    # Verify file existence
+    if not Path(img_custom_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_custom_path}")
+    if not Path(img_all_path).is_file():
+        raise FileNotFoundError(f"Image not found: {img_all_path}")
+    
+    # Return file paths as strings (ImageMeta accepts file paths as input)
+    return str(img_custom_path), str(img_all_path)
+
+def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
+    \"\"\"
+    Processes image metadata and maps it to output components.
+
+    Args:
+        image_data: ImageMeta object containing image data and metadata, or None.
+
+    Returns:
+        A list of values for output components (Textbox, Slider, or PropertySheet instances).
+    \"\"\"
+    if not image_data:
+        return [gr.Textbox(value="") for _ in output_fields]
+
+    metadata = extract_metadata(image_data, only_custom_metadata=True)
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    raw_values = transfer_metadata(output_fields, metadata, dataclass_fields)
+
+    output_values = [gr.skip()] * len(output_fields)
+    for i, (component, value) in enumerate(zip(output_fields, raw_values)):
+        if hasattr(component, 'root_label'):
+            output_values[i] = create_dataclass_instance(PropertyConfig, value)
+        else:
+            output_values[i] = gr.Textbox(value=value)
+    
+    return output_values
+
+def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
+    \"\"\"
+    Saves an image with updated metadata to a file.
+
+    Args:
+        image_data: Input image data (e.g., file path or PIL Image).
+        *inputs: Variable number of input values from UI components (Textbox, Slider).
+
+    Returns:
+        The file path of the saved image, or None if no image is provided.
+    \"\"\"
+    if not image_data:
+        return None
+    
+    params = list(inputs)
+    image_params = dict(zip(input_fields.keys(), params))
+    dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in dataclass_fields.keys()}
+    
+    new_filepath = output_dir / "image_with_meta.png"
+    add_metadata(image_data, metadata, new_filepath)
+    
+    return str(new_filepath)
+
+initial_property_from_meta_config = PropertyConfig()
+
+with gr.Blocks() as demo:
+    gr.Markdown("# ImageMeta Component Demo")
+    gr.Markdown(
+        \"\"\"
+        **To Test:**
+        1. Upload an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.
+        2. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.
+        3. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).
+        4. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.
+        5. In the "Metadata Viewer" section, you can add field values as metadata to a previously uploaded image in "Upload Image (Custom metadata only)." Then click 'Add metadata and save image' to save a new image with the metadata.
+        \"\"\"
+    )
+    property_sheet_state = gr.State(value=initial_property_from_meta_config)
+    with gr.Row():
+        img_custom = ImageMeta(
+            label="Upload Image (Custom metadata only)",
+            type="filepath",
+            width=300,
+            height=400,
+            disable_preprocess=False,
+            interactive=True
+        )
+        img_all = ImageMeta(
+            label="Upload Image (All metadata)",
+            only_custom_metadata=False,
+            width=300,
+            height=400,
+            popup_metadata_height=400,
+            popup_metadata_width=500
+        )
+
+    gr.Markdown("## Metadata Viewer")
+    gr.Markdown("### Individual Components")
+    with gr.Row():
+        model_box = gr.Textbox(label="Model")
+        fnumber_box = gr.Textbox(label="FNumber")
+        iso_box = gr.Textbox(label="ISOSpeedRatings")
+        s_churn = gr.Slider(label="Schurn", value=1.0, minimum=0.0, maximum=1.0, step=0.1)
+        description_box = gr.Textbox(label="Description")
+    
+    gr.Markdown("### PropertySheet Component")
+    with gr.Row():
+        property_sheet = PropertySheet(
+            value=initial_property_from_meta_config,
+            label="Image Settings",
+            width=400,
+            height=550,
+            visible=True,
+            root_label="General"
+        )    
+    gr.Markdown("## Metadata Editor")
+    with gr.Row():
+        save_button = gr.Button("Add Metadata and Save Image")
+        saved_file_output = gr.File(label="Download Image")
+    
+    with gr.Row():
+        gr.Examples(
+            examples=[
+                ["./examples/image_with_meta.png", "./examples/image_with_meta.png"]
+            ],
+            fn=process_example_images,
+            inputs=[img_custom, img_all],
+            outputs=[img_custom, img_all],
+            cache_examples=True
+        )
+        
+    input_fields = {
+        "Model": model_box,
+        "FNumber": fnumber_box,
+        "ISOSpeedRatings": iso_box,
+        "Schurn": s_churn,
+        "Description": description_box
+    }
+    
+    output_fields = [
+        property_sheet,
+        model_box,
+        fnumber_box,
+        iso_box,
+        s_churn,
+        description_box
+    ]
+    
+    img_custom.load_metadata(handle_load_metadata, inputs=img_custom, outputs=output_fields)
+    img_all.load_metadata(handle_load_metadata, inputs=img_all, outputs=output_fields)
+    
+    def handle_render_change(updated_config: PropertyConfig, current_state: PropertyConfig):
+        \"\"\"
+        Updates the PropertySheet state when its configuration changes.
+
+        Args:
+            updated_config: The new PropertyConfig instance from the PropertySheet.
+            current_state: The current PropertyConfig state.
+
+        Returns:
+            A tuple of (updated_config, updated_config) or (current_state, current_state) if updated_config is None.
+        \"\"\"
+        if updated_config is None:
+            return current_state, current_state
+        return updated_config, updated_config
+    
+    property_sheet.change(
+        fn=handle_render_change,
+        inputs=[property_sheet, property_sheet_state],
+        outputs=[property_sheet, property_sheet_state]
+    )
+    save_button.click(
+        save_image_with_metadata,
+        inputs=[img_custom, *input_fields.values()],
+        outputs=[saved_file_output]
+    )
+    
+if __name__ == "__main__":
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `ImageMeta`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["ImageMeta"]["members"]["__init__"], linkify=['ImageMetaData'])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["ImageMeta"]["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, preprocessed image as a NumPy array, PIL Image, filepath, ImageMetaData, or None.
+- **As output:** Should return, input image as a NumPy array, PIL Image, string (file path or URL), Path object, or None.
+
+ ```python
+def predict(
+    value: numpy.ndarray | PIL.Image.Image | str | ImageMetaData | None
+) -> numpy.ndarray | PIL.Image.Image | str | pathlib.Path | None:
+    return value
+```
+""", elem_classes=["md-custom", "ImageMeta-user-fn"], header_links=True)
+
+
+
+
+    code_ImageMetaData = gr.Markdown("""
+## `ImageMetaData`
+```python
+class ImageMetaData(ImageData):
+    pass
+```""", elem_classes=["md-custom", "ImageMetaData"], header_links=True)
+
+    demo.load(None, js=r"""function() {
+    const refs = {
+            ImageMetaData: [], };
+    const user_fn_refs = {
+          ImageMeta: ['ImageMetaData'], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Image from "./shared/Image.svelte";
+	import type { FileData } from "@gradio/client";
+
+	export let value: null | FileData;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class="container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class:border={value}
+>
+	{#if value}
+		<Image src={value.url} alt="" />
+	{/if}
+</div>
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		width: var(--size-20);
+		max-width: var(--size-20);
+		object-fit: cover;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,246 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+    /**
+     * Exports base components for reuse.
+     */
+    export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+    export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+    export { default as BaseExample } from "./Example.svelte";
+    export { default as BaseImage } from "./shared/Image.svelte";
+</script>
+
+<script lang="ts">
+    import type { Gradio, SelectData, ShareData } from "@gradio/utils";
+    import StaticImage from "./shared/ImagePreview.svelte";
+    import ImageUploader from "./shared/ImageUploader.svelte";
+    import { afterUpdate } from "svelte";
+    import { Block, Empty, UploadText } from "@gradio/atoms";
+    import { Image } from "@gradio/icons";
+    import { StatusTracker } from "@gradio/statustracker";
+    import { upload, type FileData } from "@gradio/client";
+    import type { LoadingStatus } from "@gradio/statustracker";
+
+    type sources = "upload";
+
+    /**
+     * Props for the Index component.
+     */
+    export let value_is_output: boolean = false; // Whether the component is used as an output.
+    export let elem_id: string = ""; // HTML element ID for the component.
+    export let elem_classes: string[] = []; // HTML element classes for the component.
+    export let visible: boolean = true; // Whether the component is visible.
+    export let value: null | FileData = null; // Image data with URL and optional metadata.
+    export let label: string; // Label displayed above the component.
+    export let show_label: boolean; // Whether to display the label.
+    export let show_download_button: boolean; // Whether to show the download button (for StaticImage).
+    export let root: string; // Root URL for file uploads.
+    export let only_custom_metadata: boolean = true; // Whether to filter out technical metadata.
+    export let popup_metadata_width: number | string = 400; // Width of the metadata popup (pixels or CSS units).
+    export let popup_metadata_height: number | string = 300; // Height of the metadata popup (pixels or CSS units).
+    export let height: number | undefined; // Component height (pixels).
+    export let width: number | undefined; // Component width (pixels).
+    export let _selectable: boolean = false; // Whether the image is clickable for coordinate selection.
+    export let container: boolean = true; // Whether to wrap the component in a container.
+    export let scale: number | null = null; // Relative size compared to adjacent components.
+    export let min_width: number | undefined = undefined; // Minimum width in pixels.
+    export let loading_status: LoadingStatus; // Status of loading operations (e.g., upload, error).
+    export let show_share_button: boolean = false; // Whether to show the share button (for StaticImage).
+    export let sources: sources[] = ["upload"]; // Input sources (only "upload" supported).
+    export let interactive: boolean; // Whether the component allows image uploads.
+    export let pending: boolean; // Whether an operation is pending.
+    export let placeholder: string | undefined = undefined; // Placeholder text for the upload area.
+    export let show_fullscreen_button: boolean; // Whether to show the fullscreen button.
+    export let gradio: Gradio<{
+        input: never;
+        change: never;
+        error: string;
+        edit: never;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+        load_metadata: never;
+    }>; // Gradio interface for event dispatching.
+
+    let old_value: null | FileData = null; // Previous value for change detection.
+    let fullscreen: boolean = false; // Whether the image is in fullscreen mode.
+    let uploading: boolean = false; // Whether an upload is in progress.
+    $: input_ready = !uploading; // Whether the input is ready (not uploading).
+    let dragging: boolean; // Whether a file is being dragged over the component.
+    let active_source: sources = "upload"; // Current input source (only "upload" supported).
+    let upload_component: ImageUploader; // Reference to the ImageUploader component.
+
+    // Reactive: Detects value changes and dispatches events.
+    $: {
+        if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+            old_value = value;
+            gradio.dispatch("change");
+            if (!value_is_output) {
+                gradio.dispatch("input");
+            }
+        }
+    }
+
+    /**
+     * Resets value_is_output after component updates.
+     */
+    afterUpdate(() => {
+        value_is_output = false;
+    });
+
+    /**
+     * Handles drag events to update dragging state.
+     * @param event - Drag event (dragenter, dragover, dragleave).
+     */
+    const handle_drag_event = (event: Event): void => {
+        const drag_event = event as DragEvent;
+        drag_event.preventDefault();
+        drag_event.stopPropagation();
+        if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
+            dragging = true;
+        } else if (drag_event.type === "dragleave") {
+            dragging = false;
+        }
+    };
+
+    /**
+     * Handles file drop to initiate upload via ImageUploader.
+     * @param event - Drag event containing dropped files.
+     */
+    const handle_drop = (event: Event): void => {
+        if (interactive) {
+            const drop_event = event as DragEvent;
+            drop_event.preventDefault();
+            drop_event.stopPropagation();
+            dragging = false;
+
+            if (upload_component) {
+                upload_component.loadFilesFromDrop(drop_event);
+            }
+        }
+    };
+
+    /**
+     * Dispatches the load_metadata event when triggered by child components.
+     */
+    function handle_load_metadata(): void {
+        gradio.dispatch("load_metadata");
+    }
+</script>
+
+{#if !interactive}
+    <Block
+        {visible}
+        variant={"solid"}
+        border_mode={dragging ? "focus" : "base"}
+        padding={false}
+        {elem_id}
+        {elem_classes}
+        height={height || undefined}
+        {width}
+        allow_overflow={false}
+        {container}
+        {scale}
+        {min_width}
+        bind:fullscreen
+    >
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+        />
+        <StaticImage
+            on:select={({ detail }) => gradio.dispatch("select", detail)}
+            on:share={({ detail }) => gradio.dispatch("share", detail)}
+            on:error={({ detail }) => gradio.dispatch("error", detail)}
+            on:load_metadata={handle_load_metadata}
+            on:fullscreen={({ detail }) => {
+                fullscreen = detail;
+            }}
+            {fullscreen}
+            {value}
+            {label}
+            {show_label}
+            {show_download_button}
+            selectable={_selectable}
+            {show_share_button}
+            i18n={gradio.i18n}
+            {show_fullscreen_button}
+            {only_custom_metadata}
+            {popup_metadata_width}
+            {popup_metadata_height}
+        />
+    </Block>
+{:else}
+    <Block
+        {visible}
+        variant={value === null ? "dashed" : "solid"}
+        border_mode={dragging ? "focus" : "base"}
+        padding={false}
+        {elem_id}
+        {elem_classes}
+        height={height || undefined}
+        {width}
+        allow_overflow={false}
+        {container}
+        {scale}
+        {min_width}
+        bind:fullscreen
+        on:dragenter={handle_drag_event}
+        on:dragleave={handle_drag_event}
+        on:dragover={handle_drag_event}
+        on:drop={handle_drop}
+    >
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+            on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+        />
+
+        <ImageUploader
+            bind:this={upload_component}
+            bind:uploading
+            bind:active_source
+            bind:value
+            bind:dragging
+            selectable={_selectable}
+            {root}
+            {sources}
+            {fullscreen}
+            on:edit={() => gradio.dispatch("edit")}
+            on:clear={() => {
+                gradio.dispatch("clear");
+            }}
+            on:drag={({ detail }) => (dragging = detail)}
+            on:upload={() => gradio.dispatch("upload")}
+            on:select={({ detail }) => gradio.dispatch("select", detail)}
+            on:share={({ detail }) => gradio.dispatch("share", detail)}
+            on:load_metadata={handle_load_metadata}
+            on:error={({ detail }) => {
+                loading_status = loading_status || {};
+                loading_status.status = "error";
+                gradio.dispatch("error", detail);
+            }}
+            on:fullscreen={({ detail }) => {
+                fullscreen = detail;
+            }}
+            {label}
+            {show_label}
+            {pending}
+            {show_fullscreen_button}
+            max_file_size={gradio.max_file_size}
+            i18n={gradio.i18n}
+            upload={(...args) => gradio.client.upload(...args)}
+            stream_handler={gradio.client?.stream}
+            {only_custom_metadata}
+            {popup_metadata_width}
+            {popup_metadata_height}
+        >
+            <UploadText i18n={gradio.i18n} type="image" {placeholder} />
+        </ImageUploader>
+    </Block>
+{/if}

src/frontend/gradio.config.js

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

src/frontend/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "gradio_imagemeta",
+  "version": "0.22.13",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.16.3",
+    "@gradio/client": "1.15.6",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.15",
+    "@gradio/upload": "0.16.11",
+    "@gradio/utils": "0.10.2",
+    "@gradio/wasm": "0.18.1",
+    "cropperjs": "^1.5.12",
+    "exifr": "^7.1.3",
+    "lazy-brush": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    },
+    "./shared": {
+      "gradio": "./shared/index.ts",
+      "svelte": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/image"
+  }
+}

src/frontend/shared/Image.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from "svelte/elements";
+
+	interface Props extends HTMLImgAttributes {
+		"data-testid"?: string;
+	}
+	type $$Props = Props;
+
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let src: HTMLImgAttributes["src"] = undefined;
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
+		// without waiting for `resolve_wasm_src()` to resolve.
+		// If it waits, a blank image is displayed until the async task finishes
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={resolved_src} {...$$restProps} on:load />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>

src/frontend/shared/ImagePreview.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from "svelte";
+    import type { SelectData } from "@gradio/utils";
+    import { uploadToHuggingFace } from "@gradio/utils";
+    import {
+        BlockLabel,
+        Empty,
+        IconButton,
+        ShareButton,
+        IconButtonWrapper,
+        FullscreenButton
+    } from "@gradio/atoms";
+    import { Download, Image as ImageIcon, Info } from "@gradio/icons";
+    import { get_coordinates_of_clicked_image } from "./utils";
+    import Image from "./Image.svelte";
+    import { DownloadLink } from "@gradio/wasm/svelte";
+    import * as exifr from "exifr";
+    import type { I18nFormatter } from "@gradio/utils";
+    import type { FileData } from "@gradio/client";
+
+    /**
+     * Props for the ImagePreview component.
+     */
+    export let value: null | FileData; // Image data with URL and optional metadata.
+    export let label: string | undefined = undefined; // Label displayed above the component.
+    export let show_label: boolean; // Whether to display the label.
+    export let show_download_button: boolean = true; // Whether to show the download button.
+    export let selectable: boolean = false; // Whether the image is clickable for coordinate selection.
+    export let show_share_button: boolean = false; // Whether to show the share button.
+    export let i18n: I18nFormatter; // Formatter for internationalization.
+    export let show_fullscreen_button: boolean = true; // Whether to show the fullscreen button.
+    export let display_icon_button_wrapper_top_corner: boolean = false; // Whether to position buttons in the top corner.
+    export let fullscreen: boolean = false; // Whether the image is in fullscreen mode.
+    export let only_custom_metadata: boolean = true; // Whether to filter out technical metadata.
+    export let popup_metadata_width: number | string = 400; // Width of the metadata popup (pixels or CSS units).
+    export let popup_metadata_height: number | string = 300; // Height of the metadata popup (pixels or CSS units).
+    export let height: number | string | undefined = undefined; // Component height (pixels or CSS units).
+    export let width: number | string | undefined = undefined; // Component width (pixels or CSS units).
+
+    let metadata: Record<string, any> | null = null; // Extracted image metadata.
+    let showMetadataPopup: boolean = false; // Whether the metadata popup is visible.
+    let image_container: HTMLElement; // Reference to the image container element.
+
+    // Event dispatcher for component events.
+    const dispatch = createEventDispatcher<{
+        change: string; // Triggered when the image changes.
+        select: SelectData; // Triggered when clicking the image with coordinates.
+        fullscreen: boolean; // Triggered when toggling fullscreen mode.
+        load_metadata: never; // Triggered when loading metadata.
+    }>();
+
+    // List of technical metadata keys to filter out when only_custom_metadata is true.
+    const technicalMetadata: string[] = [
+        "ImageWidth",
+        "ImageHeight",
+        "BitDepth",
+        "ColorType",
+        "Compression",
+        "Filter",
+        "Interlace"
+    ];
+
+    // Reactive: Filters metadata based on only_custom_metadata.
+    $: filteredMetadata = only_custom_metadata
+        ? Object.fromEntries(
+            Object.entries(metadata || {}).filter(([key]) => !technicalMetadata.includes(key))
+        )
+        : metadata;
+
+    // Reactive: Calculates maximum popup width based on component width.
+    $: maxPopupWidth = typeof width === 'number' ? width - 20 : typeof width === 'string' ? `calc(${width} - 20px)` : '380px';
+
+    // Reactive: Extracts metadata when value changes.
+    $: if (value) {
+        extractMetadata(value);
+    } else {
+        metadata = null;
+    }
+
+    /**
+     * Extracts metadata from the image file.
+     * @param fileData - Image data containing the URL.
+     */
+    async function extractMetadata(fileData: FileData): Promise<void> {
+        if (!fileData?.url) {
+            metadata = null;
+            return;
+        }
+
+        if (fileData.url.toLowerCase().endsWith(".svg")) {
+            metadata = null;
+        } else if (
+            fileData.url.toLowerCase().endsWith(".png") ||
+            fileData.url.toLowerCase().endsWith(".jpg") ||
+            fileData.url.toLowerCase().endsWith(".jpeg")
+        ) {
+            try {
+                const exifData = await exifr.parse(fileData.url, {
+                    exif: true,
+                    iptc: true,
+                    xmp: true,
+                });
+                metadata = {};
+                if (exifData) {
+                    for (const [key, value] of Object.entries(exifData)) {
+                        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                            metadata[key] = value;
+                        }
+                    }
+                }
+            } catch (error) {
+                metadata = {};
+            }
+        } else {
+            metadata = {};
+        }
+    }
+
+    /**
+     * Handles image click to dispatch select event with coordinates.
+     * @param evt - Mouse event from clicking the image.
+     */
+    function handle_click(evt: MouseEvent): void {
+        let coordinates = get_coordinates_of_clicked_image(evt);
+        if (coordinates) {
+            dispatch("select", { index: coordinates, value: null });
+        }
+    }
+
+    /**
+     * Toggles the visibility of the metadata popup.
+     */
+    function toggleMetadataPopup(): void {
+        if (metadata !== null) {
+            showMetadataPopup = !showMetadataPopup;
+        }
+    }
+
+    /**
+     * Dispatches the load_metadata event and closes the popup.
+     */
+    function dispatchLoadMetadata(): void {
+        if (metadata !== null) {
+            dispatch("load_metadata");
+            closePopup();
+        }
+    }
+
+    /**
+     * Closes the metadata popup.
+     */
+    function closePopup(): void {
+        showMetadataPopup = false;
+    }
+</script>
+
+<BlockLabel
+    {show_label}
+    Icon={ImageIcon}
+    label={!show_label ? "" : label || i18n("image.image")}
+/>
+{#if value === null || !value.url}
+    <Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+    <div class="image-container" bind:this={image_container} style:height style:width>
+        <IconButtonWrapper
+            display_top_corner={display_icon_button_wrapper_top_corner}
+        >
+            {#if show_fullscreen_button}
+                <FullscreenButton {fullscreen} on:fullscreen />
+            {/if}
+            {#if metadata !== null}
+                <IconButton
+                    Icon={Info}
+                    label="View Metadata"
+                    aria-label="View and send image metadata"
+                    on:click={(event) => {
+                        toggleMetadataPopup();
+                        event.stopPropagation();
+                    }}
+                />
+            {/if}
+            {#if show_download_button}
+                <DownloadLink href={value.url} download={value.orig_name || "image"}>
+                    <IconButton Icon={Download} label={i18n("common.download")} />
+                </DownloadLink>
+            {/if}
+            {#if show_share_button}
+                <ShareButton
+                    {i18n}
+                    on:share
+                    on:error
+                    formatter={async (value) => {
+                        if (!value) return "";
+                        let url = await uploadToHuggingFace(value, "url");
+                        return `<img src="${url}" />`;
+                    }}
+                    {value}
+                />
+            {/if}
+        </IconButtonWrapper>
+        <button on:click={handle_click}>
+            <div class:selectable class="image-frame">
+                <Image src={value.url} alt="" loading="lazy" on:load />
+            </div>
+        </button>
+    </div>
+{/if}
+
+{#if showMetadataPopup && filteredMetadata !== null}
+    <div
+        class="metadata-popup"
+        style:width={typeof popup_metadata_width === 'number' ? `${Math.min(popup_metadata_width, parseFloat(maxPopupWidth))}px` : `min(${popup_metadata_width}, ${maxPopupWidth})`}
+        style:height={typeof popup_metadata_height === 'number' ? `${popup_metadata_height}px` : popup_metadata_height}
+    >
+        <div class="popup-content">
+            <button class="close-button" on:click={closePopup}>X</button>
+            <h3 class="popup-title">Image Metadata</h3>
+            {#if filteredMetadata.error}
+                <p>{filteredMetadata.error}</p>
+            {:else}
+                <div class="metadata-table-container">
+                    <table class="metadata-table">
+                        <tbody>
+                            {#each Object.entries(filteredMetadata) as [key, val]}
+                                {#if val}
+                                    <tr>
+                                        <td class="metadata-label">{key}</td>
+                                        <td class="metadata-value">{val}</td>
+                                    </tr>
+                                {/if}
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+                <button class="load-metadata-button" on:click={dispatchLoadMetadata}>Load Metadata</button>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .image-container {
+        height: 100%;
+        position: relative;
+        min-width: var(--size-20);
+    }
+
+    .image-container button {
+        width: var(--size-full);
+        height: var(--size-full);
+        border-radius: var(--radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .image-frame :global(img) {
+        width: var(--size-full);
+        height: var(--size-full);
+        object-fit: scale-down;
+    }
+
+    .selectable {
+        cursor: crosshair;
+    }
+
+    :global(.fullscreen-controls svg) {
+        position: relative;
+        top: 0px;
+    }
+
+    :global(.image-container:fullscreen) {
+        background-color: black;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :global(.image-container:fullscreen img) {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: scale-down;
+    }
+
+    .image-frame {
+        width: auto;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .metadata-popup {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--background-fill-primary, white);
+        border: 1px solid var(--border-color-primary);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .popup-content {
+        position: relative;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .popup-title {
+        font-weight: bold;
+        margin: 0 0 1rem 0;
+    }
+
+    .close-button {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        background: none;
+        border: none;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .metadata-table-container {
+        flex: 1;
+        overflow: auto;
+    }
+
+    .metadata-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .metadata-label {
+        background: var(--background-fill-secondary, #f5f5f5);
+        padding: 0.5rem;
+        font-weight: bold;
+        text-align: left;
+        vertical-align: top;
+        width: 40%;
+    }
+
+    .metadata-value {
+        padding: 0.5rem;
+        white-space: nowrap;
+        vertical-align: top;
+    }
+
+    .load-metadata-button {
+        margin-top: 1rem;
+        padding: 0.5rem 1rem;
+        background-color: var(--button-primary-background-fill);
+        color: var(--button-primary-text-color);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        align-self: center;
+    }
+
+    .load-metadata-button:hover {
+        background-color: var(--button-primary-background-fill-hover);
+    }
+</style>

src/frontend/shared/ImageUploader.svelte

@@ -0,0 +1,466 @@
+<script lang="ts">
+    import { createEventDispatcher, tick } from "svelte";
+    import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
+    import { Clear, Image as ImageIcon, Info } from "@gradio/icons";
+    import { FullscreenButton } from "@gradio/atoms";
+    import { Upload } from "@gradio/upload";
+    import type { Client } from "@gradio/client";
+    import Image from "./Image.svelte";
+    import * as exifr from "exifr";
+    import { get_coordinates_of_clicked_image } from "./utils";
+
+    /**
+     * Props for the ImageUploader component.
+     */
+    export let value: null | any = null; // Image data with URL, path, and optional metadata.
+    export let label: string | undefined = undefined; // Label displayed above the component.
+    export let show_label: boolean; // Whether to display the label.
+    export let selectable: boolean = false; // Whether the image is clickable for coordinate selection.
+    export let root: string; // Root URL for file uploads.
+    export let i18n: any; // Formatter for internationalization.
+    export let max_file_size: number | null = null; // Maximum file size for uploads (in bytes).
+    export let upload: Client["upload"]; // Function to handle file uploads.
+    export let stream_handler: Client["stream"]; // Function to handle webcam streaming.
+    export let show_fullscreen_button: boolean = true; // Whether to show the fullscreen button.
+    export let height: number | string | undefined = undefined; // Component height (pixels or CSS units).
+    export let width: number | string | undefined = undefined; // Component width (pixels or CSS units).
+    export let only_custom_metadata: boolean = true; // Whether to filter out technical metadata.
+    export let popup_metadata_width: number | string = 400; // Width of the metadata popup (pixels or CSS units).
+    export let popup_metadata_height: number | string = 300; // Height of the metadata popup (pixels or CSS units).
+
+    let upload_input: Upload; // Reference to the Upload component.
+    export let uploading: boolean = false; // Whether an upload is in progress.
+    export let active_source: "upload" = "upload"; // Current input source (only "upload" supported).
+    export let fullscreen: boolean = false; // Whether the image is in fullscreen mode.
+    let metadata: Record<string, any> | null = null; // Extracted image metadata.
+    let showMetadataPopup: boolean = false; // Whether the metadata popup is visible.
+    let image_container: HTMLElement; // Reference to the image container element.
+    export let dragging: boolean = false; // Whether a file is being dragged over the component.
+
+    // Event dispatcher for component events.
+    const dispatch = createEventDispatcher<{
+        change?: never; // Triggered when the image changes.
+        clear?: never; // Triggered when the image is cleared.
+        drag: boolean; // Triggered when dragging state changes.
+        upload?: never; // Triggered after a successful upload.
+        select: any; // Triggered when clicking the image with coordinates.
+        load_metadata: never; // Triggered when loading metadata.
+    }>();
+
+    // Reactive: Dispatches drag event when dragging state changes.
+    $: dispatch("drag", dragging);
+
+    // List of technical metadata keys to filter out when only_custom_metadata is true.
+    const technicalMetadata: string[] = [
+        "ImageWidth",
+        "ImageHeight",
+        "BitDepth",
+        "ColorType",
+        "Compression",
+        "Filter",
+        "Interlace"
+    ];
+
+    // Reactive: Filters metadata based on only_custom_metadata.
+    $: filteredMetadata = only_custom_metadata
+        ? Object.fromEntries(
+              Object.entries(metadata || {}).filter(([key]) => !technicalMetadata.includes(key))
+          )
+        : metadata;
+
+    // Reactive: Calculates maximum popup width based on component width.
+    $: maxPopupWidth = typeof width === 'number' ? width - 20 : typeof width === 'string' ? `calc(${width} - 20px)` : '380px';
+
+    // Reactive: Extracts metadata when value changes (e.g., from gr.Examples).
+    $: if (value) {
+        // Use preloaded metadata if available, otherwise extract from URL
+        if (value.metadata) {
+            metadata = value.metadata;
+        } else {
+            extractMetadata(value);
+        }
+    } else {
+        metadata = null;
+    }
+
+    /**
+     * Extracts metadata from the image file.
+     * @param fileData - Image data containing the URL or path.
+     */
+    async function extractMetadata(fileData: any): Promise<void> {
+        if (!fileData?.url) {
+            metadata = null;
+            return;
+        }
+
+        if (fileData.url.toLowerCase().endsWith(".svg")) {
+            metadata = null;
+        } else if (
+            fileData.url.toLowerCase().endsWith(".png") ||
+            fileData.url.toLowerCase().endsWith(".jpg") ||
+            fileData.url.toLowerCase().endsWith(".jpeg")
+        ) {
+            try {
+                const exifData = await exifr.parse(fileData.url, {
+                    exif: true,
+                    iptc: true,
+                    xmp: true,
+                });
+                metadata = {};
+                if (exifData) {
+                    for (const [key, value] of Object.entries(exifData)) {
+                        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                            metadata[key] = value;
+                        }
+                    }
+                }
+            } catch (error) {
+                metadata = { error: "Failed to extract metadata" };
+            }
+        } else {
+            metadata = { error: "Unsupported file type" };
+        }
+    }
+
+    /**
+     * Handles file upload and extracts metadata for supported image formats.
+     * @param event - Custom event containing uploaded file data.
+     */
+    async function handle_upload({ detail }: CustomEvent<any>): Promise<void> {
+        let extractedMetadata = null;
+        if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
+            const response = await fetch(detail.url);
+            const svgContent = await response.text();
+            value = {
+                ...detail,
+                url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`,
+                metadata: null
+            };
+            extractedMetadata = null;
+        } else if (
+            detail.url &&
+            (detail.path?.toLowerCase().endsWith(".png") ||
+                detail.path?.toLowerCase().endsWith(".jpg") ||
+                detail.path?.toLowerCase().endsWith(".jpeg"))
+        ) {
+            try {
+                const exifData = await exifr.parse(detail.url, {
+                    exif: true,
+                    iptc: true,
+                    xmp: true,
+                });
+                extractedMetadata = {};
+                if (exifData) {
+                    for (const [key, value] of Object.entries(exifData)) {
+                        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                            extractedMetadata[key] = value;
+                        }
+                    }
+                }
+            } catch (error) {
+                extractedMetadata = { error: "Failed to extract metadata" };
+            }
+        } else {
+            extractedMetadata = { error: "Unsupported file type" };
+        }
+
+        value = {
+            ...detail,
+            metadata: extractedMetadata
+        };
+        metadata = extractedMetadata;
+        await tick();
+        dispatch("upload");
+        dispatch("change", value);
+    }
+
+    /**
+     * Clears the current image and metadata.
+     */
+    function handle_clear(): void {
+        value = null;
+        metadata = null;
+        showMetadataPopup = false;
+        dispatch("clear");
+        dispatch("change", null);
+    }
+
+    /**
+     * Handles image click to dispatch select event with coordinates.
+     * @param evt - Mouse event from clicking the image.
+     */
+    function handle_click(evt: MouseEvent): void {
+        let coordinates = get_coordinates_of_clicked_image(evt);
+        if (coordinates) {
+            dispatch("select", { index: coordinates, value: null });
+        }
+    }
+
+    /**
+     * Handles drag-over event to enable file drop.
+     * @param evt - Drag event.
+     */
+    function on_drag_over(evt: DragEvent): void {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (evt.dataTransfer) {
+            evt.dataTransfer.dropEffect = "copy";
+        }
+        dragging = true;
+    }
+
+    /**
+     * Handles file drop to initiate upload.
+     * @param evt - Drag event containing dropped files.
+     */
+    async function on_drop(evt: DragEvent): Promise<void> {
+        evt.preventDefault();
+        evt.stopPropagation();
+        dragging = false;
+
+        if (value) {
+            handle_clear();
+            await tick();
+        }
+
+        active_source = "upload";
+        await tick();
+        upload_input.load_files_from_drop(evt);
+    }
+
+    /**
+     * Toggles the visibility of the metadata popup.
+     */
+    function toggleMetadataPopup(): void {
+        if (metadata !== null) {
+            showMetadataPopup = !showMetadataPopup;
+        }
+    }
+
+    /**
+     * Dispatches the load_metadata event and closes the popup.
+     */
+    function dispatchLoadMetadata(): void {
+        if (metadata !== null) {
+            dispatch("load_metadata");
+            closePopup();
+        }
+    }
+
+    /**
+     * Closes the metadata popup.
+     */
+    function closePopup(): void {
+        showMetadataPopup = false;
+    }
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
+
+<div data-testid="image" class="image-container" bind:this={image_container} style:height style:width>
+    <IconButtonWrapper>
+        {#if value?.url}
+            {#if show_fullscreen_button}
+                <FullscreenButton {fullscreen} on:fullscreen />
+            {/if}
+            {#if metadata !== null}
+                <IconButton
+                    Icon={Info}
+                    label="View Metadata"
+                    aria-label="View and send image metadata"
+                    on:click={(event) => {
+                        toggleMetadataPopup();
+                        event.stopPropagation();
+                    }}
+                />
+            {/if}
+            <IconButton
+                Icon={Clear}
+                label="Remove Image"
+                on:click={(event) => {
+                    handle_clear();
+                    event.stopPropagation();
+                }}
+            />
+        {/if}
+    </IconButtonWrapper>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        class="upload-container"
+        style:width={value ? "auto" : "100%"}
+        on:dragover={on_drag_over}
+        on:drop={on_drop}
+    >
+        <Upload
+            hidden={value !== null}
+            bind:this={upload_input}
+            bind:uploading
+            bind:dragging
+            filetype="image/*"
+            on:load={handle_upload}
+            on:error
+            {root}
+            {max_file_size}
+            disable_click={value !== null}
+            {upload}
+            {stream_handler}
+            aria_label={i18n("image.drop_to_upload")}
+        >
+            {#if value === null}
+                <slot />
+            {/if}
+        </Upload>
+        {#if value !== null}
+            <!-- svelte-ignore a11y-click-events-have-key-events-->
+            <!-- svelte-ignore a11y-no-static-element-interactions-->
+            <div class:selectable class="image-frame" on:click={handle_click}>
+                <Image src={value.url} alt={value.alt_text} />
+            </div>
+        {/if}
+    </div>
+</div>
+
+{#if showMetadataPopup && filteredMetadata !== null}
+    <div
+        class="metadata-popup"
+        style:width={typeof popup_metadata_width === 'number' ? `${Math.min(popup_metadata_width, parseFloat(maxPopupWidth))}px` : `min(${popup_metadata_width}, ${maxPopupWidth})`}
+        style:height={typeof popup_metadata_height === 'number' ? `${popup_metadata_height}px` : popup_metadata_height}
+    >
+        <div class="popup-content">
+            <button class="close-button" on:click={closePopup}>X</button>
+            <h3 class="popup-title">Image Metadata</h3>
+            {#if filteredMetadata.error}
+                <p>{filteredMetadata.error}</p>
+            {:else}
+                <div class="metadata-table-container">
+                    <table class="metadata-table">
+                        <tbody>
+                            {#each Object.entries(filteredMetadata) as [key, val]}
+                                {#if val}
+                                    <tr>
+                                        <td class="metadata-label">{key}</td>
+                                        <td class="metadata-value">{val}</td>
+                                    </tr>
+                                {/if}
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+                <button class="load-metadata-button" on:click={dispatchLoadMetadata}>Load Metadata</button>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .image-frame :global(img) {
+        width: var(--size-full);
+        height: var(--size-full);
+        object-fit: scale-down;
+    }
+
+    .upload-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        flex-shrink: 1;
+        max-height: 100%;
+    }
+
+    .image-container {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        max-height: 100%;
+        position: relative;
+    }
+
+    .selectable {
+        cursor: crosshair;
+    }
+
+    .image-frame {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+
+    .metadata-popup {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--background-fill-primary, white);
+        border: 1px solid var(--border-color-primary);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .popup-content {
+        position: relative;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .popup-title {
+        font-weight: bold;
+        margin: 0 0 1rem 0;        
+    }
+
+    .close-button {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        background: none;
+        border: none;
+        font-size: 1rem;
+        cursor: pointer;        
+    }
+
+    .metadata-table-container {
+        flex: 1;
+        overflow: auto;
+    }
+
+    .metadata-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .metadata-label {
+        background: var(--background-fill-secondary, #f5f5f5);
+        padding: 0.5rem;
+        font-weight: bold;
+        text-align: left;
+        vertical-align: top;
+        width: 40%;
+    }
+
+    .metadata-value {
+        padding: 0.5rem;
+        white-space: nowrap;
+        vertical-align: top;
+    }
+
+    .load-metadata-button {
+        margin-top: 1rem;
+        padding: 0.5rem 1rem;
+        background-color: var(--button-primary-background-fill);
+        color: var(--button-primary-text-color);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        align-self: center;
+    }
+
+    .load-metadata-button:hover {
+        background-color: var(--button-primary-background-fill-hover);
+    }
+</style>

src/frontend/shared/index.ts

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.svelte";
+export { default as StaticImage } from "./ImagePreview.svelte";

src/frontend/shared/types.ts

@@ -0,0 +1,5 @@
+export interface Base64File {
+	url: string;
+	alt_text: string;
+}
+

src/frontend/shared/utils.ts

@@ -0,0 +1,29 @@
+export const get_coordinates_of_clicked_image = (
+	evt: MouseEvent
+): [number, number] | null => {
+	let image;
+	if (evt.currentTarget instanceof Element) {
+		image = evt.currentTarget.querySelector("img") as HTMLImageElement;
+	} else {
+		return [NaN, NaN];
+	}
+
+	const imageRect = image.getBoundingClientRect();
+	const xScale = image.naturalWidth / imageRect.width;
+	const yScale = image.naturalHeight / imageRect.height;
+	if (xScale > yScale) {
+		const displayed_height = image.naturalHeight / xScale;
+		const y_offset = (imageRect.height - displayed_height) / 2;
+		var x = Math.round((evt.clientX - imageRect.left) * xScale);
+		var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
+	} else {
+		const displayed_width = image.naturalWidth / yScale;
+		const x_offset = (imageRect.width - displayed_width) / 2;
+		var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
+		var y = Math.round((evt.clientY - imageRect.top) * yScale);
+	}
+	if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
+		return null;
+	}
+	return [x, y];
+};

src/frontend/tsconfig.json

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

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_imagemeta"
+version = "0.0.1"
+description = "Image Preview with Metadata for Gradio Interface"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "Eliseu Silva", email = "elismasilva@gmail.com" }]
+keywords = ["gradio-custom-component", "gradio-template-Image"]
+# 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 = "https://github.com/DEVAIEXP/gradio_component_imagemeta"
+# space = "https://huggingface.co/spaces/elismasilva/gradio_imagemeta"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_imagemeta/templates", "*.pyi", "/\\backend\\gradio_imagemeta\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_imagemeta"]