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?

• 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

[zealotpb]

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

[abidlabs]

Thanks so much @HUGHNew! Will take a look

[zealotpb]

My settings are just the same as roy-pstr:
I launched a Gradio app at some port like 12001, and then configured an Nginx to proxy some url to this port.

My Gradio app real ip and port: 10.0.53.179:12001
My Nginix configuration:
location /gradio/ {
rewrite /gradio/(.*) /$1 break;
proxy_pass 10.0.53.179:12001;
proxy_connect_timeout 30s;
proxy_read_timeout 30s;
proxy_send_timeout 30s;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}

However, it failed to open the url saying "10.0.53.179/theme.css" not found.
I guess the correct path of theme.css should be "10.0.53.179/gradio/theme.css", right?

Fortunately, like jeremy-london suggested, when I downgraded to gradio==3.20.0, this problem disappeared.
So I guess it's a bug in the new versions?

[abidlabs]

I believe we have a fix for this in #4133

If anyone could test this out, it would be extremely helpful! To test it out, you must:

• Install gradio like this:

pip install https://gradio-builds.s3.amazonaws.com/1348f7ee48c10cdbd316dfab63c32988fed98e04/gradio-3.29.0-py3-none-any.whl

• When you launch Gradio, you specify the subpath in the launch() method by using the root_path parameter. Or, if you are launching from within a FastAPI app, you can use the root_path parameter in the FastAPI class. So in @HUGHNew's example, it would be:

app = FastAPI(root_path="/app")

[HUGHNew]

I believe we have a fix for this in #4133

If anyone could test this out, it would be extremely helpful! To test it out, you must:

• Install gradio like this:

pip install https://gradio-builds.s3.amazonaws.com/1348f7ee48c10cdbd316dfab63c32988fed98e04/gradio-3.29.0-py3-none-any.whl

• When you launch Gradio, you specify the subpath in the launch() method by using the root_path parameter. Or, if you are launching from within a FastAPI app, you can use the root_path parameter in the FastAPI class. So in @HUGHNew's example, it would be:

app = FastAPI(root_path="/app")

Thanks for quick response and your helpful work!!!

It seems work well on my machine in both ways.

app.py

# pure gradio
import gradio as gr

g_app = gr.Interface(
    lambda x: f"Hello {x}",
    "textbox",
    "textbox",
)

g_app.launch(root_path="/app")
# theme.css request url: http://localhost/app/theme.css

app.py

# use fastapi
from fastapi import FastAPI
import uvicorn
import gradio as gr

app = FastAPI(root_path="/app")

@app.get('/')
def hello():
    return {"message":"hello"}

g_app = gr.Interface(
    lambda x: f"Hello {x}",
    "textbox",
    "textbox",
)

app = gr.mount_gradio_app(app, g_app, path="/gradio")
uvicorn.run(app,host="0.0.0.0",port=7860)
# theme.css request url: http://localhost/app/gradio/theme.css

Express my gratitude again.

[abidlabs]

Thanks for confirming @HUGHNew! We'll have this out soon.

[abidlabs]

In the meantime, anyone needs the fix immediately can install gradio from main by following the instructions here: https://gradio.app/docs/main

[microdou]

@abidlabs Thank you so much for finally fixing it! I'd like to add that it works not only on the two approaches, but also on a third approach using mount instead of root_path, which works as following:

# app.py
from fastapi import FastAPI
from subapp import subapp

app = FastAPI()
app.mount("/subapp", subapp)


# subapp.py
from fastapi import FastAPI
import gradio as gr

subapp = FastAPI()

@subapp.get('/')
def hello():
    return {"message":"hello"}

g_app = gr.Interface(
    lambda x: f"Hello {x}",
    "textbox",
    "textbox",
)
gr.mount_gradio_app(subapp, g_app, path="/gradio")

# now gradio app works at route /subapp/gradio, and hello api works at /subapp/

[abidlabs]

Awesome @microdou!

[bwesen]

Got hit by this right now, when updating Automatic1111's stable-diffusion web-ui. It was pinned on Gradio 3.29.0 and after upgrading I got the same issue, it tries to load /theme.css using some URL root that nginx's proxy_pass doesn't rewrite. I have the whole app proxy'ed under a prefix, just like the previous posters here.

I think my Gradio version was older before, I haven't found exactly which version it was. But judging by the other replies above in this thread it probably was 3.20 or earlier (as that worked for them).

I understand you have nothing to do with Auto1111 but it's a super-popular app right now and if I got hit by this I'm sure lots of others are going to get hit by it as well soon. Just trying to figure out why the problem shows with the theme.css and not anything else (so far :).

[bwesen]

Got hit by this right now, when updating Automatic1111's stable-diffusion web-ui. It was pinned on Gradio 3.29.0 and after upgrading I got the same issue, it tries to load /theme.css using some URL root that nginx's proxy_pass doesn't rewrite. I have the whole app proxy'ed under a prefix, just like the previous posters here.

