Deploy Aether Garden application

.github/workflows/ci.yml

@@ -2,8 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main, master]
+    branches: [main, master, variant/minicpm]
   pull_request:
+    branches: [main, master, variant/minicpm]
 
 jobs:
   test:

.modalignore

@@ -8,4 +8,5 @@ data/
 *.db
 .gradio/
 traces/
+node_modules/
 assets/verify/

README_HF_SPACE.md

@@ -10,16 +10,23 @@ pinned: true
 license: mit
 tags:
   - gradio
-  - minicpm
   - agents
   - simulation
+  - three.js
+  - persistent-world
+  - hackathon
+  - thousand-token-wood
+  - best-agent
+  - off-brand
   - modal
+  - minicpm
+  - tiny-model
 ---
 
 # Aether Garden
 
-The World That Remembers — a living AI world where every visitor leaves something behind.
+**The Living Tome** — a persistent AI world where every visitor writes a new page.
 
-This Space variant runs MiniCPM 3-4B by default via Modal for low-latency, under-32B inference.
+Open the leather cover, turn through six spreads (Realm, Explore, Book of Ages, Souls, Bonds, Summon), and watch a world that remembers. MiniCPM 3-4B on Modal powers entity generation; an hourly simulation tick runs whether anyone is watching.
 
-Open the app, read the Book of Ages, summon something strange, and watch the world remember.
+**Try it:** summon something strange, explore the diorama, read the Book of Ages.

ai/generation.py

@@ -50,7 +50,7 @@ LOCATION_ALIASES = {
     "Hollow Mountain": "The Hollow Mountain",
 }
 
-MODEL_ID = os.environ.get("MODEL_ID", "Qwen/Qwen2.5-7B-Instruct")
+MODEL_ID = os.environ.get("MODEL_ID", "openbmb/MiniCPM3-4B")
 
 
 class EntityProfile(BaseModel):

app.py

@@ -1277,6 +1277,8 @@ def build_app() -> gr.Blocks:
                     window._aetherInitBound = true;
 
                     const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                    const MOBILE_QUERY = window.matchMedia('(max-width: 920px)');
+                    const isMobileSpread = () => MOBILE_QUERY.matches;
 
                     const sections = [
                         { key: 'realm', label: 'The Realm', kind: 'tab', panel: 0 },
@@ -1301,23 +1303,109 @@ def build_app() -> gr.Blocks:
                     };
 
                     const setActivePanel = (panelIndex) => {
+                        const mobile = isMobileSpread();
                         const panels = Array.from(document.querySelectorAll('.realm-tabs [role="tabpanel"]'));
                         panels.forEach((panel, i) => {
                             const active = i === panelIndex;
                             panel.style.setProperty('display', active ? 'flex' : 'none', 'important');
                             panel.style.setProperty('flex-direction', 'column', 'important');
-                            panel.style.setProperty('height', active ? '565px' : '0', 'important');
-                            panel.style.setProperty('max-height', active ? '565px' : '0', 'important');
+                            if (mobile) {
+                                panel.style.setProperty('height', active ? 'auto' : '0', 'important');
+                                panel.style.setProperty('max-height', active ? 'none' : '0', 'important');
+                                panel.style.setProperty('flex', active ? '1 1 auto' : '0 0 0', 'important');
+                                panel.style.setProperty('min-height', active ? '0' : '0', 'important');
+                            } else {
+                                panel.style.setProperty('height', active ? '565px' : '0', 'important');
+                                panel.style.setProperty('max-height', active ? '565px' : '0', 'important');
+                                panel.style.setProperty('flex', '', 'important');
+                            }
                             panel.style.setProperty('overflow', 'hidden', 'important');
                             panel.setAttribute('aria-hidden', active ? 'false' : 'true');
                         });
                         wirePageExpand();
+                        wireMobileSpreads();
                         const pad = document.getElementById('aether-walk-pad');
                         if (pad && panelIndex !== 1) {
                             pad.classList.remove('visible', 'explore-only');
                         }
                     };
 
