ui fixes

app.py

@@ -1,14 +1,17 @@
 """
-app_single.py — MiniCPM-V 4.6 · Emberglade
-==================================================
-A vision-language playground: MiniCPM-V describes an uploaded image,
-then choreographs a cat to perform that mood on a spotlight stage.
+app_single.py — MiniCPM-V 4.6 · An Adventure in Thousand Token Wood
+=====================================================================
+A storybook playground: MiniCPM-V reads an uploaded image like a page
+from an adventure, then a woodland cat performs its mood in a forest
+clearing — complete with a tiny generative tune.
 
 Pipeline:
   1. Upload image → MiniCPM-V streams a description
   2. Model returns a JSON dance spec (mood + 6 numeric animation params)
-  3. The cat performs on stage using those exact params — every move
-     is model-determined, not hardcoded.
+  3. The cat performs in the clearing using those exact params — every
+     move is model-determined, not hardcoded.
+  4. A free, generative melody (Web Audio API, no audio files) plays
+     along — tempo and register also derived from the model's params.
 
 Dance params returned by model:
   mood        : one of 10 mood words
@@ -19,6 +22,12 @@ Dance params returned by model:
   tail_range  : tail swing degrees (5 … 120)
   ear_tilt    : ear rotation degrees (0 … 25)
 
+Two backends — switchable in the UI:
+  • API   (default) — calls the hosted MiniCPM-V 4.6 API. Needs internet.
+  • Local (offline)  — downloads openbmb/MiniCPM-V-4 (4.1B, Apache-2.0) once,
+                        caches it to ./model_cache/, then runs fully offline.
+                        Requires: pip install torch transformers accelerate
+
 Run locally:
   pip install -r requirements.txt
   python app_single.py
@@ -59,18 +68,20 @@ PROMPT_EXAMPLES = [
     ["Explain this image to someone who cannot see it."],
 ]
 
-# ── Mood palettes — each mood is a "spotlight color" on the dark stage ────────
+# ── Mood palettes — each mood is a "firefly color" in the wood ────────────────
+# scale: semitone offsets from root (a small mode/scale per mood)
+# root : MIDI-ish base note number (we map to Hz with 440 * 2^((n-69)/12))
 MOOD_PALETTE = {
-    "happy":      {"bg":"#1a1605","body":"#FFD166","detail":"#E8A23A","eye":"#2D1B00","nose":"#FF8A3D","pcol":"#FFE08A","particle":"✦","label":"Happy","caption":"Bouncing with joy"},
-    "sad":        {"bg":"#0c1116","body":"#8AA0B2","detail":"#5D7A8E","eye":"#1A2530","nose":"#B7C7D2","pcol":"#A9C8E0","particle":"·","label":"Sad","caption":"Slow, heavy steps"},
-    "calm":       {"bg":"#0a1614","body":"#6FBFB3","detail":"#4A9C8F","eye":"#0A2018","nose":"#A8E0D6","pcol":"#BFEDE4","particle":"○","label":"Calm","caption":"Drifting at ease"},
-    "energetic":  {"bg":"#1a0e05","body":"#FF8A5B","detail":"#E8623A","eye":"#1a0500","nose":"#FFD1BC","pcol":"#FFCB6B","particle":"★","label":"Energetic","caption":"Can't sit still"},
-    "mysterious": {"bg":"#120c1a","body":"#A98BD6","detail":"#6D4FA8","eye":"#F0B8FF","nose":"#D9C2EE","pcol":"#C7B3F0","particle":"✧","label":"Mysterious","caption":"Slipping through shadow"},
-    "romantic":   {"bg":"#1a0c12","body":"#F2A0BD","detail":"#D9648D","eye":"#1a0010","nose":"#FBE0EA","pcol":"#F7B8CE","particle":"♥","label":"Romantic","caption":"A slow, dreamy waltz"},
-    "tense":      {"bg":"#100808","body":"#F0726E","detail":"#C03C38","eye":"#FFB3AE","nose":"#F7C7C4","pcol":"#F2A6A2","particle":"|","label":"Tense","caption":"Coiled and alert"},
-    "nostalgic":  {"bg":"#160f06","body":"#F2C083","detail":"#D98A3D","eye":"#160f06","nose":"#FBE3C7","pcol":"#F7DDB5","particle":"◦","label":"Nostalgic","caption":"Rocking to old memories"},
-    "angry":      {"bg":"#160505","body":"#F0635E","detail":"#A8201C","eye":"#FF6961","nose":"#F7B0AC","pcol":"#F58F8A","particle":"✸","label":"Angry","caption":"Stomping, full of fire"},
-    "neutral":    {"bg":"#0e0f13","body":"#A6ADB8","detail":"#727A86","eye":"#0d0d18","nose":"#D8DDE3","pcol":"#C7CDD6","particle":"·","label":"Neutral","caption":"Steady and unhurried"},
+    "happy":      {"bg":"#1a1605","body":"#FFD166","detail":"#E8A23A","eye":"#2D1B00","nose":"#FF8A3D","pcol":"#FFE08A","particle":"✦","label":"Happy","caption":"Bouncing with joy",          "scale":[0,2,4,7,9,12],     "root":72},
+    "sad":        {"bg":"#0c1116","body":"#8AA0B2","detail":"#5D7A8E","eye":"#1A2530","nose":"#B7C7D2","pcol":"#A9C8E0","particle":"·","label":"Sad","caption":"Slow, heavy steps",              "scale":[0,3,5,7,10,12],    "root":60},
+    "calm":       {"bg":"#0a1614","body":"#6FBFB3","detail":"#4A9C8F","eye":"#0A2018","nose":"#A8E0D6","pcol":"#BFEDE4","particle":"○","label":"Calm","caption":"Drifting at ease",               "scale":[0,2,5,7,9,12],     "root":64},
+    "energetic":  {"bg":"#1a0e05","body":"#FF8A5B","detail":"#E8623A","eye":"#1a0500","nose":"#FFD1BC","pcol":"#FFCB6B","particle":"★","label":"Energetic","caption":"Can't sit still",          "scale":[0,2,4,5,7,9,11,12],"root":71},
+    "mysterious": {"bg":"#120c1a","body":"#A98BD6","detail":"#6D4FA8","eye":"#F0B8FF","nose":"#D9C2EE","pcol":"#C7B3F0","particle":"✧","label":"Mysterious","caption":"Slipping through shadow",  "scale":[0,1,4,5,7,8,11,12],"root":62},
+    "romantic":   {"bg":"#1a0c12","body":"#F2A0BD","detail":"#D9648D","eye":"#1a0010","nose":"#FBE0EA","pcol":"#F7B8CE","particle":"♥","label":"Romantic","caption":"A slow, dreamy waltz",       "scale":[0,2,4,7,9,12],     "root":67},
+    "tense":      {"bg":"#100808","body":"#F0726E","detail":"#C03C38","eye":"#FFB3AE","nose":"#F7C7C4","pcol":"#F2A6A2","particle":"|","label":"Tense","caption":"Coiled and alert",              "scale":[0,1,3,6,7,10,12],  "root":61},
+    "nostalgic":  {"bg":"#160f06","body":"#F2C083","detail":"#D98A3D","eye":"#160f06","nose":"#FBE3C7","pcol":"#F7DDB5","particle":"◦","label":"Nostalgic","caption":"Rocking to old memories",   "scale":[0,2,3,7,9,12],     "root":65},
+    "angry":      {"bg":"#160505","body":"#F0635E","detail":"#A8201C","eye":"#FF6961","nose":"#F7B0AC","pcol":"#F58F8A","particle":"✸","label":"Angry","caption":"Stomping, full of fire",        "scale":[0,1,3,5,6,8,10,12],"root":59},
+    "neutral":    {"bg":"#0e0f13","body":"#A6ADB8","detail":"#727A86","eye":"#0d0d18","nose":"#D8DDE3","pcol":"#C7CDD6","particle":"·","label":"Neutral","caption":"Steady and unhurried",        "scale":[0,2,4,7,9,12],     "root":64},
 }
 
 # ── Default dance specs (fallback if model call fails) ────────────────────────
@@ -147,6 +158,24 @@ Choose values that physically match the scene mood. An energetic scene should ha
 low speed (fast), high jump, high sway. A calm scene should have high speed (slow),
 low jump, low sway. Be creative — the cat's whole body expresses the image's emotion."""
 
