Gradio progress bar fails to display when using custom root_path

[nahuaque]

Describe the bug

The Gradio custom progress bar does not display when launching the demo with a custom root_path. Instead I get only a spinner.

In Chrome Developer, I can see that there is an issue with loading one CSS asset, where it's incorrectly using the absolute path, i.e. not prefixed with the custom root path. The other assets all seem to be ok.

The bar does however display when the root path is not set.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr
import time

def slowly_reverse(word, progress=gr.Progress()):
    progress(0, desc="Starting")
    time.sleep(1)
    progress(0.05)
    new_string = ""
    for letter in progress.tqdm(word, desc="Reversing"):
        time.sleep(0.25)
        new_string = letter + new_string  # type: ignore
    return new_string

demo = gr.Interface(slowly_reverse, gr.Text(), gr.Text())

demo.launch(root_path="/jupyterlab/default/proxy/7860/", share=False)

Screenshot

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.39.0
gradio_client version: 1.1.1

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

aiofiles: 23.2.1
anyio: 4.3.0
fastapi: 0.111.1
ffmpy: 0.3.2
gradio-client==1.1.1 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.0
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.8.4
numpy: 1.26.4
orjson: 3.10.3
packaging: 23.2
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.8.2
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.5.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.2
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.6.0
httpx: 0.27.0
huggingface-hub: 0.23.0
packaging: 23.2
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[curoa]

Judging from the screenshot, are you using AWS? In my case, I'm not using AWS but a rented server, but I had a similar problem. I fixed it by changing it so that nginx didn't buffer. I hope this helps you a little.

python gradio code

import gradio as gr
import time

def greet(progress=gr.Progress()):
    progress(0, desc="Starting...")
    time.sleep(1)
    for i in progress.tqdm(range(40)):
        time.sleep(0.1)
    return "Complete!"

if __name__ == '__main__':
    with gr.Blocks() as demo:
        execute_button = gr.Button("Run")
        output_progress = gr.TextArea(label="progress")
        execute_button.click(greet, outputs=output_progress)
    demo.launch(root_path="/my_root_path")

Working nginx config

The progress bar is shown correctly.

location /my_root_path/ {
    proxy_pass http://127.0.0.1:7860/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering off;
    proxy_cache off;
    chunked_transfer_encoding on;
}

Not working nginx config

The Text "Starting" and progress bar is not shown, but the last text "Complete" is shown after a few seconds.

location /my_root_path/ {
    proxy_pass http://127.0.0.1:7860/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    #proxy_buffering off;
    #proxy_cache off;
    #chunked_transfer_encoding on;
}