Upload folder using huggingface_hub

README.md

@@ -36,6 +36,7 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 - **Theme-Aware**: Designed to look and feel native in all Gradio themes.
 - **Dynamic Updates**: Supports advanced patterns where changing one field (e.g., a model selector) can dynamically update the options of another field (e.g., a sampler dropdown).
 
+
 ## Installation
 
 ```bash
@@ -51,6 +52,8 @@ import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
+from gradio_headinjector import HeadInjector
+
 
 # --- 1. Dataclass Definitions ---
 
@@ -109,45 +112,32 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
-
-# Load external CSS file if it exists
-script_path = Path(__file__).resolve()
-script_dir = script_path.parent
-css_path = script_dir / "custom.css"
-flyout_css = ""
-if css_path.exists():
-    with open(css_path, "r", encoding="utf8") as file:
-        flyout_css = file.read()
-
-# JavaScript for positioning the flyout panel
-head_script = f"""
-<script>
-    function position_flyout(anchorId) {{
-        setTimeout(() => {{
-            const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-            const flyoutElem = document.getElementById('flyout_panel');
-            
-            if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-                const anchorRect = anchorRow.getBoundingClientRect();
-                const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-                const flyoutWidth = flyoutElem.offsetWidth;
-                const flyoutHeight = flyoutElem.offsetHeight;
+# --- 3. CSS & JS Injection function ---
 
-                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+def inject_assets():
+    """
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    """
+    # Inline code
+    css_code = ""
+    js_code = ""
+
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
+
+    return {"js": js_code, "css": css_code}
 
-                flyoutElem.style.top = `${{topPosition}}px`;
-                flyoutElem.style.left = `${{leftPosition}}px`;
-            }}
-        }}, 50);
-    }}
-</script>
-"""
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(title="PropertySheet Demos") as demo:
+    head_injector = HeadInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():
@@ -309,9 +299,10 @@ with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }
-            demo.load(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
-
+                }            
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            
 if __name__ == "__main__":
     demo.launch()
 ```

app.py

@@ -6,25 +6,6 @@ from typing import Literal
 from gradio_propertysheet import PropertySheet
 from gradio_headinjector import HeadInjector
 
-def inject_assets():
-    """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
-    """
-    # Inline code
-    css_code = ""
-    js_code = ""
-
-    # Read from files
-    try:
-        with open("custom.css", "r", encoding="utf-8") as f:
-            css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
-            js_code += f.read() + "\n"
-    except FileNotFoundError as e:
-        print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
 
 # --- 1. Dataclass Definitions ---
 
@@ -83,42 +64,28 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
+# --- 3. CSS & JS Injection function ---
 
-# Load external CSS file if it exists
-# script_path = Path(__file__).resolve()
-# script_dir = script_path.parent
-# css_path = script_dir / "custom.css"
-# flyout_css = ""
-# if css_path.exists():
-#     with open(css_path, "r", encoding="utf8") as file:
-#         flyout_css = file.read()
+def inject_assets():
+    """
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    """
+    # Inline code
+    css_code = ""
+    js_code = ""
 
-# JavaScript for positioning the flyout panel
-# head_script = f"""
-# <script>
-#     function position_flyout(anchorId) {{
-#         setTimeout(() => {{
-#             const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-#             const flyoutElem = document.getElementById('flyout_panel');
-            
-#             if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-#                 const anchorRect = anchorRow.getBoundingClientRect();
-#                 const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-#                 const flyoutWidth = flyoutElem.offsetWidth;
-#                 const flyoutHeight = flyoutElem.offsetHeight;
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
 
-#                 const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-#                 const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    return {"js": js_code, "css": css_code}
 
-#                 flyoutElem.style.top = `${{topPosition}}px`;
-#                 flyoutElem.style.left = `${{leftPosition}}px`;
-#             }}
-#         }}, 50);
-#     }}
-# </script>
-# # """
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
@@ -285,7 +252,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
                 }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
             
 if __name__ == "__main__":
     demo.launch()

