root_path does not get handled correctly in custom components

[futurestandard]

Describe the bug

I try custom component using root_path setting, but style.css path is wrong.
I want to use reverse proxy, so could you apply root_path setting to custom component and pip installed custom component.
-https://pypi.org/project/gradio-pdf/
-https://pypi.org/project/gradio-datepicker/

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr
from gradio_fs005 import fs005
from datetime import datetime
def main():
    gr.close_all()
    
    with gr.Blocks() as demo:
        with gr.Row():
            datepickertest = fs005()
            testbtn = gr.Button()
            testresult = gr.Textbox()
        def testfn(datetxt):
            print("date")
            print(datetxt)
            return datetxt
        testbtn.click(testfn,[datepickertest],[testresult])


    demo.launch(server_port=8005, server_name="0.0.0.0",root_path="/8005")
if __name__ == "__main__":
    main()

Screenshot

Logs

No response

System Info

------------------------------
Operating System: Linux
gradio version: 4.8.0
gradio_client version: 0.7.1

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

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.104.1
ffmpy: 0.3.1
gradio-client==0.7.1 is not installed.
httpx: 0.25.2
huggingface-hub: 0.19.4
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.2
numpy: 1.26.0
orjson: 3.9.10
packaging: 23.1
pandas: 2.1.3
pillow: 10.1.0
pydantic: 2.5.2
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
requests: 2.31.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.8.0
uvicorn: 0.24.0.post1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.12.1
httpx: 0.25.2
huggingface-hub: 0.19.4
packaging: 23.1
requests: 2.31.0
typing-extensions: 4.8.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[abidlabs]

Hi @futurestandard as this is not a core gradio component, the best place to open the issue would be on the repo for the particular custom component. For example, here for the custom PDF component: https://github.com/freddyaboulton/gradio-pdf

[futurestandard]

Hi @abidlabs
We believe this is a problem that occurs with all custom components.
We believe that the response will depend on whether root_path must be handled separately in each custom component or whether it can be handled in the core component.
I suspect that the root_path information is not reflected in the style.css reference path for all custom components.
If all custom components have to be handled individually by the developer, could you please add a tutorial on how to do this, as I am not sure what needs to be changed.

[abidlabs]

Ah I see, thanks @futurestandard for explaining

[nxphi47]

+1

[freddyaboulton]

Hi @futurestandard ! Thanks for filing the issue.

Can you give us some steps to reproduce this issue? How can we install the gradio_fs005 component? Does this error happen when you run dev mode? Or after the component is installed locally on your remote server. Does the demo work locally for you? Thanks!

[nxphi47]

Hi @freddyaboulton , I clone exactly this https://huggingface.co/spaces/freddyaboulton/gradio_multimodalchatbot on our remote server, which is behind a proxy and can only be accessible with a url like abc.com/proxy/myapp/port1234/.

With this, I have to set demo.launch(root_path="/proxy/myapp/port1234/") for the demo to work with core components. But with this multi-modal component, it cannot load and give this error:

On the flip side, why don't you add the multi-modal components to core components as well?

My gradio version is 4.10

[freddyaboulton]

Hi @nxphi47 ! And did you build the component after cloning it? gradio cc build Just to be sure 😄

[nxphi47]

Hi @nxphi47 ! And did you build the component after cloning it? gradio cc build Just to be sure 😄

@freddyaboulton Yes, I pip install the whl file in it as well as gradio cc build but still didn't work. I think it's related to the #6739 issue, where the request does not route to the proxy suffix, but the main host site.

See screenshot below, it requests abc.com/custom_component/044a4423477de692780e635cd143bfbe/component/index.js instead of abc.com/proxy/myapp/port1234/custom_component/044a4423477de692780e635cd143bfbe/component/index.js . I tried to type the latter on the new browser and it fetch the .js file successfully.

[futurestandard]

@freddyaboulton
sorry for late reply.

nginx server.conf is
`events{}
http{
server{
client_max_body_size 0;
listen 16003;
server_name deb-poweredg-724m603;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

	location /71b01c2c359b190aa4dfbb280a339db11b02efae5587441caaf8ee740b868e26/ {
		proxy_pass http://127.0.0.1:50002/;
		proxy_redirect off;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_set_header Host $host;
	}
}

}`

and I installed
pip install gradio gradio-calendar

normal access code
`import gradio as gr
from gradio_calendar import Calendar
import datetime

def is_weekday(date: datetime.datetime):
print(date)
return date.weekday() < 5

demo = gr.Interface(is_weekday,
[Calendar(type="datetime", label="Select a date", info="Click the calendar icon to bring up the calendar.")],
gr.Label(label="Is it a weekday?"),
examples=["2023-01-01", "2023-12-11"],
cache_examples=True,
title="Is it a weekday?")

demo.launch(server_port=50002, server_name="0.0.0.0")`

is fine.

reverse proxy code
`import gradio as gr
from gradio_calendar import Calendar
import datetime

def is_weekday(date: datetime.datetime):
print(date)
return date.weekday() < 5

demo = gr.Interface(is_weekday,
[Calendar(type="datetime", label="Select a date", info="Click the calendar icon to bring up the calendar.")],
gr.Label(label="Is it a weekday?"),
examples=["2023-01-01", "2023-12-11"],
cache_examples=True,
title="Is it a weekday?")

demo.launch(server_port=50002, server_name="0.0.0.0",root_path="/71b01c2c359b190aa4dfbb280a339db11b02efae5587441caaf8ee740b868e26")`

cause continuous loop because style.css path have not been refrected for root_path settings.

not only gradio-calendar, other pip custom-components and self-build conponents have same issue.
Does this explanation make it okay?