posit-dev
Positron web doesn't load Gradio HTML/CSS correctly
System details:
Positron and OS details:
Posit Workbench demo server:
Positron Version: 2025.04.0 (Universal) build 224 Code - OSS Version: 1.98.0 Commit: dfb52743fd0b3c3fc97f5f520c3803b420b5a67c Date: 2025-03-31T03:29:39.838Z Electron: 34.2.0 Chromium: 132.0.6834.196 Node.js: 20.18.2 V8: 13.2.152.36-electron.0 OS: Darwin arm64 24.3.0
Interpreter details:
Python 3.12.0
Describe the issue:
On Posit Workbench: Positron Pro, the full set of CSS and images are not loaded properly for Gradio apps.
Steps to reproduce the issue:
Python file:
import gradio as gr
def image_classifier(inp):
return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()
- Click on Run Gradio App button
- Note that while the Gradio app does appear in the Viewer pane, it is missing images/CSS
Expected or desired behavior:
Should appear as on desktop:
Were there any error messages in the UI, Output panel, or Developer Tools console?
[Extension Host] ListExperimentsResponse result: Object
workbench.js:246324 [Extension Host] Client experimentation flags: Object
workbench.js:246324 [Extension Host] Done activating plugin Gemini Code Assist, took 13551.972943ms
workbench.js:18595 DEBUG Webview(29a213b5-15e8-4828-8aa1-09d2ea84b1d4): will update content options
2workbench.js:18595 DEBUG Webview(29a213b5-15e8-4828-8aa1-09d2ea84b1d4): will update content
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.css
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.css, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fcodicons%2Fcodicon.css%22%7D
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/styles.css
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/styles.css, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fwebview%2Fstyles.css%22%7D
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/app_bundle.js
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/app_bundle.js, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fwebview%2Fapp_bundle.js%22%7D
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.ttf?38dcd33a732ebca5a557e04831e9e235
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.ttf?38dcd33a732ebca5a557e04831e9e235, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fcodicons%2Fcodicon.ttf%22%7D
6workbench.js:18595 DEBUG Comments: URIs of continue on comments to add to storage .
df4f67d6/:1 Refused to apply style from 'https://dev.palm.ptd.posit.it/theme.css?v=63194d3741d384f9f85db890247b6c0ef9e7abac0f297f40a15c59fe4baba916' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
18Refused to apply style from '<URL>' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/styles.css
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/webview/styles.css, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fwebview%2Fstyles.css%22%7D
workbench.js:18595 DEBUG loadLocalResource - begin. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.css
workbench.js:18595 DEBUG loadLocalResource - found resource to load. requestUri=vscode-remote://dev.palm.ptd.posit.it/home/thomas/.positron-server/extensions/google.geminicodeassist-2.30.1-universal/codicons/codicon.css, resourceToLoad=vscode-remote://dev.palm.ptd.posit.it/vscode-resource?%7B%22requestResourcePath%22%3A%22%2Fhome%2Fthomas%2F.positron-server%2Fextensions%2Fgoogle.geminicodeassist-2.30.1-universal%2Fcodicons%2Fcodicon.css%22%7D
df4f67d6/:1 Access to internal resource at 'https://posit.okta.com/oauth2/v1/authorize?client_id=0oa9d6vak88uxJYXj697&redirect_uri=https%3A%2F%2Fsso.palm.ptd.posit.it%2F__oauth__&response_type=code&scope=openid+profile+email&state=58fbd03f647c80204657243f50f0d622%3Aoidc%3Ahttps%3A%2F%2Fdev.palm.ptd.posit.it%2Fs%2F1a5b76ae9dc1bf3fca82d%2Fp%2Fdf4f67d6%2F%2Fmanifest.json' (redirected from 'https://dev.palm.ptd.posit.it/s/1a5b76ae9dc1bf3fca82d/p/df4f67d6//manifest.json') from origin 'https://dev.palm.ptd.posit.it' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The Gradio app appears to load as expected locally in Positron Desktop and Positron Server Web; however, the underlying url is actually incorrect in the Gradio app in Positron Desktop and Positron Server Web as well, although you wouldn't be able to tell as the app looks to load just fine!
The following screenshots show that the theme.css file is being loaded from the app URL path (the one in the Terminal), but they should actually be loaded from the proxied app URL (the URL in the Viewer address bar).
Positron Server Web
Positron Desktop
Positron on Workbench
The theme.css is being loaded from https://dev.palm.ptd.posit.it/theme.css?v=63194d3741d384f9f85db890247b6c0ef9e7abac0f297f40a15c59fe4baba916 (the proxy path is missing), but it should be loaded from the path shown in the View address bar, with theme.css appended:
If you manually set the href to ./theme.css, it will load relative to the proxied path.
This seems to be a bug in Gradio where the framework expects the theme.css file to be at the application root; however, this assumption causes issues when the app is proxied. There are a few open issues around loading theme.css: https://github.com/gradio-app/gradio/issues?q=is:issue%20state:open%20theme.css
I don't think we could resolve this in Positron without writing some hacky path rewriting -- I think this may need to be patched in Gradio. I'll take a closer look at the existing issues there and see what the status is.
I looked into how we might handle rewriting the the theme.css href in the HTML Proxy. It looks like that element is dynamically injected into the head after we've already completed our content rewriting, so we're not able to extend our content rewriting in its current place to "fix up" the theme.css href. The link element for theme.css isn't in the HTML content at this point.
I think we'd need to somehow pass the app url (targetOrigin) and proxy url to a place where we can wait for the content to load, then do a second pass at content rewriting once Gradio has injected the content. A few challenges with this:
- I'm not sure there's a good place for us to do this second rewriting.
extensions/positron-proxy/resources/webview-events.jsis one place where we wait for the window to load and do some work, but we would need some way to pass the app and proxy urls. - We'd need a signal from the Gradio app to tell us when the content has finished loading. I think it may not be sufficient to wait for document/window loading, as Gradio could still be loading up the app.
Gradio loads various resources dynamically, and these other resources are loaded with the expected href paths, so I still wonder if Gradio could consider loading theme.css more similarly to these other resources.
A fix for https://github.com/gradio-app/gradio/issues/11164 is available in [email protected] 🎉
Within qa-example-content, I ran pip install --upgrade gradio in the Terminal, and the Gradio app is loading the theme from the expected path on Positron on Workbench, Server Web and Desktop.
Moving this to Verification!
Verified Fixed
Positron Version(s) : 2025.07.0 build 74
OS Version : 1.100.0 / Sequoia 15.5
Test scenario(s)
- Gradio app renders HTML/CSS correctly in Positron Pro Workbench's Viewer tab.
@jonvanausdeln Would this be a needs-automation for the workbench team?
@jonvanausdeln Would this be a
needs-automationfor the workbench team?
No, they already have some coverage around this as well as we do for web. We should be good. I'll followup with workbench just to make sure.
