Spaces:

linoyts
/

open-image-generation

Running

App Files Files Community

linoyts HF Staff commited on Dec 30, 2025

Commit

ba60d42

verified ·

1 Parent(s): aa49bd5

Claude on the frontenddd

Browse files

Files changed (1) hide show

index.html +671 -19

index.html CHANGED Viewed

@@ -1,19 +1,671 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Open Image Generation Progress</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0a0a0b;
+            --bg-secondary: #131316;
+            --bg-card: #1a1a1f;
+            --text-primary: #f5f5f7;
+            --text-secondary: #8e8e93;
+            --text-muted: #636366;
+            --accent: #6366f1;
+            --accent-glow: rgba(99, 102, 241, 0.3);
+            --border: #2c2c2e;
+            --year-2022: #f472b6;
+            --year-2023: #fb923c;
+            --year-2024: #4ade80;
+            --year-2025: #60a5fa;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Syne', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        /* Grain overlay */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+            opacity: 0.03;
+            pointer-events: none;
+            z-index: 1000;
+        }
+        /* Header */
+        header {
+            padding: 2rem 3rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            background: rgba(10, 10, 11, 0.85);
+            backdrop-filter: blur(20px);
+            z-index: 100;
+        }
+        .logo {
+            font-size: 1.1rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .logo-icon {
+            width: 32px;
+            height: 32px;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+        .nav-links a {
+            color: inherit;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .nav-links a:hover {
+            color: var(--text-primary);
+        }
+        /* Hero */
+        .hero {
+            padding: 6rem 3rem 4rem;
+            text-align: center;
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        .hero h1 {
+            font-size: clamp(2.5rem, 6vw, 4rem);
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero p {
+            font-size: 1.125rem;
+            color: var(--text-secondary);
+            max-width: 600px;
+            margin: 0 auto 2rem;
+            line-height: 1.6;
+        }
+        /* Prompt Navigation */
+        .prompt-nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            padding: 1.5rem 3rem;
+            border-bottom: 1px solid var(--border);
+            position: sticky;
+            top: 73px;
+            background: rgba(10, 10, 11, 0.9);
+            backdrop-filter: blur(20px);
+            z-index: 99;
+        }
+        .nav-btn {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: 1px solid var(--border);
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            font-size: 1.25rem;
+        }
+        .nav-btn:hover {
+            background: var(--bg-card);
+            border-color: var(--text-muted);
+        }
+        .prompt-indicator {
+            font-family: 'Space Mono', monospace;
+            font-size: 0.875rem;
+            color: var(--text-muted);
+            min-width: 80px;
+            text-align: center;
+        }
+        /* Prompt Display */
+        .prompt-section {
+            padding: 3rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .prompt-label {
+            font-family: 'Space Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 0.75rem;
+        }
+        .prompt-text {
+            font-size: clamp(1.25rem, 3vw, 1.75rem);
+            font-weight: 600;
+            line-height: 1.4;
+            max-width: 900px;
+            margin-bottom: 3rem;
+            color: var(--text-primary);
+        }
+        /* Timeline */
+        .timeline {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 3rem;
+            flex-wrap: wrap;
+        }
+        .timeline-btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 100px;
+            border: 1px solid var(--border);
+            background: transparent;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-family: 'Space Mono', monospace;
+            font-size: 0.8rem;
+            transition: all 0.3s;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .timeline-btn .year {
+            font-weight: 700;
+            font-size: 0.9rem;
+        }
+        .timeline-btn .model {
+            font-size: 0.7rem;
+            opacity: 0.7;
+        }
+        .timeline-btn:hover {
+            border-color: var(--text-muted);
+            color: var(--text-primary);
+        }
+        .timeline-btn.active {
+            background: var(--text-primary);
+            color: var(--bg-primary);
+            border-color: var(--text-primary);
+        }
+        .timeline-btn[data-year="2022"] { --btn-accent: var(--year-2022); }
+        .timeline-btn[data-year="2023"] { --btn-accent: var(--year-2023); }
+        .timeline-btn[data-year="2024"] { --btn-accent: var(--year-2024); }
+        .timeline-btn[data-year="2025"] { --btn-accent: var(--year-2025); }
+        .timeline-btn.active {
+            background: var(--btn-accent);
+            border-color: var(--btn-accent);
+            color: var(--bg-primary);
+        }
+        /* Image Display */
+        .image-container {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+        }
+        .image-card {
+            background: var(--bg-card);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            max-width: 350px;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.5s ease forwards;
+        }
+        .image-card:nth-child(1) { animation-delay: 0s; }
+        .image-card:nth-child(2) { animation-delay: 0.1s; }
+        .image-card:nth-child(3) { animation-delay: 0.2s; }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .image-card:hover {
+            transform: translateY(-4px);
+            border-color: var(--text-muted);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+        .image-card img {
+            width: 100%;
+            aspect-ratio: 1;
+            object-fit: cover;
+            display: block;
+        }
+        .image-meta {
+            padding: 1rem 1.25rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .model-name {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .model-year {
+            font-family: 'Space Mono', monospace;
+            font-size: 0.75rem;
+            padding: 0.25rem 0.75rem;
+            border-radius: 100px;
+            background: var(--bg-secondary);
+        }
+        /* Compare Mode */
+        .view-toggle {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 2rem;
+        }
+        .view-btn {
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+            background: transparent;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all 0.2s;
+        }
+        .view-btn.active {
+            background: var(--bg-card);
+            color: var(--text-primary);
+            border-color: var(--text-muted);
+        }
+        /* Compare Grid */
+        .compare-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .compare-grid .image-card {
+            max-width: none;
+        }
+        .compare-grid .image-card img {
+            aspect-ratio: 1;
+        }
+        /* Footer */
+        footer {
+            padding: 4rem 3rem;
+            border-top: 1px solid var(--border);
+            text-align: center;
+            margin-top: 6rem;
+        }
+        footer p {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+        footer a {
+            color: var(--text-secondary);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            header {
+                padding: 1rem 1.5rem;
+            }
+            .hero {
+                padding: 4rem 1.5rem 2rem;
+            }
+            .prompt-section {
+                padding: 2rem 1.5rem;
+            }
+            .prompt-nav {
+                padding: 1rem 1.5rem;
+            }
+            .timeline {
+                gap: 0.25rem;
+            }
+            .timeline-btn {
+                padding: 0.5rem 1rem;
+            }
+            .nav-links {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <svg class="logo-icon" viewBox="0 0 95 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M47.2119 76.5C54.4037 76.5 60.2119 70.6918 60.2119 63.5C60.2119 56.3082 54.4037 50.5 47.2119 50.5C40.0201 50.5 34.2119 56.3082 34.2119 63.5C34.2119 70.6918 40.0201 76.5 47.2119 76.5Z" fill="#FFD21E"/>
+                <path d="M81.3494 24.5C81.3494 34.165 73.5765 42 63.9119 42C54.2473 42 46.4744 34.165 46.4744 24.5C46.4744 14.835 54.2473 7 63.9119 7C73.5765 7 81.3494 14.835 81.3494 24.5Z" fill="#FF9D00"/>
+                <path d="M47.9494 24.5C47.9494 34.165 40.1765 42 30.5119 42C20.8473 42 13.0744 34.165 13.0744 24.5C13.0744 14.835 20.8473 7 30.5119 7C40.1765 7 47.9494 14.835 47.9494 24.5Z" fill="#FF9D00"/>
+                <path d="M86.7115 46.0001C86.7115 44.0001 85.8304 42.1466 84.2977 40.8775C82.765 39.6083 80.7302 38.9524 78.6511 39.0626C76.572 39.1727 74.6277 40.0391 73.2592 41.4677C71.8908 42.8963 71.2119 44.7636 71.2119 46.7636V52.2365C71.2119 53.0843 71.5469 53.8974 72.1439 54.4975C72.7409 55.0976 73.5508 55.4365 74.3956 55.4365H74.5282C75.373 55.4365 76.1829 55.0976 76.7799 54.4975C77.3769 53.8974 77.7119 53.0843 77.7119 52.2365V46.7636C77.7119 46.2636 77.9119 45.7636 78.2619 45.4136C78.6119 45.0636 79.1119 44.8636 79.6119 44.8636C80.1119 44.8636 80.6119 45.0636 80.9619 45.4136C81.3119 45.7636 81.5119 46.2636 81.5119 46.7636V63.5001C81.5119 65.0913 82.1428 66.6175 83.2681 67.7427C84.3933 68.868 85.9194 69.5001 87.5107 69.5001C87.9028 69.5001 88.2119 69.191 88.2119 68.7989V46.0001H86.7115Z" fill="#FF9D00"/>
+                <path d="M7.71191 46.0001C7.71191 44.0001 8.59307 42.1466 10.1258 40.8775C11.6585 39.6083 13.6932 38.9524 15.7723 39.0626C17.8515 39.1727 19.7957 40.0391 21.1642 41.4677C22.5327 42.8963 23.2119 44.7636 23.2119 46.7636V52.2365C23.2119 53.0843 22.8769 53.8974 22.2799 54.4975C21.6829 55.0976 20.873 55.4365 20.0282 55.4365H19.8956C19.0508 55.4365 18.2409 55.0976 17.6439 54.4975C17.0469 53.8974 16.7119 53.0843 16.7119 52.2365V46.7636C16.7119 46.2636 16.5119 45.7636 16.1619 45.4136C15.8119 45.0636 15.3119 44.8636 14.8119 44.8636C14.3119 44.8636 13.8119 45.0636 13.4619 45.4136C13.1119 45.7636 12.9119 46.2636 12.9119 46.7636V63.5001C12.9119 65.0913 12.281 66.6175 11.1558 67.7427C10.0305 68.868 8.50439 69.5001 6.91309 69.5001C6.52098 69.5001 6.21191 69.191 6.21191 68.7989V46.0001H7.71191Z" fill="#FF9D00"/>
+                <path d="M31.2119 28C32.8688 28 34.2119 26.6569 34.2119 25C34.2119 23.3431 32.8688 22 31.2119 22C29.555 22 28.2119 23.3431 28.2119 25C28.2119 26.6569 29.555 28 31.2119 28Z" fill="#3A3B45"/>
+                <path d="M63.2119 28C64.8688 28 66.2119 26.6569 66.2119 25C66.2119 23.3431 64.8688 22 63.2119 22C61.555 22 60.2119 23.3431 60.2119 25C60.2119 26.6569 61.555 28 63.2119 28Z" fill="#3A3B45"/>
+                <path d="M39.2119 56C39.2119 56 42.2119 62 47.2119 62C52.2119 62 55.2119 56 55.2119 56" stroke="#3A3B45" stroke-width="3" stroke-linecap="round"/>
+            </svg>
+            Open Image Progress
+        </div>
+        <nav class="nav-links">
+            <a href="https://huggingface.co" target="_blank">Hugging Face</a>
+            <a href="https://github.com" target="_blank">GitHub</a>
+        </nav>
+    </header>
+    <section class="hero">
+        <h1>Open-Source Image Generation Has Evolved</h1>
+        <p>Witness the remarkable progress of open image models from 2022 to 2025. Same prompts, different eras.</p>
+    </section>
+    <nav class="prompt-nav">
+        <button class="nav-btn" id="prevPrompt">←</button>
+        <span class="prompt-indicator"><span id="promptNum">1</span> / <span id="totalPrompts">10</span></span>
+        <button class="nav-btn" id="nextPrompt">→</button>
+    </nav>
+    <main class="prompt-section">
+        <div class="prompt-label">Prompt</div>
+        <p class="prompt-text" id="promptText"></p>
+        <div class="view-toggle">
+            <button class="view-btn active" data-view="single">Single Model</button>
+            <button class="view-btn" data-view="compare">Compare All</button>
+        </div>
+        <div class="timeline" id="timeline"></div>
+        <div class="image-container" id="imageContainer"></div>
+    </main>
+    <footer>
+        <p>Built to showcase the progress of open-source image generation models.</p>
+        <p style="margin-top: 0.5rem;">
+            <a href="https://huggingface.co/spaces" target="_blank">Hosted on Hugging Face Spaces</a>
+        </p>
+    </footer>
+    <script>
+        // Data
+        const models = [
+            { id: 'dalle_mini', name: 'DALL-E Mini', year: '2022', folder: 'dalle_mini' },
+            { id: 'sd15', name: 'SD 1.5', year: '2022', folder: 'sd1.5' },
+            { id: 'sdxl', name: 'SDXL', year: '2023', folder: 'sdxl' },
+            { id: 'flux1', name: 'FLUX.1 Dev', year: '2024', folder: 'flux1_dev' },
+            { id: 'qwen', name: 'Qwen-Image', year: '2025', folder: 'qwen_image' },
+        ];
+        const prompts = [
+            {
+                id: 'avocado',
+                text: 'An armchair in the shape of an avocado',
+                file: 'avocado'
+            },
+            {
+                id: 'astronaut',
+                text: 'A photograph of an astronaut riding a horse',
+                file: 'astronaut_rides_horse'
+            },
+            {
+                id: 'coffee',
+                text: 'A coffee shop chalkboard sign that reads "Today\'s Special: Vanilla Latte $4.50"',
+                file: 'coffee_shop'
+            },
+            {
+                id: 'hands',
+                text: 'A close-up photograph of a person\'s hands playing a chord on an acoustic guitar',
+                file: 'hands'
+            },
+            {
+                id: 'fisherman',
+                text: 'Portrait photograph of an elderly fisherman with weathered skin, wearing a wool sweater, soft window light',
+                file: 'fisherman'
+            },
+            {
+                id: 'golden',
+                text: 'A golden retriever wearing red sunglasses sits in a turquoise kayak on a calm lake at sunset. Next to it, an orange tabby cat wearing a small purple top hat looks unimpressed. Mountains reflected in the water, golden hour lighting.',
+                file: 'golden'
+            },
+            {
+                id: 'fox',
+                text: 'A Japanese woodblock print of a fox in a bamboo forest, in the style of Hiroshige',
+                file: 'fox'
+            },
+            {
+                id: 'gameshow',
+                text: 'A man in a business suit standing in front of a large screen, shot from behind-the-scenes perspective of a game show set. The suit is split vertically down the middle: left half bright green, right half bright orange. The screen behind him is also split vertically: left half pink, right half blue. Realistic photography style, professional lighting, behind-the-scenes candid shot, game show studio environment, detailed fabric textures on the suit, crisp color separation',
+                file: 'game_show'
+            },
+            {
+                id: 'whale',
+                text: 'A massive blue whale swimming gracefully through the clouds above a small Italian village, casting a shadow over terracotta rooftops and narrow cobblestone streets. Elderly villagers look up in wonder from a piazza with a fountain. Late afternoon Mediterranean light, photorealistic, cinematic composition, sense of magical realism and scale',
+                file: 'whale'
+            },
+            {
+                id: 'robot',
+                text: 'A hyper-detailed oil painting in the style of the Dutch Golden Age masters, depicting a robot made of polished brass and copper sitting at a wooden table, peeling an orange. Dramatic chiaroscuro lighting from a single window, rich dark background, meticulous attention to metallic reflections and citrus texture, visible brushstrokes, museum quality, Vermeer meets steampunk',
+                file: 'robot'
+            }
+        ];
+        // State
+        let currentPromptIndex = 0;
+        let currentModelIndex = models.length - 1; // Start with latest
+        let viewMode = 'single'; // 'single' or 'compare'
+        // DOM Elements
+        const promptText = document.getElementById('promptText');
+        const promptNum = document.getElementById('promptNum');
+        const totalPrompts = document.getElementById('totalPrompts');
+        const timeline = document.getElementById('timeline');
+        const imageContainer = document.getElementById('imageContainer');
+        const prevBtn = document.getElementById('prevPrompt');
+        const nextBtn = document.getElementById('nextPrompt');
+        const viewBtns = document.querySelectorAll('.view-btn');
+        // Initialize
+        function init() {
+            totalPrompts.textContent = prompts.length;
+            renderTimeline();
+            renderPrompt();
+            setupEventListeners();
+        }
+        function renderTimeline() {
+            timeline.innerHTML = models.map((model, index) => `
+                <button class="timeline-btn ${index === currentModelIndex ? 'active' : ''}"
+                        data-index="${index}"
+                        data-year="${model.year}">
+                    <span class="year">${model.year}</span>
+                    <span class="model">${model.name}</span>
+                </button>
+            `).join('');
+            // Add click handlers
+            document.querySelectorAll('.timeline-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    currentModelIndex = parseInt(btn.dataset.index);
+                    updateTimeline();
+                    renderImages();
+                });
+            });
+        }
+        function updateTimeline() {
+            document.querySelectorAll('.timeline-btn').forEach((btn, index) => {
+                btn.classList.toggle('active', index === currentModelIndex);
+            });
+        }
+        function renderPrompt() {
+            const prompt = prompts[currentPromptIndex];
+            promptText.textContent = prompt.text;
+            promptNum.textContent = currentPromptIndex + 1;
+            renderImages();
+        }
+        function renderImages() {
+            const prompt = prompts[currentPromptIndex];
+            if (viewMode === 'compare') {
+                renderCompareView(prompt);
+            } else {
+                renderSingleView(prompt);
+            }
+        }
+        function renderSingleView(prompt) {
+            const model = models[currentModelIndex];
+            const images = [
+                `${model.folder}/${prompt.file}.png`,
+                `${model.folder}/${prompt.file}_2.png`,
+                `${model.folder}/${prompt.file}_3.png`
+            ];
+            imageContainer.className = 'image-container';
+            imageContainer.innerHTML = images.map((src, i) => `
+                <div class="image-card" style="animation-delay: ${i * 0.1}s">
+                    <img src="${src}" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
+                    <div class="image-meta">
+                        <span class="model-name">${model.name}</span>
+                        <span class="model-year">${model.year}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+        function renderCompareView(prompt) {
+            imageContainer.className = 'image-container compare-grid';
+            imageContainer.innerHTML = models.map((model, i) => `
+                <div class="image-card" style="animation-delay: ${i * 0.1}s">
+                    <img src="${model.folder}/${prompt.file}.png" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
+                    <div class="image-meta">
+                        <span class="model-name">${model.name}</span>
+                        <span class="model-year">${model.year}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+        function setupEventListeners() {
+            prevBtn.addEventListener('click', () => {
+                currentPromptIndex = (currentPromptIndex - 1 + prompts.length) % prompts.length;
+                renderPrompt();
+            });
+            nextBtn.addEventListener('click', () => {
+                currentPromptIndex = (currentPromptIndex + 1) % prompts.length;
+                renderPrompt();
+            });
+            viewBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    viewMode = btn.dataset.view;
+                    viewBtns.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    // Show/hide timeline in compare mode
+                    timeline.style.display = viewMode === 'compare' ? 'none' : 'flex';
+                    renderImages();
+                });
+            });
+            // Keyboard navigation
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowLeft') {
+                    currentPromptIndex = (currentPromptIndex - 1 + prompts.length) % prompts.length;
+                    renderPrompt();
+                } else if (e.key === 'ArrowRight') {
+                    currentPromptIndex = (currentPromptIndex + 1) % prompts.length;
+                    renderPrompt();
+                } else if (e.key === 'ArrowUp' && viewMode === 'single') {
+                    currentModelIndex = Math.min(currentModelIndex + 1, models.length - 1);
+                    updateTimeline();
+                    renderImages();
+                } else if (e.key === 'ArrowDown' && viewMode === 'single') {
+                    currentModelIndex = Math.max(currentModelIndex - 1, 0);
+                    updateTimeline();
+                    renderImages();
+                }
+            });
+        }
+        // Start
+        init();
+    </script>
+</body>
+</html>