Refactor app.py to utilize shared functions for greeting, calculation, and image processing, enhancing modularity and code reuse. Introduce space loading tabs for dynamic integration of popular Hugging Face Spaces.

.gitignore

@@ -1,2 +1,3 @@
 env/
-__pycache__
+__pycache__
+__pycache__/*

README.md

@@ -10,4 +10,58 @@ pinned: false
 license: openrail
 ---
 
-This is a demo from this article: https://www.tomsoderlund.com/ai/building-ai-powered-rest-api
+# Dynamic Space Loading
+---
+
+## 1. **Sending Data To/From IFrames**
+
+### **A. Standard Web (HTML/JS) Context**
+- **IFrames are sandboxed:** By default, an iframe is isolated from the parent page for security reasons.
+- **postMessage API:**  
+  - The standard way to communicate between a parent page and an iframe (and vice versa) is using the [window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API.
+  - This requires both the parent and the iframe to have JavaScript code that listens for and sends messages.
+  - Example:  
+    - Parent: `iframeEl.contentWindow.postMessage({data: "hello"}, "https://iframe-domain.com")`
+    - IFrame: `window.parent.postMessage({data: "hi back"}, "https://parent-domain.com")`
+- **Limitations in Gradio:**  
+  - Gradio does not expose a built-in way to inject custom JS for postMessage into the iframe or parent.
+  - If you control both the parent and the iframe (i.e., both are your own apps), you could add custom JS to both and use postMessage.
+  - If the iframe is a third-party app (like a Hugging Face Space you don’t control), you cannot inject JS into it, so you cannot send/receive data programmatically.
+
+### **B. Gradio Context**
+- **No built-in Gradio API for iframe communication.**
+- **You can use gr.HTML to inject a script into the parent,** but you cannot inject into the iframe if you don’t control its code.
+
+---
+
+## 2. **Sending Data Between Tabs in Gradio**
+
+- **Tabs in Gradio are just layout elements:** All components in all tabs exist in the same Python process and can share state.
+- **You can use gr.State or any shared variable:**  
+  - For example, you can have a gr.State object that is updated in one tab and read in another.
+  - You can also use hidden components or callbacks to pass data between tabs.
+---
+
+## 3. **Summary Table**
+
+| Method                | Parent ↔ IFrame | Tab ↔ Tab (Gradio) |
+|-----------------------|:--------------:|:------------------:|
+| postMessage (JS)      | Yes (if you control both) | N/A              |
+| gr.State              | No              | Yes               |
+| Hidden Components     | No              | Yes               |
+| gradio API            | No              | Yes               |
+
+---
+
+## 4. **Practical Recommendations**
+
+- **For arbitrary Hugging Face Spaces in iframes:**  
+  - You cannot send/receive data programmatically unless the Space itself is designed to listen for postMessage.
+- **For your own Spaces:**  
+  - You can add JS to both parent and iframe to use postMessage.
+- **For Gradio tabs:**  
+  - Use gr.State or shared components for seamless data transfer.
+
+---
+
+**If you want a code example for tab-to-tab data sharing, or want to explore advanced iframe communication (with custom JS), let me know!**

app.py

@@ -4,58 +4,40 @@ import numpy as np
 from style import js_func, css_func
 import tempfile
 import pandas as pd
+from shared_functions import greet, calculator, sepia, download_text, download_csv
+
 from greeting_tab import greeting_tab
 from calculator_tab import calculator_tab
 from sepia_tab import sepia_tab
+from space_loader_tab import gr_load_tab, iframe_loader_tab
 
-def greet(name="Stranger", intensity=1, exclaim=False):
-    greeting = f"Hello, {name}{'!' * int(intensity)}"
-    if exclaim:
-        greeting = greeting.upper()
-    return greeting
-
-def calculator(num1, operation, num2):
-    if operation == "add":
-        result = num1 + num2
-    elif operation == "subtract":
-        result = num1 - num2
-    elif operation == "multiply":
-        result = num1 * num2
-    elif operation == "divide":
-        if num2 == 0:
-            raise gr.Error("Cannot divide by zero!")
-        result = num1 / num2
-    return result
-
-def sepia(input_img):
-    sepia_filter = np.array([
-        [0.393, 0.769, 0.189],
-        [0.349, 0.686, 0.168],
-        [0.272, 0.534, 0.131]
-    ])
-    sepia_img = input_img @ sepia_filter.T
-    sepia_img = np.clip(sepia_img, 0, 255).astype(np.uint8)
-    return sepia_img
-
-def download_text(text):
-    if not text:
-        text = ""
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".txt", mode="w", encoding="utf-8") as f:
-        f.write(text)
-        return f.name
-
-def download_csv(result):
-    if result is None:
-        result = ""
-    df = pd.DataFrame({"Result": [result]})
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".csv", mode="w", encoding="utf-8") as f:
-        df.to_csv(f, index=False)
-        return f.name
+import json
 
 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)
+    # Iframe lazy load pattern
+    heavy_iframe_src = gr.State("")
+    with gr.Tab("Heavy Space (iframe - lazy load)", visible=False) as heavy_iframe_tab:
+        iframe_html = gr.HTML("")
+        close_btn = gr.Button("Close Tab")
+        def close_heavy_iframe_tab():
+            return gr.Tab(visible=False), ""
+        close_btn.click(fn=close_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html])
+    def open_heavy_iframe_tab():
+        src = '<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), src
+    # Iframe always loaded pattern
+    with gr.Tab("Heavy Space (iframe - always loaded)", visible=False) as heavy_iframe_always_tab:
+        gr.HTML('<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>')
+        close_btn2 = gr.Button("Close Tab")
+        def close_heavy_iframe_always_tab():
+            return gr.Tab(visible=False)
+        close_btn2.click(fn=close_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab)
+    def open_heavy_iframe_always_tab():
+        return gr.Tab(visible=True)
+
     with gr.Sidebar(width="25vw"):
         gr.Markdown("""
         # 🤖 API + MCP Demo
@@ -73,14 +55,13 @@ with gr.Blocks(theme=theme, js=js_func, css=css_func) as demo:
         - [Calculator](#calculator)
         - [Sepia Image](#sepia-image)
         - [Custom IFrame Loader](#custom-iframe-loader)
+        - [Space Loader](#space-loader)
         ---
         ### [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.
-
-
         """)
         gr.Code(
           """from gradio_client import Client
@@ -95,15 +76,83 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
         load_sam_iframe_btn = gr.Button("Load SAM2.1 Masking Tool (iframe)", elem_id="load-sam-iframe-btn")
         load_sam_api_btn = gr.Button("Load SAM2.1 Masking Tool (API Proxy)", elem_id="load-sam-api-btn")
         open_sam_tab_btn = gr.Button("Open SAM2.1 Masking Tool in New Tab", elem_id="open-sam-tab-btn")
+        open_heavy_iframe_btn = gr.Button("Open Heavy Space (iframe - lazy load)")
+        open_heavy_iframe_btn.click(fn=open_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html])
+        open_heavy_iframe_always_btn = gr.Button("Open Heavy Space (iframe - always loaded)")
+        open_heavy_iframe_always_btn.click(fn=open_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab)
+
+    # All tabs grouped together for a unified tab bar
+    shared_state = gr.State({"greeting": None, "calculation": None})
+    shared_state_box = gr.JSON(label="Shared Data Between Tabs")
+    def pretty_json(state):
+        return json.dumps(state, indent=2, ensure_ascii=False)
 
     with gr.Tab("Greeting"):
-        greeting_tab()
+        name = gr.Textbox(label="Name", info="Enter your name", placeholder="e.g. Alex")
+        intensity = gr.Slider(1, 20, value=3, step=1, label="Intensity", info="How excited should the greeting be?")
+        with gr.Accordion("Advanced Options", open=False):
+            exclaim = gr.Checkbox(label="Shout (all caps)", info="Make the greeting all uppercase and add exclamations")
+        greet_btn = gr.Button("Greet")
+        greet_output = gr.Textbox(label="Greeting", lines=2)
+        download_greet_btn = gr.DownloadButton(label="Download Greeting", value=download_text, inputs=greet_output)
+        gr.Examples(
+            [["Jill", 1, False], ["Sam", 3, True], ["Alex", 5, False]],
+            inputs=[name, intensity, exclaim],
+            outputs=greet_output,
+            fn=greet
+        )
+        def update_greeting_state(greeting, state):
+            state = dict(state)
+            state["greeting"] = greeting
+            return state
+        greet_btn.click(greet, [name, intensity, exclaim], greet_output).then(update_greeting_state, [greet_output, shared_state], shared_state)
 
     with gr.Tab("Calculator"):
-        calculator_tab()
+        num1 = gr.Number(label="Number 1", info="First number")
+        operation = gr.Radio(["add", "subtract", "multiply", "divide"], label="Operation", info="Choose the operation")
+        num2 = gr.Number(label="Number 2", info="Second number")
+        calc_btn = gr.Button("Calculate")
+        calc_output = gr.Number(label="Result")
+        download_calc_btn = gr.DownloadButton(label="Download Result", value=download_csv, inputs=calc_output)
+        gr.Examples(
+            [[45, "add", 3], [3.14, "divide", 2], [144, "multiply", 2.5], [0, "subtract", 1.2]],
+            inputs=[num1, operation, num2],
+            outputs=calc_output,
+            fn=calculator
+        )
+        def update_calc_state(result, state):
+            state = dict(state)
+            state["calculation"] = result
+            return state
+        calc_btn.click(calculator, [num1, operation, num2], calc_output).then(update_calc_state, [calc_output, shared_state], shared_state)
 
     with gr.Tab("Sepia Image"):
         sepia_tab()
+    with gr.Tab("Space Loader (gr.load)"):
+        gr_load_tab()
+    with gr.Tab("Space Loader (iframe)"):
+        iframe_loader_tab()
+    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>')
+        close_btn = gr.Button("Close Tab")
+        def close_tab():
+            return gr.Tab(visible=False)
+        close_btn.click(fn=close_tab, outputs=extra_space_tab)
+    with gr.Tab("Custom IFrame Loader") as custom_iframe_tab:
+        gr.Markdown("## Load Any IFrame URL")
+        custom_url = gr.Textbox(label="IFrame URL", placeholder="https://example.com")
+        load_custom_iframe_btn = gr.Button("Load IFrame")
+        custom_iframe = gr.HTML(visible=True)
+        def load_custom_iframe(url):
+            if not url:
+                return "<div style='color:red'>Please enter a URL.</div>"
+            return f'<iframe src="{url}" width="100%" height="800" style="border:none;"></iframe>'
+        load_custom_iframe_btn.click(fn=load_custom_iframe, inputs=custom_url, outputs=custom_iframe)
+        close_btn = gr.Button("Close Tab")
+        def close_tab_custom():
+            return gr.Tab(visible=False)
+        close_btn.click(fn=close_tab_custom, outputs=custom_iframe_tab)
 
     # Add state variables for each dynamic tab
     extra_space_open = gr.State(True)
@@ -112,151 +161,20 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
     sam_api_tab_open = gr.State(True)
     custom_iframe_tab_open = gr.State(True)
 
-    with gr.Tab("Extra Space", visible=False) as extra_space_tab:
-        @gr.render(inputs=extra_space_open)
-        def render_extra_space(is_open):
-            if is_open:
-                gr.Markdown("## External Gradio Space")
-                gr.HTML('<iframe src="https://huggingface.co/spaces/gradio/calculator" width="100%" height="600" style="border:none;"></iframe>')
-                close_btn = gr.Button("Close Tab")
-                def close_tab():
-                    return gr.Tab(visible=False), False
-                close_btn.click(fn=close_tab, outputs=[extra_space_tab, extra_space_open])
-
-    with gr.Tab("SAM2.1 Masking Tool (gr.load)", visible=False) as sam_tab:
-        @gr.render(inputs=sam_tab_open)
-        def render_sam_tab(is_open):
-            if is_open:
-                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")
-                close_btn = gr.Button("Close Tab")
-                def close_tab():
-                    return gr.Tab(visible=False), False
-                close_btn.click(fn=close_tab, outputs=[sam_tab, sam_tab_open])
-
-    with gr.Tab("SAM2.1 Masking Tool (iframe)", visible=False) as sam_iframe_tab:
-        @gr.render(inputs=sam_iframe_tab_open)
-        def render_sam_iframe_tab(is_open):
-            if is_open:
-                gr.Markdown("## LPX55/SAM2_1-Image-Predictor-Masking-Tool-CPU (iframe)")
-                gr.HTML('<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>')
-                close_btn = gr.Button("Close Tab")
-                def close_tab():
-                    return gr.Tab(visible=False), False
-                close_btn.click(fn=close_tab, outputs=[sam_iframe_tab, sam_iframe_tab_open])
-
-    with gr.Tab("SAM2.1 Masking Tool (API Proxy)", visible=False) as sam_api_tab:
-        @gr.render(inputs=sam_api_tab_open)
-        def render_sam_api_tab(is_open):
-            if is_open:
-                gr.Markdown("## LPX55/SAM2_1-Image-Predictor-Masking-Tool-CPU (API Proxy)")
-                api_image = gr.Image(label="Input Image")
-                api_btn = gr.Button("Run Remote Masking")
-                api_output = gr.Textbox(label="API Response (raw)")
-                def call_sam_api(image):
-                    import requests
-                    import base64
-                    import json
-                    if image is None:
-                        return "No image uploaded."
-                    with open(image, "rb") as f:
-                        img_b64 = base64.b64encode(f.read()).decode()
-                    payload = {"data": [img_b64]}
-                    try:
-                        resp = requests.post(
-                            "https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space/run/predict",
-                            json=payload,
-                            timeout=60
-                        )
-                        if resp.status_code == 200:
-                            return json.dumps(resp.json(), indent=2)
-                        else:
-                            return f"Error: {resp.status_code} {resp.text}"
-                    except Exception as e:
-                        return f"Exception: {str(e)}"
-                api_btn.click(fn=call_sam_api, inputs=api_image, outputs=api_output)
-                close_btn = gr.Button("Close Tab")
-                def close_tab():
-                    return gr.Tab(visible=False), False
-                close_btn.click(fn=close_tab, outputs=[sam_api_tab, sam_api_tab_open])
-
-    with gr.Tab("Custom IFrame Loader") as custom_iframe_tab:
-        @gr.render(inputs=custom_iframe_tab_open)
-        def render_custom_iframe_tab(is_open):
-            if is_open:
-                gr.Markdown("## Load Any IFrame URL")
-                custom_url = gr.Textbox(label="IFrame URL", placeholder="https://example.com")
-                load_custom_iframe_btn = gr.Button("Load IFrame")
-                custom_iframe = gr.HTML(visible=True)
-                def load_custom_iframe(url):
-                    if not url:
-                        return "<div style='color:red'>Please enter a URL.</div>"
-                    return f'<iframe src="{url}" width="100%" height="800" style="border:none;"></iframe>'
-                load_custom_iframe_btn.click(fn=load_custom_iframe, inputs=custom_url, outputs=custom_iframe)
-                close_btn = gr.Button("Close Tab")
-                def close_tab():
-                    return gr.Tab(visible=False), False
-                close_btn.click(fn=close_tab, outputs=[custom_iframe_tab, custom_iframe_tab_open])
-
-    # Iframe lazy load pattern
-    heavy_iframe_src = gr.State("")
-    with gr.Tab("Heavy Space (iframe - lazy load)", visible=False) as heavy_iframe_tab:
-        iframe_html = gr.HTML("")
-        close_btn = gr.Button("Close Tab")
-        def close_heavy_iframe_tab():
-            return gr.Tab(visible=False), ""
-        close_btn.click(fn=close_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html])
-    def open_heavy_iframe_tab():
-        src = '<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), src
-    open_heavy_iframe_btn = gr.Button("Open Heavy Space (iframe - lazy load)")
-    open_heavy_iframe_btn.click(fn=open_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html])
-
-    # Iframe always loaded pattern
-    with gr.Tab("Heavy Space (iframe - always loaded)", visible=True) as heavy_iframe_always_tab:
-        gr.HTML('<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>')
-        close_btn2 = gr.Button("Close Tab")
-        def close_heavy_iframe_always_tab():
-            return gr.Tab(visible=False)
-        close_btn2.click(fn=close_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab)
-    open_heavy_iframe_always_btn = gr.Button("Open Heavy Space (iframe - always loaded)")
-    def open_heavy_iframe_always_tab():
-        return gr.Tab(visible=True)
-    open_heavy_iframe_always_btn.click(fn=open_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab)
-
     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])
-
     def show_sam_api_tab():
         return gr.Tab(visible=True)
 
-    load_sam_api_btn.click(fn=show_sam_api_tab, outputs=[sam_api_tab])
-
     def open_in_new_tab():
         # This function does nothing server-side, but the button will have a link
         pass
 
     open_sam_tab_btn.click(fn=open_in_new_tab, inputs=None, outputs=None, js="window.open('https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space', '_blank')")
 
-    gr.Markdown("""
-    ---
-    ## 📡 API Usage
-    - Every function in this demo is automatically available as a REST API!
-    - View the [OpenAPI schema](./openapi.json) or click "Use via API" in the footer.
-    - Try the [gradio_client](https://www.gradio.app/guides/getting-started-with-the-python-client) or [@gradio/client](https://www.gradio.app/guides/getting-started-with-the-js-client) to call these endpoints programmatically.
-    """)
+    shared_state.change(pretty_json, shared_state, shared_state_box)
 
 demo.launch(mcp_server=True)

calculator_tab.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from app import calculator, download_csv
+from shared_functions import calculator, download_csv
 
 def calculator_tab():
     gr.Markdown("## Toy Calculator")

greeting_tab.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from app import greet, download_text
+from shared_functions import greet, download_text
 
 def greeting_tab():
     gr.Markdown("## Greeting Generator")

sepia_tab.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from app import sepia
+from shared_functions import sepia
 
 def sepia_tab():
     gr.Markdown("## Sepia Image Filter")

shared_functions.py

@@ -0,0 +1,48 @@
+import tempfile
+import pandas as pd
+import numpy as np
+import gradio as gr
+
+def greet(name="Stranger", intensity=1, exclaim=False):
+    greeting = f"Hello, {name}{'!' * int(intensity)}"
+    if exclaim:
+        greeting = greeting.upper()
+    return greeting
+
+def calculator(num1, operation, num2):
+    if operation == "add":
+        result = num1 + num2
+    elif operation == "subtract":
+        result = num1 - num2
+    elif operation == "multiply":
+        result = num1 * num2
+    elif operation == "divide":
+        if num2 == 0:
+            raise gr.Error("Cannot divide by zero!")
+        result = num1 / num2
+    return result
+
+def sepia(input_img):
+    sepia_filter = np.array([
+        [0.393, 0.769, 0.189],
+        [0.349, 0.686, 0.168],
+        [0.272, 0.534, 0.131]
+    ])
+    sepia_img = input_img @ sepia_filter.T
+    sepia_img = np.clip(sepia_img, 0, 255).astype(np.uint8)
+    return sepia_img
+
+def download_text(text):
+    if not text:
+        text = ""
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".txt", mode="w", encoding="utf-8") as f:
+        f.write(text)
+        return f.name
+
+def download_csv(result):
+    if result is None:
+        result = ""
+    df = pd.DataFrame({"Result": [result]})
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".csv", mode="w", encoding="utf-8") as f:
+        df.to_csv(f, index=False)
+        return f.name

space_loader_tab.py

@@ -0,0 +1,65 @@
+import gradio as gr
+
+POPULAR_SPACES = [
+    "gradio/calculator",
+    "gradio/image-classification",
+    "huggingface-projects/llama-2-7b-chat",
+    "gradio/englishtranslator",
+    "gradio/blocks-gallery"
+]
+
+def gr_load_tab():
+    gr.Markdown("## Load a Popular Hugging Face Space (gr.load)")
+    space_dropdown = gr.Dropdown(POPULAR_SPACES, label="Popular Spaces", interactive=True)
+    load_btn = gr.Button("Load Space")
+    error_box = gr.Markdown(visible=False)
+    with gr.Column():
+        gr.Markdown("### gr.load() Interface")
+        loaded_interface = gr.Blocks()
+
+    def load_space(space):
+        if not space or "/" not in space:
+            return gr.update(visible=True, value="**Error:** Please select a valid space name."), None
+        try:
+            interface = gr.load(space, src="spaces")
+        except Exception as e:
+            return gr.update(visible=True, value=f"**Error loading space:** {e}"), None
+        return gr.update(visible=False), interface
+
+    load_btn.click(
+        fn=load_space,
+        inputs=space_dropdown,
+        outputs=[error_box, loaded_interface]
+    )
+
+def iframe_loader_tab():
+    gr.Markdown("## Load Any Hugging Face Space (iframe)")
+    with gr.Row():
+        space_name = gr.Textbox(label="Space Name", placeholder="e.g. gradio/calculator")
+        space_dropdown = gr.Dropdown(POPULAR_SPACES, label="Popular Spaces", interactive=True)
+        load_btn = gr.Button("Load Space")
+    error_box = gr.Markdown(visible=False)
+    with gr.Column():
+        gr.Markdown("### Space IFrame")
+        iframe_html = gr.HTML("")
+
+    def get_space_name(text, dropdown):
+        return text if text else dropdown
+
+    def load_space(space):
+        if not space or "/" not in space:
+            return gr.update(visible=True, value="**Error:** Please enter a valid space name (e.g. gradio/calculator)."), ""
+        space_id = space.replace("/", "-")
+        iframe_url = f"https://{space_id}.hf.space?__theme=dark"
+        iframe = f'<iframe src="{iframe_url}" width="100%" height="600" style="border:none;"></iframe>'
+        return gr.update(visible=False), iframe
+
+    load_btn.click(
+        fn=get_space_name,
+        inputs=[space_name, space_dropdown],
+        outputs=space_name
+    ).then(
+        fn=load_space,
+        inputs=space_name,
+        outputs=[error_box, iframe_html]
+    )