+def _keyword_mood(description: str) -> str:
+    """Simple keyword-based mood fallback when JSON parsing fails."""
+    t = description.lower()
+    for m, kws in [
+        ("happy",["happy","joy","celebrate","laugh","smile","bright","sunny"]),
+        ("sad",["sad","lonely","rain","sorrow","grief","cry","gloom"]),
+        ("energetic",["energetic","vibrant","excited","dynamic","rush","active"]),
+        ("calm",["calm","peaceful","quiet","gentle","serene","still"]),
+        ("mysterious",["mysterious","dark","eerie","shadow","mystic","fog"]),
+        ("romantic",["romantic","love","tender","intimate","warm","soft"]),
+        ("tense",["tense","anxious","fear","alarm","nervous","danger"]),
+        ("nostalgic",["nostalgic","memory","vintage","old","past","retro"]),
+        ("angry",["angry","furious","rage","fierce","storm"]),
+    ]:
+        if any(w in t for w in kws):
+            return m
+    return "neutral"
+
 def get_dance_spec(description: str, api_key: str) -> tuple[str, dict]:
     """
     Returns (mood, dance_params_dict).
@@ -184,25 +213,166 @@ def get_dance_spec(description: str, api_key: str) -> tuple[str, dict]:
         return mood, dance
 
     except Exception:
-        # keyword fallback for mood, default params
-        t = description.lower()
-        mood = "neutral"
-        for m, kws in [
-            ("happy",["happy","joy","celebrate","laugh","smile","bright","sunny"]),
-            ("sad",["sad","lonely","rain","sorrow","grief","cry","gloom"]),
-            ("energetic",["energetic","vibrant","excited","dynamic","rush","active"]),
-            ("calm",["calm","peaceful","quiet","gentle","serene","still"]),
-            ("mysterious",["mysterious","dark","eerie","shadow","mystic","fog"]),
-            ("romantic",["romantic","love","tender","intimate","warm","soft"]),
-            ("tense",["tense","anxious","fear","alarm","nervous","danger"]),
-            ("nostalgic",["nostalgic","memory","vintage","old","past","retro"]),
-            ("angry",["angry","furious","rage","fierce","storm"]),
-        ]:
-            if any(w in t for w in kws):
-                mood = m
-                break
+        mood = _keyword_mood(description)
         return mood, DEFAULT_DANCE[mood]
 
+
+# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+# OFFLINE / LOCAL BACKEND
+# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+# Runs entirely on this machine, no internet required after first download.
+#   Model : openbmb/MiniCPM-V-4  (4.1B params, Apache-2.0, fully public)
+#   Cache : ./model_cache/  (weights) + .download_complete (sentinel)
+#
+# Heavy deps (torch, transformers) are imported lazily — only when the
+# user actually selects the Local backend — so API-only users don't need
+# them installed.
+
+from pathlib import Path
+
+LOCAL_MODEL_ID    = "openbmb/MiniCPM-V-4"
+LOCAL_CACHE_DIR   = Path(__file__).parent / "model_cache"
+LOCAL_SENTINEL    = LOCAL_CACHE_DIR / ".download_complete"
+
+_local_model     = None
+_local_tokenizer = None
+
+def local_is_cached() -> bool:
+    return LOCAL_SENTINEL.exists()
+
+def local_cache_size_gb() -> float:
+    if not LOCAL_CACHE_DIR.exists():
+        return 0.0
+    return sum(f.stat().st_size for f in LOCAL_CACHE_DIR.rglob("*") if f.is_file()) / 1e9
+
+def local_status_md() -> str:
+    if local_is_cached():
+        return (f"✅ **Model cached** — `{LOCAL_MODEL_ID}` "
+                f"({local_cache_size_gb():.1f} GB) ready to run offline.")
+    return (f"⬇️ **Not downloaded yet** — `{LOCAL_MODEL_ID}` (~8 GB) will be "
+            f"fetched on first use and cached in `model_cache/`. "
+            f"Requires internet for this one-time download.")
+
+def _load_local_model():
+    """
+    Lazily import torch/transformers and load MiniCPM-V-4 from local cache,
+    downloading once if needed. Returns (model, tokenizer).
+    """
+    global _local_model, _local_tokenizer
+    if _local_model is not None:
+        return _local_model, _local_tokenizer
+
+    try:
+        import torch
+        import transformers
+        from transformers import AutoModel, AutoTokenizer
+    except ImportError as e:
+        raise RuntimeError(
+            "Local backend requires extra packages.\n"
+            "Install with:\n"
+            "  pip install torch transformers accelerate\n"
+            f"(original error: {e})"
+        )
+
+    # transformers v5 broke MiniCPM-V-4's custom code (all_tied_weights_keys)
+    _tv = tuple(int(x) for x in transformers.__version__.split(".")[:2])
+    if _tv >= (5, 0):
+        from transformers import modeling_utils as _mu
+        _orig_getattr = getattr(_mu.PreTrainedModel, "__getattr__", None)
+        def _safe_getattr(self, name):
+            if name == "all_tied_weights_keys":
+                return {}
+            if _orig_getattr is not None:
+                return _orig_getattr(self, name)
+            raise AttributeError(name)
+        _mu.PreTrainedModel.__getattr__ = _safe_getattr
+
+    LOCAL_CACHE_DIR.mkdir(parents=True, exist_ok=True)
+    local_only = local_is_cached()
+
+    common = dict(
+        trust_remote_code=True,
+        cache_dir=str(LOCAL_CACHE_DIR),
+        local_files_only=local_only,
+    )
+
+    _local_tokenizer = AutoTokenizer.from_pretrained(LOCAL_MODEL_ID, **common)
+
+    device = "cuda" if torch.cuda.is_available() else "cpu"
+    dtype  = torch.float16 if device == "cuda" else torch.float32
+
+    _local_model = AutoModel.from_pretrained(
+        LOCAL_MODEL_ID,
+        torch_dtype=dtype,
+        attn_implementation="sdpa",
+        device_map="auto" if device == "cuda" else None,
+        low_cpu_mem_usage=True,
+        **common,
+    )
+    if device == "cpu":
+        _local_model = _local_model.to(device)
+    _local_model.eval()
+
+    if not local_only:
+        LOCAL_SENTINEL.write_text(f"{LOCAL_MODEL_ID} downloaded.\nDelete to re-download.\n")
+
+    return _local_model, _local_tokenizer
+
+def stream_description_local(image, prompt, max_tokens, temperature):
+    """Local (offline) equivalent of stream_description — non-streaming, single yield."""
+    if image is None:
+        yield "⚠️  Please upload an image first."
+        return
+    try:
+        model, tokenizer = _load_local_model()
+        msgs = [{"role": "user", "content": [image.convert("RGB"), prompt]}]
+        result = model.chat(
+            image=image.convert("RGB"),
+            msgs=msgs,
+            tokenizer=tokenizer,
+            sampling=(temperature > 0),
+            temperature=max(temperature, 0.01),
+            max_new_tokens=max_tokens,
+        )
+        yield result
+    except RuntimeError as e:
+        yield f"❌ {e}"
+    except Exception as e:
+        yield f"❌ Local inference error: {e}"
+
+def get_dance_spec_local(description: str) -> tuple[str, dict]:
+    """Local equivalent of get_dance_spec — one extra text-only local call."""
+    if not description or description.startswith(("⚠️","❌")):
+        return "neutral", DEFAULT_DANCE["neutral"]
+    try:
+        model, tokenizer = _load_local_model()
+        msgs = [{"role": "user", "content": [
+            DANCE_SYSTEM_PROMPT + f"\n\nScene description:\n{description[:800]}"
+        ]}]
+        raw = model.chat(
+            image=None, msgs=msgs, tokenizer=tokenizer,
+            sampling=False, max_new_tokens=150,
+        )
+        raw = re.sub(r"```[a-z]*", "", raw).strip().strip("`").strip()
+        spec = json.loads(raw)
+
+        mood = spec.get("mood","neutral")
+        if mood not in MOOD_LABELS:
+            mood = "neutral"
+
+        dance = {
+            "speed":      float(max(0.3, min(3.0, spec.get("speed", 1.5)))),
+            "jump":       int(max(0,   min(60,  spec.get("jump",  10)))),
+            "sway":       int(max(0,   min(20,  spec.get("sway",  5)))),
+            "tail_speed": float(max(0.2, min(3.0, spec.get("tail_speed", 1.5)))),
+            "tail_range": int(max(5,   min(200, spec.get("tail_range", 40)))),
+            "ear_tilt":   int(max(0,   min(25,  spec.get("ear_tilt",  5)))),
+        }
+        return mood, dance
+    except Exception:
+        return _keyword_mood(description), DEFAULT_DANCE[_keyword_mood(description)]
+
+
 # ── Keyword dance for text-only tab (no API needed) ───────────────────────────
 def generate_animation(text: str) -> str:
     t = text.lower()
@@ -224,72 +394,102 @@ def generate_animation(text: str) -> str:
     return cat_html(mood, DEFAULT_DANCE[mood])
 
 # ── Stage chrome — shared studio frame ────────────────────────────────────────
-STAGE_FONT = "'Space Grotesk', 'Inter', system-ui, sans-serif"
-MONO_FONT  = "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
+STAGE_FONT  = "'Space Grotesk', 'Inter', system-ui, sans-serif"
+LABEL_FONT  = "'Inter', system-ui, sans-serif"
+MONO_FONT   = "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
 
 def _stage_open(spotlight_color: str, breathe_speed: float = 4.0) -> str:
-    """Opening <div> + shared <style> for the stage frame with a breathing spotlight."""
+    """Opening <div> + shared <style> for the performance card, HF light style."""
     return f"""<div class="stage" style="--spot:{spotlight_color};">
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
 
 .stage {{
-  position:relative; height:440px; border-radius:16px;
+  position:relative; height:440px; border-radius:12px;
   overflow:hidden; isolation:isolate;
   background:
-    radial-gradient(ellipse 70% 55% at 50% 28%, color-mix(in srgb, var(--spot) 22%, transparent), transparent 70%),
-    linear-gradient(180deg, #11141b 0%, #0B0E14 100%);
-  border:1px solid #1E2430;
+    radial-gradient(ellipse 70% 50% at 50% 22%, color-mix(in srgb, var(--spot) 14%, transparent), transparent 70%),
+    #F8F9FA;
+  border:1px solid #E5E7EB;
   display:flex; flex-direction:column; align-items:center; justify-content:center;
   font-family:{STAGE_FONT};
 }}
 @keyframes spot_breathe {{
-  0%,100% {{ opacity:.85; }}
+  0%,100% {{ opacity:.7; }}
   50%     {{ opacity:1; }}
 }}
 .stage::before {{
   content:''; position:absolute; inset:0; pointer-events:none;
-  background: radial-gradient(ellipse 45% 38% at 50% 22%, color-mix(in srgb, var(--spot) 30%, transparent), transparent 72%);
+  background: radial-gradient(ellipse 45% 36% at 50% 18%, color-mix(in srgb, var(--spot) 18%, transparent), transparent 72%);
   animation: spot_breathe {breathe_speed}s ease-in-out infinite;
-  mix-blend-mode: screen;
 }}
+/* faint dot-grid texture, HF-card style */
 .stage::after {{
-  content:''; position:absolute; inset:0; pointer-events:none;
-  background-image:
-    repeating-linear-gradient(0deg,  rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
-    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px);
+  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
+  background-image: radial-gradient(circle, #E5E7EB 1px, transparent 1px);
+  background-size: 22px 22px;
 }}
 
 .stage-cue {{
-  position:absolute; top:18px; left:0; right:0;
-  display:flex; align-items:center; justify-content:center; gap:10px;
-  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
-  color:#9CA3AF; font-weight:500; z-index:3;
+  position:absolute; top:16px; left:0; right:0;
+  display:flex; align-items:center; justify-content:center; gap:8px;
+  font-family:{MONO_FONT};
+  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
+  color:#6B7280; font-weight:500; z-index:3;
 }}
 .stage-cue .dot {{
-  width:7px; height:7px; border-radius:50%;
-  background:var(--spot); box-shadow:0 0 8px var(--spot);
+  width:8px; height:8px; border-radius:50%;
+  background:var(--spot); box-shadow:0 0 0 3px color-mix(in srgb, var(--spot) 25%, transparent);
 }}
 .stage-cue .mood-name {{
-  color:#F5F1E8; font-weight:700; letter-spacing:.14em;
+  color:#111827; font-weight:700; letter-spacing:.1em;
+  font-family:{MONO_FONT};
+  background:#FFFFFF; border:1px solid #E5E7EB;
+  border-radius:999px; padding:2px 10px;
 }}
 
 .stage-caption {{
-  position:absolute; bottom:46px; left:0; right:0; text-align:center; z-index:3;
-  color:#9CA3AF; font-size:.82rem; letter-spacing:.03em; font-style:italic;
+  position:absolute; bottom:62px; left:0; right:0; text-align:center; z-index:3;
+  color:#4B5563; font-size:.92rem; letter-spacing:.01em; font-style:italic;
+  font-family:{STAGE_FONT}; font-weight:500;
 }}
 
 .cue-sheet {{
   position:absolute; bottom:14px; left:0; right:0; z-index:3;
-  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
+  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
   padding:0 20px;
 }}
 .cue-chip {{
-  font-family:{MONO_FONT}; font-size:.66rem; letter-spacing:.04em;
-  color:#9CA3AF; background:#13171F; border:1px solid #1E2430;
-  border-radius:6px; padding:3px 9px; white-space:nowrap;
+  font-family:{MONO_FONT}; font-size:.64rem; letter-spacing:.03em;
+  color:#374151; background:#FFFFFF; border:1px solid #E5E7EB;
+  border-radius:999px; padding:3px 10px; white-space:nowrap;
+  box-shadow: 0 1px 2px rgba(0,0,0,.03);
+}}
+.cue-chip b {{ color:#92660C; font-weight:600; }}
+
+/* ── music toggle button ── */
+.music-toggle {{
+  position:absolute; top:14px; right:14px; z-index:4;
+  width:36px; height:36px; border-radius:50%;
+  background:#FFFFFF; border:1px solid #E5E7EB;
+  display:flex; align-items:center; justify-content:center;
+  cursor:pointer; font-size:1rem; color:#374151;
+  box-shadow: 0 1px 2px rgba(0,0,0,.04);
+  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
+}}
+.music-toggle:hover {{
+  transform: scale(1.06);
+  box-shadow: 0 2px 8px rgba(0,0,0,.08);
 }}
-.cue-chip b {{ color:var(--spot); font-weight:500; }}
+.music-toggle.playing {{
+  background: #FFD21E;
+  border-color: #FFD21E;
+  color:#111827;
+}}
+.music-toggle .icon-play  {{ display:inline; }}
+.music-toggle .icon-pause {{ display:none; }}
+.music-toggle.playing .icon-play  {{ display:none; }}
+.music-toggle.playing .icon-pause {{ display:inline; }}
 </style>
 """
 
@@ -306,6 +506,16 @@ def cat_html(mood: str, dance: dict) -> str:
 
     t0 = -tr // 2;  t1 = tr // 2
     breathe = max(2.0, min(6.0, sp * 2))
+    stage_id = f"stage_{mood}"
+
+    # ── music params derived from dance spec ──
+    scale = p["scale"]
+    root  = p["root"]
+    # tempo: faster dance (low sp) -> faster notes. Map sp [0.3,3.0] -> note interval [140,520]ms
+    note_ms = int(140 + (sp - 0.3) / (3.0 - 0.3) * (520 - 140))
+    # register: higher jump -> notes climb higher (octave shift 0,1,2)
+    octave_shift = 12 * min(2, jp // 25)
+    note_root = root + octave_shift
 
     cue_chips = (
         f'<span class="cue-chip">speed <b>{sp}s</b></span>'
@@ -470,8 +680,7 @@ def cat_html(mood: str, dance: dict) -> str:
 
 .c-particle {{
   position:absolute; pointer-events:none;
-  color:{p['pcol']}; font-size:.9rem;
-  text-shadow:0 0 4px {p['pcol']};
+  color:{D}; font-size:.9rem;
   opacity:0;
   animation:K_part var(--pd) var(--pde) ease-out infinite;
 }}
@@ -480,9 +689,13 @@ def cat_html(mood: str, dance: dict) -> str:
 <div class="stage-cue">
   <span class="dot"></span>
   <span class="mood-name">{p['label']}</span>
-  <span>&nbsp;·&nbsp;now performing</span>
+  <span>&nbsp;·&nbsp;live performance</span>
 </div>
 
+<button class="music-toggle" id="music_{stage_id}" title="Play the generated tune" aria-label="Toggle music">
+  <span class="icon-play">♪</span><span class="icon-pause">⏸</span>
+</button>
+
 <div class="cat-wrap" id="cw">
   <div class="cat-shadow"></div>
   <div class="cat-unit">
@@ -527,39 +740,124 @@ def cat_html(mood: str, dance: dict) -> str:
     el.style.fontSize = (.55+Math.random()*.65).toFixed(2)+'rem';
     wrap.appendChild(el);
   }}
+
+  // ── Generative tune — Web Audio, no files ──
+  const scale   = {scale};
+  const noteRoot= {note_root};
+  const noteMs  = {note_ms};
+  const mood    = "{mood}";
+
+  let ctx = null, timer = null, step = 0, master = null;
+
+  function midiToFreq(n) {{ return 440 * Math.pow(2, (n - 69) / 12); }}
+
+  function pattern(stepIdx) {{
+    // simple per-mood arpeggio shapes over the scale degrees
+    const len = scale.length;
+    let degree;
+    if (mood === 'energetic' || mood === 'angry') {{
+      degree = scale[stepIdx % len];                       // straight run, bright
+    }} else if (mood === 'sad' || mood === 'nostalgic') {{
+      degree = scale[[0,2,1,3][stepIdx % 4] % len];        // gentle up-down
+    }} else if (mood === 'mysterious' || mood === 'tense') {{
+      degree = scale[[0,3,1,5][stepIdx % 4] % len];        // wider, uneasy leaps
+    }} else {{
+      degree = scale[[0,1,2,1][stepIdx % 4] % len];        // calm/happy/romantic/calm lilt
+    }}
+    return noteRoot + degree;
+  }}
+
+  function playNote() {{
+    if (!ctx) return;
+    const midi = pattern(step);
+    const freq = midiToFreq(midi);
+    const t0 = ctx.currentTime;
+
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = (mood === 'angry' || mood === 'energetic') ? 'sawtooth'
+             : (mood === 'mysterious' || mood === 'tense') ? 'triangle'
+             : 'sine';
+    osc.frequency.setValueAtTime(freq, t0);
+
+    const dur = noteMs / 1000 * 0.9;
+    gain.gain.setValueAtTime(0.0001, t0);
+    gain.gain.exponentialRampToValueAtTime(0.18, t0 + 0.02);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
+
+    osc.connect(gain).connect(master);
+    osc.start(t0);
+    osc.stop(t0 + dur + 0.02);
+
+    step = (step + 1) % 16;
+  }}
+
+  const btn = document.getElementById('music_{stage_id}');
+  btn.addEventListener('click', function(){{
+    if (!ctx) {{
+      ctx = new (window.AudioContext || window.webkitAudioContext)();
+      master = ctx.createGain();
+      master.gain.value = 0.5;
+      master.connect(ctx.destination);
+    }}
+    if (timer) {{
+      clearInterval(timer); timer = null;
+      ctx.suspend();
+      btn.classList.remove('playing');
+    }} else {{
+      ctx.resume();
+      playNote();
+      timer = setInterval(playNote, {note_ms});
+      btn.classList.add('playing');
+    }}
+  }});
 }})();
 </script>""" + _stage_close()
 
 def placeholder_html():
-    return _stage_open("#9CA3AF", 6.0) + f"""
-<div style="text-align:center; z-index:2; color:#9CA3AF; font-family:{STAGE_FONT};">
-  <div style="font-size:2.4rem; margin-bottom:14px; opacity:.35;">🐾</div>
-  <div style="font-size:.95rem; font-weight:700; letter-spacing:.05em; color:#F5F1E8; margin-bottom:6px;">
-    Waiting for a performance
+    return _stage_open("#FFD21E", 6.0) + f"""
+<div style="text-align:center; z-index:2; color:#6B7280; font-family:{STAGE_FONT};">
+  <div style="font-size:2.4rem; margin-bottom:14px; opacity:.6;">🐱</div>
+  <div style="font-size:1.05rem; font-weight:700; letter-spacing:.01em; color:#111827; margin-bottom:8px;">
+    No performance yet
   </div>
-  <div style="font-size:.78rem; color:#6B7280; max-width:260px; margin:0 auto; line-height:1.6;">
-    Upload an image — the model reads its mood and choreographs every move the cat makes.
+  <div style="font-size:.82rem; color:#6B7280; max-width:280px; margin:0 auto; line-height:1.7; font-family:{LABEL_FONT};">
+    Upload an image — the model reads its mood and the cat performs it,
+    tune and all.
   </div>
 </div>""" + _stage_close()
 
-def loading_html() -> str:
-    return _stage_open("#FF8A3D", 2.0) + f"""
-<div style="text-align:center; z-index:2; color:#9CA3AF; font-family:{STAGE_FONT};">
+def loading_html(local: bool = False) -> str:
+    title   = "Running locally…" if local else "Analyzing image…"
+    caption = ("on-device inference — first run may take a while"
+               if local else "choreographing the performance")
+    return _stage_open("#FFD21E", 2.0) + f"""
+<div style="text-align:center; z-index:2; color:#6B7280; font-family:{STAGE_FONT};">
   <div class="loading-spinner" style="
-    width:34px; height:34px; margin:0 auto 16px;
-    border:3px solid #1E2430; border-top-color:#FF8A3D;
+    width:32px; height:32px; margin:0 auto 16px;
+    border:3px solid #E5E7EB; border-top-color:#FFD21E;
     border-radius:50%; animation: spin 0.9s linear infinite;"></div>
-  <div style="font-size:.85rem; letter-spacing:.06em; color:#F5F1E8; font-weight:700;">
-    Reading the room…
+  <div style="font-size:.92rem; letter-spacing:.01em; color:#111827; font-weight:700;">
+    {title}
   </div>
-  <div style="font-size:.74rem; color:#6B7280; margin-top:4px;">
-    choreographing the next performance
+  <div style="font-size:.78rem; color:#6B7280; margin-top:4px; font-family:{LABEL_FONT};">
+    {caption}
   </div>
 </div>
 <style>@keyframes spin {{ to {{ transform: rotate(360deg); }} }}</style>""" + _stage_close()
 
 # ── Main pipeline ─────────────────────────────────────────────────────────────
-def run_image_pipeline(image, prompt, model_label, max_tokens, temperature, api_key):
+def run_image_pipeline(image, prompt, model_label, max_tokens, temperature, api_key, backend):
+    if backend == "Local (offline)":
+        yield "", loading_html(local=True)
+        final_desc = ""
+        for partial in stream_description_local(image, prompt, max_tokens, temperature):
+            final_desc = partial
+        yield final_desc, loading_html(local=True)
+        mood, dance = get_dance_spec_local(final_desc)
+        yield final_desc, cat_html(mood, dance)
+        return
+
     final_desc = ""
     for partial in stream_description(image, prompt, model_label, max_tokens, temperature, api_key):
         final_desc = partial
@@ -570,20 +868,21 @@ def run_image_pipeline(image, prompt, model_label, max_tokens, temperature, api_
     yield final_desc, cat_html(mood, dance)
 
 # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-# UI — Emberglade
+# UI — Cat Dance Studio
 # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :root {
-  --bg:        #0B0E14;
-  --surface:   #13171F;
-  --raised:    #1E2430;
-  --text:      #F5F1E8;
-  --text-dim:  #9CA3AF;
+  --bg:        #FFFFFF;
+  --surface:   #F8F9FA;
+  --raised:    #E5E7EB;
+  --text:      #111827;
+  --text-dim:  #4B5563;
   --text-faint:#6B7280;
-  --accent:    #FF8A3D;
+  --accent:    #FFD21E;
+  --accent-ink:#111827;
 }
 
 .gradio-container {
@@ -593,13 +892,16 @@ CSS = """
 
 /* ── Header ────────────────────────────────────────────────────────────── */
 #studio-header {
-  text-align:center; padding: 8px 0 4px;
+  text-align:center; padding: 18px 20px 22px;
+  border:1px solid var(--raised); border-radius:12px;
+  background: var(--surface);
+  margin-bottom:8px;
 }
 #studio-header h1 {
   font-family:'Space Grotesk', sans-serif !important;
   font-weight:700 !important; letter-spacing:.01em;
   font-size:1.9rem !important; color:var(--text) !important;
-  margin-bottom:4px !important;
+  margin-bottom:6px !important;
 }
 #studio-header p {
   color:var(--text-dim) !important; font-size:.92rem !important;
@@ -608,41 +910,48 @@ CSS = """
 #studio-header .eyebrow {
   display:inline-flex; align-items:center; gap:8px;
   font-family:'JetBrains Mono', monospace; font-size:.7rem;
-  letter-spacing:.22em; text-transform:uppercase;
-  color:var(--accent); margin-bottom:10px;
+  letter-spacing:.18em; text-transform:uppercase;
+  color:var(--text-faint); margin-bottom:10px;
+}
+#studio-header .eyebrow .badge {
+  display:inline-flex; align-items:center; gap:5px;
+  background: var(--accent); color: var(--accent-ink);
+  border-radius:999px; padding:2px 10px;
+  font-weight:700; letter-spacing:.1em;
 }
-#studio-header .eyebrow .line {
-  width:28px; height:1px; background:var(--accent); opacity:.5;
+#studio-header .eyebrow .badge .dot {
+  width:6px; height:6px; border-radius:50%;
+  background: var(--accent-ink); opacity:.7;
 }
 
 /* ── Panels ────────────────────────────────────────────────────────────── */
 .gr-form, .gr-box, .gr-panel, .gr-block.gr-box {
-  background: var(--surface) !important;
+  background: var(--bg) !important;
   border: 1px solid var(--raised) !important;
-  border-radius: 12px !important;
+  border-radius: 10px !important;
 }
 
 /* Section labels */
 .gradio-container label span {
   font-family:'Inter', sans-serif !important;
   font-size:.78rem !important; font-weight:600 !important;
-  letter-spacing:.04em !important; color:var(--text-dim) !important;
+  letter-spacing:.02em !important; color:var(--text-dim) !important;
 }
 
 /* ── Buttons ───────────────────────────────────────────────────────────── */
 #submit-img, #submit-txt {
   background: var(--accent) !important;
-  color: #1A0E05 !important;
-  border: none !important;
+  color: var(--accent-ink) !important;
+  border: 1px solid #E8BD00 !important;
   font-weight:700 !important;
-  letter-spacing:.04em !important;
+  letter-spacing:.02em !important;
   font-family:'Space Grotesk', sans-serif !important;
-  box-shadow: 0 0 0 1px rgba(255,138,61,.0), 0 6px 18px -8px var(--accent) !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
   transition: transform .12s ease, box-shadow .12s ease !important;
 }
 #submit-img:hover, #submit-txt:hover {
   transform: translateY(-1px);
-  box-shadow: 0 10px 24px -8px var(--accent) !important;
+  box-shadow: 0 4px 12px rgba(255,210,30,.35) !important;
 }
 #submit-img:active, #submit-txt:active { transform: translateY(0); }
 
