implement markdown-verbose external signal to hide some elements when embedding on parent websites

app.py

@@ -21,6 +21,10 @@ class ImageFiltersApp(DualVisionApp):
         gr.Markdown(
             f"""
             ## {self.title}
+            """
+        )
+        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">
@@ -34,7 +38,8 @@ class ImageFiltersApp(DualVisionApp):
                 Use the slider to reveal areas of interest.
                 Use the radio-buttons to switch between modalities.
             </p>
-        """
+            """,
+            elem_classes="markdown-verbose",
         )
 
     def build_user_components(self):

gradio_dualvision/app_template.py

@@ -148,7 +148,20 @@ class DualVisionApp(gr.Blocks):
                 });
                 observerFooterButtons.observe(document.body, { childList: true, subtree: true });
             </script>
+            <script>
+                window.addEventListener("message", (event) => {
+                    if (event.data?.type === "markdown-verbose") {
+                        document.querySelectorAll(".markdown-verbose").forEach(el => el.remove());
+                    }
+                });
+            </script>
         """
+        # Invoke like this in the parent page:
+        #     document.querySelectorAll("iframe").forEach((iframe) => {
+        #         iframe.addEventListener("load", () => {
+        #             iframe.contentWindow.postMessage({ type: "markdown-verbose" }, "*");
+        #         });
+        #     });
         if kwargs.get("analytics_enabled") is not False:
             self.head += f"""
                 <script async src="https://www.googletagmanager.com/gtag/js?id=G-1FWSVCGZTG"></script>