Built on Gradio: gr.Server custom frontend (Pixi + barracks via @app .api)

Replace the FastAPI+iframe shell with gradio.Server: serve our own frontend at /,
expose the diary model fn as @app .api("/diary") called via @gradio/client. Custom
UI (Off-Brand) but unambiguously a Gradio app. Bump gradio 5.9.1 -> 6.15.2.

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

app.py

@@ -1,61 +1,47 @@
-"""Tiny Army — HF Space (Gradio app at the root, Pixi battlefield embedded).
+"""Tiny Army — HF Space, built on Gradio via `gr.Server`.
 
-The deterministic combat engine + Pixi renderer are served as a static page under
-/battle and embedded in the Gradio app via an iframe — so the Space root *is* a
-Gradio app (hackathon requirement) with the live battlefield shown inside it. The
-barracks war-diary generator is a stub for now, wired to a local llama.cpp small
+`gr.Server` is Gradio's server (a FastAPI subclass): we serve our own custom
+frontend (the Pixi battlefield + barracks) and expose the small-model functions as
+Gradio endpoints with `@app.api(...)`, called from the frontend via @gradio/client.
+So the UI is custom (🎨 Off-Brand) but the app is genuinely a Gradio app.
+
+The combat engine runs client-side (web/engine.js, a bundle of the auto-battler's
+src/engine). The diary endpoint is a stub for now, wired to a local llama.cpp small
 model during the hack.
 """
-import gradio as gr
-import uvicorn
-from fastapi import FastAPI
+import os
+
+from gradio import Server
+from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 
-app = FastAPI(title="Tiny Army")
+app = Server()
 
+HERE = os.path.dirname(os.path.abspath(__file__))
+WEB = os.path.join(HERE, "web")
 
-@app.get("/healthz")
-def healthz():
-    return {"ok": True}
 
+@app.api(name="diary")
+def diary(unit: str = "", traits: str = "") -> str:
+    """Write a unit's war diary. Stub — replaced during the hack by a local
+    llama.cpp small model that writes from the unit's memory + traits."""
+    t = (traits or "").strip() or "untested"
+    u = (unit or "").strip() or "a nameless soldier"
+    return (f"— Diary of {u} ({t}) —\n\n"
+            f"(placeholder) Today I held the line. A local small model will give me "
+            f"a real voice soon, shaped by what I lived through on the field.")
 
-# The Pixi battlefield (static: index.html + main.js + bundled engine.js) lives
-# under /battle so the Gradio app can iframe it.
-app.mount("/battle", StaticFiles(directory="web", html=True), name="battle")
 
+# Custom frontend: index at "/", its assets under "/web" (kept off "/" so Gradio's
+# own API routes stay intact).
+@app.get("/", response_class=HTMLResponse)
+def index():
+    with open(os.path.join(WEB, "index.html"), encoding="utf-8") as f:
+        return f.read()
 
-def write_diary(unit: str, traits: str) -> str:
-    """Stub. Replaced during the hack by a local llama.cpp small model that writes
-    a first-person war diary from the unit's memory + traits."""
-    t = (traits or "").strip() or "untested"
-    return (f"— Diary of {unit or 'a nameless soldier'} ({t}) —\n\n"
-            f"(placeholder) Today I held the line. The small model will give me a "
-            f"real voice soon, shaped by what I lived through on the field.")
-
-
-BATTLE_IFRAME = (
-    '<iframe src="/battle/" title="Tiny Army battlefield" '
-    'style="width:100%;height:60vh;border:1px solid #20262e;border-radius:12px;'
-    'background:#0b0e12"></iframe>'
-)
-
-with gr.Blocks(title="Tiny Army", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# ⚔️ Tiny Army\n"
-                "*Every fighter writes its own legend — and the legend is true.* "
-                "The deterministic auto-battler engine runs in your browser, below.")
-    gr.HTML(BATTLE_IFRAME)
-    gr.Markdown("### Barracks — war diaries\n"
-                "_(skeleton — the diary is a stub; the hack wires it to a local "
-                "llama.cpp small model that writes from each unit's lived experience.)_")
-    with gr.Row():
-        unit = gr.Textbox(label="Unit", value="Bram the Warrior")
-        traits = gr.Textbox(label="Traits", value="Cautious, Veteran, Vengeful")
-    out = gr.Textbox(label="War diary", lines=6)
-    gr.Button("Write diary", variant="primary").click(write_diary, [unit, traits], out)
-
-# Gradio app at the root; /battle and /healthz were registered first so they win.
-app = gr.mount_gradio_app(app, demo, path="/")
+
+app.mount("/web", StaticFiles(directory=WEB), name="web")
 
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    app.launch(server_name="0.0.0.0", server_port=7860, show_error=True)

