Add extra tabs for external tools and buttons to load them

app.py

@@ -52,6 +52,7 @@ def download_csv(result):
 theme = gr.Theme.from_hub("LPX55/modal_ai")
 
 with gr.Blocks(theme=theme, js=js_func, css=css_func) as demo:
+    show_space_tab = gr.State(False)
     with gr.Sidebar(width="25vw"):
         gr.Image("logo.png", width=80, show_label=False)
         gr.Markdown("""
@@ -64,14 +65,13 @@ with gr.Blocks(theme=theme, js=js_func, css=css_func) as demo:
         - [Calculator](#calculator)
         - [Sepia Image](#sepia-image)
         ---
-        [GitHub Repo](https://github.com/yourrepo) | [Docs](https://yourdocs)
+        ### [GitHub Repo](https://github.com/yourrepo) | [Docs](https://yourdocs)
         ---
         **Tips:**  
         - Try the examples in each tab!
         - Download your results with the button on the right.
-        ---
 
-        _v1.0.0 | Powered by Gradio_
+
         """)
         gr.Code(
           """from gradio_client import Client
@@ -81,6 +81,9 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
           """, language="python", label="**API Example:**"
         )
         gr.Button("Reset All", elem_id="reset-btn")
+        load_space_btn = gr.Button("Load Extra Space", elem_id="load-space-btn")
+        load_sam_btn = gr.Button("Load SAM2.1 Masking Tool (gr.load)", elem_id="load-sam-btn")
+        load_sam_iframe_btn = gr.Button("Load SAM2.1 Masking Tool (iframe)", elem_id="load-sam-iframe-btn")
 
     with gr.Tab("Greeting"):
         gr.Markdown("## Greeting Generator")
@@ -128,6 +131,34 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
         image_output = gr.Image(label="Sepia Image")
         sepia_btn.click(sepia, image_input, image_output)
 
+    with gr.Tab("Extra Space", visible=False) as extra_space_tab:
+        gr.Markdown("## External Gradio Space")
+        gr.HTML('<iframe src="https://huggingface.co/spaces/gradio/calculator" width="100%" height="600" style="border:none;"></iframe>')
+
+    with gr.Tab("SAM2.1 Masking Tool (gr.load)", visible=False) as sam_tab:
+        gr.Markdown("## LPX55/SAM2_1-Image-Predictor-Masking-Tool-CPU (gr.load)")
+        sam_interface = gr.load("LPX55/SAM2_1-Image-Predictor-Masking-Tool-CPU", src="spaces")
+
+    with gr.Tab("SAM2.1 Masking Tool (iframe)", visible=False) as sam_iframe_tab:
+        gr.Markdown("## LPX55/SAM2_1-Image-Predictor-Masking-Tool-CPU (iframe)")
+        sam_iframe = gr.HTML(visible=True)
+
+    def show_tab():
+        return gr.Tab(visible=True)
+
+    load_space_btn.click(fn=show_tab, outputs=[extra_space_tab])
+
+    def show_sam_tab():
+        return gr.Tab(visible=True)
+
+    load_sam_btn.click(fn=show_sam_tab, outputs=[sam_tab])
+
+    def show_sam_iframe_tab():
+        iframe_html = '<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>'
+        return gr.Tab(visible=True), iframe_html
+
+    load_sam_iframe_btn.click(fn=show_sam_iframe_tab, outputs=[sam_iframe_tab, sam_iframe])
+
     gr.Markdown("""
     ---
     ## 📡 API Usage