README.md

metadata

title: REST API with Gradio and Huggingface Spaces
emoji: 👩‍💻
colorFrom: blue
colorTo: green
sdk: gradio
sdk_version: 5.34.2
app_file: app.py
pinned: false
license: openrail

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 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!