| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Seedance Outputs</title> |
| <link rel="stylesheet" href="assets/style.css"> |
| </head> |
| <body> |
| <header class="site-header"> |
| <div> |
| <p class="eyebrow">omni-ai-studio</p> |
| <h1>Seedance Outputs</h1> |
| <p class="lede">A structured archive of generated videos, prompts, model settings, and reference assets.</p> |
| </div> |
| </header> |
|
|
| <main> |
| <section class="toolbar" aria-label="Archive summary"> |
| <div><strong id="count">0</strong><span>generations</span></div> |
| <div><strong>Static</strong><span>HTML Space</span></div> |
| <div><strong>Structured</strong><span>metadata + prompts</span></div> |
| </section> |
|
|
| <section id="gallery" class="gallery" aria-live="polite"></section> |
| </main> |
|
|
| <script> |
| async function loadManifest() { |
| const response = await fetch('data/manifest.json'); |
| if (!response.ok) throw new Error('Could not load manifest'); |
| return response.json(); |
| } |
| |
| function text(value) { |
| return String(value ?? '').replace(/[&<>"']/g, ch => ({ |
| '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' |
| }[ch])); |
| } |
| |
| function renderItem(item) { |
| const tags = (item.tags || []).map(tag => `<span>${text(tag)}</span>`).join(''); |
| return ` |
| <article class="entry"> |
| <video src="${text(item.video)}" controls playsinline preload="metadata"></video> |
| <div class="entry-body"> |
| <div class="entry-topline"> |
| <span>${text(item.date)}</span> |
| <span>${text(item.model)}</span> |
| </div> |
| <h2>${text(item.title)}</h2> |
| <p>${text(item.summary)}</p> |
| <dl> |
| <div><dt>Task</dt><dd>${text(item.task_id)}</dd></div> |
| <div><dt>Ratio</dt><dd>${text(item.ratio)}</dd></div> |
| <div><dt>Duration</dt><dd>${text(item.duration_seconds)}s</dd></div> |
| <div><dt>Audio</dt><dd>${text(item.generate_audio)}</dd></div> |
| </dl> |
| <div class="tags">${tags}</div> |
| <nav class="links"> |
| <a href="${text(item.prompt)}">Prompt</a> |
| <a href="${text(item.metadata)}">Metadata</a> |
| <a href="${text(item.references)}">References</a> |
| </nav> |
| </div> |
| </article> |
| `; |
| } |
| |
| loadManifest().then(data => { |
| const items = data.generations || []; |
| document.getElementById('count').textContent = items.length; |
| document.getElementById('gallery').innerHTML = items.map(renderItem).join(''); |
| }).catch(error => { |
| document.getElementById('gallery').innerHTML = `<p class="error">${text(error.message)}</p>`; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
