file not accessible when linked via gr.HTML or gr.Markdown

elmuz commented 4 weeks ago

Describe the bug

Starting from Gradio 5.x files are not accessible anymore via even if they are in a subfolder of the project root. In particular, the same code that used to work with Gradio 4.x doesn't work anymore with Gradio 5.x.

I have read that the role of allowed_paths attribute of the Block.launch() as mentioned here. Maybe I have misunderstood the right behavior.

Please have a look at the code sample and the screenshots. Can you help me with this? I don't have a workaround at the moment apart from not upgrading.

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

The following code works fine with Gradio 4.x but does not with Gradio 5.x

from pathlib import Path

import gradio as gr

with gr.Blocks(title="TEST") as demo:
    gr.Markdown(f"GRADIO VERSION: {gr.__version__}")
    gr.HTML("<img src='/file=assets/logo.jpg'>")
    gr.Markdown("![logo](file/assets/logo.jpg)")

if __name__ == "__main__":
    demo.launch(allowed_paths=[Path.cwd().absolute()])

For completeness:

katya :: /tmp/app » tree
.
├── assets
│   └── logo.jpg
└── run.py

1 directory, 2 files

Screenshot

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 5.1.0
gradio_client version: 1.4.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.6.2.post1
fastapi: 0.115.2
ffmpy: 0.4.0
gradio-client==1.4.0 is not installed.
httpx: 0.27.2
huggingface-hub: 0.25.2
jinja2: 3.1.4
markupsafe: 2.1.5
numpy: 1.26.4
orjson: 3.10.7
packaging: 24.1
pandas: 2.2.3
pillow: 10.4.0
pydantic: 2.9.2
pydub: 0.25.1
python-multipart: 0.0.12
pyyaml: 6.0.2
ruff: 0.6.9
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.5
typing-extensions: 4.12.2
urllib3: 2.2.3
uvicorn: 0.32.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.9.0
httpx: 0.27.2
huggingface-hub: 0.25.2
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

Blocking usage of gradio

freddyaboulton commented 4 weeks ago

Hi @elmuz - the url is now "<img src='/gradio_api/file=assets/logo.jpg'>"

elmuz commented 3 weeks ago

Hi @freddyaboulton. Thank you for the reply. I can confirm that the toy examples above now works (btw, is it mentioned anywhere about the required /gradio_api/file= prefix?).

However, I am still having problems with the service behind Nginx. For those apps, simply changing the prefix didn't solve. In particular, I have the containers served at https://{localhost or my.production.site}/myapp

each container has the following file struct
```
/app
├── assets
│   └── logo.png
└── run.py
```
where WORKDIR /app is in its dockerfile.
Then I tried with both Markdown and HTML (which work fine in the toy example)
```
gr.Markdown(f"[![logo](/gradio_api/file/assets/logo.png)]({os.getenv('SITE_URL')})")
gr.HTML("<img src='/gradio_api/file=assets/logo.png'>")
```
but I get respectively /usr/share/nginx/html/gradio_api/file/assets/logo.png" failed (2: No such file or directory) /usr/share/nginx/html/gradio_api/file=assets/logo.png" failed (2: No such file or directory)

I am sure assets/logo.png exists alongside run.py.

GRADIO_ROOT_PATH is set with /myapp like the last part of its url
I tried many combinations of GRADIO_ALLOWED_PATHS and gr.set_static_paths() which at this point I am not even sure they are needed.

Can you sport anything wrong in this? Thank you

freddyaboulton commented 3 weeks ago

@elmuz - can you follow this guide to see if it fixes your issue? https://www.gradio.app/guides/running-gradio-on-your-web-server-with-nginx

elmuz commented 2 weeks ago

Hi sorry for the late reply. The guide doesn't fit my case, which is actually the following. I have a single reverse proxy (nginx docker container) that hosts a static landing page with all the demo pointers. Each demo is a separated docker container.

If I let the demo container exposing port 7860, and navigate localhost:7860, then I can see the static images. So far so good.

On the contrary, when getting to the demo container via the reverse proxy (e.g.: http://localhost/demo1) images are not present. Anything else is fine (CSS is working, showing the image via gr.Image() is working). Moreover, I noticed that if I right-click -> inspect and look for sources this is what the page is looking for:

<img src="/gradio_api/file/assets/logo.png" alt="logo">

However, if I manually edit into <img src="demo1/gradio_api/file/assets/logo.png" alt="logo"> it works. It seems that the path is somehow passed incorrectly.

This is the nginx proxy configuration of our demos that are included in the reverse proxy container:

location /demo1/ {
    proxy_pass http://demo1:7860/;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;

as mentioned in the guide. But maybe that is not correct in my scenario. Any idea?

gradio-app / gradio