Upload folder using huggingface_hub

app.py

@@ -5,6 +5,7 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
+
 # --- 1. Dataclass Definitions ---
 
 # Dataclasses for the Original Sidebar Demo
@@ -65,13 +66,13 @@ model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": Eul
 # --- 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()
+# 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"""
@@ -97,10 +98,10 @@ head_script = f"""
         }}, 50);
     }}
 </script>
-"""
+# """
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(css_paths=["demo/custom.css"], head=head_script, head_paths=["demo/custom.html"], title="PropertySheet Demos") as demo:
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():

custom.html

@@ -0,0 +1,22 @@
+<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;
+
+                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
+                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+
+                flyoutElem.style.top = `${{topPosition}}px`;
+                flyoutElem.style.left = `${{leftPosition}}px`;
+            }}
+        }}, 50);
+    }};
+</script>

src/demo/app.py

@@ -5,6 +5,7 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
+
 # --- 1. Dataclass Definitions ---
 
 # Dataclasses for the Original Sidebar Demo
@@ -65,13 +66,13 @@ model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": Eul
 # --- 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()
+# 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"""
@@ -97,10 +98,10 @@ head_script = f"""
         }}, 50);
     }}
 </script>
-"""
+# """
 
 # --- 4. Gradio App Build ---
-with gr.Blocks(css=flyout_css, head=head_script, title="PropertySheet Demos") as demo:
+with gr.Blocks(css_paths=["demo/custom.css"], head=head_script, head_paths=["demo/custom.html"], title="PropertySheet Demos") as demo:
     gr.Markdown("# PropertySheet Component Demos")
     
     with gr.Tabs():

src/demo/custom.html

@@ -0,0 +1,22 @@
+<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;
+
+                const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
+                const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+
+                flyoutElem.style.top = `${{topPosition}}px`;
+                flyoutElem.style.left = `${{leftPosition}}px`;
+            }}
+        }}, 50);
+    }};
+</script>