Spaces:

elismasilva
/

gradio_propertysheet

Running

App Files Files Community

elismasilva commited on Oct 19

Commit

185559e

verified ·

1 Parent(s): 51bac51

Upload folder using huggingface_hub

Browse files

Files changed (11) hide show

README.md +75 -9
app.py +74 -7
space.py +74 -8
src/README.md +75 -9
src/backend/gradio_propertysheet/helpers.py +1 -1
src/backend/gradio_propertysheet/propertysheet.py +23 -10
src/backend/gradio_propertysheet/templates/component/index.js +0 -0
src/demo/app.py +74 -7
src/demo/space.py +74 -8
src/frontend/Index.svelte +172 -146
src/pyproject.toml +1 -1

README.md CHANGED Viewed

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.15%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.
@@ -57,6 +57,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -112,7 +151,8 @@ class ModelSettings:
         metadata={
             "component": "dropdown",
             "label": "Base Model",
-            "help": "Select the base diffusion model."
         }
     )
     custom_model_path: str = field(
@@ -364,6 +404,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -373,6 +415,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -393,14 +436,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -421,10 +472,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -456,12 +508,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 ---
 # `gradio_propertysheet`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.16%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.
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    """Classe base com configurações de efeito comuns."""
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    """Classe filha que adiciona o controle de ativação."""
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    """Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome."""
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
         metadata={
             "component": "dropdown",
             "label": "Base Model",
+            "help": "Select the base diffusion model.",
+            "visible": True #change here to test visibility
         }
     )
     custom_model_path: str = field(
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

app.py CHANGED Viewed

@@ -9,6 +9,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -139,6 +178,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
             "interactive_if": {"field": "enable_advanced", "value": True},
             "help": "An example of an advanced setting that is only visible when the corresponding checkbox is enabled."
         },
@@ -151,6 +191,7 @@ class SamplingSettings:
             "minimum": 0.1,
             "maximum": 2.0,
             "step": 0.1,
             "help": "Controls the randomness of the sampling process. A value of 1.0 is standard. Higher values increase diversity at the risk of artifacts."
         }
     )
@@ -317,6 +358,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -326,6 +369,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -346,14 +390,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -374,10 +426,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -409,12 +462,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    """Classe base com configurações de efeito comuns."""
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    """Classe filha que adiciona o controle de ativação."""
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    """Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome."""
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
+            "visible_if": {"field": "enable_advanced", "value": True},
             "interactive_if": {"field": "enable_advanced", "value": True},
             "help": "An example of an advanced setting that is only visible when the corresponding checkbox is enabled."
         },
             "minimum": 0.1,
             "maximum": 2.0,
             "step": 0.1,
+            "visible_if": {"field": "enable_advanced", "value": True},
             "help": "Controls the randomness of the sampling process. A value of 1.0 is standard. Higher values increase diversity at the risk of artifacts."
         }
     )
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

space.py CHANGED Viewed

