gradio icon indicating copy to clipboard operation
gradio copied to clipboard

Cannot embed mounted gradio app as web component

Open 1lint opened this issue 1 year ago • 6 comments

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

1lint avatar Aug 09 '23 22:08 1lint