Upload folder using huggingface_hub

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.12%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.13%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,41 +57,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -102,6 +187,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -111,54 +197,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

app.py

@@ -9,41 +9,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -54,6 +139,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -63,54 +149,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

space.py

@@ -49,41 +49,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -94,6 +179,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -103,54 +189,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.12%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.13%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,41 +57,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -102,6 +187,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -111,54 +197,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

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

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:host{display:flex;flex-direction:column;height:100%}.propertysheet-wrapper{overflow:hidden!important;display:flex;flex-direction:column;flex-grow:1;padding:var(--spacing-lg)!important}.accordion-header.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;padding:var(--block-title-padding);background:var(--block-title-background-fill);color:var(--block-title-text-color);border-width:0;flex-shrink:0}.accordion-icon.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{margin-left:auto}.content-wrapper.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{flex-grow:1;min-height:0}.container.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{overflow-y:auto;height:auto;max-height:var(--sheet-max-height, 500px);border-radius:0!important;border:1px solid var(--border-color-primary);border-top:var(--show-group-name);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);background-color:var(--background-fill-secondary)}.closed.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:none}.group-header.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--input-background-fill);color:var(--body-text-color);text-align:left;cursor:pointer;font-size:var(--text-md);font-weight:var(--font-weight-bold);border:1px solid var(--border-color-primary)}.properties-grid.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:grid;grid-template-columns:1fr 2fr;gap:0;padding:0}.prop-label.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt,.prop-control.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;border-bottom:1px solid var(--background-fill-secondary)}.prop-label.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{background-color:var(--background-fill-primary);color:var(--body-text-color);opacity:.7;font-weight:var(--font-weight-semibold);font-size:var(--text-xs);text-align:right;justify-content:flex-end;word-break:break-word}.prop-control.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{gap:var(--spacing-sm)}.properties-grid.svelte-31cuxt>.svelte-31cuxt.svelte-31cuxt:nth-last-child(-n+2){border-bottom:none}.prop-control.svelte-31cuxt input[type=text].svelte-31cuxt.svelte-31cuxt,.prop-control.svelte-31cuxt input[type=number].svelte-31cuxt.svelte-31cuxt{background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);border-radius:0;width:100%;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:var(--spacing-3)}.prop-control.svelte-31cuxt input[type=text].svelte-31cuxt.svelte-31cuxt:focus,.prop-control.svelte-31cuxt input[type=number].svelte-31cuxt.svelte-31cuxt:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{position:relative;width:100%}.dropdown-wrapper.svelte-31cuxt select.svelte-31cuxt.svelte-31cuxt{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);width:100%;cursor:pointer;border-radius:0;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:calc(var(--spacing-3) + 1.2em)}.dropdown-arrow-icon.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);width:1em;height:1em;pointer-events:none;z-index:1;background-color:var(--body-text-color-subdued);-webkit-mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'%3e%3c/svg%3e")}.dropdown-wrapper.svelte-31cuxt select.svelte-31cuxt.svelte-31cuxt:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-31cuxt select option.svelte-31cuxt.svelte-31cuxt{background:var(--input-background-fill);color:var(--body-text-color)}.prop-control.svelte-31cuxt input[type=checkbox].svelte-31cuxt.svelte-31cuxt{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:var(--size-4);height:var(--size-4);border-radius:5px!important;border:1px solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);box-shadow:var(--checkbox-shadow);cursor:pointer;margin:0;transition:background-color .2s,border-color .2s}.prop-control.svelte-31cuxt input[type=checkbox].svelte-31cuxt.svelte-31cuxt:hover{border-color:var(--checkbox-border-color-hover);background-color:var(--checkbox-background-color-hover)}.prop-control.svelte-31cuxt input[type=checkbox].svelte-31cuxt.svelte-31cuxt:focus{border-color:var(--checkbox-border-color-focus);background-color:var(--checkbox-background-color-focus);outline:none}.prop-control.svelte-31cuxt input[type=checkbox].svelte-31cuxt.svelte-31cuxt:checked{background-color:var(--checkbox-background-color-selected);border-color:var(--checkbox-border-color-focus)}.prop-control.svelte-31cuxt input[type=checkbox].svelte-31cuxt.svelte-31cuxt:checked:after{content:"";position:absolute;display:block;top:50%;left:50%;width:4px;height:8px;border:solid var(--checkbox-label-text-color-selected);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.slider-container.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.slider-container.svelte-31cuxt input[type=range].svelte-31cuxt.svelte-31cuxt{--slider-progress:0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}.slider-container.svelte-31cuxt input[type=range].svelte-31cuxt.svelte-31cuxt::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-31cuxt input[type=range].svelte-31cuxt.svelte-31cuxt::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-container.svelte-31cuxt input[type=range].svelte-31cuxt.svelte-31cuxt::-moz-range-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-31cuxt input[type=range].svelte-31cuxt.svelte-31cuxt::-moz-range-thumb{background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-value.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{min-width:40px;text-align:right;font-family:var(--font-mono);font-size:var(--text-xs)}.prop-label-wrapper.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm);width:100%}.tooltip-container.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-icon.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background-color:var(--body-text-color-subdued);color:var(--background-fill-primary);font-size:10px;font-weight:700;cursor:help;-webkit-user-select:none;user-select:none}.tooltip-text.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{visibility:hidden;width:200px;background-color:var(--body-text-color);color:var(--background-fill-primary);text-align:center;border-radius:var(--radius-md);padding:var(--spacing-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container.svelte-31cuxt:hover .tooltip-text.svelte-31cuxt.svelte-31cuxt{visibility:visible;opacity:1}.color-picker-container.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.color-picker-input.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{width:50px;height:28px;background-color:transparent;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);cursor:pointer;padding:0}.color-picker-input.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt::-moz-padding{padding:2px}.color-picker-input.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-input.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-value.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--body-text-color-subdued)}.prop-control.svelte-31cuxt input.invalid.svelte-31cuxt.svelte-31cuxt{border-color:var(--error-border-color, red)!important;box-shadow:0 0 0 1px var(--error-border-color, red)!important}.reset-button-prop.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:1px solid var(--border-color-primary);cursor:pointer;color:var(--body-text-color-subdued);font-size:var(--text-lg);padding:0 var(--spacing-2);visibility:hidden;opacity:0;transition:opacity .15s ease-in-out,color .15s ease-in-out}.reset-button-prop.visible.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{visibility:visible;opacity:1}.reset-button-prop.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt:hover{color:var(--body-text-color);background-color:var(--background-fill-secondary-hover)}.reset-button-prop.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt:disabled{color:var(--body-text-color-subdued)!important;opacity:.5;cursor:not-allowed;background-color:transparent!important}.prop-control.svelte-31cuxt .disabled.svelte-31cuxt.svelte-31cuxt{opacity:.5;pointer-events:none;cursor:not-allowed}.prop-control.svelte-31cuxt .disabled input.svelte-31cuxt.svelte-31cuxt{cursor:not-allowed}.reset-button-prop.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt:disabled{opacity:.3;cursor:not-allowed;background-color:transparent!important}.radio-group.svelte-31cuxt.svelte-31cuxt.svelte-31cuxt{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);width:100%}.radio-item.svelte-31cuxt input[type=radio].svelte-31cuxt.svelte-31cuxt{display:none}.radio-item.svelte-31cuxt label.svelte-31cuxt.svelte-31cuxt{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-color-primary);border-radius:5px!important;background-color:var(--input-background-fill);color:var(--body-text-color);font-size:var(--text-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s,border-color .2s,color .2s}.radio-group.disabled.svelte-31cuxt .radio-item label.svelte-31cuxt.svelte-31cuxt{cursor:not-allowed}.radio-item.svelte-31cuxt input[type=radio].svelte-31cuxt:hover+label.svelte-31cuxt{border-color:var(--border-color-accent-subdued);background-color:var(--background-fill-secondary-hover)}.radio-item.svelte-31cuxt input[type=radio].svelte-31cuxt:checked+label.svelte-31cuxt{background-color:var(--primary-500);border-color:var(--primary-500);color:#fff;font-weight:var(--font-weight-bold)}.radio-group.disabled.svelte-31cuxt .radio-item input[type=radio].svelte-31cuxt:checked+label.svelte-31cuxt{background-color:var(--neutral-300);border-color:var(--neutral-300);color:var(--neutral-500)}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:host{display:flex;flex-direction:column;height:100%}.propertysheet-wrapper{overflow:hidden!important;display:flex;flex-direction:column;flex-grow:1;padding:var(--spacing-lg)!important}.accordion-header.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;padding:var(--block-title-padding);background:var(--block-title-background-fill);color:var(--block-title-text-color);border-width:0;flex-shrink:0}.accordion-icon.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{margin-left:auto}.content-wrapper.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{flex-grow:1;min-height:0}.container.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{overflow-y:auto;height:auto;max-height:var(--sheet-max-height, 500px);border-radius:0!important;border:1px solid var(--border-color-primary);border-top:var(--show-group-name);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);background-color:var(--background-fill-secondary)}.closed.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:none}.group-header.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--input-background-fill);color:var(--body-text-color);text-align:left;cursor:pointer;font-size:var(--text-md);font-weight:var(--font-weight-bold);border:1px solid var(--border-color-primary)}.properties-grid.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:grid;grid-template-columns:1fr 2fr;gap:0;padding:0}.prop-label.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn,.prop-control.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;border-bottom:1px solid var(--background-fill-secondary)}.prop-label.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{background-color:var(--background-fill-primary);color:var(--body-text-color);opacity:3.7;font-weight:var(--font-weight-semibold);font-size:var(--text-xs);text-align:right;justify-content:flex-end;word-break:break-word}.prop-control.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{gap:var(--spacing-sm)}.properties-grid.svelte-1u03acn>.svelte-1u03acn.svelte-1u03acn:nth-last-child(-n+2){border-bottom:none}.prop-control.svelte-1u03acn input[type=text].svelte-1u03acn.svelte-1u03acn,.prop-control.svelte-1u03acn input[type=password].svelte-1u03acn.svelte-1u03acn,.prop-control.svelte-1u03acn input[type=number].svelte-1u03acn.svelte-1u03acn{background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);border-radius:0;width:100%;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:var(--spacing-3)}.prop-control.svelte-1u03acn input[type=text].svelte-1u03acn.svelte-1u03acn:focus,.prop-control.svelte-1u03acn input[type=number].svelte-1u03acn.svelte-1u03acn:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{position:relative;width:100%}.dropdown-wrapper.svelte-1u03acn select.svelte-1u03acn.svelte-1u03acn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);width:100%;cursor:pointer;border-radius:0;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:calc(var(--spacing-3) + 1.2em)}.dropdown-arrow-icon.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);width:1em;height:1em;pointer-events:none;z-index:1;background-color:var(--body-text-color-subdued);-webkit-mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'%3e%3c/svg%3e")}.dropdown-wrapper.svelte-1u03acn select.svelte-1u03acn.svelte-1u03acn:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-1u03acn select option.svelte-1u03acn.svelte-1u03acn{background:var(--input-background-fill);color:var(--body-text-color)}.prop-control.svelte-1u03acn input[type=checkbox].svelte-1u03acn.svelte-1u03acn{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:var(--size-4);height:var(--size-4);border-radius:5px!important;border:1px solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);box-shadow:var(--checkbox-shadow);cursor:pointer;margin:0;transition:background-color .2s,border-color .2s}.prop-control.svelte-1u03acn input[type=checkbox].svelte-1u03acn.svelte-1u03acn:hover{border-color:var(--checkbox-border-color-hover);background-color:var(--checkbox-background-color-hover)}.prop-control.svelte-1u03acn input[type=checkbox].svelte-1u03acn.svelte-1u03acn:focus{border-color:var(--checkbox-border-color-focus);background-color:var(--checkbox-background-color-focus);outline:none}.prop-control.svelte-1u03acn input[type=checkbox].svelte-1u03acn.svelte-1u03acn:checked{background-color:var(--checkbox-background-color-selected);border-color:var(--checkbox-border-color-focus)}.prop-control.svelte-1u03acn input[type=checkbox].svelte-1u03acn.svelte-1u03acn:checked:after{content:"";position:absolute;display:block;top:50%;left:50%;width:4px;height:8px;border:solid var(--checkbox-label-text-color-selected);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.slider-container.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.slider-container.svelte-1u03acn input[type=range].svelte-1u03acn.svelte-1u03acn{--slider-progress:0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}.slider-container.svelte-1u03acn input[type=range].svelte-1u03acn.svelte-1u03acn::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-1u03acn input[type=range].svelte-1u03acn.svelte-1u03acn::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-container.svelte-1u03acn input[type=range].svelte-1u03acn.svelte-1u03acn::-moz-range-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-1u03acn input[type=range].svelte-1u03acn.svelte-1u03acn::-moz-range-thumb{background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-value.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{min-width:40px;text-align:right;font-family:var(--font-mono);font-size:var(--text-xs)}.prop-label-wrapper.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm);width:100%}.tooltip-container.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-icon.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background-color:var(--body-text-color-subdued);color:var(--background-fill-primary);font-size:10px;font-weight:700;cursor:help;-webkit-user-select:none;user-select:none}.tooltip-text.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{visibility:hidden;width:200px;background-color:var(--body-text-color);color:var(--background-fill-primary);text-align:center;border-radius:var(--radius-md);padding:var(--spacing-md);position:absolute;z-index:50;bottom:-50%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container.svelte-1u03acn:hover .tooltip-text.svelte-1u03acn.svelte-1u03acn{visibility:visible;opacity:1}.color-picker-container.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.color-picker-input.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{width:50px;height:28px;background-color:transparent;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);cursor:pointer;padding:0}.color-picker-input.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn::-moz-padding{padding:2px}.color-picker-input.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-input.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-value.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--body-text-color-subdued)}.prop-control.svelte-1u03acn input.invalid.svelte-1u03acn.svelte-1u03acn{border-color:var(--error-border-color, red)!important;box-shadow:0 0 0 1px var(--error-border-color, red)!important}.reset-button-prop.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:1px solid var(--border-color-primary);cursor:pointer;color:var(--body-text-color-subdued);font-size:var(--text-lg);padding:0 var(--spacing-2);visibility:hidden;opacity:0;transition:opacity .15s ease-in-out,color .15s ease-in-out}.reset-button-prop.visible.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{visibility:visible;opacity:1}.reset-button-prop.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn:hover{color:var(--body-text-color);background-color:var(--background-fill-secondary-hover)}.reset-button-prop.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn:disabled{color:var(--body-text-color-subdued)!important;opacity:.5;cursor:not-allowed;background-color:transparent!important}.prop-control.svelte-1u03acn .disabled.svelte-1u03acn.svelte-1u03acn{opacity:.5;pointer-events:none;cursor:not-allowed}.prop-control.svelte-1u03acn .disabled input.svelte-1u03acn.svelte-1u03acn{cursor:not-allowed}.reset-button-prop.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn:disabled{opacity:.3;cursor:not-allowed;background-color:transparent!important}.radio-group.svelte-1u03acn.svelte-1u03acn.svelte-1u03acn{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);width:100%}.radio-item.svelte-1u03acn input[type=radio].svelte-1u03acn.svelte-1u03acn{display:none}.radio-item.svelte-1u03acn label.svelte-1u03acn.svelte-1u03acn{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-color-primary);border-radius:5px!important;background-color:var(--input-background-fill);color:var(--body-text-color);font-size:var(--text-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s,border-color .2s,color .2s}.radio-group.disabled.svelte-1u03acn .radio-item label.svelte-1u03acn.svelte-1u03acn{cursor:not-allowed}.radio-item.svelte-1u03acn input[type=radio].svelte-1u03acn:hover+label.svelte-1u03acn{border-color:var(--border-color-accent-subdued);background-color:var(--background-fill-secondary-hover)}.radio-item.svelte-1u03acn input[type=radio].svelte-1u03acn:checked+label.svelte-1u03acn{background-color:var(--primary-500);border-color:var(--primary-500);color:#fff;font-weight:var(--font-weight-bold)}.radio-group.disabled.svelte-1u03acn .radio-item input[type=radio].svelte-1u03acn:checked+label.svelte-1u03acn{background-color:var(--neutral-300);border-color:var(--neutral-300);color:var(--neutral-500)}