@@ -49,6 +49,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -104,7 +143,8 @@ class ModelSettings:
         metadata={
             "component": "dropdown",
             "label": "Base Model",
-            "help": "Select the base diffusion model."
         }
     )
     custom_model_path: str = field(
@@ -356,6 +396,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -365,6 +407,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -385,14 +428,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -413,10 +464,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -448,12 +500,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    \"\"\"Classe base com configurações de efeito comuns.\"\"\"
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    \"\"\"Classe filha que adiciona o controle de ativação.\"\"\"
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    \"\"\"Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome.\"\"\"
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
         metadata={
             "component": "dropdown",
             "label": "Base Model",
+            "help": "Select the base diffusion model.",
+            "visible": True #change here to test visibility
         }
     )
     custom_model_path: str = field(
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

src/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.15%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.
@@ -57,6 +57,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -112,7 +151,8 @@ class ModelSettings:
         metadata={
             "component": "dropdown",
             "label": "Base Model",
-            "help": "Select the base diffusion model."
         }
     )
     custom_model_path: str = field(
@@ -364,6 +404,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -373,6 +415,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -393,14 +436,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -421,10 +472,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -456,12 +508,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 ---
 # `gradio_propertysheet`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.16%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.
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    """Classe base com configurações de efeito comuns."""
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    """Classe filha que adiciona o controle de ativação."""
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    """Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome."""
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
         metadata={
             "component": "dropdown",
             "label": "Base Model",
+            "help": "Select the base diffusion model.",
+            "visible": True #change here to test visibility
         }
     )
     custom_model_path: str = field(
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

src/backend/gradio_propertysheet/helpers.py CHANGED Viewed

@@ -57,7 +57,7 @@ def extract_prop_metadata(cls: Type, field: dataclasses.Field) -> Dict[str, Any]
     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.
     """

     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.
     """

src/backend/gradio_propertysheet/propertysheet.py CHANGED Viewed

@@ -1,13 +1,14 @@
 from __future__ import annotations
 import copy
 import json
 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, infer_type
 from gradio_client.documentation import document
 from gradio.events import Events, EventListener
 def prop_meta(**kwargs) -> dataclasses.Field:
     """
     A helper function to create a dataclass field with Gradio-specific metadata.
@@ -151,13 +152,25 @@ class PropertySheet(Component):
                     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())
                 unique_group_name = base_group_name
@@ -169,7 +182,8 @@ class PropertySheet(Component):
                 used_group_names.add(unique_group_name)
                 json_schema.append({"group_name": unique_group_name, "properties": group_props})
             else:
-                root_properties.append(extract_prop_metadata(current_value, field))
         # Process root properties, if any exist
         if root_properties:
@@ -185,8 +199,7 @@ class PropertySheet(Component):
             if self.root_properties_first:
                 json_schema.insert(0, root_group)
             else:
-                json_schema.append(root_group)
         return json_schema
     @document()

 from __future__ import annotations
 import copy
 import json
+import logging
 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, infer_type
 from gradio_client.documentation import document
 from gradio.events import Events, EventListener
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - [BACKEND] %(message)s')
 def prop_meta(**kwargs) -> dataclasses.Field:
     """
     A helper function to create a dataclass field with Gradio-specific metadata.
                     reordered_fields = dataclasses.fields(group_type)
                 for group_field in reordered_fields:
+                    original_metadata = group_field.metadata
+                    prop_data = extract_prop_metadata(group_obj, group_field)
+                    group_prefix = f"{field.name}."
+                    prop_data["name"] = f"{group_prefix}{group_field.name}"
+                    if "interactive_if" in original_metadata:
+                        new_condition = copy.deepcopy(original_metadata["interactive_if"])
+                        if "field" in new_condition:
+                            base_condition_field = new_condition["field"].split('.')[-1]
+                            new_condition["field"] = f"{group_prefix}{base_condition_field}"
+                        prop_data["interactive_if"] = new_condition
+                    if "visible_if" in original_metadata:
+                        new_condition = copy.deepcopy(original_metadata["visible_if"])
+                        if "field" in new_condition:
+                            base_condition_field = new_condition["field"].split('.')[-1]
+                            new_condition["field"] = f"{group_prefix}{base_condition_field}"
+                        prop_data["visible_if"] = new_condition
+                    group_props.append(prop_data)
                 base_group_name = field.metadata.get("label", field.name.replace("_", " ").title())
                 unique_group_name = base_group_name
                 used_group_names.add(unique_group_name)
                 json_schema.append({"group_name": unique_group_name, "properties": group_props})
             else:
+                metadata = extract_prop_metadata(current_value, field)
+                root_properties.append(metadata)
         # Process root properties, if any exist
         if root_properties:
             if self.root_properties_first:
                 json_schema.insert(0, root_group)
             else:
+                json_schema.append(root_group)
         return json_schema
     @document()

src/backend/gradio_propertysheet/templates/component/index.js CHANGED Viewed

The diff for this file is too large to render. See raw diff

src/demo/app.py CHANGED Viewed

@@ -9,6 +9,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -139,6 +178,7 @@ class SamplingSettings:
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
             "interactive_if": {"field": "enable_advanced", "value": True},
             "help": "An example of an advanced setting that is only visible when the corresponding checkbox is enabled."
         },
@@ -151,6 +191,7 @@ class SamplingSettings:
             "minimum": 0.1,
             "maximum": 2.0,
             "step": 0.1,
             "help": "Controls the randomness of the sampling process. A value of 1.0 is standard. Higher values increase diversity at the risk of artifacts."
         }
     )
