iframe embedding control (#2)

external signal to hide some elements when embedding on a parent website

app.py

@@ -21,21 +21,26 @@ class ImageFiltersApp(DualVisionApp):
         gr.Markdown(
             f"""
             ## {self.title}
-            <p align="center">
-            <a title="Github" href="https://github.com/toshas/gradio-dualvision" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://img.shields.io/github/stars/toshas/gradio-dualvision?label=GitHub%20%E2%98%85&logo=github&color=C8C" alt="badge-github-stars">
-            </a>
-            <a title="Social" href="https://twitter.com/antonobukhov1" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
-                <img src="https://shields.io/twitter/follow/:?label=Subscribe%20for%20updates!" alt="social">
-            </a>
-            </p>                    
-            <p align="center" style="margin-top: 0px;">
-                Upload a photo or select an example to process the input in real time.
-                Use the slider to reveal areas of interest.
-                Use the radio-buttons to switch between modalities.
-            </p>
-        """
+            """
         )
+        with gr.Row(elem_classes="remove-elements"):
+            gr.Markdown(
+                f"""
+                <p align="center">
+                <a title="Github" href="https://github.com/toshas/gradio-dualvision" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+                    <img src="https://img.shields.io/github/stars/toshas/gradio-dualvision?label=GitHub%20%E2%98%85&logo=github&color=C8C" alt="badge-github-stars">
+                </a>
+                <a title="Social" href="https://twitter.com/antonobukhov1" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
+                    <img src="https://shields.io/twitter/follow/:?label=Subscribe%20for%20updates!" alt="social">
+                </a>
+                </p>
+                <p align="center" style="margin-top: 0px;">
+                    Upload a photo or select an example to process the input in real time.
+                    Use the slider to reveal areas of interest.
+                    Use the radio-buttons to switch between modalities.
+                </p>
+                """
+            )
 
     def build_user_components(self):
         """

gradio_dualvision/app_template.py

@@ -110,6 +110,25 @@ class DualVisionApp(gr.Blocks):
             )
         self.head = ""
         self.head += """
+            <script>
+                window.addEventListener("message", (event) => {
+                    if (event.data?.type === "remove-elements") {
+                        const removeTargets = () => {
+                            const targets = document.querySelectorAll(".remove-elements");
+                            targets.forEach(el => el.remove());
+                        };
+                        
+                        removeTargets();                    
+                        const observer = new MutationObserver(() => {
+                            removeTargets();
+                        });
+                        observer.observe(document.body, { childList: true, subtree: true });
+    
+                        event.source?.postMessage({ type: "ack-remove-elements", source: "gradio-app" }, event.origin);
+                        console.log("Processed event remove-elements");
+                    }
+                });
+            </script>
             <script>
                 let observerFooterButtons = new MutationObserver((mutationsList, observer) => {
                     const oldButtonLeft = document.querySelector(".show-api");