Fix direct Gradio static asset routing

app.py

@@ -33,11 +33,12 @@ from time_machine.ui.gradio_app import create_app
 from time_machine.ui.realtime import realtime_voice_socket
 
 import gradio as gr
-from fastapi import FastAPI, WebSocket
+from fastapi import FastAPI, WebSocket
 from fastapi.responses import JSONResponse, RedirectResponse, Response
-from fastapi.staticfiles import StaticFiles
-
-
+from fastapi.staticfiles import StaticFiles
+
+
+gr.set_static_paths([ROOT / "static"])
 container = create_container()
 demo = create_app(container)
 fastapi_app = FastAPI(title="AI Time Machine")

src/time_machine/ui/assets/cockpit.js

@@ -283,7 +283,7 @@ function createAudioManager() {
       }
       this.manifestLoaded = true;
       try {
-        const response = await fetch("/static/asset_manifest.json", { cache: "force-cache" });
+        const response = await fetch("/gradio_api/file=static/asset_manifest.json", { cache: "force-cache" });
         this.manifest = response.ok ? await response.json() : null;
       } catch {
         this.manifest = null;
@@ -296,7 +296,7 @@ function createAudioManager() {
       if (!raw) {
         return "";
       }
-      return raw.indexOf("static/") === 0 ? `/${raw}` : raw;
+      return raw.indexOf("static/") === 0 ? `/gradio_api/file=${raw}` : raw;
     },
     preloadSfx() {
       const sfx = (this.manifest && this.manifest.audio && this.manifest.audio.sfx) || {};

src/time_machine/ui/gradio_app.py

@@ -3,7 +3,6 @@ from __future__ import annotations
 from pathlib import Path
 import base64
 import inspect
-import mimetypes
 import re
 
 import gradio as gr
@@ -27,10 +26,10 @@ def create_app(container: AppContainer) -> gr.Blocks:
     if bg_path.exists():
         bg_b64 = base64.b64encode(bg_path.read_bytes()).decode("utf-8")
         css = css.replace("url('bg.png')", f"url('data:image/png;base64,{bg_b64}')")
-    css = _inline_static_urls(css)
+    css = _route_static_urls(css)
 
-    cockpit_html = _inline_static_urls((ASSET_DIR / "cockpit.html").read_text(encoding="utf-8"))
-    intro_html = _inline_static_urls((ASSET_DIR / "intro.html").read_text(encoding="utf-8"))
+    cockpit_html = _route_static_urls((ASSET_DIR / "cockpit.html").read_text(encoding="utf-8"))
+    intro_html = _route_static_urls((ASSET_DIR / "intro.html").read_text(encoding="utf-8"))
     intro_js = (ASSET_DIR / "intro.js").read_text(encoding="utf-8")
     cockpit_js = (ASSET_DIR / "cockpit.js").read_text(encoding="utf-8")
 
@@ -161,15 +160,10 @@ def create_app(container: AppContainer) -> gr.Blocks:
     return demo.queue()
 
 
-def _inline_static_urls(text: str) -> str:
+def _route_static_urls(text: str) -> str:
     return re.sub(r"(?P<quote>['\"])/static/(?P<path>[^'\")]+)(?P=quote)", _replace_static_url, text)
 
 
 def _replace_static_url(match: re.Match[str]) -> str:
     relative_path = match.group("path")
-    file_path = ASSET_DIR.parents[3] / "static" / relative_path
-    if not file_path.exists() or not file_path.is_file():
-        return match.group(0)
-    mime_type = mimetypes.guess_type(file_path.name)[0] or "application/octet-stream"
-    encoded = base64.b64encode(file_path.read_bytes()).decode("ascii")
-    return f"{match.group('quote')}data:{mime_type};base64,{encoded}{match.group('quote')}"
+    return f"{match.group('quote')}/gradio_api/file=static/{relative_path}{match.group('quote')}"