Serve sprites at /sprites (not /assets — collided with Gradio's UI bundle)

app.py

@@ -65,7 +65,9 @@ with gr.Blocks(title="Tiny Army") as demo:
 # Mount Gradio on FastAPI so we can also serve the JS module + the sprite assets.
 fastapi_app = FastAPI()
 fastapi_app.mount("/web", StaticFiles(directory=WEB), name="web")
-fastapi_app.mount("/assets", StaticFiles(directory=os.path.join(WEB, "assets")), name="assets")
+# NOTE: serve sprite assets at /sprites, NOT /assets — Gradio serves its own UI
+# bundle from /assets, and mounting there shadows it (breaks the whole UI).
+fastapi_app.mount("/sprites", StaticFiles(directory=os.path.join(WEB, "assets")), name="sprites")
 app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD, theme=gr.themes.Soft())
 
 

web/tiny.js

@@ -31,9 +31,12 @@ window.tinyResize = () => {
 
 // ── Sprite Animations tab ────────────────────────────────────────────────────
 let charMap = null
+// Sprite assets are served at /sprites (not /assets — that's Gradio's bundle).
+// The manifest paths are authored as /assets/… so rewrite the prefix.
+const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/')
 async function loadChars() {
   if (charMap) return charMap
-  const d = await fetch('/assets/characters.json').then((r) => r.json())
+  const d = await fetch('/sprites/characters.json').then((r) => r.json())
   charMap = {}
   for (const p of d.packs || []) for (const c of p.characters || []) charMap[c.slug] = c
   return charMap
@@ -52,7 +55,7 @@ whenEl('sprite-stage', async (el) => {
   window.tinyShowSprite = async (slug, anim) => {
     const map = await loadChars()
     const c = map[slug]; if (!c) return
-    const url = c[anim] || c.idle; if (!url) return
+    const url = spriteUrl(c[anim] || c.idle); if (!url) return
     const tex = await PIXI.Assets.load(url); tex.source.scaleMode = 'nearest'
     const cell = Math.round(tex.source.height / 4)           // minifantasy: 4 facing rows
     const cols = Math.max(1, Math.round(tex.source.width / cell))