Upload folder using huggingface_hub

README.md

@@ -10,11 +10,11 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.4%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><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_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.5%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><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_propertysheet'>Component GitHub Code</a></span></p>
 
 The **PropertySheet** component for Gradio allows you to automatically generate a complete and interactive settings panel from a standard Python `dataclass`. It's designed to bring the power of IDE-like property editors directly into your Gradio applications.
 
-<img src="https://huggingface.co/datasets/DEVAIEXP/assets/resolve/main/gradio_propertysheet.png" alt="PropertySheet Demo"> 
+<img src="https://huggingface.co/datasets/DEVAIEXP/assets/resolve/main/gradio_propertysheet_demo.png" alt="PropertySheet Demo"> 
 
 ## Key Features
 

src/README.md

@@ -10,11 +10,11 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.4%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><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_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.5%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><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_propertysheet'>Component GitHub Code</a></span></p>
 
 The **PropertySheet** component for Gradio allows you to automatically generate a complete and interactive settings panel from a standard Python `dataclass`. It's designed to bring the power of IDE-like property editors directly into your Gradio applications.
 
-<img src="https://huggingface.co/datasets/DEVAIEXP/assets/resolve/main/gradio_propertysheet.png" alt="PropertySheet Demo"> 
+<img src="https://huggingface.co/datasets/DEVAIEXP/assets/resolve/main/gradio_propertysheet_demo.png" alt="PropertySheet Demo"> 
 
 ## Key Features
 

src/backend/gradio_propertysheet/helpers.py

@@ -0,0 +1,112 @@
+from dataclasses import fields, is_dataclass
+import dataclasses
+from gradio_client.documentation import document
+from typing import Any, Dict, Literal, Type, get_args, get_origin, get_type_hints
+
+@document()
+def extract_prop_metadata(cls: Type, field: dataclasses.Field) -> Dict[str, Any]:
+    """
+    Inspects a dataclass field and extracts metadata for UI rendering.
+
+    This function infers the appropriate frontend component (e.g., slider, checkbox)
+    based on the field's type hint if not explicitly specified in the metadata.
+    
+    Args:
+        cls: The dataclass instance containing the field.
+        field: The dataclasses.Field object to inspect.
+    Returns:
+        A dictionary of metadata for the frontend to render a property control.
+    """
+    metadata = field.metadata.copy()
+    metadata["name"] = field.name
+    current_value = getattr(cls, field.name)
+    metadata["value"] = current_value if current_value is not None else (field.default if field.default is not dataclasses.MISSING else None)
+    metadata["label"] = metadata.get("label", field.name.replace("_", " ").capitalize())
+    
+    prop_type = get_type_hints(type(cls)).get(field.name)
+    if "component" not in metadata:
+        if metadata.get("component") == "colorpicker": pass
+        elif get_origin(prop_type) is Literal: metadata["component"] = "dropdown"
+        elif prop_type is bool: metadata["component"] = "checkbox"
+        elif prop_type is int: metadata["component"] = "number_integer"
+        elif prop_type is float: metadata["component"] = "number_float"
+        else: metadata["component"] = "string"
+    
+    if metadata.get("component") == "dropdown":
+        if get_origin(prop_type) is Literal:
+            choices = list(get_args(prop_type))
+            metadata["choices"] = choices
+            if metadata["value"] not in choices:
+                metadata["value"] = choices[0] if choices else None
+    return metadata
+
+@document()
+def build_dataclass_fields(cls: Type, prefix: str = "") -> Dict[str, str]:
+    """
+    Recursively builds a mapping of field labels to field paths for a dataclass.
+
+    This function traverses a dataclass and its nested dataclasses, creating a dictionary
+    that maps metadata labels (from `metadata={"label": ...}`) to dot-separated field paths
+    (e.g., "image_settings.model"). It is used to associate metadata labels with their
+    corresponding fields in a dataclass hierarchy.
+
+    Args:
+        cls: The dataclass type to process (e.g., PropertyConfig).
+        prefix: A string prefix for field paths, used during recursion to track nested fields.
+
+    Returns:
+        A dictionary mapping metadata labels (str) to field paths (str).
+        Example: `{"Model": "image_settings.model", "Description": "description"}`
+    """
+    dataclass_fields = {}
+    type_hints = get_type_hints(cls)
+    
+    for field in fields(cls):
+        field_name = field.name
+        field_type = type_hints.get(field_name, field.type)
+        field_label = field.metadata.get('label')
+        current_path = f"{prefix}{field_name}" if prefix else field_name
+
+        if field_label:
+            dataclass_fields[field_label] = current_path
+        if is_dataclass(field_type):
+            sub_fields = build_dataclass_fields(field_type, f"{current_path}.")
+            dataclass_fields.update(sub_fields)
+    
+    return dataclass_fields
+
+@document()
+def create_dataclass_instance(cls: Type, data: Dict[str, Any]) -> Any:
+    """
+    Recursively creates an instance of a dataclass from a nested dictionary.
+
+    This function constructs an instance of the specified dataclass, populating its fields
+    with values from the provided dictionary. For fields that are themselves dataclasses,
+    it recursively creates instances of those dataclasses. If a field is missing from the
+    dictionary, it uses the field's default value or default_factory.
+
+    Args:
+        cls: The dataclass type to instantiate (e.g., PropertyConfig).
+        data: A dictionary containing field values, which may be nested to match the dataclass hierarchy.
+
+    Returns:
+        An instance of the dataclass with fields populated from the dictionary.
+    """
+    kwargs = {}
+    type_hints = get_type_hints(cls)
+    
+    for field in fields(cls):
+        field_name = field.name
+        field_type = type_hints.get(field_name, field.type)
+        if field_name in data:
+            if is_dataclass(field_type) and isinstance(data[field_name], dict):
+                kwargs[field_name] = create_dataclass_instance(field_type, data[field_name])
+            else:
+                kwargs[field_name] = field.default if data[field_name] is None else data[field_name]
+        else:
+            if field.default_factory is not None:
+                kwargs[field_name] = field.default_factory()
+            else:
+                kwargs[field_name] = field.default
+    
+    return cls(**kwargs)