@@ -317,6 +358,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -326,6 +369,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -346,14 +390,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -374,10 +426,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -409,12 +462,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    """Classe base com configurações de efeito comuns."""
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    """Classe filha que adiciona o controle de ativação."""
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    """Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome."""
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
             "minimum": 0.0,
             "maximum": 1.0,
             "step": 0.01,
+            "visible_if": {"field": "enable_advanced", "value": True},
             "interactive_if": {"field": "enable_advanced", "value": True},
             "help": "An example of an advanced setting that is only visible when the corresponding checkbox is enabled."
         },
             "minimum": 0.1,
             "maximum": 2.0,
             "step": 0.1,
+            "visible_if": {"field": "enable_advanced", "value": True},
             "help": "Controls the randomness of the sampling process. A value of 1.0 is standard. Higher values increase diversity at the risk of artifacts."
         }
     )
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

src/demo/space.py CHANGED Viewed

@@ -49,6 +49,45 @@ from gradio_htmlinjector import HTMLInjector
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
@@ -104,7 +143,8 @@ class ModelSettings:
         metadata={
             "component": "dropdown",
             "label": "Base Model",
-            "help": "Select the base diffusion model."
         }
     )
     custom_model_path: str = field(
@@ -356,6 +396,8 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
@@ -365,6 +407,7 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
@@ -385,14 +428,22 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                         interactive=True,
                         root_properties_first=False
                     )
-            def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
                     gr.update(value=button_text),
                 )
@@ -413,10 +464,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                 return updated_config, asdict(updated_config), current_state
             generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
@@ -448,12 +500,26 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="PropertySheet Demos") as demo:
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
             demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class EffectBase:
