Spaces:

build-small-hackathon
/

tiny-army

Running

polats Claude Opus 4.8 (1M context) commited on 6 days ago

Commit

9b8bd1e

1 Parent(s): 2f7b5a7

Space: fix mixed-content fonts (upgrade-insecure-requests + proxy_headers) and self-style collapse/reopen buttons

Custom domain served Gradio's theme.css over http:// (proxy didn't signal HTTPS),
blocked as mixed content -> theme font fell back to Arial. Add a CSP
upgrade-insecure-requests meta + uvicorn proxy_headers so assets load over https.

The collapse/reopen <button>s leaned on Gradio's leaked button styling for their
background; with theme.css blocked they rendered bare. Give them a self-contained
icon-button look in the shared sidebar.css, defended with !important against the
host button reset.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files changed (2) hide show

app.py +11 -2
web/shell/sidebar.css +19 -9

app.py CHANGED Viewed

@@ -28,7 +28,13 @@ ANIMS = ["idle", "walk", "attack", "dmg", "die"]
 # which breaks rules that target <body> or .gradio-container itself (our slide +
 # content-push). A plain <link> is injected unscoped, so the shared file applies
 # verbatim — same stylesheet the React app uses.
-HEAD = ('<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
@@ -106,4 +112,7 @@ app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD, theme=gr.theme
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)

 # which breaks rules that target <body> or .gradio-container itself (our slide +
 # content-push). A plain <link> is injected unscoped, so the shared file applies
 # verbatim — same stylesheet the React app uses.
+# `upgrade-insecure-requests`: behind HF's custom-domain proxy Gradio emits its
+# theme.css link as http:// (the app doesn't see HTTPS), which the HTTPS page
+# blocks as mixed content — so the theme font never loads. This CSP upgrades such
+# same-host http subresources to https in the browser, fixing it deterministically
+# regardless of proxy headers.
+HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
+        '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
 if __name__ == "__main__":
+    # proxy_headers + trusting forwarded IPs lets Gradio honour X-Forwarded-Proto
+    # from HF's edge, so it generates https (not http) asset URLs behind the proxy.
+    uvicorn.run(app, host="0.0.0.0", port=7860,
+                proxy_headers=True, forwarded_allow_ips="*")

web/shell/sidebar.css CHANGED Viewed

@@ -38,11 +38,20 @@ body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
   border-bottom: 1px solid var(--tac-border);
 }
 .tac-brand .tac-brand-icon { font-size: 18px; }
-.tac-brand .tac-collapse {
-  margin-left: auto; background: none; border: 0; color: var(--tac-muted);
-  cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
 }
-.tac-brand .tac-collapse:hover { background: var(--tac-bg-2); color: var(--tac-ink); }
 .tac-section { padding: 10px 8px 0; }
 .tac-section-title {
@@ -63,12 +72,13 @@ body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
 .tac-sidebar .tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); }
 .tac-sidebar .tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
-/* Edge tab to reopen when collapsed. */
 .tac-reopen {
-  position: fixed; top: 12px; left: 0; z-index: 1001;
-  display: none; background: var(--tac-bg); color: var(--tac-ink);
-  border: 1px solid var(--tac-border); border-left: 0;
-  border-radius: 0 8px 8px 0; padding: 8px 10px; cursor: pointer; font-size: 14px;
 }
 body.tac-collapsed .tac-reopen { display: block; }

   border-bottom: 1px solid var(--tac-border);
 }
 .tac-brand .tac-brand-icon { font-size: 18px; }
+/* The collapse/reopen controls are <button>s; a host button theme (Gradio's
+ * `.gradio-container button` reset) strips their padding/background. We define a
+ * self-contained icon-button look and defend the visual props with `!important`
+ * so it renders identically with or without the host theme. */
+.tac-sidebar .tac-brand .tac-collapse {
+  margin-left: auto; cursor: pointer; line-height: 1; font-size: 16px;
+  display: inline-flex !important; align-items: center; justify-content: center;
+  width: 28px; height: 28px; padding: 0 !important;
+  background: var(--tac-bg-2) !important; color: var(--tac-muted) !important;
+  border: 1px solid var(--tac-border) !important; border-radius: 6px !important;
+}
+.tac-sidebar .tac-brand .tac-collapse:hover {
+  background: #1a2027 !important; color: var(--tac-ink) !important;
 }
 .tac-section { padding: 10px 8px 0; }
 .tac-section-title {
 .tac-sidebar .tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); }
 .tac-sidebar .tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
+/* Edge tab to reopen when collapsed. Same host-button defence as above. */
 .tac-reopen {
+  position: fixed; top: 12px; left: 0; z-index: 1001; display: none;
+  background: var(--tac-bg) !important; color: var(--tac-ink) !important;
+  border: 1px solid var(--tac-border) !important; border-left: 0 !important;
+  border-radius: 0 8px 8px 0 !important; padding: 8px 10px !important;
+  cursor: pointer; font-size: 14px; line-height: 1;
 }
 body.tac-collapsed .tac-reopen { display: block; }