Upload 3 files

app.py

@@ -287,18 +287,20 @@ def on_continue(narrative_text, state, container_idx, key_id):
     Wrong/no-key   → pick a random static failure message, no audio.
     Door opened    → reset to start screen.
     """
+    _no_audio = gr.update(value=None, visible=False)
+
     if state is None:
         return (narrative_text, state,
                 gr.update(), gr.update(),
                 gr.update(visible=True), gr.update(visible=True),
-                gr.update(visible=False), None)
+                _no_audio)
 
     # Door opened → reset
     if state.get("door_opened"):
         return ("", None,
                 gr.update(), gr.update(),
                 gr.update(visible=True), gr.update(visible=False),
-                gr.update(visible=False), None)
+                _no_audio)
 
     room  = state["room"]
     chain = state["chain"]
@@ -307,20 +309,20 @@ def on_continue(narrative_text, state, container_idx, key_id):
         msg = (narrative_text + "\n[Select a container first.]").strip()
         return (msg, state, gr.update(), gr.update(),
                 gr.update(visible=False), gr.update(visible=True),
-                gr.update(visible=False), None)
+                _no_audio)
 
     combo = (container_idx, key_id if key_id else "__none__")
     if combo in state["tried_combos"]:
         msg = (narrative_text + "\n[You've already tried that.]").strip()
         return (msg, state, gr.update(), gr.update(),
                 gr.update(visible=False), gr.update(visible=True),
-                gr.update(visible=False), None)
+                _no_audio)
 
-    chain_entry = next((e for e in chain if e["box"] == container_idx), None)
+    chain_entry = next((e for e in chain if e is not None and e["box"] == container_idx), None)
     if chain_entry is None:
         return (narrative_text, state, gr.update(), gr.update(),
                 gr.update(visible=False), gr.update(visible=True),
-                gr.update(visible=False), None)
+                _no_audio)
 
     required_key = chain_entry["opened_by"]
     right_key    = (required_key is None and not key_id) or (required_key == key_id)
@@ -330,15 +332,18 @@ def on_continue(narrative_text, state, container_idx, key_id):
 
     new_stack_gallery = gr.update()
     new_small_img     = gr.update()
-    audio_update      = gr.update(visible=False)
-    audio_path        = None
+    audio_update      = _no_audio
 
     if right_key:
         # ── Correct open: pre-generated narration + pre-baked audio ───────
         narration_text = (
             state["narrations"]["container_narrations"]
-            .get(container_idx, "You open the container.")
+            .get(container_idx, "")
         )
+        # Fall back to a generic message if pre-generated text is empty
+        if not narration_text:
+            narration_text = "You open the container and look inside."
+
         if chain_entry["contains"] is not None:
             found_key_id = chain_entry["contains"]
             if found_key_id not in new_found:
@@ -369,7 +374,7 @@ def on_continue(narrative_text, state, container_idx, key_id):
         updated_narrative, new_state,
         new_stack_gallery, new_small_img,
         gr.update(visible=False), gr.update(visible=True),
-        audio_update, audio_path,
+        audio_update,
     )
 
 
@@ -381,30 +386,34 @@ def on_open_door(state):
     On success: look up pre-generated narration + play pre-baked audio.
     No key / wrong key: pick a random static failure message, no audio.
     """
+    _no_audio = gr.update(value=None, visible=False)
+
     if state is None:
         return ("", state, gr.update(),
                 gr.update(visible=False), gr.update(visible=True),
-                gr.update(visible=False), None)
+                _no_audio)
 
     found = state["found_keys"]
 
     if "door_key" in found:
         # ── Correct key: pre-generated narration + pre-baked audio ────────
         narration_text = state["narrations"]["door_right"]
-        audio_path     = state["audio_paths"].get("door_right")
-        audio_update   = gr.update(value=audio_path, visible=True) if audio_path else gr.update(visible=False)
-        new_state      = {**state, "door_opened": True}
+        if not narration_text:
+            narration_text = "The door swings open. You step through into the light."
+        audio_path   = state["audio_paths"].get("door_right")
+        audio_update = gr.update(value=audio_path, visible=True) if audio_path else _no_audio
+        new_state    = {**state, "door_opened": True}
         return (narration_text, new_state,
                 gr.update(visible=False),
                 gr.update(visible=False), gr.update(visible=True),
-                audio_update, audio_path)
+                audio_update)
 
     # ── No key or wrong key: static message, no audio ─────────────────────
     narration_text = random.choice(_DOOR_FAIL)
     return (narration_text, state,
             gr.update(visible=True),
             gr.update(visible=False), gr.update(visible=True),
-            gr.update(visible=False), None)
+            _no_audio)
 
 
 # ─── UI ───────────────────────────────────────────────────────────────────────