src/demo/app.py

@@ -9,41 +9,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -54,6 +139,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -63,54 +149,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

src/demo/space.py

@@ -49,41 +49,126 @@ from gradio_htmlinjector import HTMLInjector
 
 # --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
+class APISettings:
+    api_key: str = field(
+        default="ab123cd45ef67890ghij123klmno456p",
+        metadata={
+            "label": "API Key",            
+            "component": "password", 
+            "help": "Your secret API key. It will not be displayed."
+        }
+    )
+    endpoint_url: str = field(
+        default="https://api.example.com",
+        metadata={
+            "label": "API Endpoint",
+            "component": "string", # string normal
+            "help": "The URL of the API server."
+        }
+    )
+
+@dataclass
+class QuantizationSettings:
+    quantization_method: Literal["None", "Quanto Library", "Layerwise & Bnb"] = field(
+        default="Layerwise & Bnb",
+        metadata={
+            "component": "radio",
+            "label": "Quantization Method",
+            "help": "Quantization mechanism to save VRAM and increase speed."
+        }
+    )
+    # Option 1: Literal values
+    quantize_mode_list: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "value": ["Quanto Library", "Layerwise & Bnb"]},
+            "component": "radio",
+            "label": "Quantization Mode (List)",
+            "help": "This becomes interactive if Quantization Method is 'Quanto' OR 'Layerwise'."
+        }
+    )
+    # Option 2: neq operand
+    quantize_mode_neq: Literal["FP8", "INT8", "IN4"] = field(
+        default="FP8",
+        metadata={
+            "interactive_if": {"field": "quantization_method", "neq": "None"},
+            "component": "radio",
+            "label": "Quantization Mode (Not Equal)",
+            "help": "This becomes interactive if Quantization Method is NOT 'None'."
+        }
+    )
+@dataclass
 class ModelSettings:
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(
-        default="SDXL", metadata={"component": "dropdown", "label": "Base Model"}
+        default="SDXL",
+        metadata={
+            "component": "dropdown",
+            "label": "Base Model",
+            "help": "Select the base diffusion model."
+        }
     )
     custom_model_path: str = field(
         default="/path/to/default.safetensors",
         metadata={
             "label": "Custom Model Path",
             "interactive_if": {"field": "model_type", "value": "Custom"},
+            "help": "Provide the local file path to your custom .safetensors or .ckpt model file. This is only active when 'Base Model' is set to 'Custom'."
         },
     )
