Upload folder using huggingface_hub

.gitattributes

@@ -36,3 +36,4 @@ saved_model/**/* 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
+src/outputs/image_with_meta.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -12,4 +12,5 @@ __tmp/*
 .ruff_cache
 node_modules
 backend/**/templates/
-outputs/
+outputs/
+README_TEMPLATE.md

README.md

@@ -10,12 +10,23 @@ app_file: space.py
 ---
 
 # `gradio_imagemeta`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_imagemeta"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_imagemeta'>Component GitHub Code</a></span></p>
 
 Image Preview with Metadata for Gradio Interface
 
-## Installation
+Imagine loading a photo with embedded presets (e.g., camera settings or AI model parameters) and instantly populating your app’s UI with those values. With ImageMeta, you can extract and apply these presets effortlessly, streamlining workflows for photographers, data scientists, or creative professionals.
+
+# Features and Key Characteristics
+
+**ImageMeta** is a custom Gradio component designed to enhance image handling with robust metadata support. Key features include:
+
+- **Interactive Image Upload**: Upload PNG/JPEG images via drag-and-drop or file selection, with real-time metadata extraction using `exifr` on the client side.
+- **Metadata Extraction & Display**: View EXIF, IPTC, and XMP metadata in a customizable popup, with options to filter custom metadata (e.g., `Model`, `Schurn`) or include technical details (e.g., `ImageWidth`).
+- **Preset Loading**: Load metadata directly into UI components (Textbox, Slider, PropertySheet) to apply saved presets, streamlining workflows like camera settings or AI model parameters.
+- **Metadata Editing & Saving**: Add or update metadata and save images with embedded metadata for downstream use, powered by PIL on the server side.
+- **Responsive Design**: Supports fullscreen mode, adjustable popup sizes, and a polished Svelte-based UI for seamless user experiences.
 
+## Installation
 ```bash
 pip install gradio_imagemeta
 ```
@@ -32,6 +43,7 @@ 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)
 
@@ -52,25 +64,50 @@ class PropertyConfig:
     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]:
+def infer_type(s: str):
     """
-    Processes example image paths for display in ImageMeta components.
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
 
     Args:
-        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.
+        s: The input string to be converted.
 
     Returns:
-        Tuple of file paths for img_custom and img_all outputs.
+        The converted value (int, float, bool) or the original string.
     """
-    # 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}")
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
     
