UI not displaying correctly because of path to `theme.css`

[areeb1245]

Describe the bug

The UI displays correctly on the local system. But when I upload it to the server, the UI CSS is not present.

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

 NA

Screenshot

Logs

No logs. Only a 404 error.

System Info

This is hosted on railway.app.

Severity

annoying

[areeb1245]

Here's the URL: https://fastapi-production-72d5.up.railway.app/answer-ui/

[abidlabs]

I'm not super familiar with Railway but it seems like the problem is that Gradio needs access to /theme.css to load the CSS, and either this file is missing from the Railway app, or Railway is blocking this file

[areeb1245]

I tried loading the thing on a different account and it seems to be working. But it's only this account for some reason. Do you know how I can get this sorted?

[areeb1245]

I'm not super familiar with Railway but it seems like the problem is that Gradio needs access to /theme.css to load the CSS, and either this file is missing from the Railway app, or Railway is blocking this file

Is there any way I can index the theme directly in the code?

[abidlabs]

I tried loading the thing on a different account and it seems to be working. But it's only this account for some reason. Do you know how I can get this sorted?

It works on a different Railway app? Then it doesn't sound like a Gradio issue, it sounds like an issue with Railway, no?

Is there any way I can index the theme directly in the code?

I don't think so. cc @aliabid94 for your thoughts

[areeb1245]

Yes, you're right. It's probably an issue with them. But is there any CDN that I can use to index the theme.css file? @aliabid94

[abidlabs]

No the theme.css file is creating specifically for your app and it might differ from app to app, so it wouldn't be available on a CDN. I'm going to close this issue as it doesn't seem related to Gradio, but rather Railway. If you could reach out to them and see how to serve a static css file, that should solve the issue you're seeing.

[hinaloe]

It looks gradios's bug.

I ran into the same problem while trying the following case:

app = gr.mount_gradio_app(app, io, path="/gradio")

This is an example of incorporating FastAPI into any of the FastAPI routes listed in the documentation.

https://gradio.app/docs/#mount_gradio_app

For some reason, the front end assumes that theme.css is directly under root and tries to load it, but in fact /gradio/theme.css is served.

[abidlabs]

Ah, thanks @hinaloe for the heads up. cc @aliabid94 we should resolve this before releasing themes

[dbonattoj]

It seems that the problem is still there for me:

app = FastAPI()
demo = gr.Interface(fn=fun, inputs=gr.Image(type="pil"), outputs="image")
setup_cors(app)
app = gr.mount_gradio_app(app, demo, path="/")
uvicorn.run(app, host=SERVER_NAME, port=SERVER_PORT)

This creates my app under 127.0.0.1:7860

BUT I do a ssh reverse tunnel toward another server that exposes the app to the web using nginx (the config is correct there) on the other server I access the app using http://www.domain.com/subpath/

The main file is loaded, the theme however is not. From the analysis of the network, the app tries to load http://www.domain.com/theme.css

If I put path="/subpath",

I can access the application only under http://www.domain.com/subpath/subpath but the theme.css is still not loaded.. (as the theme is now under http://www.domain.com/subpath/subpath/theme.css but the app still look for http://www.domain.com/subpath/theme.css ..)

I checked on the server, the css is there, but not in the folder the code is expecting it !

The code looks for http://www.domain.com/theme.css while the theme is actually in http://www.domain.com/subpath/theme.css

And I can't change this behavior.

I also tryied to create static assets

def configure_static(app): 
    app.mount("/static", StaticFiles(directory="static"), name="static")

and put the theme.css there, but I can't change gradio behavior to use the static assets folder.

[majedtaki]

I'm having the same problem as above! @dbonattoj Did you figure out a way around it?

[dbonattoj]

Not really.. I'm hoping @abidlabs or @freddyaboulton can reopen the issue and inspect it or give further instruction

[abidlabs]

Reopening the issue. @majedtaki @dbonattoj are you using the latest version of Gradio?

[majedtaki]

Yes latest version. It works with v3.20.0 but not with any version after. So i think the bug was introduced when you guys added the custom theme support in v3.21.0

[catalpaaa]

the login page also has the same issue ss on 3.24

[aibill2029]

