Upload folder using huggingface_hub

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.8%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.9%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.
 
@@ -39,6 +39,7 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 
 ## Installation
 
+
 ```bash
 pip install gradio_propertysheet
 ```
@@ -65,7 +66,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -101,7 +102,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -114,6 +115,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -124,7 +126,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -235,7 +236,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -244,7 +245,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):
@@ -551,6 +553,19 @@ bool
 <td align="left">If True, only the group name is shown when there is a single group.</td>
 </tr>
 
+<tr>
+<td align="left"><code>root_properties_first</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True (default), root-level properties are rendered before nested groups. If False, they are rendered after.</td>
+</tr>
+
 <tr>
 <td align="left"><code>disable_accordion</code></td>
 <td align="left" style="width: 25%;">

app.py

@@ -17,7 +17,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -53,7 +53,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -66,6 +66,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -76,7 +77,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -187,7 +187,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -196,7 +196,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'root_label': {'type': 'str', 'default': '"General"', 'description': 'The label for the root group of properties.'}, 'show_group_name_only_one': {'type': 'bool', 'default': 'True', 'description': 'If True, only the group name is shown when there is a single group.'}, 'disable_accordion': {'type': 'bool', 'default': 'False', 'description': 'If True, disables the accordion functionality.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PropertySheet changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PropertySheet.'}, 'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is collapsed.'}, 'undo': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clicks the undo button in component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
+_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'root_label': {'type': 'str', 'default': '"General"', 'description': 'The label for the root group of properties.'}, 'show_group_name_only_one': {'type': 'bool', 'default': 'True', 'description': 'If True, only the group name is shown when there is a single group.'}, 'root_properties_first': {'type': 'bool', 'default': 'True', 'description': 'If True (default), root-level properties are rendered before nested groups. If False, they are rendered after.'}, 'disable_accordion': {'type': 'bool', 'default': 'False', 'description': 'If True, disables the accordion functionality.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PropertySheet changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PropertySheet.'}, 'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is collapsed.'}, 'undo': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clicks the undo button in component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -57,7 +57,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -93,7 +93,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -106,6 +106,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -116,7 +117,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -227,7 +227,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -236,7 +236,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.8%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.9%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.
 
@@ -39,6 +39,7 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 
 ## Installation
 
+
 ```bash
 pip install gradio_propertysheet
 ```
@@ -65,7 +66,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -101,7 +102,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -114,6 +115,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -124,7 +126,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -235,7 +236,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -244,7 +245,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):
@@ -551,6 +553,19 @@ bool
 <td align="left">If True, only the group name is shown when there is a single group.</td>
 </tr>
 
+<tr>
+<td align="left"><code>root_properties_first</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True (default), root-level properties are rendered before nested groups. If False, they are rendered after.</td>
+</tr>
+
 <tr>
 <td align="left"><code>disable_accordion</code></td>
 <td align="left" style="width: 25%;">

src/backend/gradio_propertysheet/propertysheet.py

@@ -42,6 +42,7 @@ class PropertySheet(Component):
         label: str | None = None,
         root_label: str = "General",
         show_group_name_only_one: bool = True,
+        root_properties_first: bool = True,
         disable_accordion: bool = False,
         visible: bool = True,
         open: bool = True,
@@ -62,6 +63,7 @@ class PropertySheet(Component):
             label: The main label for the component, displayed in the accordion header.
             root_label: The label for the root group of properties.
             show_group_name_only_one: If True, only the group name is shown when there is a single group.
+            root_properties_first: If True (default), root-level properties are rendered before nested groups. If False, they are rendered after.
             disable_accordion: If True, disables the accordion functionality.
             visible: If False, the component will be hidden.
             open: If False, the accordion will be collapsed by default.
@@ -86,6 +88,7 @@ class PropertySheet(Component):
         self.open = open
         self.root_label = root_label
         self.show_group_name_only_one = show_group_name_only_one