Update: tested on latest gradio 3.32.0 and same problem, it generates a concatenation of the hostname + /theme.css when it has to generate either the window.origin + window.path + /theme.css OR just theme.css. Since it generates host/theme.css, the reverse proxy has no way of knowing that the request belongs to the Gradio app anymore (which might be under host/prefix/theme.css

I just can't find where in the code it does this incorrect theme.css generation..

[bwesen]

I saw the addition of the root_path Gradio option to "solve" this, but everything worked fine before even when adding a path component using the rev proxy. Adding an explicit dependency on the route like this should be unnecessary and an added problem for deployment as you can't change the host or nginx config without re-configuring the app, which might be running on another host even.

What is specific about the theme.css URL generation compared to all the other URL generations which all work fine?

[bwesen]

As mentioned in the linked Bug-report over at the stable-diffusion-webui, I managed to solve this by using the --subpath option to the webui. It sets the root_config option in Gradio that then generates the correct URL for theme.css

However I still don't know why this solution was needed. Gradio correctly loads all the other dependencies without knowing this root prefix explicitly. Why is the theme.css special?

The proxied URL is available in window.location.pathname so that could have been used, or you could generate theme.css without any leading absolute path or / and just let the browser handle the URL generation. I assume this is how all the other assets load?

[xiaoxinganling]

How to fix "loading..." issue when accessing website after upgrading to version 3.27.0 of nginx deployed in docker with route mapping? #3915

sorry to bother you, but how to get index-xxx.js(index-8c3da1d9.js) when occuring this problem?

[xiaoxinganling]

sorry, it's my fault, please ignore this problem...

[bealbrown]

Hello,

I was unable to determine how to reverse proxy gradio to a path on the domain when embedding via web components. Embedding via iframe works just fine.

My gradio applet's launch config is:

demo.launch(root_path="/gradio-app")

My nginx conf is:

    location /gradio-app/ {
        proxy_pass http://127.0.0.1:7860/; # Change this if your Gradio app will be running on a different port
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

So I would expect to see the gradio app at https://domain.com/gradio-app

And this works, but when I embed via web components, it shows a 204 for https://example.com/config

So for whatever reason it's not respecting the root_path=/gradio-app arg in the launch() config when embedded via webComponents.

Embedding via iFrame works fine for my use case, but thought I'd bring it up.

Gradio Version: 3.35.2

[Giovani-Merlin]

Well, using gradio last version 3.39.0 we have some "solutions".
Lets say we have a base url like url.com and a root path coming from a re-routing from something before like /8000 (opening ports by url path).

Case A:
Gradio should read the root as url.com/8000/
root_path = /8000

Case B: We want to make the gradio root_path from our "base path" coming before like /gradio
Gradio should read the root as url.com/8000/gradio
root_path = /8000/gradio

Working WITH queue:
Case A:
gradio_app.queue()
gradio_app.launch(server_port=8000,root_path=root_path)
Case B:
It will not work because theme.css and info are wrongly located on url.com/8000 (ignoring /gradio). The others info are gotten correctly (so we can "use" the app but without rendering it)

Working WITHOUT queue - using mount_gradio

Case B:
app = FastAPI(rooth_path=/8000)
gapp = gr.routes.App.create_app(gradio_app)
app = gr.mount_gradio_app(app, gapp, path=/gradio)

Works well, but without queue.
if we add ui.interface.queue() before mount gradio app it do 101 Switching Protocols to and /queue/join and stop the request.

[paulguerrero]

I have the same problem with the gradio version 4.21, using mount_gradio_app with FastAPI. It loads all components of the web app correctly, except:

• /favicon.ico
• /assets/index-138adf03.css
• /info
• /theme.css

Gradio tries to load these from the root of the server instead of the path given in mount_gradio_app.

See a screenshot of the requests below. Loading from the root triggers and fails an authentication attempt, which is what you can see in the red entries.

The server is running on a machine managed by runai.

Interestingly, the exact same code works correctly on a different server that is not managed by runai, where these 4 files are loaded correctly from the path given in mount_gradio_app. But it would also correctly work on runai if Gradio would not decide to load these 4 files from the server root, so I do not understand why Gradio tries to load these 4 files from the root in the runai machine, but not on the other server.

Update:
I found that it works better with version 4.20.1, where only the following two files are loaded incorrectly from the root:

• /favicon.ico
• /assets/index-138adf03.css

(Both are not essential, so downgrading to 4.20.1 is a viable workaround for now.)

[PaulClas]

I have tried all the solutions listed in this issue as well as #3798, #3662, #3482, #3472 and https://stackoverflow.com/questions/61641514/css-not-recognized-when-served-with-fastapi.

Solutions that I have tried include:

• Mounting the subapp to my FastAPI app
• Providing a root_path to the FastAPI declaration
• Providing a root_path to the mount_gradio_app() method
• Using both the mount function from FastAPI in conjunction with the mount_gradio_app()
• Downgrading and upgrading gradio to 3.50.1, 4.19.0, 4.20.0, 4.21.0, 4.25.0

My issue is the same as stated in the issue title. When running behind a proxy and load balancer, the gradio app requests the theme.css at the root of the url and not after the url+prefix. I have tried providing the root_path at the app.mount_gradio_app(root_path=) level and at the app=FastAPI(rooth_path=) level.

The gradio app runs at the provided root_path but the theme.css file is requested at the url without the root_path:

I have tried a few different releases from gradio and the gradio python client and have the problem persisting.

This is a sample version of the two solutions I have tried in my code that don't provide the right url to get the theme.css. Both ways work to have the gradio app running with the prefix at https//:abc.com/app/gradio but the theme is requested at https//:abc.com/gradio and fails.

Try 1:

import gradio as gr
import uvicorn

app = FastAPI(root_path="/app")

@app.get('/')
def hello():
    return {"message":"hello"}

g_app = gr.Interface(
    lambda x: f"Hello {x}",
    "textbox",
    "textbox",
)

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

uvicorn.run(app,host="0.0.0.0",port=8080)

Try 2:

from fastapi import FastAPI
import gradio as gr
import uvicorn

app = FastAPI()

@app.get('/')
def hello():
    return {"message":"hello"}

g_app = gr.Interface(
    lambda x: f"Hello {x}",
    "textbox",
    "textbox",
)

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

uvicorn.run(app,host="0.0.0.0",port=8080)

Thx for the help.