-    vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
+    vae_path: str = field(
+        default="",
+        metadata={
+            "label": "VAE Path (optional)",
+            "help": "Optionally, provide a path to a separate VAE file to improve color and detail."
+        }
+    )
 
 @dataclass
 class SamplingSettings:
     scheduler: Literal["Karras", "Simple", "Exponential"] = field(
         default="Karras",
-        metadata={"component": "radio", "label": "Scheduler"}
+        metadata={
+            "component": "radio",
+            "label": "Scheduler",
+            "help": "Determines how the noise schedule is interpreted during sampling. 'Karras' is often recommended for high-quality results."
+        }
     )
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(
         default="DPM++ 2M Karras",
-        metadata={"component": "dropdown", "label": "Sampler"},
+        metadata={
+            "component": "dropdown",
+            "label": "Sampler",
+            "help": "The algorithm used to denoise the image over multiple steps. Different samplers can produce stylistically different results."
+        }
     )
     steps: int = field(
         default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1},
+        metadata={
+            "component": "slider",
+            "label": "Sampling Steps",
+            "minimum": 1,
+            "maximum": 150,
+            "step": 1,
+            "help": "The number of denoising steps. More steps can increase detail but also take longer. Values between 20-40 are common."
+        }
     )
     cfg_scale: float = field(
         default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5},