+                    const resetActiveSpreadLeaf = () => {
+                        const panels = document.querySelectorAll('.realm-tabs [role="tabpanel"]');
+                        const activePanel = panels[currentSpread];
+                        if (!activePanel) return;
+                        const row = activePanel.querySelector('.tome-spread-row');
+                        if (!row) return;
+                        row.classList.remove('tome-leaf-right');
+                        row.classList.add('tome-leaf-left');
+                    };
+
+                    const wireMobileSpreads = () => {
+                        const mobile = isMobileSpread();
+                        document.body.classList.toggle('tome-mobile', mobile);
+
+                        document.querySelectorAll('.tome-spread-shell').forEach((shell) => {
+                            const row = shell.querySelector('.tome-spread-row');
+                            if (!row) return;
+
+                            if (!mobile) {
+                                row.classList.remove('tome-leaf-left', 'tome-leaf-right');
+                                shell.querySelector('.tome-leaf-bar')?.remove();
+                                return;
+                            }
+
+                            if (!row.classList.contains('tome-leaf-left') && !row.classList.contains('tome-leaf-right')) {
+                                row.classList.add('tome-leaf-left');
+                            }
+
+                            let bar = shell.querySelector('.tome-leaf-bar');
+                            if (!bar) {
+                                bar = document.createElement('div');
+                                bar.className = 'tome-leaf-bar';
+                                bar.innerHTML = `
+                                    <button type="button" class="tome-leaf-btn" data-leaf="left" aria-label="Show left leaf">‹ Leaf</button>
+                                    <span class="tome-leaf-dots" aria-hidden="true"><i></i><i></i></span>
+                                    <button type="button" class="tome-leaf-btn" data-leaf="right" aria-label="Show right leaf">Leaf ›</button>
+                                `;
+                                shell.appendChild(bar);
+
+                                const syncLeafBar = () => {
+                                    const onLeft = row.classList.contains('tome-leaf-left');
+                                    bar.querySelectorAll('.tome-leaf-btn').forEach((btn) => {
+                                        const active = btn.dataset.leaf === (onLeft ? 'left' : 'right');
+                                        btn.classList.toggle('is-active', active);
+                                    });
+                                    bar.querySelectorAll('.tome-leaf-dots i').forEach((dot, idx) => {
+                                        dot.classList.toggle('active', onLeft ? idx === 0 : idx === 1);
+                                    });
+                                };
+
+                                bar.querySelectorAll('.tome-leaf-btn').forEach((btn) => {
+                                    btn.addEventListener('click', () => {
+                                        const leaf = btn.dataset.leaf;
+                                        row.classList.remove('tome-leaf-left', 'tome-leaf-right');
+                                        row.classList.add(leaf === 'right' ? 'tome-leaf-right' : 'tome-leaf-left');
+                                        syncLeafBar();
+                                    });
+                                });
+                                bar._syncLeafBar = syncLeafBar;
+                            }
+
+                            bar._syncLeafBar?.();
+                        });
+                    };
+
+                    if (!window._aetherMobileBound) {
+                        window._aetherMobileBound = true;
+                        MOBILE_QUERY.addEventListener('change', () => {
+                            wireMobileSpreads();
+                            setActivePanel(currentSpread >= 0 ? sections[currentSpread].panel : 0);
+                        });
+                        window.addEventListener('resize', () => {
+                            wireMobileSpreads();
+                        }, { passive: true });
+                    }
+
                     const ensureAmbientMelody = () => {
                         if (window._aetherAmbientStarted) {
                             window._aetherAmbientCtx?.resume?.();
@@ -1535,6 +1623,8 @@ def build_app() -> gr.Blocks:
                         applyTurnFx(direction);
 
                         setActivePanel(spread.panel);
+                        resetActiveSpreadLeaf();
+                        wireMobileSpreads();
 
                         currentSpread = clamped;
                         window._aetherCurrentSpread = spread.key;
@@ -1887,6 +1977,7 @@ def build_app() -> gr.Blocks:
 
                     wireOpening();
                     wireTomeNav();
+                    wireMobileSpreads();
                     wirePageExpand();
 
                     const gateOnLoad = document.getElementById('realm-opening');

ui/styles.css

@@ -6172,3 +6172,285 @@ body.aether-realm-entered #realm-opening-host {
     border-radius: 10px;
     overflow: hidden;
 }
+
+/* -------------------------------------------------------------------------- */
+/* Mobile & tablet — single-leaf spreads (one page at a time, full width)      */
+/* -------------------------------------------------------------------------- */
+.tome-leaf-bar {
+    display: none;
+}
+
+@media (max-width: 920px) {
+    body.tome-mobile,
+    body.tome-mobile html {
+        overflow: hidden;
+        height: 100%;
+    }
+
+    body.tome-mobile .gradio-container {
+        height: 100dvh !important;
+        max-height: 100dvh !important;
+        min-height: 100dvh !important;
+        max-width: 100vw !important;
+        width: 100% !important;
+        padding: 0.2rem 0.35rem 0.25rem !important;
+        box-sizing: border-box !important;
+        overflow: hidden !important;
+    }
+
+    body.tome-mobile #presence-bar {
+        font-size: 0.68rem;
+        padding: 0.25rem 0.5rem;
+        margin-bottom: 0.2rem !important;
+    }
+
+    body.tome-mobile .realm-tabs {
+        height: auto !important;
+        max-height: none !important;
+        flex: 1 1 auto !important;
+        min-height: 0 !important;
+        overflow: hidden !important;
+    }
+
+    body.tome-mobile .realm-tabs [role="tabpanel"] {
+        padding: 0.35rem 0.45rem 0.25rem !important;
+        overflow: hidden !important;
+        clip-path: none !important;
+        border-radius: 6px !important;
+    }
+
+    body.tome-mobile .realm-tabs [role="tabpanel"]::before,
+    body.tome-mobile .realm-tabs [role="tabpanel"]::after {
+        display: none !important;
+    }
+
+    body.tome-mobile .tome-spread-shell {
+        height: 100%;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    body.tome-mobile .tome-spread-row {
+        flex: 1 1 auto !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        align-items: stretch !important;
+        overflow: hidden !important;
+    }
+
+    body.tome-mobile .tome-spread-row > .column,
+    body.tome-mobile .tome-spread-row > .gr-column {
+        min-height: 0 !important;
+        max-height: 100% !important;
+    }
+
+    /* Hide inactive leaf — show one full-width page only */
+    body.tome-mobile .tome-spread-row.tome-leaf-left .tome-page-right,
+    body.tome-mobile .tome-spread-row.tome-leaf-right .tome-page-left {
+        display: none !important;
+        flex: 0 0 0 !important;
+        width: 0 !important;
+        max-width: 0 !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        overflow: hidden !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+    }
+
+    body.tome-mobile .tome-spread-row.tome-leaf-left .tome-page-left,
+    body.tome-mobile .tome-spread-row.tome-leaf-right .tome-page-right {
+        flex: 1 1 100% !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        min-height: 0 !important;
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+        -webkit-overflow-scrolling: touch;
+        padding: 0.55rem 0.75rem 0.45rem !important;
+    }
+
+    body.tome-mobile .tome-spread-row > .column.tome-page-left::after,
+    body.tome-mobile .tome-spread-row > .column.tome-page-right::before {
+        display: none !important;
+    }
+
+    body.tome-mobile .tome-spread-row > .column.tome-page-left.tome-printed-page,
+    body.tome-mobile .tome-spread-row > .column.tome-page-right.tome-printed-page {
+        padding: 0.55rem 0.75rem 0.45rem !important;
+    }
+
+    /* Leaf toggle bar */
+    body.tome-mobile .tome-leaf-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.65rem;
+        flex: 0 0 auto;
+        padding: 0.3rem 0.5rem 0.15rem;
+        border-top: 1px solid rgba(138, 106, 58, 0.2);
+        margin-top: 0.15rem;
+    }
+
+    body.tome-mobile .tome-leaf-btn {
+        border: 1px solid rgba(138, 106, 58, 0.45) !important;
+        background: rgba(255, 249, 232, 0.85) !important;
+        color: #5c3e1e !important;
+        font-family: 'Cinzel', serif !important;
+        font-size: 0.62rem !important;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        padding: 0.35rem 0.65rem !important;
+        border-radius: 999px !important;
+        min-height: 2rem;
+        box-shadow: none !important;
+    }
+
+    body.tome-mobile .tome-leaf-btn.is-active {
+        background: rgba(201, 161, 59, 0.28) !important;
+        border-color: rgba(138, 106, 58, 0.65) !important;
+    }
+
+    body.tome-mobile .tome-leaf-dots {
+        display: flex;
+        gap: 0.35rem;
+        align-items: center;
+    }
+
+    body.tome-mobile .tome-leaf-dots i {
+        display: block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: rgba(138, 106, 58, 0.28);
+        transition: background 0.2s ease, transform 0.2s ease;
+    }
+
+    body.tome-mobile .tome-leaf-dots i.active {
+        background: #8a6a3a;
+        transform: scale(1.15);
+    }
+
+    /* Restore content hidden on desktop two-page layout */
+    body.tome-mobile .tome-page-right.tome-page-centered > .block:has(.realm-pulse),
+    body.tome-mobile .tome-page-right.tome-page-centered > .block:has(.activity-feed) {
+        display: block !important;
+        height: auto !important;
+        min-height: 0 !important;
+        max-height: none !important;
+        margin: 0 0 0.35rem !important;
+        padding: 0 !important;
+        overflow: visible !important;
+    }
+
+    body.tome-mobile .tome-page-right .pulse-card:nth-child(n+3) {
+        display: flex !important;
+    }
+
+    /* Map & diorama — use available height on small screens */
+    body.tome-mobile .tome-page-left .realm-map,
+    body.tome-mobile .tome-page-left #world-map {
+        min-height: min(48dvh, 380px) !important;
+        max-height: min(56dvh, 440px) !important;
+    }
+
+    body.tome-mobile .tome-explore-stage .diorama-wrap,
+    body.tome-mobile .tome-explore-stage .diorama-stage {
+        min-height: min(52dvh, 460px) !important;
+    }
+
+    body.tome-mobile .tome-explore-stage .diorama-frame,
+    body.tome-mobile .diorama-frame {
+        height: min(52dvh, 480px) !important;
+        min-height: 260px !important;
+    }
+
+    body.tome-mobile .rel-graph-stage {
+        height: min(50dvh, 420px) !important;
+        min-height: 280px !important;
+    }
+
+    body.tome-mobile .book-entries {
+        column-count: 1 !important;
+    }
+
+    body.tome-mobile .entity-grid {
+        grid-template-columns: 1fr !important;
+    }
+
+    body.tome-mobile .souls-filter-row {
+        flex-direction: column !important;
+    }
+
+    /* Opening gate */
+    body.tome-mobile .realm-opening {
+        padding: 0.75rem !important;
+    }
+
+    body.tome-mobile .realm-cover-card,
+    body.tome-mobile .realm-prologue-card,
+    body.tome-mobile .realm-toc-card {
+        width: min(96vw, 100%) !important;
+        max-width: 100% !important;
+    }
+
+    body.tome-mobile .realm-cover-title span {
+        font-size: clamp(1.4rem, 8vw, 2rem) !important;
+    }
+
+    /* Tome navigation chrome */
+    body.tome-mobile #tome-nav .tome-corner {
+        width: 42px;
+        height: 42px;
+        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
+        font-size: 1rem;
+    }
+
+    body.tome-mobile #tome-nav .tome-corner-left {
+        left: 0.5rem;
+    }
+
+    body.tome-mobile #tome-nav .tome-corner-right {
+        right: 0.5rem;
+    }
+
+    body.tome-mobile .tome-ribbon {
+        right: 0.5rem;
+        top: 0;
+        font-size: 0.62rem;
+        max-width: 46vw;
+        padding: 0.3rem 0.5rem;
+    }
+
+    body.tome-mobile .tome-page-indicator {
+        font-size: 0.62rem;
+        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+    }
+
+    body.tome-mobile #aether-walk-pad {
+        left: 0.5rem;
+        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+        transform: scale(0.92);
+        transform-origin: left bottom;
+    }
+
+    body.tome-mobile .tome-floating-toc {
+        max-height: min(70dvh, 520px);
+        overflow-y: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    body.tome-mobile .tome-printed-kicker {
+        font-size: 0.62rem !important;
+    }
+
+    body.tome-mobile .tome-printed-hint {
+        font-size: 0.72rem !important;
+    }
+
+    body.tome-mobile .tome-leaf-btn {
+        font-size: 0.58rem !important;
+        padding: 0.3rem 0.5rem !important;
+    }
+}