@@ -412,12 +421,13 @@ def on_open_door(state):
 with gr.Blocks(title="1000 Rooms") as demo:
 
     # ── Persistent state ──────────────────────────────────────────────────────
-    room_state    = gr.State(None)
-    gen_state     = gr.State(None)   # text-gen output (room/chain/narrations)
-    img_state     = gr.State(None)   # image-gen output (PIL images)
-    audio_state   = gr.State(None)   # tts-gen output  (audio_paths dict)
-    sel_container = gr.State(-1)
-    sel_key       = gr.State("")
+    room_state     = gr.State(None)
+    gen_state      = gr.State(None)   # text-gen output (room/chain/narrations)
+    img_state      = gr.State(None)   # image-gen output (PIL images)
+    audio_state    = gr.State(None)   # tts-gen output  (audio_paths dict)
+    sel_container  = gr.State(-1)
+    sel_key        = gr.State("")
+    narrator_state = gr.State(list(misc_f.VOICES.keys())[0])  # persists radio pick
 
     gr.HTML("""
     <div id="nn-overlay" class="hidden">
@@ -551,7 +561,7 @@ with gr.Blocks(title="1000 Rooms") as demo:
                 scale=1, elem_id="cont-btn",
             )
             door_btn = gr.Button(
-                "Open Door", variant="primary",
+                "Open Door 🚪", variant="secondary",
                 scale=1, elem_id="door-btn", visible=True,
             )
 
@@ -576,6 +586,13 @@ with gr.Blocks(title="1000 Rooms") as demo:
         outputs=[gen_btn, status_lbl],
     )
 
+    # ── Persist narrator selection into state so js= on gen_btn.click cannot clobber it
+    narrator_radio.change(
+        fn=lambda v: v,
+        inputs=[narrator_radio],
+        outputs=[narrator_state],
+    )
+
     # ── Generate wiring — three GPU frames chained with .then() ─────────────────
     #
     # Step 1  gen_btn.click  → run_text_gen  (@GPU 120 s) → gen_state
@@ -590,7 +607,7 @@ with gr.Blocks(title="1000 Rooms") as demo:
 
     gen_btn.click(
         fn=run_text_gen,
-        inputs=[narrator_radio],
+        inputs=[narrator_state],
         outputs=[gen_state],
         js="""() => {
             const ov = document.getElementById('nn-overlay');
@@ -658,7 +675,7 @@ with gr.Blocks(title="1000 Rooms") as demo:
             narrative, room_state,
             stack_gallery, small_img,
             gen_screen, main_screen,
-            narration_audio, narration_audio,   # visible update + value
+            narration_audio,   # single update with both value= and visible=
         ],
     )
 
@@ -669,7 +686,7 @@ with gr.Blocks(title="1000 Rooms") as demo:
         outputs=[
             narrative, room_state, door_btn,
             gen_screen, main_screen,
-            narration_audio, narration_audio,   # visible update + value
+            narration_audio,   # single update with both value= and visible=
         ],
     )
 

custom_styles.py

