| <!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"> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> · Photo → <em>BLIP</em> · Story → <em>Qwen2.5-7B</em><br> |
| Stored locally on server · Nothing sent to third parties |
| </div> |
| </div> |
|
|
| |
| <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 · 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'; |
| } |
| } |
| |
| |
| 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(); |
| } |
| |
| |
| 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(); |
| } |
| |
| |
| 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'); |
| } |
| |
| |
| 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 || ''; |
| |
| |
| 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; |
| |
| |
| 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> |
| |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
|
|
