app.py

import gradio as gr
from typing import List, Any, Literal
from gradio_imagemeta import ImageMeta
from gradio_imagemeta.helpers import add_metadata, transfer_metadata
from gradio_propertysheet import PropertySheet
from gradio_propertysheet.helpers import  flatten_dataclass_with_labels
from pathlib import Path
from ui_config import PropertyConfig

output_dir = Path("outputs")
output_dir.mkdir(exist_ok=True)

def load_default_image():
    return "src/examples/image_with_meta.png"

def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
    """

    Processes image metadata by calling the agnostic `transfer_metadata` helper.

    """
    if not image_data or not hasattr(image_data, "_data"):
        return [gr.skip()] * len(output_fields)

    metadata = image_data._data
    
    if not metadata:
        return [gr.skip()] * len(output_fields)
        
    # --- UI-Specific Configuration ---
    # Define the map that tells the helper how to process the PropertySheet.
    sheet_map = {
        id(property_sheet): {
            "type": property_sheet._dataclass_type, 
            "prefixes": [] # No prefixes needed for this simple case
        }
        
    }
    gradio_map = {
            id(component): label 
            for label, component in input_fields.items()
        }
    # Call the agnostic helper function to do the heavy lifting.
    return transfer_metadata(
        output_fields=output_fields,
        metadata=metadata,
        propertysheet_map=sheet_map,
        gradio_component_map=gradio_map,
        remove_prefix_from_keys=False
    )

def save_image_with_metadata(

    image_data: Any,

    format: Literal[".png", ".png"],

    sheet_state: PropertyConfig,

    model: str, 

    f_number: str, 

    iso: str, 

    s_churn_val: float, 

    description: str

) -> str | None:
    """

    Saves an image with updated metadata, merging data from the PropertySheet

    and individual UI components.

    This example deals with the PropertySheet component and the individual gradio components. 

    Since they have the same labels here, we'll simply replace the metadata with each other's values.

    """
    if not image_data:
        return None
   
   
    metadata = flatten_dataclass_with_labels(sheet_state)
    individual_component_values = {
        "Model": model,
        "FNumber": f_number,
        "ISOSpeedRatings": iso,
        "Schurn": s_churn_val,
        "Description": description
    }
   
    metadata["Image Settings - Model"] = individual_component_values["Model"]
    metadata["Image Settings - FNumber"] = individual_component_values["FNumber"]
    metadata["Image Settings - ISOSpeedRatings"] = individual_component_values["ISOSpeedRatings"]
    metadata["Image Settings - Schurn"] = individual_component_values["Schurn"]
    metadata["Description"] = individual_component_values["Description"]
   
    final_metadata = {str(key): value for key, value in metadata.items()}
    
    new_filepath = output_dir / f"image_with_meta{format}"
    add_metadata(image_data, new_filepath, final_metadata)
    
    return str(new_filepath)

initial_property_from_meta_config = PropertyConfig()

with gr.Blocks(theme=gr.themes.Ocean()) as demo:
    gr.Markdown("# ImageMeta Component Demo")    
    gr.Markdown("""

        2. Upload demo image or an image with EXIF or PNG metadata using either the "Upload Imagem (Custom metadata only)" component or the "Upload Imagem (all metadata)" component.

        3. Click the 'Info' icon (ⓘ) in the top-left of the image component to view the metadata panel.

        4. Click 'Load Metadata' in the popup to populate the fields below with metadata values (`Model`, `FNumber`, `ISOSpeedRatings`, `Schurn`, `Description`).

        5. The section below displays how metadata is rendered in components and the `PropertySheet` custom component, showing the hierarchical structure of the image settings.

        6. 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=600,
            height=400,            
            popup_metadata_height=350,
            popup_metadata_width=550,
            interactive=True,
            only_custom_metadata=True
            
                       
        )
        img_all = ImageMeta(
            label="Upload Image (All metadata)",
            only_custom_metadata=False,
            type="filepath",
            width=600,
            height=400,            
            popup_metadata_height=350,
            popup_metadata_width=550,
            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", lines=2)
    
    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_format = gr.Radio(label="Image Format", choices=[".png", ".jpg"], value=".png")
        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=None, outputs=output_fields)
    img_all.load_metadata(handle_load_metadata, inputs=None, 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, save_format, property_sheet, *input_fields.values()],
        outputs=[saved_file_output]
    )
    demo.load(
        fn=load_default_image,
        inputs=None,
        outputs=img_custom
    )
if __name__ == "__main__":
    demo.launch()