@@ -1,452 +1,452 @@
-# ─── CSS ──────────────────────────────────────────────────────────────────────
-
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');
-
-:root {
-    --bg:      #2c2720;
-    --bg2:     #3d3730;
-    --accent:  #e8a832;
-    --glow:    rgba(232,168,50,0.25);
-    --border:  #d4b896;
-    --text:    #c9b89e;
-    --dim:     #4a9f8f;
-    --mono:    'IM Fell English', monospace;
-    --hud:     'Cinzel Decorative';
-}
-
-/* ── Body & container ── */
-body, .gradio-container { background: var(--bg) !important; }
-gradio-app { background: var(--bg) !important; }
-.gradio-container { min-height: 100vh; }
-
-/* ── Sparks canvas – injected by JS, fixed behind everything ── */
-#sparks-bg {
-    position: fixed !important;
-    inset: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none !important;
-    z-index: 0 !important;
-    display: block !important;
-}
-
-/* Lift all Gradio content above sparks */
-gradio-app > div,
-.gradio-container > .main,
-.contain { position: relative; z-index: 1; }
-
-/* ── Hide Gradio chrome ── */
-footer, .footer, .built-with, .svelte-byatnx { display: none !important; }
-
-/* ── Panels / boxes ── */
-.gr-panel, .gr-box, [class*="block"], .form,
-.gr-form, .wrap { background: transparent !important; border: none !important; box-shadow: none !important; }
-
-/* ── Text ── */
-label, .label-wrap span, p, h1, h2, h3 {
-    font-family: var(--mono) !important;
-    color: var(--text) !important;
-}
-
-/* ── Textbox ── */
-textarea, input[type=text] {
-    background: #071e1e !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    font-family: var(--mono) !important;
-    border-radius: 3px !important;
-    caret-color: var(--accent) !important;
-}
-textarea:focus, input[type=text]:focus {
-    border-color: var(--accent) !important;
-    outline: none !important;
-    box-shadow: 0 0 10px var(--glow) !important;
-}
-#narrative-box textarea {
-    height: 400px !important;
-    min-height: 400px !important;
-    resize: none !important;
-}
-
-/* ── Dropdown / listbox ── */
-.svelte-select, select, [class*="dropdown"] {
-    background: #071e1e !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    font-family: var(--mono) !important;
-}
-
-/* ── Buttons ── */
-button.primary, button[class*="primary"], .gr-button-primary {
-    background: transparent !important;
-    border: 1px solid var(--accent) !important;
-    color: var(--accent) !important;
-    font-family: var(--hud) !important;
-    font-size: 0.72rem !important;
-    letter-spacing: 0.2em !important;
-    text-transform: uppercase !important;
-    border-radius: 2px !important;
-    transition: box-shadow 0.2s, background 0.2s !important;
-    cursor: pointer !important;
-}
-button.primary:hover { background: rgba(0,255,204,0.07) !important; box-shadow: 0 0 16px var(--glow) !important; }
-
-button.secondary, button[class*="secondary"], .gr-button-secondary {
-    background: transparent !important;
-    border: 1px solid var(--border) !important;
-    color: var(--dim) !important;
-    font-family: var(--hud) !important;
-    font-size: 0.72rem !important;
-    letter-spacing: 0.18em !important;
-    text-transform: uppercase !important;
-    border-radius: 2px !important;
-}
-
-/* ── Images ── */
-div[data-testid="image"], .image-container, .thumbnail-item img {
-    background: #071e1e !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 3px !important;
-}
-.upload-container { background: #071e1e !important; }
-
-/* ── Gallery shared ── */
-.gallery-item, .thumbnail-item {
-    position: relative !important;
-    border: 2px solid var(--border) !important;
-    border-radius: 3px !important;
-    cursor: pointer !important;
-    transition: border-color 0.15s, box-shadow 0.15s !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow: hidden !important;
-}
-.gallery-item:hover { border-color: rgba(0,255,204,0.5) !important; }
-#top-gallery .selected-gallery,
-#stack-gallery .selected-gallery {
-    border-color: var(--accent) !important;
-    box-shadow: 0 0 16px var(--glow), inset 0 0 0 2px rgba(0,255,204,0.55) !important;
-}
-#top-gallery .selected-gallery::after,
-#stack-gallery .selected-gallery::after {
-    content: "" !important;
-    position: absolute !important;
-    inset: 0 !important;
-    border: 2px solid var(--accent) !important;
-    background: rgba(0,255,204,0.12) !important;
-    pointer-events: none !important;
-}
-
-/* ── Top gallery: 400×400, four 200×200 cells ─�� */
-#top-gallery { height: 400px !important; overflow: hidden !important; }
-#top-gallery .grid-wrap {
-    height: 400px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    gap: 0 !important;
-}
-#top-gallery .gallery-item {
-    width: 200px !important;
-    height: 200px !important;
-}
-#top-gallery .thumbnail-item {
-    width: 200px !important;
-    height: 200px !important;
-}
-#top-gallery .thumbnail-item img {
-    width: 200px !important;
-    height: 200px !important;
-    object-fit: cover !important;
-    display: block !important;
-}
-
-/* ── Stack gallery: 400×200, two 200×200 cells ── */
-#stack-gallery { height: 200px !important; overflow: hidden !important; }
-#stack-gallery .grid-wrap {
-    height: 200px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    gap: 0 !important;
-}
-#stack-gallery .gallery-item {
-    width: 200px !important;
-    height: 200px !important;
-}
-#stack-gallery .thumbnail-item {
-    width: 200px !important;
-    height: 200px !important;
-}
-#stack-gallery .thumbnail-item img {
-    width: 200px !important;
-    height: 200px !important;
-    object-fit: cover !important;
-    display: block !important;
-}
-
-/* ── CheckboxGroup as visible list ── */
-#listbox {
-    background: #071e1e !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 3px !important;
-    padding: 4px !important;
-    height: 200px !important;
-    overflow-y: auto !important;
-}
-#listbox .wrap {
-    background: transparent !important;
-    border: none !important;
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 2px !important;
-}
-#listbox label {
-    font-family: var(--mono) !important;
-    font-size: 0.85rem !important;
-    color: var(--text) !important;
-    padding: 4px 8px !important;
-    cursor: pointer !important;
-    border-radius: 2px !important;
-}
-#listbox label:hover { background: rgba(0,255,204,0.07) !important; }
-#listbox input[type=checkbox] { accent-color: var(--accent) !important; }
-
-/* ── HUD label ── */
-.hud { font-family: var(--hud) !important; font-size: 0.55rem; letter-spacing: 0.2em;
-       color: var(--dim) !important; text-transform: uppercase; margin-bottom: 2px; }
-
-/* ── Loading overlay ── */
-#nn-overlay {
-    position: fixed; inset: 0;
-    background: rgba(11,47,47,0.93);
-    z-index: 9999;
-    display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    gap: 2rem;
-    transition: opacity 0.4s;
-}
-#nn-overlay.hidden { opacity: 0; pointer-events: none; }
-
-#nn-label {
-    font-family: var(--hud);
-    font-size: 1rem;
-    letter-spacing: 0.25em;
-    color: var(--accent);
-    animation: pulse-text 1.4s ease-in-out infinite;
-}
-@keyframes pulse-text { 0%,100%{opacity:1} 50%{opacity:0.25} }
-
-#nn-canvas { display: block; }
-
-
-/* ── HARD RESET spacing ── */
-.gradio-container {
-    padding: 0 !important;
-}
-
-/* remove row gaps */
-.gr-row {
-    gap: 0 !important;
-    margin: 0 !important;
-}
-
-/* remove column padding */
-.gr-column {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* kill internal block spacing */
-.gr-block, .gr-form, .form {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-/* tighten gallery wrapper */
-#top-gallery .grid-wrap,
-#stack-gallery .grid-wrap {
-    gap: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* ensure images don't introduce spacing */
-#top-gallery img,
-#stack-gallery img {
-    display: block !important;
-    margin: 0 !important;
-}
-
-gradio-app {
-    position: relative !important;
-    z-index: 1 !important;
-}
-
-/* background canvas MUST be behind everything */
-#sparks-bg {
-    position: fixed !important;
-    inset: 0 !important;
-    z-index: 0 !important;
-}
-
-/* everything UI above sparks */
-.gradio-container,
-.gradio-container > div {
-    position: relative !important;
-    z-index: 2 !important;
-}
-
-html, body {
-    height: 100%;
-    overflow: hidden;
-}
-"""
-
-# ─── JS (head injection) ─────────────────────────────────────────────────────
-
-HEAD_JS = """
-<script>
-// ════════════════════════════════════════════════════════
-//  Sparks – inject canvas into body after DOM ready
-// ════════════════════════════════════════════════════════
-(function waitForBody() {
-    if (!document.body) { setTimeout(waitForBody, 50); return; }
-
-    const canvas = document.createElement('canvas');
-    canvas.id = 'sparks-bg';
-    document.documentElement.appendChild(canvas);  // append, not prepend – avoids ordering issues
-    const ctx = canvas.getContext('2d');
-
-    function resize() {
-        canvas.width  = window.innerWidth;
-        canvas.height = window.innerHeight;
-        canvas.style.transform = "translateZ(0)";
-        canvas.style.willChange = "transform";
-    }
-    window.addEventListener('resize', resize);
-    resize();
-
-    function randSpark() {
-        return {
-            x:     Math.random() * canvas.width,
-            y:     canvas.height + 10 + Math.random() * 30,
-            vx:    (Math.random() - 0.5) * 0.7,
-            vy:    -(0.6 + Math.random() * 2.2),
-            life:  0.7 + Math.random() * 0.3,
-            decay: 0.003 + Math.random() * 0.006,
-            r:     0.8 + Math.random() * 2.2,
-            hue:   155 + Math.random() * 50,
-        };
-    }
-
-    const sparks = Array.from({length: 90}, randSpark);
-
-    let tick = 0;
-    function loop() {
-        tick++;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        sparks.forEach((s, i) => {
-            s.x  += s.vx + Math.sin(tick * 0.015 + i * 0.4) * 0.35;
-            s.y  += s.vy;
-            s.life -= s.decay;
-            if (s.life <= 0 || s.y < -15) { sparks[i] = randSpark(); return; }
-            ctx.save();
-            ctx.globalAlpha = s.life * 0.9;
-            ctx.shadowBlur  = 8;
-            ctx.shadowColor = `hsl(${s.hue},100%,65%)`;
-            ctx.fillStyle   = `hsl(${s.hue},100%,72%)`;
-            ctx.beginPath();
-            ctx.arc(s.x, s.y, s.r * s.life, 0, Math.PI * 2);
-            ctx.fill();
-            ctx.restore();
-        });
-        requestAnimationFrame(loop);
-    }
-    loop();
-})();
-
-// ════════════════════════════════════════════════════════
-//  Neural-net loading canvas
-// ════════════════════════════════════════════════════════
-let _nnHandle = null;
-
-function startNN() {
-    const cv = document.getElementById('nn-canvas');
-    if (!cv) return;
-    const ctx = cv.getContext('2d');
-    cv.width  = 300;
-    cv.height = 180;
-
-    const LAYERS = [2, 3, 3, 2];
-    const W = 300, H = 180, PAD = 40;
-    const cols = LAYERS.length;
-
-    const nodes = LAYERS.map((n, ci) => {
-        const x = PAD + ci * ((W - PAD*2) / (cols - 1));
-        return Array.from({length: n}, (_, ni) => ({
-            x,
-            y: H/2 + (ni - (n-1)/2) * 44,
-        }));
-    });
-
-    let phase = 0, phaseT = 0, last = null;
-    const DUR = 550;
-
-    function drawNN(ts) {
-        if (!last) last = ts;
-        const dt = ts - last; last = ts;
-        phaseT += dt / DUR;
-        if (phaseT >= 1) { phaseT = 0; phase = (phase + 1) % cols; }
-
-        ctx.clearRect(0, 0, W, H);
-
-        // wires
-        for (let li = 0; li < cols - 1; li++) {
-            nodes[li].forEach(a => nodes[li+1].forEach(b => {
-                ctx.strokeStyle = '#0d3838';
-                ctx.lineWidth = 1;
-                ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
-            }));
-        }
-
-        // nodes
-        nodes.forEach((layer, li) => {
-            layer.forEach(n => {
-                let radius = 6, color = '#1a5f5f', glow = 0;
-                if (li === phase) {
-                    const t = phaseT < 0.5 ? phaseT * 2 : (1 - phaseT) * 2;
-                    const e = t*t*(3-2*t);
-                    radius = 6 + e * 7;
-                    color  = '#00ffcc';
-                    glow   = e * 20;
-                } else if (li < phase) {
-                    color = 'rgba(0,180,120,0.3)';
-                }
-                ctx.save();
-                if (glow) { ctx.shadowBlur = glow; ctx.shadowColor = '#00ffcc'; }
-                ctx.beginPath(); ctx.arc(n.x, n.y, radius, 0, Math.PI*2);
-                ctx.fillStyle = color; ctx.fill();
-                ctx.strokeStyle = li === phase ? '#00ffcc' : '#1a5f5f';
-                ctx.lineWidth = 1.5; ctx.stroke();
-                ctx.restore();
-            });
-        });
-
-        _nnHandle = requestAnimationFrame(drawNN);
-    }
-    if (_nnHandle) cancelAnimationFrame(_nnHandle);
-    _nnHandle = requestAnimationFrame(drawNN);
-}
-
-function stopNN() {
-    if (_nnHandle) { cancelAnimationFrame(_nnHandle); _nnHandle = null; }
-}
-
-// ════════════════════════════════════════════════════════
-//  Gallery selection toggle (called from onclick below)
-// ════════════════════════════════════════════════════════
-function toggleGalSel(el) {
-    el.classList.toggle('selected-gallery');
-}
-</script>
+# ─── CSS ──────────────────────────────────────────────────────────────────────
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');
+
+:root {
+    --bg:      #2c2720;
+    --bg2:     #3d3838;
+    --accent:  #e8a832;
+    --glow:    rgba(232,168,50,0.25);
+    --border:  #d4b896;
+    --text:    #c9b89e;
+    --dim:     #4a9f8f;
+    --mono:    'IM Fell English', monospace;
+    --hud:     'Cinzel Decorative';
+}
+
+/* ── Body & container ── */
+body, .gradio-container { background: var(--bg) !important; }
+gradio-app { background: var(--bg) !important; }
+.gradio-container { min-height: 100vh; }
+
+/* ── Sparks canvas – injected by JS, fixed behind everything ── */
+#sparks-bg {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    pointer-events: none !important;
+    z-index: 0 !important;
+    display: block !important;
+}
+
+/* Lift all Gradio content above sparks */
+gradio-app > div,
+.gradio-container > .main,
+.contain { position: relative; z-index: 1; }
+
+/* ── Hide Gradio chrome ── */
+footer, .footer, .built-with, .svelte-byatnx { display: none !important; }
+
+/* ── Panels / boxes ── */
+.gr-panel, .gr-box, [class*="block"], .form,
+.gr-form, .wrap { background: transparent !important; border: none !important; box-shadow: none !important; }
+
+/* ── Text ── */
+label, .label-wrap span, p, h1, h2, h3 {
+    font-family: var(--mono) !important;
+    color: var(--text) !important;
+}
+
+/* ── Textbox ── */
+textarea, input[type=text] {
+    background: #0d3838 !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    font-family: var(--mono) !important;
+    border-radius: 3px !important;
+    caret-color: var(--accent) !important;
+}
+textarea:focus, input[type=text]:focus {
+    border-color: var(--accent) !important;
+    outline: none !important;
+    box-shadow: 0 0 10px var(--glow) !important;
+}
+#narrative-box textarea {
+    height: 400px !important;
+    min-height: 400px !important;
+    resize: none !important;
+}
+
+/* ── Dropdown / listbox ── */
+.svelte-select, select, [class*="dropdown"] {
+    background: #071e1e !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    font-family: var(--mono) !important;
+}
+
+/* ── Buttons ── */
+button.primary, button[class*="primary"], .gr-button-primary {
+    background: transparent !important;
+    border: 1px solid var(--accent) !important;
+    color: var(--accent) !important;
+    font-family: var(--hud) !important;
+    font-size: 0.72rem !important;
+    letter-spacing: 0.2em !important;
+    text-transform: uppercase !important;
+    border-radius: 2px !important;
+    transition: box-shadow 0.2s, background 0.2s !important;
+    cursor: pointer !important;
+}
+button.primary:hover { background: rgba(0,255,204,0.07) !important; box-shadow: 0 0 16px var(--glow) !important; }
+
+button.secondary, button[class*="secondary"], .gr-button-secondary {
+    background: transparent !important;
+    border: 1px solid var(--border) !important;
+    color: var(--dim) !important;
+    font-family: var(--hud) !important;
+    font-size: 0.72rem !important;
+    letter-spacing: 0.18em !important;
+    text-transform: uppercase !important;
+    border-radius: 2px !important;
+}
+
+/* ── Images ── */
+div[data-testid="image"], .image-container, .thumbnail-item img {
+    background: #071e1e !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 3px !important;
+}
+.upload-container { background: #071e1e !important; }
+
+/* ── Gallery shared ── */
+.gallery-item, .thumbnail-item {
+    position: relative !important;
+    border: 2px solid var(--border) !important;
+    border-radius: 3px !important;
+    cursor: pointer !important;
+    transition: border-color 0.15s, box-shadow 0.15s !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+}
+.gallery-item:hover { border-color: rgba(0,255,204,0.5) !important; }
+#top-gallery .selected-gallery,
+#stack-gallery .selected-gallery {
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 16px var(--glow), inset 0 0 0 2px rgba(0,255,204,0.55) !important;
+}
+#top-gallery .selected-gallery::after,
+#stack-gallery .selected-gallery::after {
+    content: "" !important;
+    position: absolute !important;
+    inset: 0 !important;
+    border: 2px solid var(--accent) !important;
+    background: rgba(0,255,204,0.12) !important;
+    pointer-events: none !important;
+}
+
+/* ── Top gallery: 400×400, four 200×200 cells ── */
+#top-gallery { height: 400px !important; overflow: hidden !important; }
+#top-gallery .grid-wrap {
+    height: 400px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    gap: 0 !important;
+}
+#top-gallery .gallery-item {
+    width: 200px !important;
+    height: 200px !important;
+}
+#top-gallery .thumbnail-item {
+    width: 200px !important;
+    height: 200px !important;
+}
+#top-gallery .thumbnail-item img {
+    width: 200px !important;
+    height: 200px !important;
+    object-fit: cover !important;
+    display: block !important;
+}
+
+/* ── Stack gallery: 400×200, two 200×200 cells ── */
+#stack-gallery { height: 200px !important; overflow: hidden !important; }
+#stack-gallery .grid-wrap {
+    height: 200px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    gap: 0 !important;
+}
+#stack-gallery .gallery-item {
+    width: 200px !important;
+    height: 200px !important;
+}
+#stack-gallery .thumbnail-item {
+    width: 200px !important;
+    height: 200px !important;
+}
+#stack-gallery .thumbnail-item img {
+    width: 200px !important;
+    height: 200px !important;
+    object-fit: cover !important;
+    display: block !important;
+}
+
+/* ── CheckboxGroup as visible list ── */
+#listbox {
+    background: #071e1e !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 3px !important;
+    padding: 4px !important;
+    height: 200px !important;
+    overflow-y: auto !important;
+}
+#listbox .wrap {
+    background: transparent !important;
+    border: none !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+}
+#listbox label {
+    font-family: var(--mono) !important;
+    font-size: 0.85rem !important;
+    color: var(--text) !important;
+    padding: 4px 8px !important;
+    cursor: pointer !important;
+    border-radius: 2px !important;
+}
+#listbox label:hover { background: rgba(0,255,204,0.07) !important; }
+#listbox input[type=checkbox] { accent-color: var(--accent) !important; }
+
+/* ── HUD label ── */
+.hud { font-family: var(--hud) !important; font-size: 0.55rem; letter-spacing: 0.2em;
+       color: var(--dim) !important; text-transform: uppercase; margin-bottom: 2px; }
+
+/* ── Loading overlay ── */
+#nn-overlay {
+    position: fixed; inset: 0;
+    background: #2c2720;
+    z-index: 9999;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    gap: 2rem;
+    transition: opacity 0.4s;
+}
+#nn-overlay.hidden { opacity: 0; pointer-events: none; }
+
+#nn-label {
+    font-family: var(--hud);
+    font-size: 1rem;
+    letter-spacing: 0.25em;
+    color: var(--accent);
+    animation: pulse-text 1.4s ease-in-out infinite;
+}
+@keyframes pulse-text { 0%,100%{opacity:1} 50%{opacity:0.25} }
+
+#nn-canvas { display: block; }
+
+
+/* ── HARD RESET spacing ── */
+.gradio-container {
+    padding: 0 !important;
+}
+
+/* remove row gaps */
+.gr-row {
+    gap: 0 !important;
+    margin: 0 !important;
+}
+
+/* remove column padding */
+.gr-column {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* kill internal block spacing */
+.gr-block, .gr-form, .form {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* tighten gallery wrapper */
+#top-gallery .grid-wrap,
+#stack-gallery .grid-wrap {
+    gap: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* ensure images don't introduce spacing */
+#top-gallery img,
+#stack-gallery img {
+    display: block !important;
+    margin: 0 !important;
+}
+
+gradio-app {
+    position: relative !important;
+    z-index: 1 !important;
+}
+
+/* background canvas MUST be behind everything */
+#sparks-bg {
+    position: fixed !important;
+    inset: 0 !important;
+    z-index: 0 !important;
+}
+
+/* everything UI above sparks */
+.gradio-container,
+.gradio-container > div {
+    position: relative !important;
+    z-index: 2 !important;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
+"""
+
+# ─── JS (head injection) ─────────────────────────────────────────────────────
+
+HEAD_JS = """
+<script>
+// ════════════════════════════════════════════════════════
+//  Sparks – inject canvas into body after DOM ready
+// ════════════════════════════════════════════════════════
+(function waitForBody() {
+    if (!document.body) { setTimeout(waitForBody, 50); return; }
+
+    const canvas = document.createElement('canvas');
+    canvas.id = 'sparks-bg';
+    document.documentElement.appendChild(canvas);  // append, not prepend – avoids ordering issues
+    const ctx = canvas.getContext('2d');
+
+    function resize() {
+        canvas.width  = window.innerWidth;
+        canvas.height = window.innerHeight;
+        canvas.style.transform = "translateZ(0)";
+        canvas.style.willChange = "transform";
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    function randSpark() {
+        return {
+            x:     Math.random() * canvas.width,
+            y:     canvas.height + 10 + Math.random() * 30,
+            vx:    (Math.random() - 0.5) * 0.7,
+            vy:    -(0.6 + Math.random() * 2.2),
+            life:  0.7 + Math.random() * 0.3,
+            decay: 0.003 + Math.random() * 0.006,
+            r:     0.8 + Math.random() * 2.2,
+            hue:   30 + Math.random() * 20,
+        };
+    }
+
+    const sparks = Array.from({length: 90}, randSpark);
+
+    let tick = 0;
+    function loop() {
+        tick++;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        sparks.forEach((s, i) => {
+            s.x  += s.vx + Math.sin(tick * 0.015 + i * 0.4) * 0.35;
+            s.y  += s.vy;
+            s.life -= s.decay;
+            if (s.life <= 0 || s.y < -15) { sparks[i] = randSpark(); return; }
+            ctx.save();
+            ctx.globalAlpha = s.life * 0.9;
+            ctx.shadowBlur  = 8;
+            ctx.shadowColor = `hsl(${s.hue},100%,65%)`;
+            ctx.fillStyle   = `hsl(${s.hue},100%,72%)`;
+            ctx.beginPath();
+            ctx.arc(s.x, s.y, s.r * s.life, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        });
+        requestAnimationFrame(loop);
+    }
+    loop();
+})();
+
+// ════════════════════════════════════════════════════════
+//  Neural-net loading canvas
+// ════════════════════════════════════════════════════════
+let _nnHandle = null;
+
+function startNN() {
+    const cv = document.getElementById('nn-canvas');
+    if (!cv) return;
+    const ctx = cv.getContext('2d');
+    cv.width  = 300;
+    cv.height = 180;
+
+    const LAYERS = [2, 3, 3, 2];
+    const W = 300, H = 180, PAD = 40;
+    const cols = LAYERS.length;
+
+    const nodes = LAYERS.map((n, ci) => {
+        const x = PAD + ci * ((W - PAD*2) / (cols - 1));
+        return Array.from({length: n}, (_, ni) => ({
+            x,
+            y: H/2 + (ni - (n-1)/2) * 44,
+        }));
+    });
+
+    let phase = 0, phaseT = 0, last = null;
+    const DUR = 550;
+
+    function drawNN(ts) {
+        if (!last) last = ts;
+        const dt = ts - last; last = ts;
+        phaseT += dt / DUR;
+        if (phaseT >= 1) { phaseT = 0; phase = (phase + 1) % cols; }
+
+        ctx.clearRect(0, 0, W, H);
+
+        // wires
+        for (let li = 0; li < cols - 1; li++) {
+            nodes[li].forEach(a => nodes[li+1].forEach(b => {
+                ctx.strokeStyle = '#3a2e1a';
+                ctx.lineWidth = 1;
+                ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
+            }));
+        }
+
+        // nodes
+        nodes.forEach((layer, li) => {
+            layer.forEach(n => {
+                let radius = 6, color = '#c47c1a', glow = 0;
+                if (li === phase) {
+                    const t = phaseT < 0.5 ? phaseT * 2 : (1 - phaseT) * 2;
+                    const e = t*t*(3-2*t);
+                    radius = 6 + e * 7;
+                    color  = '#e8a832';
+                    glow   = e * 20;
+                } else if (li < phase) {
+                    color = 'rgba(196,124,26,0.3)';
+                }
+                ctx.save();
+                if (glow) { ctx.shadowBlur = glow; ctx.shadowColor = '#e8a832'; }
+                ctx.beginPath(); ctx.arc(n.x, n.y, radius, 0, Math.PI*2);
+                ctx.fillStyle = color; ctx.fill();
+                ctx.strokeStyle = li === phase ? '#e8a832' : '#c47c1a';
+                ctx.lineWidth = 1.5; ctx.stroke();
+                ctx.restore();
+            });
+        });
+
+        _nnHandle = requestAnimationFrame(drawNN);
+    }
+    if (_nnHandle) cancelAnimationFrame(_nnHandle);
+    _nnHandle = requestAnimationFrame(drawNN);
+}
+
+function stopNN() {
+    if (_nnHandle) { cancelAnimationFrame(_nnHandle); _nnHandle = null; }
+}
+
+// ════════════════════════════════════════════════════════
+//  Gallery selection toggle (called from onclick below)
+// ════════════════════════════════════════════════════════
+function toggleGalSel(el) {
+    el.classList.toggle('selected-gallery');
+}
+</script>
 """