+        metadata={
+            "component": "slider",
+            "label": "CFG Scale",
+            "minimum": 1.0,
+            "maximum": 30.0,
+            "step": 0.5,
+            "help": "Classifier-Free Guidance Scale. Higher values make the image adhere more strictly to the prompt, while lower values allow for more creativity."
+        }
     )
     enable_advanced: bool = field(
         default=False,
-        metadata={"label": "Enable Advanced Settings"}
+        metadata={
+            "label": "Enable Advanced Settings",
+            "help": "Check this box to reveal more experimental or fine-tuning options."
+        }
     )
     advanced_option: float = field(
         default=0.5,
@@ -94,6 +179,7 @@ class SamplingSettings:
             "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."
         },
     )
     temperature: float = field(
@@ -103,54 +189,106 @@ class SamplingSettings:
             "component": "number_float",
             "minimum": 0.1,
             "maximum": 2.0,
-            "step": 0.1
+            "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."
         }
     )
 
 @dataclass
 class RenderConfig:
-    randomize_seed: bool = field(default=True, metadata={"label": "Randomize Seed"})
+    api_settings: APISettings = field(
+        default_factory=APISettings,
+        metadata={"label": "API Settings"}
+    )
+    randomize_seed: bool = field(
+        default=True,
+        metadata={
+            "label": "Randomize Seed",
+            "help": "If checked, a new random seed will be used for each generation. Uncheck to use the specific seed value below."
+        }
+    )
     seed: int = field(
         default=-1,
-        metadata={"component": "number_integer", "label": "Seed (-1 for random)"},
+        metadata={
+            "component": "number_integer",
+            "label": "Seed",
+            "help": "The seed for the random number generator. A value of -1 means a random seed will be chosen. The same seed and settings will produce the same image."
+        }
+    )
+    model: ModelSettings = field(
+        default_factory=ModelSettings,
+        metadata={"label": "Model Settings"}
+    )
+    sampling: SamplingSettings = field(
+        default_factory=SamplingSettings,
+        metadata={"label": "Sampling Settings"}
+    )
+    quantization: QuantizationSettings = field(
+        default_factory=QuantizationSettings,
+        metadata={"label": "Quantization Settings"}
     )