@@ -656,8 +965,8 @@ CSS = """
 
 /* ── Run-locally panel ─────────────────────────────────────────────────── */
 #run-locally {
-  border:1px dashed var(--raised) !important;
-  background: transparent !important;
+  border:1px solid var(--raised) !important;
+  background: var(--surface) !important;
 }
 #run-locally code {
   font-family:'JetBrains Mono', monospace !important;
@@ -665,7 +974,7 @@ CSS = """
   background:var(--bg) !important;
   border:1px solid var(--raised) !important;
   border-radius:6px !important;
-  color:var(--accent) !important;
+  color:#92660C !important;
 }
 #run-locally pre {
   background:var(--bg) !important;
@@ -677,11 +986,12 @@ CSS = """
 /* ── Tabs ──────────────────────────────────────────────────────────────── */
 .tab-nav button {
   font-family:'Space Grotesk', sans-serif !important;
-  font-weight:600 !important; letter-spacing:.02em !important;
+  font-weight:600 !important; letter-spacing:.01em !important;
   color: var(--text-dim) !important;
 }
 .tab-nav button.selected {
-  color: var(--accent) !important;
+  color: var(--text) !important;
+  border-bottom-color: var(--accent) !important;
 }
 
 /* ── Misc ──────────────────────────────────────────────────────────────── */
@@ -713,15 +1023,39 @@ $env:MINICPM_API_KEY="sk-your-key-here"
 
 The app checks `MINICPM_API_KEY` first, then the **API Key** field below,
 then falls back to the shared public key.
+
+---
+
+### 🔌 Fully offline mode
+
+Select **Local (offline)** as the Backend on the Image tab to run everything
+on-device — no internet needed after the first download.
+
+```bash
+pip install torch transformers accelerate
+python app_single.py
+```
+
+The first time you use the Local backend, it downloads `openbmb/MiniCPM-V-4`
+(4.1B params, Apache-2.0, ~8 GB) into `model_cache/` next to this file. Every
+run after that loads from disk only — no network calls.
+
+To force a fresh download, delete the `model_cache/` folder.
+
+A GPU is recommended but not required; the app automatically uses CUDA if
+available and falls back to CPU otherwise.
 """
 
