feat: add JSON decoding robustness and interactive progress UI for memory generation

app.py

@@ -44,9 +44,15 @@ def modal_post(url, payload, timeout=300, retries=3, label="endpoint"):
             try:
                 return r.json(), None
             except Exception:
-                # Non-JSON body — surface the actual content
-                body = r.text[:500]
-                return None, f"{label} HTTP {r.status_code}: {body}"
+                # Try extracting the first valid JSON object (handles "extra data" / concatenated responses)
+                import json as _json
+                raw = r.text.strip()
+                try:
+                    obj, _ = _json.JSONDecoder().raw_decode(raw)
+                    return obj, None
+                except Exception:
+                    body = raw[:500]
+                    return None, f"{label} HTTP {r.status_code}: {body}"
 
         except requests.exceptions.Timeout:
             last_err = f"{label} timed out after {timeout}s (attempt {attempt}/{retries})"
@@ -79,7 +85,13 @@ def modal_get(url, timeout=90, retries=2, label="endpoint"):
             try:
                 return r.json(), None
             except Exception:
-                return None, f"{label} HTTP {r.status_code}: {r.text[:300]}"
+                import json as _json
+                raw = r.text.strip()
+                try:
+                    obj, _ = _json.JSONDecoder().raw_decode(raw)
+                    return obj, None
+                except Exception:
+                    return None, f"{label} HTTP {r.status_code}: {raw[:300]}"
         except Exception as e:
             last_err = f"{label} error: {e}"
             if attempt < retries:
@@ -309,7 +321,117 @@ with gr.Blocks(title="Memory Keeper") as demo:
             )
 
             build_btn = gr.Button("✨ Preserve Their Memory", variant="primary")
-            build_output = gr.Markdown()
+
+            # ── Progress bar (shown while processing) ──
+            progress_html = gr.HTML("""
+                <div id="preserve-progress" style="display:none; margin: 14px 0;">
+                    <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
+                        <span style="color:#d4a96a; font-family:'Lora',serif; font-size:0.95em;">
+                            🕯️ <span id="progress-label">Preparing memories…</span>
+                        </span>
+                    </div>
+                    <div style="background:#1a1510; border:1px solid #3a2e1e; border-radius:8px; overflow:hidden; height:14px;">
+                        <div id="progress-bar-inner" style="
+                            height:100%; width:0%;
+                            background: linear-gradient(90deg, #c47f17, #e8a83e, #c47f17);
+                            background-size: 200% 100%;
+                            border-radius:8px;
+                            transition: width 0.6s ease;
+                            animation: shimmer 1.8s infinite linear;
+                        "></div>
+                    </div>
+                    <p style="color:#8a7560; font-size:0.8em; margin-top:6px; font-style:italic;" id="progress-sub">
+                        This may take 1–3 minutes on cold start. Please wait…
+                    </p>
+                </div>
+                <style>
+                @keyframes shimmer {
+                    0%   { background-position: 200% 0; }
+                    100% { background-position: -200% 0; }
+                }
+                </style>
+                <script>
+                (function() {
+                    const STEPS = [
+                        [5,  "🎤 Transcribing voice note…"],
+                        [18, "👁️ Analysing photos…"],
+                        [32, "📄 Running OCR on scanned docs…"],
+                        [50, "🧠 Building persona with Qwen 32B…"],
+                        [70, "🧠 Still thinking — large model at work…"],
+                        [85, "✍️ Finalising personality profile…"],
+                        [95, "🔗 Saving to memory store…"],
+                    ];
+                    let _timer = null, _stepIdx = 0;
+
+                    function startProgress() {
+                        const bar  = document.getElementById("progress-bar-inner");
+                        const lbl  = document.getElementById("progress-label");
+                        const box  = document.getElementById("preserve-progress");
+                        if (!bar) return;
+                        box.style.display = "block";
+                        _stepIdx = 0;
+                        bar.style.width = "2%";
+                        lbl.textContent = "Preparing memories…";
+                        _timer = setInterval(function() {
+                            if (_stepIdx < STEPS.length) {
+                                bar.style.width = STEPS[_stepIdx][0] + "%";
+                                lbl.textContent  = STEPS[_stepIdx][1];
+                                _stepIdx++;
+                            }
+                        }, 9000);
+                    }
+
+                    function stopProgress() {
+                        clearInterval(_timer);
+                        const bar = document.getElementById("progress-bar-inner");
+                        const box = document.getElementById("preserve-progress");
+                        const lbl = document.getElementById("progress-label");
+                        if (bar) { bar.style.width = "100%"; }
+                        if (lbl) { lbl.textContent = "✅ Done!"; }
+                        setTimeout(function() { if (box) box.style.display = "none"; }, 2200);
+                    }
+
+                    // Attach to the Preserve button after DOM is ready
+                    function attachListeners() {
+                        // Find the primary button that contains "Preserve"
+                        const btns = document.querySelectorAll("button");
+                        btns.forEach(function(btn) {
+                            if (btn.textContent.includes("Preserve Their Memory")) {
+                                btn.addEventListener("click", startProgress);
+                            }
+                        });
+                        // Watch for Gradio's own progress bar disappearing as a "done" signal
+                        const observer = new MutationObserver(function(mutations) {
+                            mutations.forEach(function(m) {
+                                m.removedNodes.forEach(function(n) {
+                                    if (n.nodeType === 1 && (n.classList.contains("progress-bar") || n.id === "progress-tracker")) {
+                                        stopProgress();
+                                    }
+                                });
+                            });
+                        });
+                        observer.observe(document.body, { childList: true, subtree: true });
+
+                        // Also stop when the result markdown area gets content
+                        const resultObs = new MutationObserver(function() {
+                            const md = document.querySelector(".preserve-result .prose");
+                            if (md && md.textContent.trim().length > 0) {
+                                stopProgress();
+                            }
+                        });
+                        resultObs.observe(document.body, { childList: true, subtree: true });
+                    }
+
+                    if (document.readyState === "loading") {
+                        document.addEventListener("DOMContentLoaded", attachListeners);
+                    } else {
+                        setTimeout(attachListeners, 1200);
+                    }
+                })();
+                </script>
+            """)
+
+            build_output = gr.Markdown(elem_classes=["preserve-result"])
             persona_id_state = gr.State()
             persona_id_hidden = gr.Textbox(visible=False)