-    model: ModelSettings = field(default_factory=ModelSettings, metadata={"label": "Model Settings"})
-    sampling: SamplingSettings = field(default_factory=SamplingSettings)
 
 @dataclass
 class Lighting:
     sun_intensity: float = field(
         default=1.0,
-        metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1},
+        metadata={
+            "component": "slider",
+            "label": "Sun Intensity",
+            "minimum": 0,
+            "maximum": 5,
+            "step": 0.1,
+            "help": "Controls the brightness of the main light source in the scene."
+        }
     )
     color: str = field(
-        default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"}
+        default="#FFDDBB",
+        metadata={
+            "component": "colorpicker",
+            "label": "Sun Color",
+            "help": "Sets the color of the main light source."
+        }
     )
 
-
 @dataclass
 class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(
-        default="Sky", metadata={"component": "dropdown"}
+        default="Sky",
+        metadata={
+            "component": "dropdown",
+            "label": "Background Type",
+            "help": "Choose the type of background for the environment."
+        }
+    )
+    lighting: Lighting = field(
+        default_factory=Lighting,
+        metadata={"label": "Lighting"}
     )
-    lighting: Lighting = field(default_factory=Lighting)
-
 
 @dataclass
 class EulerSettings:
     s_churn: float = field(
         default=0.0,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01},