+    \"\"\"Classe base com configurações de efeito comuns.\"\"\"
+    strength: float = field(
+        default=0.5,
+        metadata={
+            "component": "slider",
+            "label": "Effect Strength",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            # Esta regra depende do 'is_active' da classe filha
+            "interactive_if": {"field": "is_active", "value": True}
+        }
+    )
+@dataclass
+class EffectSettings(EffectBase):
+    \"\"\"Classe filha que adiciona o controle de ativação.\"\"\"
+    is_active: bool = field(
+        default=True,
+        metadata={"label": "Enable Effect"}
+    )
+@dataclass
+class EffectsConfig:
+    \"\"\"Dataclass principal que contém múltiplos efeitos com campos de controle de mesmo nome.\"\"\"
+    blur_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Blur Effect"}
+    )
+    sharpen_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Sharpen Effect"}
+    )
+    vignette_effect: EffectSettings = field(
+        default_factory=EffectSettings,
+        metadata={"label": "Vignette Effect"}
+    )
+@dataclass
 class APISettings:
     api_key: str = field(
         default="ab123cd45ef67890ghij123klmno456p",
         metadata={
             "component": "dropdown",
             "label": "Base Model",
+            "help": "Select the base diffusion model.",
+            "visible": True #change here to test visibility
         }
     )
     custom_model_path: str = field(
             gr.Markdown(
                 "An example of using the `PropertySheet` component as a traditional sidebar for settings."
             )
+            initial_effects_config = EffectsConfig()
+            effects_state = gr.State(value=initial_effects_config)
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
+                        output_effects_json = gr.JSON(label="Live Effects State")
                 with gr.Column(scale=1):
                     render_sheet = PropertySheet(
                         value=initial_render_config,
                         interactive=True,
                         root_properties_first=False
                     )
+                    effects_sheet = PropertySheet(
+                        value=initial_effects_config,
+                        label="Post-Processing Effects",
+                        width=400,
+                        visible=False,
+                        interactive=True
+                    )
+            def change_visibility(is_visible, render_cfg, env_cfg, effects_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
                 return (
                     new_visibility,
                     gr.update(visible=new_visibility, value=render_cfg),
                     gr.update(visible=new_visibility, value=env_cfg),
+                    gr.update(visible=new_visibility, value=effects_cfg),
                     gr.update(value=button_text),
                 )
                 return updated_config, asdict(updated_config), current_state
             generate.click(
+                fn=change_visibility,
+                inputs=[sidebar_visible, render_state, env_state, effects_state],
+                outputs=[sidebar_visible, render_sheet, environment_sheet, effects_sheet, generate],
             )
             render_sheet.change(
                 fn=handle_render_change,
                 inputs=[render_sheet, render_state],
                             inputs=[environment_sheet, env_state],
                             outputs=[environment_sheet, output_env_json, env_state],
             )
+            def handle_effects_change(updated_config: EffectsConfig, current_state: EffectsConfig):
+                if updated_config is None:
+                    return current_state, asdict(current_state), current_state
+                return updated_config, asdict(updated_config), updated_config
+            effects_sheet.change(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
+            effects_sheet.undo(
+                fn=handle_effects_change,
+                inputs=[effects_sheet, effects_state],
+                outputs=[effects_sheet, output_effects_json, effects_state]
+            )
             demo.load(
+                fn=lambda r_cfg, e_cfg, ef_cfg: (asdict(r_cfg), asdict(e_cfg), asdict(ef_cfg)),
+                inputs=[render_state, env_state, effects_state],
+                outputs=[output_render_json, output_env_json, output_effects_json],
             )
         with gr.TabItem("Flyout Popup Demo"):

src/frontend/Index.svelte CHANGED Viewed

@@ -100,15 +100,22 @@
     }
     /**
-     * Reactive block that triggers whenever the `value` prop changes from the backend.
-     * It initializes group visibility, validates properties, and updates slider visuals.
      */
-    $: if (Array.isArray(value) && JSON.stringify(value) !== lastValue) {
-        lastValue = JSON.stringify(value);
-        for (const group of value) {
-            if (groupVisibility[group.group_name] === undefined) {
-                groupVisibility[group.group_name] = true;
             }
             if (Array.isArray(group.properties)) {
                 for (const prop of group.properties) {
                     if (prop.component?.startsWith("number") || prop.component === 'slider') {
@@ -117,9 +124,9 @@
                 }
             }
         }
-        updateAllSliders();
     }
     /**
      * Updates a slider's track background to visually represent its value as a percentage.
      * It sets the `--slider-progress` CSS custom property.
@@ -159,11 +166,14 @@
      * @param {string} prop_name - The name of the property to find.
      */
     function get_prop_value(prop_name: string) {
-        if (!Array.isArray(value)) return undefined;
         for (const group of value) {
-            if (!Array.isArray(group.properties)) continue;
             const found_prop = group.properties.find(p => p.name === prop_name);
-            if (found_prop) return found_prop.value;
         }
         return undefined;
     }
@@ -320,161 +330,177 @@
                                     {#each group.properties as prop (prop.name)}
                                         {#if prop.visible ?? true}
                                             <!-- Conditional interactivity based on another property's value -->
-                                            {@const condition = prop.interactive_if}
-                                            {@const parent_value = condition ? get_prop_value(condition.field) : null}
                                             {@const is_interactive = interactive && (
-                                                !condition ?
-                                                    true // No condition, so it's interactive by default.
                                                 :
-                                                condition.value !== undefined ?
-                                                    // Case 1: `value` key exists (equality check)
-                                                    Array.isArray(condition.value) ?
-                                                        // If `value` is an array, check if parent_value is IN the array.
-                                                        condition.value.includes(parent_value)
                                                     :
-                                                        // If `value` is a single item, do a strict equality check.
-                                                        parent_value === condition.value
                                                 :
-                                                condition.neq !== undefined ?
-                                                    // Case 2: `neq` key exists (inequality check)
-                                                    parent_value !== condition.neq
                                                 :
-                                                    true // Fallback if `interactive_if` is malformed.
                                             )}
-                                            <label class="prop-label" for={prop.name}>
-                                                <div class="prop-label-wrapper">
-                                                    <span>{prop.label}</span>
-                                                    <!-- Help tooltip -->
-                                                    {#if prop.help}
-                                                        <div class="tooltip-container">
-                                                            <span class="tooltip-icon">?</span>
-                                                            <span class="tooltip-text">{prop.help}</span>
-                                                        </div>
-                                                    {/if}
-                                                </div>
-                                            </label>
-                                            <div class="prop-control">
-                                                <!-- Dynamically render the correct input component based on `prop.component` -->
-                                                {#if prop.component === 'string'}
-                                                    <input
-                                                        type="text"
-                                                        bind:value={prop.value}
-                                                        disabled={!is_interactive}
-                                                        on:change={() => dispatch_update("change", prop)}
-                                                        on:input={() => dispatch_update("input", prop)}
-                                                    />
-                                                {:else if prop.component === 'password'}
-                                                    <input
-                                                        type="password"
-                                                        bind:value={prop.value}
-                                                        disabled={!is_interactive}
-                                                        on:change={() => dispatch_update("change", prop)}
-                                                        on:input={() => dispatch_update("input", prop)}
-                                                    />
-                                                {:else if prop.component === 'checkbox'}
-                                                    <input
-                                                        type="checkbox"
-                                                        bind:checked={prop.value}
-                                                        disabled={!is_interactive}
-                                                        on:change={() => dispatch_update("change", prop)}
-                                                    />
-                                                {:else if prop.component === 'number_integer' || prop.component === 'number_float'}
-                                                    <input
-                                                        class:invalid={validationState[prop.name] === false}
-                                                        class:disabled={!is_interactive}
-                                                        type="number"
-                                                        step={prop.step || 1}
-                                                        bind:value={prop.value}
-                                                        disabled={!is_interactive}
-                                                        on:change={() => dispatch_update("change", prop)}
-                                                        on:input={() => {
-                                                            validate_prop(prop);
-                                                            dispatch_update("input", prop);
-                                                        }}
-                                                    />
-                                                {:else if prop.component === 'slider'}
-                                                    <div class="slider-container" class:disabled={!is_interactive}>
                                                         <input
-                                                            type="range"
-                                                            min={prop.minimum}
-                                                            max={prop.maximum}
-                                                            step={prop.step || 1}
                                                             bind:value={prop.value}
-                                                            bind:this={sliderElements[prop.name]}
                                                             disabled={!is_interactive}
-                                                            on:input={() => {
-                                                                validate_prop(prop);
-                                                                updateSliderBackground(prop, sliderElements[prop.name]);
-                                                                dispatch_update("input", prop);
-                                                            }}
                                                             on:change={() => dispatch_update("change", prop)}
                                                         />
-                                                        <span class="slider-value">{prop.value}</span>
-                                                    </div>
-                                                {:else if prop.component === 'colorpicker'}
-                                                    <div class="color-picker-container" class:disabled={!is_interactive}>
                                                         <input
-                                                            type="color"
-                                                            class="color-picker-input"
-                                                            bind:value={prop.value}
-                                                            disabled={!is_interactive}
-                                                            on:change={() => dispatch_update("change", prop)}
                                                         />
-                                                        <span class="color-picker-value">{prop.value}</span>
-                                                    </div>
-                                                {:else if prop.component === 'dropdown'}
-                                                    <div class="dropdown-wrapper" class:disabled={!is_interactive}>
-                                                        <select
                                                             disabled={!is_interactive}
-                                                            value={prop.value}
-                                                            on:change={(e) => handle_dropdown_change(e, prop)}
-                                                        >
                                                             {#if Array.isArray(prop.choices)}
                                                                 {#each prop.choices as choice}
-                                                                    <option value={choice} selected={prop.value === choice}>
-                                                                        {choice}
-                                                                    </option>
                                                                 {/each}
                                                             {/if}
-                                                        </select>
-                                                        <div class="dropdown-arrow-icon"></div>
-                                                    </div>
-                                                {:else if prop.component === 'radio'}
-                                                    <div class="radio-group" class:disabled={!is_interactive} on:change={() => dispatch_update('change', prop)}>
-                                                        {#if Array.isArray(prop.choices)}
-                                                            {#each prop.choices as choice}
-                                                                <div class="radio-item">
-                                                                    <input
-                                                                        type="radio"
-                                                                        id="{prop.name}-{choice}"
-                                                                        name={prop.name}
-                                                                        value={choice}
-                                                                        bind:group={prop.value}
-                                                                        disabled={!is_interactive}
-                                                                    >
-                                                                    <label for="{prop.name}-{choice}">{choice}</label>
-                                                                </div>
-                                                            {/each}
-                                                        {/if}
-                                                    </div>
-                                                {/if}
-                                                <!-- Reset button, visible only when the current value differs from the initial value -->
-                                                {#if prop.component !== 'checkbox'}
-                                                    <button
-                                                        class="reset-button-prop"
-                                                        class:visible={initialValues[prop.name] !== prop.value}
-                                                        title="Reset to default"
-                                                        on:click|stopPropagation={() => handle_reset_prop(prop.name)}
-                                                        disabled={!is_interactive}
-                                                    >
-                                                        ↺
-                                                    </button>
-                                                {/if}
-                                            </div>
                                         {/if}
                                     {/each}
                                 {/if}

     }
     /**
+     * Reactive block that triggers whenever the `value` prop changes from the backend
+     * OR from a user interaction within the component (like a checkbox toggle).
+     * It initializes group visibility, validates properties, and critically,
+     * re-updates slider visuals after the DOM has been updated.
      */
+    $: if (Array.isArray(value)) {
+        if (JSON.stringify(value) !== lastValue) {
+            lastValue = JSON.stringify(value);
+            for (const group of value) {
+                if (groupVisibility[group.group_name] === undefined) {
+                    groupVisibility[group.group_name] = true;
+                }
             }
+        }
+        for (const group of value) {
             if (Array.isArray(group.properties)) {
                 for (const prop of group.properties) {
                     if (prop.component?.startsWith("number") || prop.component === 'slider') {
                 }
             }
         }
+        tick().then(updateAllSliders);
     }
     /**
      * Updates a slider's track background to visually represent its value as a percentage.
      * It sets the `--slider-progress` CSS custom property.
      * @param {string} prop_name - The name of the property to find.
      */
     function get_prop_value(prop_name: string) {
+        if (!Array.isArray(value) || !prop_name) return undefined;
         for (const group of value) {
+            if (!Array.isArray(group.properties)) continue;
             const found_prop = group.properties.find(p => p.name === prop_name);
+            if (found_prop) {
+                return found_prop.value;
+            }
         }
         return undefined;
     }
                                     {#each group.properties as prop (prop.name)}
                                         {#if prop.visible ?? true}
                                             <!-- Conditional interactivity based on another property's value -->
+                                            {@const i_condition = prop.interactive_if}
+                                            {@const v_condition = prop.visible_if}
+                                            {@const i_parent_value = i_condition ? get_prop_value(i_condition.field) : null}
+                                            {@const v_parent_value = v_condition ? get_prop_value(v_condition.field) : null}
                                             {@const is_interactive = interactive && (
+                                                !i_condition ?
+                                                    true
                                                 :
+                                                i_condition.value !== undefined ?
+                                                    Array.isArray(i_condition.value) ?
+                                                        i_condition.value.includes(i_parent_value)
                                                     :
+                                                        i_parent_value === i_condition.value
                                                 :
+                                                i_condition.neq !== undefined ?
+                                                    i_parent_value !== i_condition.neq
                                                 :
+                                                    true
                                             )}
+                                            {@const is_visible = (prop.visible ?? true) && (
+                                                !v_condition ?
+                                                    true
+                                                :
+                                                v_condition.value !== undefined ?
+                                                    Array.isArray(v_condition.value) ?
+                                                        v_condition.value.includes(v_parent_value)
+                                                    :
+                                                        v_parent_value === v_condition.value
+                                                :
+                                                v_condition.neq !== undefined ?
+                                                    v_parent_value !== v_condition.neq
+                                                :
+                                                    true // Fallback
+                                            )}
+                                            {#if is_visible}
+                                                <label class="prop-label" for={prop.name}>
+                                                    <div class="prop-label-wrapper">
+                                                        <span>{prop.label}</span>
+                                                        <!-- Help tooltip -->
+                                                        {#if prop.help}
+                                                            <div class="tooltip-container">
+                                                                <span class="tooltip-icon">?</span>
+                                                                <span class="tooltip-text">{prop.help}</span>
+                                                            </div>
+                                                        {/if}
+                                                    </div>
+                                                </label>
+                                                <div class="prop-control">
+                                                    <!-- Dynamically render the correct input component based on `prop.component` -->
+                                                    {#if prop.component === 'string'}
                                                         <input
+                                                            type="text"
                                                             bind:value={prop.value}
                                                             disabled={!is_interactive}
                                                             on:change={() => dispatch_update("change", prop)}
+                                                            on:input={() => dispatch_update("input", prop)}
                                                         />
+                                                    {:else if prop.component === 'password'}
                                                         <input
+                                                            type="password"
+                                                            bind:value={prop.value}
+                                                            disabled={!is_interactive}
+                                                            on:change={() => dispatch_update("change", prop)}
+                                                            on:input={() => dispatch_update("input", prop)}
                                                         />
+                                                    {:else if prop.component === 'checkbox'}
+                                                        <input
+                                                            type="checkbox"
+                                                            bind:checked={prop.value}
                                                             disabled={!is_interactive}
+                                                            on:change={() => dispatch_update("change", prop)}
+                                                        />
+                                                    {:else if prop.component === 'number_integer' || prop.component === 'number_float'}
+                                                        <input
+                                                            class:invalid={validationState[prop.name] === false}
+                                                            class:disabled={!is_interactive}
+                                                            type="number"
+                                                            step={prop.step || 1}
+                                                            bind:value={prop.value}
+                                                            disabled={!is_interactive}
+                                                            on:change={() => dispatch_update("change", prop)}
+                                                            on:input={() => {
+                                                                validate_prop(prop);
+                                                                dispatch_update("input", prop);
+                                                            }}
+                                                        />
+                                                    {:else if prop.component === 'slider'}
+                                                        <div class="slider-container" class:disabled={!is_interactive}>
+                                                            <input
+                                                                type="range"
+                                                                min={prop.minimum}
+                                                                max={prop.maximum}
+                                                                step={prop.step || 1}
+                                                                bind:value={prop.value}
+                                                                bind:this={sliderElements[prop.name]}
+                                                                disabled={!is_interactive}
+                                                                on:input={() => {
+                                                                    validate_prop(prop);
+                                                                    updateSliderBackground(prop, sliderElements[prop.name]);
+                                                                    dispatch_update("input", prop);
+                                                                }}
+                                                                on:change={() => dispatch_update("change", prop)}
+                                                            />
+                                                            <span class="slider-value">{prop.value}</span>
+                                                        </div>
+                                                    {:else if prop.component === 'colorpicker'}
+                                                        <div class="color-picker-container" class:disabled={!is_interactive}>
+                                                            <input
+                                                                type="color"
+                                                                class="color-picker-input"
+                                                                bind:value={prop.value}
+                                                                disabled={!is_interactive}
+                                                                on:change={() => dispatch_update("change", prop)}
+                                                            />
+                                                            <span class="color-picker-value">{prop.value}</span>
+                                                        </div>
+                                                    {:else if prop.component === 'dropdown'}
+                                                        <div class="dropdown-wrapper" class:disabled={!is_interactive}>
+                                                            <select
+                                                                disabled={!is_interactive}
+                                                                value={prop.value}
+                                                                on:change={(e) => handle_dropdown_change(e, prop)}
+                                                            >
+                                                                {#if Array.isArray(prop.choices)}
+                                                                    {#each prop.choices as choice}
+                                                                        <option value={choice} selected={prop.value === choice}>
+                                                                            {choice}
+                                                                        </option>
+                                                                    {/each}
+                                                                {/if}
+                                                            </select>
+                                                            <div class="dropdown-arrow-icon"></div>
+                                                        </div>
+                                                    {:else if prop.component === 'radio'}
+                                                        <div class="radio-group" class:disabled={!is_interactive} on:change={() => dispatch_update('change', prop)}>
                                                             {#if Array.isArray(prop.choices)}
                                                                 {#each prop.choices as choice}
+                                                                    <div class="radio-item">
+                                                                        <input
+                                                                            type="radio"
+                                                                            id="{prop.name}-{choice}"
+                                                                            name={prop.name}
+                                                                            value={choice}
+                                                                            bind:group={prop.value}
+                                                                            disabled={!is_interactive}
+                                                                        >
+                                                                        <label for="{prop.name}-{choice}">{choice}</label>
+                                                                    </div>
                                                                 {/each}
                                                             {/if}
+                                                        </div>
+                                                    {/if}
+                                                    <!-- Reset button, visible only when the current value differs from the initial value -->
+                                                    {#if prop.component !== 'checkbox'}
+                                                        <button
+                                                            class="reset-button-prop"
+                                                            class:visible={initialValues[prop.name] !== prop.value}
+                                                            title="Reset to default"
+                                                            on:click|stopPropagation={() => handle_reset_prop(prop.name)}
+                                                            disabled={!is_interactive}
+                                                        >
+                                                            ↺
+                                                        </button>
+                                                    {/if}
+                                                </div>
+                                            {/if}
                                         {/if}
                                     {/each}
                                 {/if}

src/pyproject.toml CHANGED Viewed

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

 [project]
 name = "gradio_propertysheet"
+version = "0.0.16"
 description = "Property sheet"
 readme = "README.md"
 license = "apache-2.0"