-    # Return file paths as strings (ImageMeta accepts file paths as input)
-    return str(img_custom_path), str(img_all_path)
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
 
 def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     """
@@ -90,11 +127,11 @@ def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     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)):
+    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)
+            output_values[i] = gr.update(value=infer_type(value))
     
     return output_values
 
@@ -114,10 +151,11 @@ def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | 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()}
+    #dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in image_params.keys()}
     
     new_filepath = output_dir / "image_with_meta.png"
+    
     add_metadata(image_data, metadata, new_filepath)
     
     return str(new_filepath)
@@ -142,17 +180,18 @@ with gr.Blocks() as demo:
             label="Upload Image (Custom metadata only)",
             type="filepath",
             width=300,
-            height=400,
-            disable_preprocess=False,
+            height=400,            
             interactive=True
         )
         img_all = ImageMeta(
             label="Upload Image (All metadata)",
             only_custom_metadata=False,
+            type="filepath",
             width=300,
-            height=400,
+            height=400,            
             popup_metadata_height=400,
-            popup_metadata_width=500
+            popup_metadata_width=500,
+            interactive=True
         )
 
     gr.Markdown("## Metadata Viewer")
@@ -178,17 +217,7 @@ with gr.Blocks() as demo:
     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,

app.py

@@ -1,231 +1,232 @@
-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("/tmp")
-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 infer_type(s: str):
-    """
-    Infers and converts a string to the most likely data type.
-
-    It attempts conversions in the following order:
-    1. Integer
-    2. Float
-    3. Boolean (case-insensitive 'true' or 'false')
-    If all conversions fail, it returns the original string.
-
-    Args:
-        s: The input string to be converted.
-
-    Returns:
-        The converted value (int, float, bool) or the original string.
-    """
-    if not isinstance(s, str):
-        # If the input is not a string, return it as is.
-        return s
-
-    # 1. Try to convert to an integer
-    try:
-        return int(s)
-    except ValueError:
-        # Not an integer, continue...
-        pass
-
-    # 2. Try to convert to a float
-    try:
-        return float(s)
-    except ValueError:
-        # Not a float, continue...
-        pass
-    
-    # 3. Check for a boolean value
-    # This explicit check is important because bool('False') evaluates to True.
-    s_lower = s.lower()
-    if s_lower == 'true':
-        return True
-    if s_lower == 'false':
-        return False
-        
-    # 4. If nothing else worked, return the original string
-    return s
-
-def 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.update(value=infer_type(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 image_params.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=True
-        )
-        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=True
-        )
-
-    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")
-   
-        
-    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(debug=True)
+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 infer_type(s: str):
+    """
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
+
+    Args:
+        s: The input string to be converted.
+
+    Returns:
+        The converted value (int, float, bool) or the original string.
+    """
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
+    
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
+
+def 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.update(value=infer_type(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))    
+    metadata = {label: image_params.get(label, "") for label in image_params.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=True
+        )
+        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=True
+        )
+
+    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")
+   
+        
+    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()

space.py

@@ -21,7 +21,7 @@ with gr.Blocks(
 # `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">  
+<a href="https://pypi.org/project/gradio_imagemeta/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_imagemeta"></a>  
 </div>
 
 Image Preview with Metadata for Gradio Interface
@@ -47,6 +47,7 @@ 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)
 
@@ -67,25 +68,50 @@ class PropertyConfig:
     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]:
+def infer_type(s: str):
     \"\"\"
-    Processes example image paths for display in ImageMeta components.
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
 
     Args:
-        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.
+        s: The input string to be converted.
 
     Returns:
-        Tuple of file paths for img_custom and img_all outputs.
+        The converted value (int, float, bool) or the original string.
     \"\"\"
-    # 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}")
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
     
-    # Return file paths as strings (ImageMeta accepts file paths as input)
-    return str(img_custom_path), str(img_all_path)
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
 
 def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     \"\"\"
@@ -105,11 +131,11 @@ def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     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)):
+    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)
+            output_values[i] = gr.update(value=infer_type(value))
     
     return output_values
 
@@ -129,10 +155,11 @@ def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | 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()}
+    #dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in image_params.keys()}
     
     new_filepath = output_dir / "image_with_meta.png"
+    
     add_metadata(image_data, metadata, new_filepath)
     
     return str(new_filepath)
@@ -157,17 +184,18 @@ with gr.Blocks() as demo:
             label="Upload Image (Custom metadata only)",
             type="filepath",
             width=300,
-            height=400,
-            disable_preprocess=False,
+            height=400,            
             interactive=True
         )
         img_all = ImageMeta(
             label="Upload Image (All metadata)",
             only_custom_metadata=False,
+            type="filepath",
             width=300,
-            height=400,
+            height=400,            
             popup_metadata_height=400,
-            popup_metadata_width=500
+            popup_metadata_width=500,
+            interactive=True
         )
 
     gr.Markdown("## Metadata Viewer")
@@ -193,17 +221,7 @@ with gr.Blocks() as demo:
     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,

src/.gitignore

@@ -12,4 +12,5 @@ __tmp/*
 .ruff_cache
 node_modules
 backend/**/templates/
-outputs/
+outputs/
+README_TEMPLATE.md

src/README.md

@@ -10,12 +10,23 @@ app_file: space.py
 ---
 
 # `gradio_imagemeta`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_imagemeta"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_imagemeta'>Component GitHub Code</a></span></p>
 
 Image Preview with Metadata for Gradio Interface
 
-## Installation
+Imagine loading a photo with embedded presets (e.g., camera settings or AI model parameters) and instantly populating your app’s UI with those values. With ImageMeta, you can extract and apply these presets effortlessly, streamlining workflows for photographers, data scientists, or creative professionals.
+
+# Features and Key Characteristics
+
+**ImageMeta** is a custom Gradio component designed to enhance image handling with robust metadata support. Key features include:
+
+- **Interactive Image Upload**: Upload PNG/JPEG images via drag-and-drop or file selection, with real-time metadata extraction using `exifr` on the client side.
+- **Metadata Extraction & Display**: View EXIF, IPTC, and XMP metadata in a customizable popup, with options to filter custom metadata (e.g., `Model`, `Schurn`) or include technical details (e.g., `ImageWidth`).
+- **Preset Loading**: Load metadata directly into UI components (Textbox, Slider, PropertySheet) to apply saved presets, streamlining workflows like camera settings or AI model parameters.
+- **Metadata Editing & Saving**: Add or update metadata and save images with embedded metadata for downstream use, powered by PIL on the server side.
+- **Responsive Design**: Supports fullscreen mode, adjustable popup sizes, and a polished Svelte-based UI for seamless user experiences.
 
+## Installation
 ```bash
 pip install gradio_imagemeta
 ```
@@ -32,6 +43,7 @@ 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)
 
@@ -52,25 +64,50 @@ class PropertyConfig:
     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]:
+def infer_type(s: str):
     """
-    Processes example image paths for display in ImageMeta components.
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
 
     Args:
-        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.
+        s: The input string to be converted.
 
     Returns:
-        Tuple of file paths for img_custom and img_all outputs.
+        The converted value (int, float, bool) or the original string.
     """
-    # 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}")
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
     
-    # Return file paths as strings (ImageMeta accepts file paths as input)
-    return str(img_custom_path), str(img_all_path)
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
 
 def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     """
@@ -90,11 +127,11 @@ def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     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)):
+    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)
+            output_values[i] = gr.update(value=infer_type(value))
     
     return output_values
 
@@ -114,10 +151,11 @@ def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | 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()}
+    #dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in image_params.keys()}
     
     new_filepath = output_dir / "image_with_meta.png"
+    
     add_metadata(image_data, metadata, new_filepath)
     
     return str(new_filepath)
@@ -142,17 +180,18 @@ with gr.Blocks() as demo:
             label="Upload Image (Custom metadata only)",
             type="filepath",
             width=300,
-            height=400,
-            disable_preprocess=False,
+            height=400,            
             interactive=True
         )
         img_all = ImageMeta(
             label="Upload Image (All metadata)",
             only_custom_metadata=False,
+            type="filepath",
             width=300,
-            height=400,
+            height=400,            
             popup_metadata_height=400,
-            popup_metadata_width=500
+            popup_metadata_width=500,
+            interactive=True
         )
 
     gr.Markdown("## Metadata Viewer")
@@ -178,17 +217,7 @@ with gr.Blocks() as demo:
     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,

src/backend/gradio_imagemeta/helpers.py