+        metadata={
+            "component": "slider",
+            "label": "S_Churn",
+            "minimum": 0.0,
+            "maximum": 1.0,
+            "step": 0.01,
+            "help": "Stochasticity churn factor for Euler samplers. Adds extra noise at each step, affecting diversity. 0.0 is deterministic."
+        }
     )
 
-
 @dataclass
 class DPM_Settings:
     karras_style: bool = field(
-        default=True, metadata={"label": "Use Karras Sigma Schedule"}
+        default=True,
+        metadata={
+            "label": "Use Karras Sigma Schedule",
+            "help": "If checked, uses the Karras noise schedule, which is often recommended for DPM++ samplers to improve image quality, especially in later steps."
+        }
     )
 
-
 # --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()

src/frontend/Index.svelte

@@ -319,9 +319,28 @@
                                 {#if Array.isArray(group.properties)}
                                     {#each group.properties as prop (prop.name)}
                                         <!-- Conditional interactivity based on another property's value -->
-                                        {@const is_interactive = interactive && (prop.interactive_if 
-                                            ? get_prop_value(prop.interactive_if.field) === prop.interactive_if.value 
-                                            : true)}
+                                        {@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">
@@ -346,6 +365,14 @@
                                                     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" 
@@ -532,10 +559,11 @@
         align-items: center;
         border-bottom: 1px solid var(--background-fill-secondary);
     }
+  
     .prop-label {
         background-color: var(--background-fill-primary);
         color: var(--body-text-color);
-        opacity: 0.7;
+        opacity: 3.7;
         font-weight: var(--font-weight-semibold);
         font-size: var(--text-xs);
         text-align: right;
@@ -549,6 +577,7 @@
         border-bottom: none;
     }
     .prop-control input[type="text"],
+    .prop-control input[type="password"],
     .prop-control input[type="number"] {
         background-color: var(--input-background-fill);
         border: var(--input-border-width) solid var(--border-color-primary);
@@ -737,16 +766,16 @@
         border-radius: var(--radius-md);
         padding: var(--spacing-md);
         position: absolute;
-        z-index: 10;
-        bottom: 125%;
-        left: 50%;
+        z-index: 50;
+        bottom: -50%;
+        left: 50%;        
         transform: translateX(-50%);
         opacity: 0;
         transition: opacity 0.3s;
     }
     .tooltip-container:hover .tooltip-text {
         visibility: visible;
-        opacity: 1;
+        opacity: 1.0;
     }
 	.color-picker-container {
 		display: flex;

src/pyproject.toml

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