+        self.root_properties_first = root_properties_first
         self.disable_accordion = disable_accordion
         
         super().__init__(
@@ -132,23 +135,39 @@ class PropertySheet(Component):
             if is_nested_dataclass:
                 group_obj = getattr(current_value, field.name)
                 group_props = []
-                for group_field in dataclasses.fields(group_obj):
-                    metadata = extract_prop_metadata(group_obj, group_field)
+                group_type = type(group_obj)
+                parent_dataclass = next((b for b in group_type.__bases__ if dataclasses.is_dataclass(b)), None)
+                
+                reordered_fields = []
+                if parent_dataclass:                    
+                    all_fields = dataclasses.fields(group_type)
+                    parent_field_names = {f.name for f in dataclasses.fields(parent_dataclass)}
+                                        
+                    own_fields = [f for f in all_fields if f.name not in parent_field_names]                    
+                    inherited_fields = [f for f in all_fields if f.name in parent_field_names]                                        
+                    reordered_fields = own_fields + inherited_fields
+                else:                    
+                    reordered_fields = dataclasses.fields(group_type)
+                                
+                for group_field in reordered_fields:
+                    metadata = extract_prop_metadata(group_obj, group_field)                
+                    if "interactive_if" in metadata and "." not in metadata["interactive_if"]["field"]:
+                        relative_field_name = metadata["interactive_if"]["field"]
+                        metadata["interactive_if"]["field"] = f"{field.name}.{relative_field_name}"
+                    
                     metadata["name"] = f"{field.name}.{group_field.name}"
                     group_props.append(metadata)
                                 
-                base_group_name = field.metadata.get("label", field.name.replace("_", " ").title())
+                base_group_name = field.name.replace("_", " ").title()
                 unique_group_name = base_group_name
                 counter = 2
-                # If the name is already used, append a counter until it's unique
                 while unique_group_name in used_group_names:
                     unique_group_name = f"{base_group_name} ({counter})"
                     counter += 1
                 
-                used_group_names.add(unique_group_name) # Add the final unique name to the set
+                used_group_names.add(unique_group_name)
                 json_schema.append({"group_name": unique_group_name, "properties": group_props})
             else:
-                # Collect root properties to be processed later
                 root_properties.append(extract_prop_metadata(current_value, field))
         
         # Process root properties, if any exist
@@ -161,8 +180,11 @@ class PropertySheet(Component):
                 unique_root_label = f"{base_root_label} ({counter})"
                 counter += 1
             
-            # No need to add to used_group_names as it's the last one
-            json_schema.insert(0, {"group_name": unique_root_label, "properties": root_properties})
+            root_group = {"group_name": unique_root_label, "properties": root_properties}            
+            if self.root_properties_first:
+                json_schema.insert(0, root_group)
+            else:
+                json_schema.append(root_group)            
         
         return json_schema
     

src/demo/app.py

@@ -17,7 +17,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -53,7 +53,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -66,6 +66,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -76,7 +77,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -187,7 +187,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -196,7 +196,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'root_label': {'type': 'str', 'default': '"General"', 'description': 'The label for the root group of properties.'}, 'show_group_name_only_one': {'type': 'bool', 'default': 'True', 'description': 'If True, only the group name is shown when there is a single group.'}, 'disable_accordion': {'type': 'bool', 'default': 'False', 'description': 'If True, disables the accordion functionality.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PropertySheet changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PropertySheet.'}, 'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is collapsed.'}, 'undo': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clicks the undo button in component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
+_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'root_label': {'type': 'str', 'default': '"General"', 'description': 'The label for the root group of properties.'}, 'show_group_name_only_one': {'type': 'bool', 'default': 'True', 'description': 'If True, only the group name is shown when there is a single group.'}, 'root_properties_first': {'type': 'bool', 'default': 'True', 'description': 'If True (default), root-level properties are rendered before nested groups. If False, they are rendered after.'}, 'disable_accordion': {'type': 'bool', 'default': 'False', 'description': 'If True, disables the accordion functionality.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PropertySheet changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the PropertySheet.'}, 'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the PropertySheet is collapsed.'}, 'undo': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clicks the undo button in component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -57,7 +57,7 @@ class ModelSettings:
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
-            "interactive_if": {"field": "model.model_type", "value": "Custom"},
+            "interactive_if": {"field": "model_type", "value": "Custom"},
         },
     )
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
@@ -93,7 +93,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
-            "interactive_if": {"field": "sampling.enable_advanced", "value": True},
+            "interactive_if": {"field": "enable_advanced", "value": True},
         },
     )
     temperature: float = field(
@@ -106,6 +106,7 @@ class SamplingSettings:
             "step": 0.1
         }
     )
+
 @dataclass
 class RenderConfig:
     randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
@@ -116,7 +117,6 @@ class RenderConfig:
     model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
-
 @dataclass
 class Lighting:
     sun_intensity: float = field(
@@ -227,7 +227,7 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         height=550,
                         visible=False,
                         root_label="Generator",
-                        interactive=True
+                        interactive=True                        
                     )
                     environment_sheet = PropertySheet(
                         value=initial_env_config,
@@ -236,7 +236,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                         open=False,
                         visible=False,
                         root_label="General",
-                        interactive=True
+                        interactive=True,
+                        root_properties_first=False
                     )
 
             def change_visibility(is_visible, render_cfg, env_cfg):

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_propertysheet"
-version = "0.0.8"
+version = "0.0.9"
 description = "Property sheet"
 readme = "README.md"
 license = "apache-2.0"