-with gr.Blocks(title="Emberglade · MiniCPM-V 4.6", theme=gr.themes.Soft(), css=CSS) as demo:
+with gr.Blocks(title="An Adventure in Thousand Token Wood · MiniCPM-V 4.6", theme=gr.themes.Soft(), css=CSS) as demo:
 
     gr.HTML(
         """<div id="studio-header">
-          <div class="eyebrow"><span class="line"></span>MINICPM-V 4.6 · LIVE CHOREOGRAPHY<span class="line"></span></div>
-          <h1>Emberglade</h1>
-          <p>Upload an image. The model reads its mood — then choreographs every move, live.</p>
+          <div class="eyebrow">
+            <span class="badge"><span class="dot"></span>MiniCPM-V 4.6</span>
+            <span>live choreography &amp; generative score</span>
+          </div>
+          <h1>An Adventure in Thousand Token Wood</h1>
+          <p>Upload an image. The model reads its mood — then a cat performs it, live, with its own tune.</p>
         </div>"""
     )
 
@@ -732,15 +1066,37 @@ with gr.Blocks(title="Emberglade · MiniCPM-V 4.6", theme=gr.themes.Soft(), css=
                 with gr.Column(scale=1):
                     image_input  = gr.Image(type="pil", label="Upload image", height=240)
                     prompt_input = gr.Textbox(value=DEFAULT_PROMPT, label="Prompt", lines=2)
+
+                    backend_sel = gr.Radio(
+                        choices=["API (online)", "Local (offline)"],
+                        value="API (online)",
+                        label="Backend",
+                    )
+
                     model_sel    = gr.Radio(choices=list(MODELS.keys()),
-                                            value=list(MODELS.keys())[0], label="Model")
+                                            value=list(MODELS.keys())[0], label="Model",
+                                            info="Used only for the API backend")
+
                     with gr.Accordion("Generation settings", open=False):
                         max_tok = gr.Slider(64, 2048, value=DEFAULT_MAX_TOKENS, step=64, label="Max tokens")
                         temp    = gr.Slider(0.0, 1.5, value=DEFAULT_TEMPERATURE, step=0.05, label="Temperature")