requirements.txt

@@ -1,4 +1 @@
-fastapi==0.115.6
-uvicorn==0.34.0
-gradio==5.9.1
-requests==2.32.3
+gradio==6.15.2

web/barracks.js

@@ -0,0 +1,21 @@
+// Barracks — calls the Gradio server's @app.api("/diary") endpoint from this
+// custom frontend via the official @gradio/client. This is what makes the Space a
+// real Gradio app: model calls flow through Gradio's backend.
+import { Client } from 'https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js'
+
+const out = document.getElementById('diary')
+const btn = document.getElementById('write')
+let client = null
+
+btn.addEventListener('click', async () => {
+  const unit = document.getElementById('unit').value
+  const traits = document.getElementById('traits').value
+  out.textContent = '…writing…'
+  try {
+    client = client || await Client.connect(window.location.origin)
+    const r = await client.predict('/diary', { unit, traits })
+    out.textContent = Array.isArray(r.data) ? r.data[0] : String(r.data)
+  } catch (e) {
+    out.textContent = '(diary endpoint error: ' + (e && e.message ? e.message : e) + ')'
+  }
+})

web/index.html

@@ -5,17 +5,50 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Tiny Army</title>
   <style>
+    :root { color-scheme: dark; }
     html, body { margin: 0; height: 100%; background: #0b0e12; color: #f4ecd8;
       font-family: ui-monospace, Menlo, monospace; }
-    #wrap { display: flex; flex-direction: column; height: 100vh; }
-    #stage { flex: 1; min-height: 0; }
-    canvas { display: block; width: 100%; height: 100%; }
+    #wrap { max-width: 980px; margin: 0 auto; padding: 14px; display: flex;
+      flex-direction: column; gap: 12px; min-height: 100vh; box-sizing: border-box; }
+    header h1 { margin: 0; font-size: 20px; }
+    header p { margin: 4px 0 0; color: #9aa4b2; font-size: 13px; line-height: 1.5; }
+    #stage { height: 56vh; border: 1px solid #20262e; border-radius: 12px;
+      overflow: hidden; background: #0b0e12; }
+    #stage canvas { display: block; width: 100%; height: 100%; }
+    .barracks { border: 1px solid #20262e; border-radius: 12px; padding: 12px; background: #10151b; }
+    .barracks h2 { margin: 0 0 8px; font-size: 14px; }
+    .row { display: flex; gap: 8px; flex-wrap: wrap; }
+    .row label { flex: 1; min-width: 180px; font-size: 12px; color: #9aa4b2;
+      display: flex; flex-direction: column; gap: 4px; }
+    input { background: #0b0e12; color: #f4ecd8; border: 1px solid #2a323c;
+      border-radius: 8px; padding: 8px; font: inherit; }
+    button { margin-top: 8px; background: #6b5bff; color: #fff; border: 0;
+      border-radius: 10px; padding: 10px 14px; font: inherit; cursor: pointer; }
+    #diary { margin-top: 8px; white-space: pre-wrap; min-height: 84px; color: #e7e0cf; }
+    footer { color: #5b6573; font-size: 11px; text-align: center; }
   </style>
 </head>
 <body>
   <div id="wrap">
+    <header>
+      <h1>⚔️ Tiny Army</h1>
+      <p>Every fighter writes its own legend — and the legend is true. The
+        deterministic engine runs in your browser; diaries come from a local small
+        model. <strong>Built on Gradio (gr.Server) — custom frontend.</strong></p>
+    </header>
     <div id="stage"></div>
+    <div class="barracks">
+      <h2>Barracks — war diary</h2>
+      <div class="row">
+        <label>Unit <input id="unit" value="Bram the Warrior" /></label>
+        <label>Traits <input id="traits" value="Cautious, Veteran, Vengeful" /></label>
+      </div>
+      <button id="write">Write diary</button>
+      <div id="diary"></div>
+    </div>
+    <footer>gr.Server custom frontend · model calls via @gradio/client → @app.api("/diary")</footer>
   </div>
-  <script type="module" src="./main.js"></script>
+  <script type="module" src="/web/main.js"></script>
+  <script type="module" src="/web/barracks.js"></script>
 </body>
 </html>

web/main.js

@@ -1,7 +1,7 @@
 // Tiny Army — Pixi stage driven by the real deterministic combat engine
 // (engine.js is an esbuild bundle of the auto-battler's src/engine/teamBattle.js).
 import * as PIXI from 'https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs'
-import { makeTeamBattle, step, FIELD } from './engine.js'
+import { makeTeamBattle, step, FIELD } from '/web/engine.js'
 
 // A small demo line-up; later this comes from the player's saved roster.
 const PLAYERS = [