Is this issue fixed?

[abidlabs]

@majedtaki @catalpaaa @zealotpb can you tell us more about how you are deploying the Gradio app? Is it also on a subdomain like how @dbonattoj described above?

[roy-pstr]

Hi, I'm having a similar problem.

Gradio app is deployed on EC2 instance via docker image. The container is running on port 7865. Accessing the app directly via the port works fine: http://domain.name:7865.

The problem occurs only when redirecting with nginx:

location /gradio/ {
                proxy_pass http://localhost:7865/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

Then accessing http://domain.name/gradio will return blank gradio page - because of theme.css 404 error. It is looking for the file under the root path instead of the sub-route gradio.

For now what solved it for me was to redirect from the root path to the radio app, then it can find the theme.css file. Like this:

location / {
                proxy_pass http://localhost:7865/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

But this issue should be fixed...

UPDATE - TEMP FIX

Mounting the gradio app to a fastapi app and adding the redirect response from the root of the fastapi app, together with the nginx redirect from subroute to the port fastapi app is running on - solved the themes.css 404 issue.

Here are the code changes for the app.py file:

from fastapi import FastAPI
from fastapi.responses import RedirectResponse
import gradio as gr

fastapi_app = FastAPI()
gradio_app = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")

@fastapi_app.get("/")
def redirect_to_gradio():
    return RedirectResponse(url="/gradio")

app = gr.mount_gradio_app(fastapi_app, gradio_app, path='/gradio')

[abidlabs]

@aliabid94 can you take a look at this? Seem high priority to me

[jeremy-london]

Confirmed this is broken on 3.24.1 and main (https://gradio-main-build.s3.amazonaws.com/ad50eaa63df55a7cbb6caab4fe635206a070bbe9/gradio-3.24.1-py3-none-any.whl)

Downgrading to 3.20.0 allow this to work again for me -- Running in Sagemaker Studio Lab https://github.com/machinelearnear/use-gradio-streamlit-sagemaker-studiolab

[catalpaaa]

@majedtaki @catalpaaa @zealotpb can you tell us more about how you are deploying the Gradio app? Is it also on a subdomain like how @dbonattoj described above?

im using gradio over nginx heres the settings:

location /stable-diffusion/ {
			proxy_http_version 1.1;
			proxy_set_header Accept-Encoding gzip;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
			proxy_connect_timeout 86400;
			proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
			proxy_set_header   X-Real-IP		$remote_addr;
			proxy_pass	http://localhost:9440/;
			proxy_redirect / /stable-diffusion/;
			proxy_cookie_path / /stable-diffusion/;

Im starting gradio without "path", Im doing reverse proxy to it.

[cwzhao]

same issue here. Do we have some tmp solution?

[bharadwaj509]

Hey Guys,

Same issue. Where do I find the theme.css file? Could you please help? @cwzhao @catalpaaa

[catalpaaa]

Hey Guys,

Same issue. Where do I find the theme.css file? Could you please help? @cwzhao @catalpaaa

For now, I'm using subdomain to bypass this bug.

[areeb1245]

Here's what worked for me. It's a temporary solution. You can use version 3.16

pip install gradio==3.16.0

[noonowl]

Same here with 3.27.0

[noonowl]

I just digging into the issue and it forces to get "theme.css" from the root in js/app/src/Index.svelte

		await mount_css(config.root + "/theme.css", document.head);

==== UPDATED It appears that the host address for connecting to the theme.css file and wss:// is only connected to "/", indicating that an incorrect value has been assigned to config.path in client.ts. Is it possible to separate the host and path?

const path = window.gradio_config.root;

[fredhu21]

This problem bothers me too... My gradio version is 3.24.1 And the root cause is at index.xxxx.js, specifically the code

await Te(m.root + "/theme.css", document.head),

[fredhu21]

@abidlabs @aliabid94 Please make sure the frontend typescript fix not only the theme.css missing problem under the path redirect situation.

The real predict post request should be fixed too..., otherwise the predict request will still failed

because it was routed to http://mydomain.com/run/predcit, while it should be routed to http://mydomain.com/gradio/run/predict

[highroom]

the same problem at 3.28.1, hope to quickly solve