space.py

@@ -44,6 +44,8 @@ import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
+from gradio_headinjector import HeadInjector
+
 
 # --- 1. Dataclass Definitions ---
 
@@ -102,45 +104,32 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
-
-# Load external CSS file if it exists
-script_path = Path(__file__).resolve()
-script_dir = script_path.parent
-css_path = script_dir / "custom.css"
-flyout_css = ""
-if css_path.exists():
-    with open(css_path, "r", encoding="utf8") as file:
-        flyout_css = file.read()
-
-# JavaScript for positioning the flyout panel
-head_script = f\"\"\"
-<script>
-    function position_flyout(anchorId) {{
-        setTimeout(() => {{
-            const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-            const flyoutElem = document.getElementById('flyout_panel');
-            
-            if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-                const anchorRect = anchorRow.getBoundingClientRect();
-                const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-                const flyoutWidth = flyoutElem.offsetWidth;
-                const flyoutHeight = flyoutElem.offsetHeight;
+# --- 3. CSS & JS Injection function ---
+
+def inject_assets():
+    \"\"\"
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    \"\"\"
+    # Inline code
+    css_code = ""
+    js_code = ""
 
-                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
+
+    return {"js": js_code, "css": css_code}
 
-                flyoutElem.style.top = `${{topPosition}}px`;
-                flyoutElem.style.left = `${{leftPosition}}px`;
-            }}
-        }}, 50);
-    }}
-</script>
-\"\"\"
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(title="PropertySheet Demos") as demo:
+    head_injector = HeadInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():
@@ -302,9 +291,10 @@ with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }
-            demo.load(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
-
+                }            
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            
 if __name__ == "__main__":
     demo.launch()
 ```

src/README.md

@@ -36,6 +36,7 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 - **Theme-Aware**: Designed to look and feel native in all Gradio themes.
 - **Dynamic Updates**: Supports advanced patterns where changing one field (e.g., a model selector) can dynamically update the options of another field (e.g., a sampler dropdown).
 
+
 ## Installation
 
 ```bash
@@ -51,6 +52,8 @@ import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
+from gradio_headinjector import HeadInjector
+
 
 # --- 1. Dataclass Definitions ---
 
