Duplicate from multimodalart/shadow-root

Co-authored-by: Multimodal AI art <[email protected]>

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,14 @@
+---
+title: Shadow Root
+emoji: 🦀
+colorFrom: purple
+colorTo: red
+sdk: gradio
+sdk_version: 3.12.0
+app_file: app.py
+pinned: false
+license: mit
+duplicated_from: multimodalart/shadow-root
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,23 @@
+import gradio as gr
+
+advanced_button = gr.Button("Advanced options", elem_id="advanced-btn")
+css = '''
+#advanced-options {display: none}
+'''
+block = gr.Blocks(css=css)
+with block:
+    advanced_button = gr.Button("Advanced options", elem_id="advanced-btn")
+    with gr.Row(elem_id="advanced-options"):
+        samples = gr.Slider(label="Images", minimum=1, maximum=4, value=3, step=1)
+
+    advanced_button.click(
+        None,
+        [],
+        [],
+        _js="""
+        () => {
+            const options = document.querySelector("body > gradio-app").shadowRoot.querySelector("#advanced-options");
+            options.style.display = ["none", ""].includes(options.style.display) ? "flex" : "none";
+        }""",
+    )
+block.launch()