Positron web doesn't load Gradio HTML/CSS correctly

[jthomasmock]

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: dfb5274
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()

1. Click on Run Gradio App button
2. 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.

[jimlubs]

Related ZD ticket: #115309

[sharon-wang]

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.

[sharon-wang]

I've proposed a change to gradio to resolve gradio-app/gradio#11164.

[sharon-wang]

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.js is 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.

[petetronic]

Triage: Can this wait until Post-RC?