+
                     with gr.Accordion("API key", open=False):
                         api_key = gr.Textbox(label="Your key (optional)", type="password",
                                              placeholder="sk-…  leave blank to use the shared key")
                         gr.Markdown("Get your own at [modelbest.cn](https://modelbest.cn) — see **Run locally** below for setup.")
+
+                    with gr.Accordion("Local model (offline)", open=False, elem_id="local-model"):
+                        local_status = gr.Markdown(local_status_md())
+                        gr.Markdown(
+                            f"Model: `{LOCAL_MODEL_ID}` · 4.1B params · Apache-2.0\n\n"
+                            "Selecting **Local (offline)** above will download this model "
+                            "the first time it's used (~8 GB, one-time, needs internet), "
+                            "then cache it in `model_cache/` for fully offline use afterward.\n\n"
+                            "Requires: `pip install torch transformers accelerate`"
+                        )
+                        refresh_local_btn = gr.Button("Refresh status", size="sm")
+
                     img_btn = gr.Button("Start performance", variant="primary", elem_id="submit-img")
                     gr.Examples(examples=PROMPT_EXAMPLES, inputs=[prompt_input], label="Prompt ideas")
 
@@ -750,16 +1106,19 @@ with gr.Blocks(title="Emberglade · MiniCPM-V 4.6", theme=gr.themes.Soft(), css=
                                           placeholder="The model's description will stream in here…",
                                           elem_id="desc-output")
 
+            pipeline_inputs = [image_input, prompt_input, model_sel, max_tok, temp, api_key, backend_sel]
+
             img_btn.click(
                 fn=run_image_pipeline,
-                inputs=[image_input, prompt_input, model_sel, max_tok, temp, api_key],
+                inputs=pipeline_inputs,
                 outputs=[desc_out, cat_out],
             )
             prompt_input.submit(
                 fn=run_image_pipeline,
-                inputs=[image_input, prompt_input, model_sel, max_tok, temp, api_key],
+                inputs=pipeline_inputs,
                 outputs=[desc_out, cat_out],
             )
+            refresh_local_btn.click(fn=local_status_md, outputs=[local_status])
 
         # ── Tab 2: Text-only (keyword dance, no API) ──────────────────────────
         with gr.TabItem("✍️  Text → Performance"):

requirements.txt

@@ -50,4 +50,4 @@ typer==0.25.1
 typing-inspection==0.4.2
 typing_extensions==4.15.0
 tzdata==2026.2
-uvicorn==0.49.0
+uvicorn==0.49.0