Initial commit of application code

Upload custom Gradio Server UI, FastAPI app, Dockerfile, requirements, and MIT License.

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.gitignore
+.ipynb_checkpoints
+*.ipynb
+__pycache__
+modal_inference.py
+README.md
+data/

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.12-slim
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+# Set up a non-root user for security (required by HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+# Start the Gradio Server app on port 7860
+CMD ["python", "app.py"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kongara Likhith
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app.py

@@ -0,0 +1,165 @@
+import requests, json, os, asyncio, time
+from datetime import datetime
+from fastapi import FastAPI, UploadFile, File, Form
+from fastapi.responses import HTMLResponse, JSONResponse
+from typing import List
+import uvicorn
+
+TRANSCRIBE_URL = "https://likhith0715--memory-keeper-transcribe-audio.modal.run"
+PHOTO_URL = "https://likhith0715--memory-keeper-describe-photo.modal.run"
+BOOK_URL = "https://likhith0715--memory-keeper-build-memory-book.modal.run"
+
+# Storage directory — persists on HF Spaces
+STORAGE_DIR = "/data/memories"
+os.makedirs(STORAGE_DIR, exist_ok=True)
+
+def profile_path(name: str) -> str:
+    safe = "".join(c if c.isalnum() or c in "-_ " else "_" for c in name).strip().lower()
+    return f"{STORAGE_DIR}/{safe}.json"
+
+def load_profile(name: str) -> dict:
+    path = profile_path(name)
+    if os.path.exists(path):
+        with open(path) as f:
+            return json.load(f)
+    return {"name": name, "transcripts": [], "photo_descriptions": [], "sessions": 0, "history": []}
+
+def save_profile(profile: dict):
+    with open(profile_path(profile["name"]), "w") as f:
+        json.dump(profile, f, indent=2)
+
+def list_profiles() -> list:
+    profiles = []
+    for fname in os.listdir(STORAGE_DIR):
+        if fname.endswith(".json"):
+            with open(f"{STORAGE_DIR}/{fname}") as f:
+                try:
+                    p = json.load(f)
+                    profiles.append({
+                        "name": p["name"],
+                        "sessions": p.get("sessions", 0),
+                        "memories": len(p.get("transcripts", [])),
+                        "photos": len(p.get("photo_descriptions", []))
+                    })
+                except: pass
+import gradio as gr
+
+fast_app = gr.Server()
+
+async def cleanup_old_memories():
+    """Background task to delete profile JSONs older than 48 hours."""
+    while True:
+        now = time.time()
+        for fname in os.listdir(STORAGE_DIR):
+            if fname.endswith(".json"):
+                path = os.path.join(STORAGE_DIR, fname)
+                try:
+                    if now - os.path.getmtime(path) > 48 * 3600:
+                        os.remove(path)
+                except Exception:
+                    pass
+        await asyncio.sleep(3600)  # Check every hour
+
+@fast_app.on_event("startup")
+async def startup_event():
+    asyncio.create_task(cleanup_old_memories())
+
+@fast_app.get("/", response_class=HTMLResponse)
+def index():
+    return open("index.html").read()
+
+@fast_app.get("/profiles")
+def get_profiles():
+    return JSONResponse(list_profiles())
+
+@fast_app.get("/profile/{name}")
+def get_profile(name: str):
+    return JSONResponse(load_profile(name))
+
+@fast_app.delete("/profile/{name}")
+def delete_profile(name: str):
+    path = profile_path(name)
+    if os.path.exists(path):
+        os.remove(path)
+    return JSONResponse({"ok": True})
+
+@fast_app.post("/run")
+async def run(
+    name: str = Form(...),
+    text: str = Form(""),
+    audios: List[UploadFile] = File(default=[]),
+    photos: List[UploadFile] = File(default=[])
+):
+    # Load existing profile
+    profile = load_profile(name)
+    new_transcripts = []
+    new_photos = []
+
+    if text.strip():
+        new_transcripts.append(text)
+
+    for audio in audios:
+        if audio and audio.filename:
+            audio_bytes = await audio.read()
+            if audio_bytes:
+                resp = requests.post(
+                    TRANSCRIBE_URL, data=audio_bytes,
+                    headers={"Content-Type": "application/octet-stream"},
+                    timeout=300
+                )
+                if resp.status_code == 200:
+                    new_transcripts.append(f"[Voice]: {resp.json()}")
+
+    for photo in photos:
+        if photo and photo.filename:
+            photo_bytes = await photo.read()
+            if photo_bytes:
+                resp = requests.post(
+                    PHOTO_URL, data=photo_bytes,
+                    headers={"Content-Type": "application/octet-stream"},
+                    timeout=300
+                )
+                if resp.status_code == 200:
+                    new_photos.append(resp.json())
+
+    if not new_transcripts and not new_photos:
+        return JSONResponse({"error": "No memories provided"}, status_code=400)
+
+    # Accumulate into profile
+    profile["transcripts"].extend(new_transcripts)
+    profile["photo_descriptions"].extend(new_photos)
+    profile["sessions"] = profile.get("sessions", 0) + 1
+    save_profile(profile)
+
+    # Build book from ALL accumulated memories
+    if not profile["transcripts"]:
+        profile["transcripts"].append(f"Photos were shared of {name}.")
+
+    resp = requests.post(BOOK_URL, json={
+        "name": name,
+        "transcripts": profile["transcripts"],
+        "photo_descriptions": profile["photo_descriptions"]
+    }, timeout=600)
+
+    result = resp.json()
+
+    # Append to history and save again
+    history_entry = {
+        "session": profile["sessions"],
+        "timestamp": datetime.now().strftime("%b %d, %Y - %H:%M"),
+        "timeline": result.get("timeline", ""),
+        "chapter": result.get("chapter", ""),
+        "letter": result.get("letter", ""),
+        "people": result.get("people", "")
+    }
+    profile.setdefault("history", []).append(history_entry)
+    save_profile(profile)
+
+    result["sessions"] = profile["sessions"]
+    result["total_memories"] = len(profile["transcripts"])
+    result["total_photos"] = len(profile["photo_descriptions"])
+    result["history"] = profile["history"]
+    return JSONResponse(result)
+
+if __name__ == "__main__":
+    fast_app.launch(server_name="0.0.0.0", server_port=7860)

index.html

@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Memory Keeper</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@latest"></script>
+<style>
+  :root {
+    --gold-light: #f5dfa0;
+    --gold-main: #c89840;
+    --gold-dark: #7a5528;
+    --bg-dark: #0a0806;
+    --glass-bg: rgba(20, 15, 10, 0.45);
+    --glass-border: rgba(200, 160, 80, 0.15);
+    --glass-highlight: rgba(255, 220, 150, 0.1);
+    --text-primary: #e8d5b0;
+    --text-secondary: #9a7845;
+  }
+
+  /* Icons */
+  .lucide { width: 1.2em; height: 1.2em; vertical-align: middle; stroke-width: 2px; }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  
+  body {
+    background-color: var(--bg-dark);
+    background-image: 
+      radial-gradient(circle at 15% 50%, rgba(122, 85, 40, 0.15), transparent 25%),
+      radial-gradient(circle at 85% 30%, rgba(200, 152, 64, 0.1), transparent 25%);
+    background-attachment: fixed;
+    color: var(--text-primary);
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* Custom Scrollbar */
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
+  ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--gold-main); }
+
+  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; position: relative; z-index: 1; }
+
+  /* Animated Orbs */
+  .orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; animation: floatOrb 15s ease-in-out infinite alternate; }
+  .orb-1 { width: 400px; height: 400px; background: rgba(200, 152, 64, 0.1); top: -100px; left: 20%; }
+  .orb-2 { width: 300px; height: 300px; background: rgba(122, 85, 40, 0.15); top: 40%; right: 10%; animation-delay: -5s; }
+  @keyframes floatOrb { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); } }
+
+  .hero { text-align: center; padding: 25px 0 20px; position: relative; }
+  .hero-icon { font-size: 2.5em; display: inline-block; margin-bottom: 6px; filter: drop-shadow(0 0 30px rgba(200,155,70,0.5)); animation: float 4s ease-in-out infinite; color: var(--gold-light); }
+  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+  
+  .hero h1 { font-family: 'Playfair Display', serif; font-size: 3.2em; font-weight: 700; color: var(--gold-light); letter-spacing: 2px; text-shadow: 0 0 40px rgba(200,155,70,0.3); margin-bottom: 8px; }
+  .hero-sub { font-size: 1.1em; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.5px; margin-bottom: 24px; }
+  
+
+
+  /* GRID */
+  .grid { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; }
+  
+  .card { padding: 28px; transition: transform 0.3s; }
+  .card:hover { border-color: rgba(200, 160, 80, 0.25); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.7); }
+
+  .card-title { font-family: 'Playfair Display', serif; font-size: 1.1em; color: var(--gold-light); letter-spacing: 1px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
+  .card-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 160, 80, 0.2), transparent); margin-left: 10px; }
+
+  /* STATS BAR */
+  .stats-bar { display: flex; gap: 12px; margin-bottom: 24px; }
+  .stat { background: rgba(0,0,0,0.3); border: 1px solid rgba(200, 160, 80, 0.1); border-radius: 12px; padding: 12px; flex: 1; text-align: center; transition: all 0.3s; }
+  .stat:hover { background: rgba(200, 160, 80, 0.05); border-color: rgba(200, 160, 80, 0.2); }
+  .stat-num { font-family: 'Playfair Display', serif; font-size: 1.6em; color: var(--gold-main); display: block; font-weight: 600; text-shadow: 0 2px 10px rgba(200, 152, 64, 0.2); }
+  .stat-label { font-size: 0.65em; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; margin-top: 4px; display: block; }
+
+  /* INPUTS */
+  .field { margin-bottom: 20px; position: relative; }
+  .field label { display: block; font-size: 0.75em; font-weight: 600; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
+  .field input[type=text], .field textarea { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid rgba(200, 160, 80, 0.15); border-radius: 10px; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 0.95em; padding: 12px 16px; outline: none; transition: all 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); resize: vertical; }
+  .field input[type=text]::placeholder, .field textarea::placeholder { color: rgba(150, 120, 70, 0.4); }
+  .field input[type=text]:focus, .field textarea:focus { border-color: var(--gold-main); background: rgba(0,0,0,0.4); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 0 3px rgba(200, 152, 64, 0.1); }
+
+  /* UPLOAD & RECORD SECTIONS */
+  .section-box { background: rgba(0,0,0,0.2); border: 1px solid rgba(200, 160, 80, 0.08); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
+  .section-box-title { font-size: 0.75em; color: var(--gold-dark); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; font-weight: 600; }
+  
+  .rec-row { display: flex; gap: 10px; margin-bottom: 12px; }
+  .action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 0.85em; font-weight: 500; padding: 10px 14px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
+  
+  .rec-btn { background: rgba(220, 60, 60, 0.1); border: 1px solid rgba(220, 60, 60, 0.2); color: #ff8888; }
+  .rec-btn:hover { background: rgba(220, 60, 60, 0.2); border-color: rgba(220, 60, 60, 0.4); transform: translateY(-1px); }
+  .rec-btn.recording { background: rgba(220, 40, 40, 0.2); border-color: #ff4444; color: #ffaaaa; animation: pulseRecord 1.5s infinite; }
+  @keyframes pulseRecord { 0% { box-shadow: 0 0 0 0 rgba(220, 60, 60, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(220, 60, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 60, 60, 0); } }
+
+  .add-btn { background: rgba(200, 152, 64, 0.05); border: 1px dashed rgba(200, 152, 64, 0.3); color: var(--gold-main); }
+  .add-btn:hover { background: rgba(200, 152, 64, 0.1); border-color: var(--gold-main); border-style: solid; transform: translateY(-1px); }
+  .add-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
+
+  .file-list { display: flex; flex-direction: column; gap: 8px; }
+  .file-item { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(200, 160, 80, 0.15); border-radius: 10px; padding: 8px 12px; animation: slideIn 0.3s ease; }
+  @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+  .file-item .file-icon { font-size: 1.2em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
+  .file-item .file-name { flex: 1; font-size: 0.85em; color: var(--gold-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .file-item .file-dur { font-size: 0.7em; color: var(--text-secondary); background: rgba(0,0,0,0.4); padding: 2px 6px; border-radius: 4px; }
+  .file-item .remove-btn { background: rgba(255, 60, 60, 0.1); border: none; color: #ff6b6b; cursor: pointer; font-size: 1em; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
+  .file-item .remove-btn:hover { background: rgba(255, 60, 60, 0.2); transform: scale(1.1); }
+
+  .empty-state { font-size: 0.8em; color: rgba(150, 120, 70, 0.4); text-align: center; padding: 12px; font-style: italic; background: rgba(0,0,0,0.1); border-radius: 8px; }
+
+  .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
+  .photo-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid rgba(200, 160, 80, 0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3); animation: slideIn 0.3s ease; }
+  .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
+  .photo-thumb:hover img { transform: scale(1.05); }
+  .photo-thumb .remove-btn { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); color: #fff; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 2; }
+  .photo-thumb .remove-btn:hover { background: rgba(220, 40, 40, 0.8); transform: scale(1.1); }
+
+  /* PRIMARY BUTTON */
+  .btn-primary { width: 100%; position: relative; background: linear-gradient(135deg, #a67c00 0%, #bf953f 25%, #fcf6ba 50%, #b38728 75%, #a67c00 100%); background-size: 200% auto; border: none; border-radius: 12px; color: #3a2a12; font-family: 'Playfair Display', serif; font-size: 1.1em; font-weight: 700; letter-spacing: 1px; padding: 16px; cursor: pointer; transition: all 0.4s; box-shadow: 0 4px 20px rgba(200, 152, 64, 0.3); margin-top: 10px; overflow: hidden; }
+  .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: all 0.6s; }
+  .btn-primary:hover:not(:disabled) { background-position: right center; box-shadow: 0 8px 30px rgba(200, 152, 64, 0.4); transform: translateY(-2px); color: #1a1409; }
+  .btn-primary:hover:not(:disabled)::before { left: 100%; }
+  .btn-primary:active:not(:disabled) { transform: translateY(0); }
+  .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(50%); }
+
+  .how { background: rgba(0,0,0,0.2); border: 1px solid rgba(200, 160, 80, 0.1); border-radius: 12px; padding: 14px 18px; margin-top: 24px; font-size: 0.75em; color: var(--text-secondary); line-height: 1.8; text-align: center; }
+  .how em { color: var(--gold-main); font-style: normal; font-weight: 500; }
+
+  /* TABS & OUTPUT */
+  .tab-nav { display: flex; border-bottom: 1px solid rgba(200, 160, 80, 0.15); margin-bottom: 20px; gap: 10px; padding: 0 10px; }
+  .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-family: 'Playfair Display', serif; font-size: 0.95em; font-weight: 600; padding: 12px 16px; cursor: pointer; transition: all 0.3s; margin-bottom: -1px; display: flex; align-items: center; gap: 8px; }
+  .tab-btn:hover { color: var(--gold-light); }
+  .tab-btn.active { color: var(--gold-main); border-bottom-color: var(--gold-main); text-shadow: 0 0 10px rgba(200, 152, 64, 0.3); }
+  .tab-panel { display: none; animation: fadeIn 0.4s ease; }
+  .tab-panel.active { display: block; }
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+
+  .output { width: 100%; min-height: 450px; background: rgba(0,0,0,0.3); border: 1px solid rgba(200, 160, 80, 0.1); border-radius: 12px; color: var(--text-primary); font-family: 'Playfair Display', serif; font-size: 1.1em; line-height: 1.9; padding: 24px; resize: vertical; outline: none; box-shadow: inset 0 4px 12px rgba(0,0,0,0.3); transition: border-color 0.3s; }
+  .output:focus { border-color: rgba(200, 160, 80, 0.3); }
+
+  /* HISTORY CARDS */
+  .history-list { display: flex; flex-direction: column; gap: 12px; max-height: 450px; overflow-y: auto; padding-right: 8px; }
+  .history-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(200, 160, 80, 0.15); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; }
+  .history-card:hover { background: rgba(200, 160, 80, 0.05); border-color: rgba(200, 160, 80, 0.3); }
+  .hist-info { display: flex; flex-direction: column; gap: 4px; }
+  .hist-title { font-family: 'Playfair Display', serif; font-size: 1.1em; color: var(--gold-light); font-weight: 600; }
+  .hist-date { font-size: 0.75em; color: var(--text-secondary); }
+  .hist-btn { background: rgba(200, 152, 64, 0.1); border: 1px solid rgba(200, 152, 64, 0.2); color: var(--gold-main); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 0.85em; }
+  .hist-btn:hover { background: rgba(200, 152, 64, 0.2); color: var(--gold-light); transform: translateY(-1px); }
+
+  /* LOADING STATE */
+  .loading { display: none; text-align: center; padding: 80px 20px; flex-direction: column; align-items: center; justify-content: center; height: 450px; }
+  .loading.show { display: flex; animation: fadeIn 0.5s ease; }
+  
+  .loader-core { width: 80px; height: 80px; position: relative; margin-bottom: 24px; }
+  .loader-core::before, .loader-core::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
+  .loader-core::before { border-top-color: var(--gold-main); border-bottom-color: var(--gold-main); animation: spin 2s linear infinite; }
+  .loader-core::after { border-left-color: var(--gold-light); border-right-color: var(--gold-light); animation: spin 1.5s linear infinite reverse; inset: 10px; }
+  .loader-icon { font-size: 2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 2s ease-in-out infinite; color: var(--gold-main); display: flex; align-items: center; justify-content: center; }
+  @keyframes spin { 100% { transform: rotate(360deg); } }
+  @keyframes pulse { 0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); filter: drop-shadow(0 0 10px rgba(200,150,60,0.5)); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); filter: drop-shadow(0 0 20px rgba(200,150,60,0.8)); } }
+
+  .loading p { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold-main); font-size: 1.2em; letter-spacing: 1px; }
+  .loading-sub { color: var(--text-secondary); font-size: 0.85em; font-family: 'Inter', sans-serif; margin-top: 8px; font-style: normal; text-transform: uppercase; letter-spacing: 2px; }
+  
+  .progress-container { width: 60%; margin: 24px auto 0; background: rgba(0,0,0,0.5); border: 1px solid rgba(200, 160, 80, 0.2); border-radius: 20px; padding: 3px; }
+  .progress-bar { height: 6px; border-radius: 20px; overflow: hidden; position: relative; }
+  .progress-fill { height: 100%; background: linear-gradient(90deg, #7a5528, #c4913f, #f5dfa0, #c4913f); background-size: 300% 100%; border-radius: 20px; width: 0%; box-shadow: 0 0 10px rgba(200, 152, 64, 0.5); animation: loadingGradient 2s infinite linear; }
+  @keyframes loadingGradient { 0% { background-position: 100% 0; } 100% { background-position: -200% 0; } }
+  @keyframes progress { 0% { width: 0%; } 100% { width: 95%; } }
+
+  .footer { text-align: center; margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(200, 160, 80, 0.1); color: var(--text-secondary); font-size: 0.8em; line-height: 2; position: relative; z-index: 1; }
+  .footer em { color: var(--gold-main); font-family: 'Playfair Display', serif; font-size: 1.1em; display: block; margin-top: 8px; }
+
+  @media(max-width: 900px) {
+    .grid { grid-template-columns: 1fr; }
+    .hero h1 { font-size: 2.8em; }
+    .photo-grid { grid-template-columns: repeat(4, 1fr); }
+  }
+  @media(max-width: 600px) {
+    .photo-grid { grid-template-columns: repeat(3, 1fr); }
+    .tab-nav { overflow-x: auto; padding-bottom: 5px; }
+    .tab-btn { white-space: nowrap; }
+    .card { padding: 20px; }
+  }
+</style>
+</head>
+<body>
+<div class="orb orb-1"></div>
+<div class="orb orb-2"></div>
+
+<div class="wrap">
+
+  <div class="hero">
+    <div class="hero-icon"><i data-lucide="book-heart" style="width:1.5em;height:1.5em;stroke-width:1.5px"></i></div>
+    <h1>Memory Keeper</h1>
+    <p class="hero-sub">Preserve voices, faces & stories — forever, privately.</p>
+  </div>
+
+  <div class="grid">
+
+    <!-- INPUT -->
+    <div class="card glass-panel">
+      <div class="card-title"><i data-lucide="user-round"></i> About This Person</div>
+      <div class="field">
+        <label>Their Name</label>
+        <input type="text" id="name" placeholder="e.g. Grandma Rose, Uncle Samuel..." oninput="onNameChange()" onblur="loadHistory()">
+      </div>
+
+      <!-- PROFILE STATS -->
+      <div id="profileStats" style="display:none;margin-bottom:20px">
+        <div class="stats-bar">
+          <div class="stat">
+            <span class="stat-num" id="statSessions">0</span>
+            <span class="stat-label">Sessions</span>
+          </div>
+          <div class="stat">
+            <span class="stat-num" id="statMemories">0</span>
+            <span class="stat-label">Memories</span>
+          </div>
+          <div class="stat">
+            <span class="stat-num" id="statPhotos">0</span>
+            <span class="stat-label">Photos</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-title" style="margin-top:10px"><i data-lucide="plus-circle"></i> Add New Memories</div>
+
+      <!-- AUDIO -->
+      <div class="section-box">
+        <div class="section-box-title" style="display:flex;align-items:center;gap:6px"><i data-lucide="mic"></i> Voice Memories</div>
+        <div class="rec-row">
+          <button class="action-btn rec-btn" id="recBtn" onclick="toggleRecord()">
+            <i data-lucide="mic"></i> Record
+          </button>
+          <div class="action-btn add-btn">
+            <i data-lucide="upload-cloud"></i> Upload Audio
+            <input type="file" accept="audio/*" multiple onchange="addAudioFiles(this)">
+          </div>
+        </div>
+        <div class="file-list" id="audioList">
+          <div class="empty-state" id="audioEmpty">No voice memories added</div>
+        </div>
+      </div>
+
+      <!-- PHOTOS -->
+      <div class="section-box">
+        <div class="section-box-title" style="display:flex;align-items:center;gap:6px"><i data-lucide="camera"></i> Photos</div>
+        <div class="action-btn add-btn" style="width:100%;margin-bottom:12px">
+          <i data-lucide="image-up"></i> Upload Photos
+          <input type="file" accept="image/*" multiple onchange="addPhotoFiles(this)">
+        </div>
+        <div class="photo-grid" id="photoGrid"></div>
+        <div class="empty-state" id="photoEmpty">No photos added</div>
+      </div>
+
+      <!-- TEXT -->
+      <div class="field">
+        <label style="display:flex;align-items:center;gap:6px"><i data-lucide="pen-line"></i> Written Memory</label>
+        <textarea id="text" rows="5" placeholder="Where did they grow up? Who did they love? What made them laugh?"></textarea>
+      </div>
+
+      <button class="btn-primary" id="btn" onclick="generate()" style="display:flex;align-items:center;justify-content:center;gap:8px">
+        <i data-lucide="sparkles"></i> Add Memories & Generate Book
+      </button>
+
+      <div class="how">
+        Each session adds to the profile — the book gets richer over time<br>
+        Voice → <em>Whisper</em> &nbsp;·&nbsp; Photo → <em>BLIP</em> &nbsp;·&nbsp; Story → <em>Qwen2.5-7B</em><br>
+        Stored locally on server · Nothing sent to third parties
+      </div>
+    </div>
+
+    <!-- OUTPUT -->
+    <div class="card glass-panel" style="display: flex; flex-direction: column;">
+      <div class="card-title" style="margin-bottom: 0;"><i data-lucide="book-open-text"></i> The Memory Book</div>
+
+      <div id="loading" class="loading">
+        <div class="loader-core">
+          <div class="loader-icon"><i data-lucide="loader" class="spin-icon" style="animation: spin 2s linear infinite"></i></div>
+        </div>
+        <p>Weaving memories into stories...</p>
+        <span class="loading-sub">Takes about 60–90 seconds</span>
+        <div class="progress-container">
+          <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+        </div>
+      </div>
+
+      <div id="book" style="flex: 1; display: flex; flex-direction: column; margin-top: 20px;">
+        <div class="tab-nav">
+          <button class="tab-btn active" onclick="tab('timeline',this)"><i data-lucide="calendar"></i> Timeline</button>
+          <button class="tab-btn" onclick="tab('story',this)"><i data-lucide="book"></i> Story</button>
+          <button class="tab-btn" onclick="tab('letter',this)"><i data-lucide="mail"></i> Letter</button>
+          <button class="tab-btn" onclick="tab('people',this)"><i data-lucide="users"></i> People</button>
+          <button class="tab-btn" onclick="tab('history',this)"><i data-lucide="history"></i> History</button>
+          <div style="flex: 1;"></div>
+          <button class="tab-btn" style="color: var(--gold-main);" onclick="downloadBook()" title="Download Book"><i data-lucide="download"></i> Download</button>
+        </div>
+        <div id="tab-timeline" class="tab-panel active" style="flex: 1;">
+          <textarea class="output" id="out-timeline" readonly placeholder="Life milestones will appear here..."></textarea>
+        </div>
+        <div id="tab-story" class="tab-panel" style="flex: 1;">
+          <textarea class="output" id="out-story" readonly placeholder="Narrative chapter will appear here..."></textarea>
+        </div>
+        <div id="tab-letter" class="tab-panel" style="flex: 1;">
+          <textarea class="output" id="out-letter" readonly placeholder="Letter to future generations will appear here..."></textarea>
+        </div>
+        <div id="tab-people" class="tab-panel" style="flex: 1;">
+          <textarea class="output" id="out-people" readonly placeholder="Important people will appear here..."></textarea>
+        </div>
+        <div id="tab-history" class="tab-panel" style="flex: 1;">
+          <div class="history-list" id="history-container">
+            <div class="empty-state">Enter a name to load past sessions.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    Built for the Build Small Hackathon 2026 &nbsp;·&nbsp; Qwen2.5-7B · Whisper · BLIP · Modal · HF Spaces<br>
+    <em>"The life of the dead is placed in the memory of the living." — Cicero</em>
+  </div>
+</div>
+
+<script>
+let audioItems = [], photoItems = [];
+let mediaRecorder = null, audioChunks = [], isRecording = false, itemId = 0;
+let currentHistory = [];
+
+async function loadHistory() {
+  const name = document.getElementById('name').value.trim();
+  if (!name) return;
+  try {
+    const resp = await fetch(`/profile/${encodeURIComponent(name)}`);
+    const profile = await resp.json();
+    document.getElementById('profileStats').style.display = 'block';
+    document.getElementById('statSessions').textContent = profile.sessions || 0;
+    document.getElementById('statMemories').textContent = profile.transcripts?.length || 0;
+    document.getElementById('statPhotos').textContent = profile.photo_descriptions?.length || 0;
+    
+    currentHistory = profile.history || [];
+    renderHistory();
+  } catch (e) { console.error(e); }
+}
+
+function renderHistory() {
+  const container = document.getElementById('history-container');
+  if (!container) return;
+  if (currentHistory.length === 0) {
+    container.innerHTML = '<div class="empty-state">No past sessions found for this name.</div>';
+    return;
+  }
+  container.innerHTML = currentHistory.map((h, i) => `
+    <div class="history-card">
+      <div class="hist-info">
+        <span class="hist-title">Session ${h.session || (i+1)}</span>
+        <span class="hist-date"><i data-lucide="clock" style="width:0.9em;height:0.9em"></i> ${h.timestamp || 'Past Session'}</span>
+      </div>
+      <button class="hist-btn" onclick="downloadHistory(${i})" style="display:flex;align-items:center;gap:6px"><i data-lucide="download" style="width:1em;height:1em"></i> Download</button>
+    </div>
+  `).reverse().join('');
+  lucide.createIcons();
+}
+
+function downloadHistory(index) {
+  const h = currentHistory[index];
+  if (!h) return;
+  const name = document.getElementById('name').value.trim() || 'Unknown';
+  const content = `# Memory Book for ${name} (Session ${h.session || (index+1)})\n\n## Timeline\n${h.timeline || ''}\n\n## Story\n${h.chapter || ''}\n\n## Letter\n${h.letter || ''}\n\n## People\n${h.people || ''}`;
+  const blob = new Blob([content], { type: 'text/markdown' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `Memory_Book_${name.replace(/\s+/g, '_')}_Session_${h.session || (index+1)}.md`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function downloadBook() {
+  const name = document.getElementById('name').value.trim() || 'Unknown';
+  const timeline = document.getElementById('out-timeline').value;
+  const story = document.getElementById('out-story').value;
+  const letter = document.getElementById('out-letter').value;
+  const people = document.getElementById('out-people').value;
+  
+  if (!timeline && !story) {
+    alert("No book generated yet to download.");
+    return;
+  }
+  
+  const content = `# Memory Book for ${name}\n\n## Timeline\n${timeline}\n\n## Story\n${story}\n\n## Letter\n${letter}\n\n## People\n${people}`;
+  const blob = new Blob([content], { type: 'text/markdown' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `Memory_Book_${name.replace(/\s+/g, '_')}.md`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function onNameChange() {
+  const name = document.getElementById('name').value.trim();
+  if (!name) {
+    document.getElementById('profileStats').style.display = 'none';
+  }
+}
+
+// ── Recording ──
+async function toggleRecord() {
+  if (!isRecording) {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({audio:true});
+      mediaRecorder = new MediaRecorder(stream);
+      audioChunks = [];
+      mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(audioChunks, {type:'audio/wav'});
+        const ts = new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
+        audioItems.push({id:++itemId, blob, name:`Recording ${ts}`, type:'recorded'});
+        renderAudioList();
+      };
+      mediaRecorder.start();
+      isRecording = true;
+      document.getElementById('recBtn').innerHTML = '<i data-lucide="square"></i> Stop';
+      document.getElementById('recBtn').classList.add('recording');
+      lucide.createIcons();
+    } catch(e) { alert('Microphone access denied.'); }
+  } else {
+    mediaRecorder.stop();
+    mediaRecorder.stream.getTracks().forEach(t => t.stop());
+    isRecording = false;
+    document.getElementById('recBtn').innerHTML = '<i data-lucide="mic"></i> Record';
+    document.getElementById('recBtn').classList.remove('recording');
+    lucide.createIcons();
+  }
+}
+
+function addAudioFiles(input) {
+  Array.from(input.files).forEach(f => {
+    audioItems.push({id:++itemId, blob:f, name:f.name, type:'file'});
+  });
+  input.value = '';
+  renderAudioList();
+}
+
+function removeAudio(id) {
+  audioItems = audioItems.filter(a => a.id !== id);
+  renderAudioList();
+}
+
+function renderAudioList() {
+  const list = document.getElementById('audioList');
+  const empty = document.getElementById('audioEmpty');
+  if (audioItems.length === 0) {
+    list.innerHTML = '';
+    list.appendChild(empty);
+    empty.style.display = 'block';
+    return;
+  }
+  empty.style.display = 'none';
+  list.innerHTML = '';
+  audioItems.forEach(item => {
+    const div = document.createElement('div');
+    div.className = 'file-item';
+    const size = item.blob.size ? `${(item.blob.size/1024).toFixed(0)} KB` : '';
+    const icon = item.type === 'recorded' ? 'mic' : 'file-audio';
+    div.innerHTML = `
+      <i data-lucide="${icon}" style="color:var(--text-secondary)"></i>
+      <span class="file-name">${item.name}</span>
+      <span class="file-dur">${size}</span>
+      <button class="remove-btn" onclick="removeAudio(${item.id})" title="Remove"><i data-lucide="x" style="width:14px;height:14px"></i></button>
+    `;
+    list.appendChild(div);
+  });
+  lucide.createIcons();
+}
+
+// ── Photos ──
+function addPhotoFiles(input) {
+  Array.from(input.files).forEach(f => {
+    photoItems.push({id:++itemId, file:f, url:URL.createObjectURL(f)});
+  });
+  input.value = '';
+  renderPhotoGrid();
+}
+
+function removePhoto(id) {
+  const item = photoItems.find(p => p.id === id);
+  if (item) URL.revokeObjectURL(item.url);
+  photoItems = photoItems.filter(p => p.id !== id);
+  renderPhotoGrid();
+}
+
+function renderPhotoGrid() {
+  const grid = document.getElementById('photoGrid');
+  const empty = document.getElementById('photoEmpty');
+  grid.innerHTML = '';
+  if (photoItems.length === 0) { empty.style.display = 'block'; return; }
+  empty.style.display = 'none';
+  photoItems.forEach(item => {
+    const div = document.createElement('div');
+    div.className = 'photo-thumb';
+    div.innerHTML = `
+      <img src="${item.url}">
+      <button class="remove-btn" onclick="removePhoto(${item.id})" title="Remove"><i data-lucide="x" style="width:14px;height:14px"></i></button>
+    `;
+    grid.appendChild(div);
+  });
+  lucide.createIcons();
+}
+
+// ── Tabs ──
+function tab(id, btn) {
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById('tab-'+id).classList.add('active');
+  btn.classList.add('active');
+}
+
+// ── Generate ──
+async function generate() {
+  const name = document.getElementById('name').value.trim();
+  const text = document.getElementById('text').value.trim();
+  if (!name) { alert('Please enter a name.'); return; }
+  if (!text && audioItems.length === 0 && photoItems.length === 0) {
+    alert('Please add at least one memory.'); return;
+  }
+
+  document.getElementById('btn').disabled = true;
+  document.getElementById('loading').classList.add('show');
+  document.getElementById('book').style.display = 'none';
+  
+  const pf = document.getElementById('progressFill');
+  pf.style.animation = 'none'; pf.offsetHeight;
+  pf.style.animation = 'progress 90s linear forwards, loadingGradient 2s infinite linear';
+
+  const fd = new FormData();
+  fd.append('name', name);
+  fd.append('text', text || '');
+  audioItems.forEach(item => fd.append('audios', item.blob, item.name));
+  photoItems.forEach(item => fd.append('photos', item.file, item.file.name));
+
+  try {
+    const resp = await fetch('/run', {method:'POST', body:fd});
+    const data = await resp.json();
+    if (data.error) { alert('Error: ' + data.error); return; }
+
+    document.getElementById('out-timeline').value = data.timeline || '';
+    document.getElementById('out-story').value = data.chapter || '';
+    document.getElementById('out-letter').value = data.letter || '';
+    document.getElementById('out-people').value = data.people || '';
+
+    // Update stats
+    document.getElementById('profileStats').style.display = 'block';
+    document.getElementById('statSessions').textContent = data.sessions || 0;
+    document.getElementById('statMemories').textContent = data.total_memories || 0;
+    document.getElementById('statPhotos').textContent = data.total_photos || 0;
+
+    // Clear inputs for next session
+    audioItems = []; photoItems = [];
+    renderAudioList(); renderPhotoGrid();
+    document.getElementById('text').value = '';
+
+    loadHistory();
+
+    tab('timeline', document.querySelector('.tab-btn'));
+    lucide.createIcons();
+
+  } catch(e) {
+    alert('Error: ' + e.message);
+  } finally {
+    document.getElementById('btn').disabled = false;
+    document.getElementById('loading').classList.remove('show');
+    document.getElementById('book').style.display = 'flex';
+  }
+}
+</script>
+<script>
+  // Initialize icons on first load
+  lucide.createIcons();
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,2 @@
+gradio>=5.0.0
+requests