# HF Spaces - Gradio UI is different. Why?
**URL:**
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 4:47am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F1 "2025-09-16T04:47:07Z")
I have been running a multi-agent using HF Smolagents and Gradio UI locally for a while and was so far quite happy with it.
I wanted to explore what needs to be done to run it in Spaces, so I created a Space to run it. After a few trials, i got it to run, but the UI looks completely different and UI elements are not clickable.
Both use the same gradio version (5.45.0) and are based on the correct requirements.txt. Based on the error log on the broweser its indicated that css/javascript is the issue. But I have no clue how to fix this?
What are next steps that I can use to debug it?
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [September 16, 2025, 4:57am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F2 "2025-09-16T04:57:13Z")
Hmm… Try `demo.launch(ssr_mode=False)` for now. And ensure specify version in `REAMDE.md`.
```yaml
---
sdk: gradio
sdk_version: 5.45.0
app_file: app.py
---
```
---
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 5:11am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F3 "2025-09-16T05:11:52Z")
If I remove server side rendering nothing is rendered.
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [September 16, 2025, 5:14am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F4 "2025-09-16T05:14:35Z")
I’ve never seen this symptom before…
Something other than `README.md`, `app.py`, and `requirements.txt` might be causing trouble…
Could it be that there are resources like CSS in the repository, but they’re set to Private (resulting in a 404 error without a token), so Gradio can’t access them…?
---
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 5:24am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F5 "2025-09-16T05:24:12Z")
Thank you for your help1 It’s a standard README. But you nudged me in the right direction. The site needs to be public and can’t be private.
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [September 16, 2025, 5:29am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F6 "2025-09-16T05:29:21Z")
While you could manually place it on a repository in a private space, I think using a public resource is simpler.
>
>
> \### Describe the bug
>
> If I select fonts using Google Fonts at the time of cons…tructing a block, as shown below, the Google Fonts are not displayed correctly when server-side rendering (SSR) is enabled. The theme is loaded correctly though while the fonts fall back to some default serif font. SSR is enabled, by default, when deploying to Hugging Face Spaces.
>
> \`\`\`python
> with gr.Blocks(
> title=self.app\_name,
> fill\_height=True,
> fill\_width=True,
> analytics\_enabled=False,
> theme=gr.themes.Ocean(
> radius\_size="md",
> font=gr.themes.GoogleFont("Lato", weights=(100, 300)),
> font\_mono=gr.themes.GoogleFont("IBM Plex Mono", weights=(100, 300)),
> ),
> ):
> # My code goes here
> \`\`\`
>
> See full code at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L253 and its deployment at https://huggingface.co/spaces/anirbanbasu/gradio-experiments.
>
> The fonts can be picked up correctly in the Hugging Face Spaces deployment if I explicitly disable SSR, e.g., at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L306.
>
> \### Have you searched existing issues? 🔎
>
> \- \[X\] I have searched and found no existing issues
>
> \### Reproduction
>
> \`\`\`python
> import gradio as gr
>
> class GradioApp:
> def make\_ui(self) -\> gr.Blocks:
> with gr.Blocks(
> theme=gr.themes.Ocean(
> radius\_size="md",
> font=gr.themes.GoogleFont("Lato", weights=(100, 300)),
> font\_mono=gr.themes.GoogleFont("IBM Plex Mono", weights=(100, 300)),
> ),
> ) as ui:
> gr.Markdown("Hello world!")
> return ui
>
> if \_\_name\_\_ == "\_\_main\_\_":
> app = GradioApp()
> app.make\_ui().queue().launch(
> share=False,
> # We can omit the ssr\_mode setting if it is deployed to Hugging Face Spaces where it is enabled by default.
> ssr\_mode=True
> )
> \`\`\`
>
>
> \### Screenshot
>
> \
>
> which should have looked like this instead
>
> \
>
>
>
> \### Logs
>
> \`\`\`shell
> \* Running on local URL: http://0.0.0.0:7860, with SSR ⚡
>
> To create a public link, set \`share=True\` in \`launch()\`.
> \`\`\`
>
>
> \### System Info
>
> \`\`\`shell
> Gradio Environment Information:
> \------------------------------
> Operating System: Linux
> gradio version: 5.7.1
> gradio\_client version: 1.5.0
>
> \------------------------------------------------
> gradio dependencies in your environment:
>
> aiofiles: 23.2.1
> anyio: 4.6.2.post1
> audioop-lts is not installed.
> fastapi: 0.115.5
> ffmpy: 0.4.0
> gradio-client==1.5.0 is not installed.
> httpx: 0.28.0
> huggingface-hub: 0.26.3
> jinja2: 3.1.4
> markupsafe: 2.1.5
> numpy: 2.1.3
> orjson: 3.10.12
> packaging: 24.2
> pandas: 2.2.3
> pillow: 11.0.0
> pydantic: 2.10.2
> pydub: 0.25.1
> python-multipart==0.0.12 is not installed.
> pyyaml: 6.0.2
> ruff: 0.8.1
> safehttpx: 0.1.6
> semantic-version: 2.10.0
> starlette: 0.41.3
> tomlkit==0.12.0 is not installed.
> typer: 0.14.0
> typing-extensions: 4.12.2
> urllib3: 2.2.3
> uvicorn: 0.32.1
> authlib; extra == 'oauth' is not installed.
> itsdangerous; extra == 'oauth' is not installed.
>
>
> gradio\_client dependencies in your environment:
>
> fsspec: 2024.9.0
> httpx: 0.28.0
> huggingface-hub: 0.26.3
> packaging: 24.2
> typing-extensions: 4.12.2
> websockets: 12.0
> \`\`\`
>
>
> \### Severity
>
> I can work around it
>
>
> I have tried all the solutions listed in this issue as well as #3798, #3662, #34…82, #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 of #3472. 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:
> \`\`\`from fastapi import FastAPI
> 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.
>
> \_Originally posted by @PaulClas in https://github.com/gradio-app/gradio/issues/3472#issuecomment-2038081429\_
---
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 5:45am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F7 "2025-09-16T05:45:56Z")
Thank you. I think so too. I noticed that now my model loader is also not working. Going back to what I wanted to achieve is that it can be public, but then I don’t want to use my own keys so I need to get this from the user or user profile.
TL;DR the rendering problem is solve (thank you!). I need to instantiate the models differently and also need to rethink key management.
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [September 16, 2025, 6:50am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F8 "2025-09-16T06:50:57Z")
It is recommended to [use `Secrets` for managing API keys and similar credentials](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-manage-user-secrets-and-api-keys%2F67948). `Secrets` are a type of environment variable, but they are hidden from others. Regular environment variables are completely visible to others…
---
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 10:18am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F9 "2025-09-16T10:18:58Z")
Thanks. That’s what I had already implemented. But they are tied to my account setup. Therefore, if this Space is public, I would incur the cost of people potentially using it.
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [September 16, 2025, 10:21am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F10 "2025-09-16T10:21:43Z")
Oh. I see. In that case, you’d either [use Gradio’s `LoginButton`](https://huggingface.co/docs/hub/en/spaces-oauth) or explicitly provide a field for entering the token.
---
**Author:**  [@jsemrau](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fjsemrau)%5C
**Post date:** [September 16, 2025, 10:25am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhf-spaces-gradio-ui-is-different-why%2F168461%2F11 "2025-09-16T10:25:04Z")
That’s exactly what I was looking for!
Thank you so much!