src/backend/gradio_propertysheet/propertysheet.py

@@ -1,8 +1,10 @@
 from __future__ import annotations
 import copy
-from typing import Any, Dict, List, get_type_hints, get_origin, get_args, Literal
+from typing import Any, Dict, List, get_type_hints
 import dataclasses
 from gradio.components.base import Component
+from gradio_propertysheet.helpers import extract_prop_metadata
+from gradio_client.documentation import document
 
 def prop_meta(**kwargs) -> dataclasses.Field:
     """
@@ -12,7 +14,7 @@ def prop_meta(**kwargs) -> dataclasses.Field:
         A dataclasses.Field instance with the provided metadata.
     """
     return dataclasses.field(metadata=kwargs)
-
+@document()
 class PropertySheet(Component):
     """
     A Gradio component that renders a dynamic UI from a Python dataclass instance.
@@ -79,42 +81,8 @@ class PropertySheet(Component):
             value=self._dataclass_value, **kwargs
         )
 
-    def _extract_prop_metadata(self, obj: Any, field: dataclasses.Field) -> Dict[str, Any]:
-        """
-        Inspects a dataclass field and extracts metadata for UI rendering.
-
-        This function infers the appropriate frontend component (e.g., slider, checkbox)
-        based on the field's type hint if not explicitly specified in the metadata.
-        
-        Args:
-            obj: The dataclass instance containing the field.
-            field: The dataclasses.Field object to inspect.
-        Returns:
-            A dictionary of metadata for the frontend to render a property control.
-        """
-        metadata = field.metadata.copy()
-        metadata["name"] = field.name
-        current_value = getattr(obj, field.name)
-        metadata["value"] = current_value if current_value is not None else (field.default if field.default is not dataclasses.MISSING else None)
-        metadata["label"] = metadata.get("label", field.name.replace("_", " ").capitalize())
-        
-        prop_type = get_type_hints(type(obj)).get(field.name)
-        if "component" not in metadata:
-            if metadata.get("component") == "colorpicker": pass
-            elif get_origin(prop_type) is Literal: metadata["component"] = "dropdown"
-            elif prop_type is bool: metadata["component"] = "checkbox"
-            elif prop_type is int: metadata["component"] = "number_integer"
-            elif prop_type is float: metadata["component"] = "number_float"
-            else: metadata["component"] = "string"
-        
-        if metadata.get("component") == "dropdown":
-            if get_origin(prop_type) is Literal:
-                choices = list(get_args(prop_type))
-                metadata["choices"] = choices
-                if metadata["value"] not in choices:
-                    metadata["value"] = choices[0] if choices else None
-        return metadata
-
+    
+    @document()
     def postprocess(self, value: Any) -> List[Dict[str, Any]]:
         """
         Converts the Python dataclass instance into a JSON schema for the frontend.
@@ -153,7 +121,7 @@ class PropertySheet(Component):
                 group_obj = getattr(current_value, field.name)
                 group_props = []
                 for group_field in dataclasses.fields(group_obj):
-                    metadata = self._extract_prop_metadata(group_obj, group_field)
+                    metadata = extract_prop_metadata(group_obj, group_field)
                     metadata["name"] = f"{field.name}.{group_field.name}"
                     group_props.append(metadata)
                                 
@@ -169,7 +137,7 @@ class PropertySheet(Component):
                 json_schema.append({"group_name": unique_group_name, "properties": group_props})
             else:
                 # Collect root properties to be processed later
-                root_properties.append(self._extract_prop_metadata(current_value, field))
+                root_properties.append(extract_prop_metadata(current_value, field))
         
         # Process root properties, if any exist
         if root_properties:           
@@ -185,7 +153,8 @@ class PropertySheet(Component):
             json_schema.insert(0, {"group_name": unique_root_label, "properties": root_properties})
 
         return json_schema
-
+    
+    @document()
     def preprocess(self, payload: Any) -> Any:
         """
         Processes the payload from the frontend to create an updated dataclass instance.

src/frontend/Index.svelte

@@ -274,6 +274,9 @@
     onMount(() => {       
         storeInitialValues();
     });
+    $: if (open && groupVisibility) {     
+        tick().then(updateAllSliders);
+    }
 </script>
 
 <!-- The HTML template renders the component's UI based on the `value` prop. -->

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_propertysheet"
-version = "0.0.4"
+version = "0.0.5"
 description = "Property sheet"
 readme = "README.md"
 license = "apache-2.0"
@@ -38,8 +38,8 @@ classifiers = [
 # encounter your project in the wild.
 
 # [project.urls]
-# repository = "your github repository"
-# space = "your space url"
+# repository = "https://github.com/DEVAIEXP/gradio_component_propertysheet"
+# space = "https://huggingface.co/spaces/elismasilva/gradio_propertysheet"
 
 [project.optional-dependencies]
 dev = ["build", "twine"]