@@ -109,45 +112,32 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
-
-# Load external CSS file if it exists
-script_path = Path(__file__).resolve()
-script_dir = script_path.parent
-css_path = script_dir / "custom.css"
-flyout_css = ""
-if css_path.exists():
-    with open(css_path, "r", encoding="utf8") as file:
-        flyout_css = file.read()
-
-# JavaScript for positioning the flyout panel
-head_script = f"""
-<script>
-    function position_flyout(anchorId) {{
-        setTimeout(() => {{
-            const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-            const flyoutElem = document.getElementById('flyout_panel');
-            
-            if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-                const anchorRect = anchorRow.getBoundingClientRect();
-                const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-                const flyoutWidth = flyoutElem.offsetWidth;
-                const flyoutHeight = flyoutElem.offsetHeight;
+# --- 3. CSS & JS Injection function ---
 
-                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+def inject_assets():
+    """
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    """
+    # Inline code
+    css_code = ""
+    js_code = ""
+
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
+
+    return {"js": js_code, "css": css_code}
 
-                flyoutElem.style.top = `${{topPosition}}px`;
-                flyoutElem.style.left = `${{leftPosition}}px`;
-            }}
-        }}, 50);
-    }}
-</script>
-"""
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(title="PropertySheet Demos") as demo:
+    head_injector = HeadInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():
@@ -309,9 +299,10 @@ with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }
-            demo.load(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
-
+                }            
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            
 if __name__ == "__main__":
     demo.launch()
 ```

src/demo/app.py

@@ -6,25 +6,6 @@ from typing import Literal
 from gradio_propertysheet import PropertySheet
 from gradio_headinjector import HeadInjector
 
-def inject_assets():
-    """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
-    """
-    # Inline code
-    css_code = ""
-    js_code = ""
-
-    # Read from files
-    try:
-        with open("custom.css", "r", encoding="utf-8") as f:
-            css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
-            js_code += f.read() + "\n"
-    except FileNotFoundError as e:
-        print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
 
 # --- 1. Dataclass Definitions ---
 
@@ -83,42 +64,28 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
+# --- 3. CSS & JS Injection function ---
 
-# Load external CSS file if it exists
-# script_path = Path(__file__).resolve()
-# script_dir = script_path.parent
-# css_path = script_dir / "custom.css"
-# flyout_css = ""
-# if css_path.exists():
-#     with open(css_path, "r", encoding="utf8") as file:
-#         flyout_css = file.read()
+def inject_assets():
+    """
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    """
+    # Inline code
+    css_code = ""
+    js_code = ""
 
-# JavaScript for positioning the flyout panel
-# head_script = f"""
-# <script>
-#     function position_flyout(anchorId) {{
-#         setTimeout(() => {{
-#             const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-#             const flyoutElem = document.getElementById('flyout_panel');
-            
-#             if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-#                 const anchorRect = anchorRow.getBoundingClientRect();
-#                 const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-#                 const flyoutWidth = flyoutElem.offsetWidth;
-#                 const flyoutHeight = flyoutElem.offsetHeight;
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
 
-#                 const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-#                 const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    return {"js": js_code, "css": css_code}
 
-#                 flyoutElem.style.top = `${{topPosition}}px`;
-#                 flyoutElem.style.left = `${{leftPosition}}px`;
-#             }}
-#         }}, 50);
-#     }}
-# </script>
-# # """
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
@@ -285,7 +252,8 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
                 }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
             
 if __name__ == "__main__":
     demo.launch()

src/demo/space.py

@@ -44,6 +44,8 @@ import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
+from gradio_headinjector import HeadInjector
+
 
 # --- 1. Dataclass Definitions ---
 
@@ -102,45 +104,32 @@ initial_env_config = EnvironmentConfig()
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS and JavaScript Loading ---
-
-# Load external CSS file if it exists
-script_path = Path(__file__).resolve()
-script_dir = script_path.parent
-css_path = script_dir / "custom.css"
-flyout_css = ""
-if css_path.exists():
-    with open(css_path, "r", encoding="utf8") as file:
-        flyout_css = file.read()
-
-# JavaScript for positioning the flyout panel
-head_script = f\"\"\"
-<script>
-    function position_flyout(anchorId) {{
-        setTimeout(() => {{
-            const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-            const flyoutElem = document.getElementById('flyout_panel');
-            
-            if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-                const anchorRect = anchorRow.getBoundingClientRect();
-                const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-                
-                const flyoutWidth = flyoutElem.offsetWidth;
-                const flyoutHeight = flyoutElem.offsetHeight;
+# --- 3. CSS & JS Injection function ---
+
+def inject_assets():
+    \"\"\"
+    This function prepares the payload of CSS and JS code. It's called by the
+    demo.load() event listener when the Gradio app starts.
+    \"\"\"
+    # Inline code
+    css_code = ""
+    js_code = ""
 
-                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    # Read from files
+    try:
+        with open("custom.css", "r", encoding="utf-8") as f:
+            css_code += f.read() + "\n"
+        with open("custom.js", "r", encoding="utf-8") as f:
+            js_code += f.read() + "\n"
+    except FileNotFoundError as e:
+        print(f"Warning: Could not read asset file: {e}")
+
+    return {"js": js_code, "css": css_code}
 
-                flyoutElem.style.top = `${{topPosition}}px`;
-                flyoutElem.style.left = `${{leftPosition}}px`;
-            }}
-        }}, 50);
-    }}
-</script>
-\"\"\"
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(title="PropertySheet Demos") as demo:
+    head_injector = HeadInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():
@@ -302,9 +291,10 @@ with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }
-            demo.load(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
-
+                }            
+            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
+                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+            
 if __name__ == "__main__":
     demo.launch()
 ```