Persist portrait/voice/media server-side (durable in the HF Space iframe)

The client cached portrait/voice blobs in browser IndexedDB, which is blocked/
evicted inside HuggingFace's cross-origin Space iframe — so created heroes lost
their portrait + voice on reload (the persona record itself survived via
localStorage, which the iframe keeps).

Fix: mirror media blobs SERVER-SIDE, keyed by the same id the client already
holds in localStorage. Same-origin fetch works in the iframe; only browser
storage is partitioned.

- app.py: POST/GET/DELETE /api/blob/{store}/{id} (portraits, voices, skillIcons,
skillArt, chatAudio). Path-traversal-guarded ids; content-type preserved via a
sidecar. Stored under HF persistent storage (/data) when mounted, else a local
user_data/ dir (override TINY_DATA_DIR).
- personaStore.js: _put writes IDB (fast cache) + server (durable); _get reads
IDB first, falls back to the server and re-caches. Covers all media stores.

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

.gitignore

@@ -5,3 +5,4 @@ __pycache__/
 .venv-acestep/
 logs/
 outputs/
+user_data/

app.py

@@ -18,6 +18,8 @@ import json
 import asyncio
 import json as _json
 import os
+import pathlib
+import re
 import threading
 import time
 
@@ -797,6 +799,75 @@ async def api_music(request: Request):
     return Response(wav, media_type="audio/wav", headers={"Cache-Control": "no-store"})
 
 
+# ── Durable media store (portraits / voices / skill art / chat audio) ─────────
+# The client caches these blobs in browser IndexedDB, but IndexedDB is blocked/evicted when the
+# Space runs inside HuggingFace's cross-origin <iframe> — so created heroes lose their portrait +
+# voice on reload (the persona record itself survives because it lives in localStorage, which the
+# iframe keeps). Mirror the blobs SERVER-SIDE, keyed by the id the client already holds in
+# localStorage. Same-origin fetch works fine in the iframe; only browser *storage* is partitioned.
+# Stored on disk: HF persistent storage (/data) when mounted (survives rebuilds), else a local dir
+# (per-container). Override with TINY_DATA_DIR.
+_DATA_DIR = pathlib.Path(
+    os.environ.get("TINY_DATA_DIR")
+    or ("/data" if os.path.isdir("/data") and os.access("/data", os.W_OK)
+        else os.path.join(os.path.dirname(os.path.abspath(__file__)), "user_data"))
+)
+_BLOB_STORES = {"portraits", "voices", "skillIcons", "skillArt", "chatAudio"}
+_BLOB_ID_RE = re.compile(r"^[A-Za-z0-9_.-]{1,128}$")
+
+
+def _blob_path(store: str, blob_id: str):
+    """Validated path for a media blob, or None if the store/id is invalid (path-traversal guard)."""
+    if store not in _BLOB_STORES or not _BLOB_ID_RE.match(blob_id or ""):
+        return None
+    d = _DATA_DIR / "media" / store
+    d.mkdir(parents=True, exist_ok=True)
+    return d / blob_id
+
+
+def _ct_path(p: pathlib.Path):
+    return pathlib.Path(str(p) + ".ct")  # sidecar holding the blob's content-type
+
+
+@fastapi_app.post("/api/blob/{store}/{blob_id}")
+async def put_blob(store: str, blob_id: str, request: Request):
+    p = _blob_path(store, blob_id)
+    if p is None:
+        return Response("bad store/id", status_code=400)
+    data = await request.body()
+    if not data:
+        return Response("empty body", status_code=400)
+    ct = request.headers.get("content-type") or "application/octet-stream"
+    try:
+        await asyncio.to_thread(p.write_bytes, data)
+        await asyncio.to_thread(_ct_path(p).write_text, ct)
+    except Exception as e:  # noqa: BLE001
+        return Response(f"save failed: {e}", status_code=500)
+    return Response(status_code=204)
+
+
+@fastapi_app.get("/api/blob/{store}/{blob_id}")
+async def get_blob(store: str, blob_id: str):
+    p = _blob_path(store, blob_id)
+    if p is None or not p.exists():
+        return Response(status_code=404)
+    ctp = _ct_path(p)
+    ct = ctp.read_text().strip() if ctp.exists() else "application/octet-stream"
+    return Response(p.read_bytes(), media_type=ct, headers={"Cache-Control": "no-store"})
+
+
+@fastapi_app.delete("/api/blob/{store}/{blob_id}")
+async def del_blob(store: str, blob_id: str):
+    p = _blob_path(store, blob_id)
+    if p is not None and p.exists():
+        try:
+            p.unlink()
+            _ct_path(p).unlink(missing_ok=True)
+        except Exception:  # noqa: BLE001
+            pass
+    return Response(status_code=204)
+
+
 # ── Persona portraits (image generation) ─────────────────────────────────────
 # Mirrors the voice path: TINY_IMAGE_MODE=local runs the OPEN WEIGHTS on your GPU
 # (Z-Image-Turbo, 6B, ~12 GB bf16 — coexists with the TTS model on a 24 GB card);

web/personaStore.js

@@ -154,20 +154,42 @@ function db() {
   }
   return _dbp
 }
-async function _put(store, id, blob) {
+// IndexedDB is a FAST LOCAL CACHE only — it's blocked/evicted inside the HF Space's cross-origin
+// iframe. The durable copy lives SERVER-SIDE (/api/blob), keyed by the same id. Same-origin fetch
+// works in the iframe; only browser storage is partitioned. So: write both (IDB best-effort +
+// server durable); read IDB first, fall back to the server and re-cache.
+async function _idbPut(store, id, blob) {
   try {
     const d = await db()
     await new Promise((res, rej) => { const t = d.transaction(store, 'readwrite'); t.objectStore(store).put(blob, id); t.oncomplete = res; t.onerror = () => rej(t.error) })
-  } catch { /* best-effort */ }
+  } catch { /* IDB unavailable (iframe) — server copy covers it */ }
 }
-async function _get(store, id) {
+async function _idbGet(store, id) {
   try {
     const d = await db()
     return await new Promise((res) => { const t = d.transaction(store, 'readonly'); const q = t.objectStore(store).get(id); q.onsuccess = () => res(q.result || null); q.onerror = () => res(null) })
   } catch { return null }
 }
+async function _serverPut(store, id, blob) {
+  try { await fetch(`/api/blob/${store}/${encodeURIComponent(id)}`, { method: 'POST', headers: { 'Content-Type': blob.type || 'application/octet-stream' }, body: blob }) } catch { /* offline / best-effort */ }
+}
+async function _serverGet(store, id) {
+  try { const r = await fetch(`/api/blob/${store}/${encodeURIComponent(id)}`); if (!r.ok) return null; const b = await r.blob(); return b && b.size ? b : null } catch { return null }
+}
+async function _put(store, id, blob) {
+  await _idbPut(store, id, blob)
+  await _serverPut(store, id, blob)
+}
+async function _get(store, id) {
+  const local = await _idbGet(store, id)
+  if (local) return local
+  const remote = await _serverGet(store, id)
+  if (remote) { _idbPut(store, id, remote); return remote } // re-cache for next time
+  return null
+}
 async function _del(store, id) {
   try { const d = await db(); d.transaction(store, 'readwrite').objectStore(store).delete(id) } catch { /* ignore */ }
+  try { fetch(`/api/blob/${store}/${encodeURIComponent(id)}`, { method: 'DELETE' }) } catch { /* ignore */ }
 }
 export const putAudio = (id, blob) => _put(STORE, id, blob)
 export const getAudio = (id) => _get(STORE, id)