gradio
gradio copied to clipboard
Cannot embed mounted gradio app as web component
Describe the bug
After mounting a gradio app using gr.mount_gradio_app, the mounted gradio app cannot be embedded as a web component, showing an error for "cannot load this space".
It appears that the web component js code expects that the gradio app is always served at the index page of the domain. For example in the reproduction below, the web component js code tries to request the /config
endpoint, when it should actually request the config from the /gradio/config
endpoint, given that the gradio app is mounted at the /gradio
route. The same applies for other gradio app endpoints /info
, /theme.css
, etc.
Have you searched existing issues? 🔎
- [X] I have searched and found no existing issues
Reproduction
from fastapi import FastAPI, Request
import gradio as gr
from fastapi.responses import HTMLResponse
MOUNT_PATH = "/gradio"
app = FastAPI()
@app.get("/", response_class=HTMLResponse)
def read_main(request: Request):
domain_index = str(request.url).strip("/")
return f"""
<h1>Iframe embedding</h1>
<iframe src="{MOUNT_PATH}"></iframe>
<br>
<br>
<h1>Web component embedding</h1>
<script type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/{gr.__version__}/gradio.js">
</script>
<gradio-app src="{domain_index}{MOUNT_PATH}"></gradio-app>
""".strip()
io = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
app = gr.mount_gradio_app(app, io, path=MOUNT_PATH)
if __name__ == "__main__":
import uvicorn
uvicorn.run(app)
Screenshot
No response
Logs
fastapi logs:
`INFO: 127.0.0.1:54844 - "GET /config HTTP/1.1" 404 Not Found`
It's hard to see from the compiled javascript, but open https://gradio.s3-us-west-2.amazonaws.com/3.39.0/assets/index-fda37c89.js and ctrl-f for "M.root", or "/config". They point to areas where the code assumes the gradio app is mounted at the index route without accounting for the mounted path
System Info
gradio version: 3.39.0
gradio Dependencies:
aiofiles: 23.1.0
aiohttp: 3.8.4
altair: 5.0.1
fastapi: 0.100.0
ffmpy: 0.3.0
gradio-client: 0.3.0
httpx: 0.24.1
huggingface-hub: 0.16.4
jinja2: 3.1.2
markdown-it-py: 2.2.0
markupsafe: 2.1.3
matplotlib: 3.7.2
mdit-py-plugins: 0.3.3
numpy: 1.25.1
orjson: 3.9.2
packaging: 23.1
pandas: 2.0.3
pillow: 10.0.0
pydantic: 1.10.11
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0
requests: 2.29.0
semantic-version: 2.10.0
typing-extensions: 4.7.1
uvicorn: 0.22.0
websockets: 11.0.3
gradio_client version: 0.3.0
gradio_client Dependencies:
fsspec: 2023.6.0
httpx: 0.24.1
huggingface-hub: 0.16.4
packaging: 23.1
requests: 2.29.0
typing-extensions: 4.7.1
websockets: 11.0.3
Severity
I can work around it