@@ -107,6 +107,7 @@ def add_metadata(image_data: str | Path | Image.Image | np.ndarray, metadata: Di
         if not bool(save_path):
             return False
         
+        
         # Convert image_data to PIL.Image
         if isinstance(image_data, (str, Path)):
             image = Image.open(image_data)

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

@@ -1 +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}
+.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-ui4ajv.svelte-ui4ajv{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-ui4ajv button.svelte-ui4ajv{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-ui4ajv img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-ui4ajv.svelte-ui4ajv{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-ui4ajv.svelte-ui4ajv{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.metadata-popup.svelte-ui4ajv.svelte-ui4ajv{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-ui4ajv.svelte-ui4ajv{position:relative;padding:1rem;display:flex;flex-direction:column;height:100%}.popup-title.svelte-ui4ajv.svelte-ui4ajv{font-weight:700;margin:0 0 1rem}.close-button.svelte-ui4ajv.svelte-ui4ajv{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1rem;cursor:pointer}.metadata-table-container.svelte-ui4ajv.svelte-ui4ajv{flex:1;overflow:auto}.metadata-table.svelte-ui4ajv.svelte-ui4ajv{width:100%;border-collapse:collapse}.metadata-label.svelte-ui4ajv.svelte-ui4ajv{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:40%}.metadata-value.svelte-ui4ajv.svelte-ui4ajv{padding:.5rem;white-space:nowrap;vertical-align:top}.load-metadata-button.svelte-ui4ajv.svelte-ui4ajv{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-border-color);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center}.load-metadata-button.svelte-ui4ajv.svelte-ui4ajv: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-18daxnr img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.upload-container.svelte-18daxnr{display:flex;align-items:center;justify-content:center;height:100%;flex-shrink:1;max-height:100%}.image-container.svelte-18daxnr{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%;position:relative}.selectable.svelte-18daxnr{cursor:crosshair}.image-frame.svelte-18daxnr{object-fit:cover;width:100%;height:100%}.metadata-popup.svelte-18daxnr{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-18daxnr{position:relative;padding:1rem;display:flex;flex-direction:column;height:100%}.popup-title.svelte-18daxnr{font-weight:700;margin:0 0 1rem}.close-button.svelte-18daxnr{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1rem;cursor:pointer}.metadata-table-container.svelte-18daxnr{flex:1;overflow:auto}.metadata-table.svelte-18daxnr{width:100%;border-collapse:collapse}.metadata-label.svelte-18daxnr{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:40%}.metadata-value.svelte-18daxnr{padding:.5rem;white-space:nowrap;vertical-align:top}.load-metadata-button.svelte-18daxnr{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-border-color);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center}.load-metadata-button.svelte-18daxnr: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/demo/app.py

@@ -7,6 +7,7 @@ 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)
 
@@ -27,6 +28,51 @@ class PropertyConfig:
     image_settings: ImageSettings = field(default_factory=ImageSettings)
     description: str = field(default="", metadata={"label": "Description"})
 
+def infer_type(s: str):
+    """
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
+
+    Args:
+        s: The input string to be converted.
+
+    Returns:
+        The converted value (int, float, bool) or the original string.
+    """
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
+    
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
+
 def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     """
     Processes image metadata and maps it to output components.
@@ -45,11 +91,11 @@ def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     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)):
+    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)
+            output_values[i] = gr.update(value=infer_type(value))
     
     return output_values
 
@@ -68,11 +114,11 @@ def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | None:
         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()}
+    image_params = dict(zip(input_fields.keys(), params))    
+    metadata = {label: image_params.get(label, "") for label in image_params.keys()}
     
     new_filepath = output_dir / "image_with_meta.png"
+    
     add_metadata(image_data, metadata, new_filepath)
     
     return str(new_filepath)

src/demo/space.py

@@ -21,7 +21,7 @@ with gr.Blocks(
 # `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">  
+<a href="https://pypi.org/project/gradio_imagemeta/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_imagemeta"></a>  
 </div>
 
 Image Preview with Metadata for Gradio Interface
@@ -47,6 +47,7 @@ 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)
 
@@ -67,25 +68,50 @@ class PropertyConfig:
     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]:
+def infer_type(s: str):
     \"\"\"
-    Processes example image paths for display in ImageMeta components.
+    Infers and converts a string to the most likely data type.
+
+    It attempts conversions in the following order:
+    1. Integer
+    2. Float
+    3. Boolean (case-insensitive 'true' or 'false')
+    If all conversions fail, it returns the original string.
 
     Args:
-        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.
+        s: The input string to be converted.
 
     Returns:
-        Tuple of file paths for img_custom and img_all outputs.
+        The converted value (int, float, bool) or the original string.
     \"\"\"
-    # 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}")
+    if not isinstance(s, str):
+        # If the input is not a string, return it as is.
+        return s
+
+    # 1. Try to convert to an integer
+    try:
+        return int(s)
+    except ValueError:
+        # Not an integer, continue...
+        pass
+
+    # 2. Try to convert to a float
+    try:
+        return float(s)
+    except ValueError:
+        # Not a float, continue...
+        pass
     
-    # Return file paths as strings (ImageMeta accepts file paths as input)
-    return str(img_custom_path), str(img_all_path)
+    # 3. Check for a boolean value
+    # This explicit check is important because bool('False') evaluates to True.
+    s_lower = s.lower()
+    if s_lower == 'true':
+        return True
+    if s_lower == 'false':
+        return False
+        
+    # 4. If nothing else worked, return the original string
+    return s
 
 def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     \"\"\"
@@ -105,11 +131,11 @@ def handle_load_metadata(image_data: ImageMeta | None) -> List[Any]:
     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)):
+    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)
+            output_values[i] = gr.update(value=infer_type(value))
     
     return output_values
 
@@ -129,10 +155,11 @@ def save_image_with_metadata(image_data: Any, *inputs: Any) -> str | 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()}
+    #dataclass_fields = build_dataclass_fields(PropertyConfig)
+    metadata = {label: image_params.get(label, "") for label in image_params.keys()}
     
     new_filepath = output_dir / "image_with_meta.png"
+    
     add_metadata(image_data, metadata, new_filepath)
     
     return str(new_filepath)
@@ -157,17 +184,18 @@ with gr.Blocks() as demo:
             label="Upload Image (Custom metadata only)",
             type="filepath",
             width=300,
-            height=400,
-            disable_preprocess=False,
+            height=400,            
             interactive=True
         )
         img_all = ImageMeta(
             label="Upload Image (All metadata)",
             only_custom_metadata=False,
+            type="filepath",
             width=300,
-            height=400,
+            height=400,            
             popup_metadata_height=400,
-            popup_metadata_width=500
+            popup_metadata_width=500,
+            interactive=True
         )
 
     gr.Markdown("## Metadata Viewer")
@@ -193,17 +221,7 @@ with gr.Blocks() as demo:
     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,

src/frontend/shared/ImagePreview.svelte

@@ -355,7 +355,7 @@
     .load-metadata-button {
         margin-top: 1rem;
         padding: 0.5rem 1rem;
-        background-color: var(--button-primary-background-fill);
+        background-color: var(--button-primary-border-color);
         color: var(--button-primary-text-color);
         border: none;
         border-radius: 4px;

src/frontend/shared/ImageUploader.svelte

@@ -452,7 +452,7 @@
     .load-metadata-button {
         margin-top: 1rem;
         padding: 0.5rem 1rem;
-        background-color: var(--button-primary-background-fill);
+        background-color: var(--button-primary-border-color);
         color: var(--button-primary-text-color);
         border: none;
         border-radius: 4px;

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_imagemeta"
-version = "0.0.1"
+version = "0.0.2"
 description = "Image Preview with Metadata for Gradio Interface"
 readme = "README.md"
 license = "apache-2.0"