Spaces:

zubair5544
/

anycoder-b58ea680

Running

App Files Files Community

zubair5544 commited on Jan 27

Commit

cfbf2e8

verified ·

1 Parent(s): 55480de

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +617 -563

index.html CHANGED Viewed

@@ -1,561 +1,565 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LTX-Video Inference Studio</title>
-    <!-- Phosphor Icons for modern, clean iconography -->
-    <script src="https://unpkg.com/@phosphor-icons/web"></script>
-    <style>
-        /* --- CSS VARIABLES & RESET --- */
-        :root {
-            --bg-dark: #0f1115;
-            --bg-panel: #181b21;
-            --bg-input: #232730;
-            --primary: #6366f1; /* Indigo */
-            --primary-hover: #4f46e5;
-            --accent: #ec4899; /* Pink */
-            --text-main: #ffffff;
-            --text-muted: #9ca3af;
-            --border: #2d313a;
-            --success: #10b981;
-            --terminal-bg: #000000;
-            --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            --radius-md: 12px;
-            --radius-lg: 16px;
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            outline: none;
-        }
-        body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            font-family: var(--font-sans);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        /* --- HEADER --- */
-        header {
-            height: 60px;
-            background-color: var(--bg-panel);
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            padding: 0 24px;
-            justify-content: space-between;
-        }
-        .brand {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-weight: 700;
-            font-size: 1.1rem;
-            letter-spacing: -0.5px;
-        }
-        .brand i {
-            color: var(--primary);
-            font-size: 1.5rem;
-        }
-        .status-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.85rem;
-            padding: 6px 12px;
-            background: rgba(16, 185, 129, 0.1);
-            color: var(--success);
-            border-radius: 20px;
-            border: 1px solid rgba(16, 185, 129, 0.2);
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            background-color: var(--success);
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
-            70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
-        }
-        /* --- MAIN LAYOUT --- */
-        main {
-            flex: 1;
-            display: grid;
-            grid-template-columns: 350px 1fr;
-            height: calc(100vh - 60px);
-        }
-        /* --- SIDEBAR (CONTROLS) --- */
-        aside {
-            background-color: var(--bg-panel);
-            border-right: 1px solid var(--border);
-            padding: 24px;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-        .control-group {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        .control-group label {
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--text-muted);
-            display: flex;
-            justify-content: space-between;
-        }
-        .value-display {
-            color: var(--primary);
-        }
-        /* Inputs */
-        input[type="text"], textarea, select {
-            background-color: var(--bg-input);
-            border: 1px solid var(--border);
-            color: var(--text-main);
-            padding: 12px;
-            border-radius: var(--radius-md);
-            font-family: var(--font-sans);
-            font-size: 0.95rem;
-            transition: border-color 0.2s;
-        }
-        input[type="text"]:focus, textarea:focus, select:focus {
-            border-color: var(--primary);
-        }
-        textarea {
-            resize: vertical;
-            min-height: 100px;
-        }
-        /* Range Slider */
-        input[type="range"] {
-            -webkit-appearance: none;
-            width: 100%;
-            height: 6px;
-            background: var(--bg-input);
-            border-radius: 3px;
-            outline: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
-            background: var(--primary);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: transform 0.1s;
-        }
-        input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.1);
-        }
-        /* Buttons */
-        .btn {
-            padding: 12px 20px;
-            border-radius: var(--radius-md);
-            border: none;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: all 0.2s;
-            font-size: 0.95rem;
-        }
-        .btn-primary {
-            background-color: var(--primary);
-            color: white;
-            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-        }
-        .btn-primary:hover {
-            background-color: var(--primary-hover);
-            transform: translateY(-1px);
-        }
-        .btn-primary:active {
-            transform: translateY(0);
-        }
-        .btn-primary:disabled {
-            background-color: var(--bg-input);
-            color: var(--text-muted);
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-        .btn-secondary {
-            background-color: var(--bg-input);
-            color: var(--text-main);
-            border: 1px solid var(--border);
-        }
-        .btn-secondary:hover {
-            background-color: var(--border);
-        }
-        /* --- PREVIEW AREA --- */
-        .preview-area {
-            background-color: #000;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 40px;
-            background-image:
-                radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
-                radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 20%);
-        }
-        .video-container {
-            width: 100%;
-            max-width: 800px;
-            aspect-ratio: 16/9;
-            background-color: #1a1a1a;
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-lg);
-            overflow: hidden;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        video {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        /* Placeholder State */
-        .placeholder-state {
-            text-align: center;
-            color: var(--text-muted);
-        }
-        .placeholder-state i {
-            font-size: 4rem;
-            margin-bottom: 16px;
-            opacity: 0.5;
-        }
-        /* Loading Overlay */
-        .loading-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
-            backdrop-filter: blur(5px);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            z-index: 10;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
-        }
-        .loading-overlay.active {
-            opacity: 1;
-            pointer-events: all;
-        }
-        .loader-ring {
-            width: 60px;
-            height: 60px;
-            border: 4px solid var(--bg-input);
-            border-top: 4px solid var(--primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 20px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .loading-text {
-            font-family: var(--font-mono);
-            font-size: 0.9rem;
-            color: var(--text-main);
-            text-align: center;
-        }
-        /* --- TERMINAL / CONSOLE --- */
-        .console-panel {
-            position: absolute;
-            bottom: 24px;
-            right: 24px;
-            width: 600px;
-            height: 300px;
-            background-color: var(--terminal-bg);
-            border-radius: var(--radius-md);
-            border: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            box-shadow: var(--shadow-lg);
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            overflow: hidden;
-            transition: transform 0.3s ease, opacity 0.3s ease;
-        }
-        .console-panel.hidden {
-            transform: translateY(20px);
-            opacity: 0;
-            pointer-events: none;
-        }
-        .console-header {
-            background-color: #1f2937;
-            padding: 8px 16px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #374151;
-            color: #9ca3af;
-        }
-        .console-body {
-            flex: 1;
-            padding: 16px;
-            overflow-y: auto;
-            color: #10b981;
-        }
-        .console-line {
-            margin-bottom: 4px;
-            line-height: 1.4;
-        }
-        .console-line.error { color: #ef4444; }
-        .console-line.warn { color: #f59e0b; }
-        .console-line.info { color: #3b82f6; }
-        /* --- GALLERY --- */
-        .gallery-section {
-            position: absolute;
-            top: 24px;
-            right: 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            align-items: flex-end;
-        }
-        .gallery-item {
-            width: 120px;
-            height: 68px;
-            background-color: #222;
-            border-radius: 8px;
-            overflow: hidden;
-            cursor: pointer;
-            border: 2px solid transparent;
-            transition: all 0.2s;
-            position: relative;
-        }
-        .gallery-item:hover {
-            border-color: var(--primary);
-            transform: scale(1.05);
-        }
-        .gallery-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .gallery-item .badge {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.7);
-            font-size: 0.6rem;
-            padding: 2px 4px;
-            text-align: center;
-        }
-        /* --- RESPONSIVE --- */
-        @media (max-width: 900px) {
-            main {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto 1fr;
-                height: auto;
-                overflow-y: auto;
-            }
-            aside {
-                border-right: none;
-                border-bottom: 1px solid var(--border);
-            }
-            .console-panel {
-                width: 90%;
-                right: 5%;
-                bottom: 10px;
-            }
-            .gallery-section {
-                display: none; /* Hide gallery on mobile to save space */
-            }
-        }
-        .footer-link {
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-        .footer-link:hover {
-            color: var(--text-main);
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <div class="brand">
-            <i class="ph ph-film-strip"></i>
-            <span>LTX-Video <span style="font-weight:400; opacity: 0.7;">Studio</span></span>
-        </div>
-        <div class="status-badge">
-            <div class="status-dot"></div>
-            <span id="status-text">GPU Ready</span>
-        </div>
-    </header>
-    <main>
-        <!-- CONTROLS SIDEBAR -->
-        <aside>
-            <div class="control-group">
-                <label for="prompt-input">Prompt</label>
-                <textarea id="prompt-input" placeholder="A cinematic shot of a cyberpunk city street at night with neon lights reflecting on wet pavement..."></textarea>
-            </div>
-            <div class="control-group">
-                <label>Negative Prompt</label>
-                <input type="text" id="neg-prompt" value="blurry, low quality, distorted, watermark">
-            </div>
-            <div class="control-group">
-                <label>
                     Duration (Frames)
                     <span class="value-display" id="duration-val">129</span>
                 </label>
-                <input type="range" id="duration" min="16" max="129" step="1" value="129">
-            </div>
-            <div class="control-group">
-                <label>
                     Resolution
                     <span class="value-display">512x896</span>
                 </label>
-                <select id="resolution">
                     <option value="512x896">512x896 (Native)</option>
                     <option value="768x1344">768x1344 (HD)</option>
                 </select>
-            </div>
-            <div class="control-group">
-                <label>
                     Seed
                     <button class="btn-secondary" style="padding: 4px 8px; font-size: 0.7rem;" id="random-seed">Random</button>
                 </label>
-                <input type="text" id="seed" value="-1">
-            </div>
-            <div class="control-group" style="margin-top: auto;">
-                <button id="generate-btn" class="btn btn-primary">
                     <i class="ph ph-play-circle"></i>
                     Generate Video
                 </button>
-            </div>
-        </aside>
-        <!-- PREVIEW AREA -->
-        <section class="preview-area">
-            <div class="video-container">
-                <!-- Placeholder -->
-                <div id="placeholder" class="placeholder-state">
-                    <i class="ph ph-video-camera"></i>
-                    <p>Enter a prompt and click Generate to start inference.</p>
-                </div>
-                <!-- Hidden Video Element -->
-                <video id="main-video" controls loop playsinline style="display: none;"></video>
-                <!-- Loading Overlay -->
-                <div id="loading-overlay" class="loading-overlay">
-                    <div class="loader-ring"></div>
-                    <div class="loading-text" id="loading-status">Initializing Environment...</div>
-                </div>
-            </div>
-            <!-- Gallery -->
-            <div class="gallery-section" id="gallery">
-                <!-- Items will be injected here -->
-            </div>
-            <!-- Terminal Console -->
-            <div class="console-panel" id="console-panel">
-                <div class="console-header">
-                    <span><i class="ph ph-terminal-window"></i> Inference Console</span>
-                    <button class="btn-secondary" style="padding: 2px 6px; font-size: 0.7rem;" id="clear-console">Clear</button>
-                </div>
-                <div class="console-body" id="console-body">
-                    <div class="console-line info">> System initialized.</div>
-                    <div class="console-line">> Waiting for user input...</div>
-                </div>
-            </div>
-        </section>
-    </main>
-    <script>
-        /**
-         * LTX-Video Simulation Logic
-         * Handles UI interactions, simulated terminal output, and model loading states.
-         */
         // --- DOM Elements ---
         const generateBtn = document.getElementById('generate-btn');
@@ -566,6 +570,8 @@
         const seedInput = document.getElementById('seed');
         const randomSeedBtn = document.getElementById('random-seed');
         const mainVideo = document.getElementById('main-video');
         const placeholder = document.getElementById('placeholder');
         const loadingOverlay = document.getElementById('loading-overlay');
         const loadingStatus = document.getElementById('loading-status');
@@ -578,12 +584,12 @@
         // --- State ---
         let isGenerating = false;
         let isModelLoaded = false;
         // --- Utilities ---
         const log = (msg, type = 'info') => {
             const line = document.createElement('div');
             line.className = `console-line ${type}`;
-            // Add timestamp
             const time = new Date().toLocaleTimeString('en-US', {hour12: false, hour: "numeric", minute: "numeric", second: "numeric"});
             line.textContent = `[${time}] ${msg}`;
             consoleBody.appendChild(line);
@@ -594,10 +600,6 @@
             consolePanel.classList.remove('hidden');
         };
-        const hideConsole = () => {
-            // Keep it visible but maybe fade out slightly? No, let's keep it visible for "Colab" feel.
-        };
         // --- Event Listeners ---
         // Duration Slider Update
@@ -695,7 +697,7 @@
                     'transformers',
                     'accelerate',
                     'safetensors',
-                    'xformers', // Optional, for optimization
                     'opencv-python'
                 ];
@@ -710,7 +712,6 @@
                     }
                     const pkg = packages[pIndex];
-                    // Randomize speed
                     const delay = Math.random() * 800 + 400;
                     setTimeout(() => {
@@ -725,20 +726,22 @@
             loadingOverlay.classList.remove('active');
             log('Inference complete. Saving video...', 'success');
-            // Generate a fake video using a reliable placeholder or a short loop
-            // Since we can't actually generate a 4GB video in JS, we use a high-quality placeholder
-            // or a procedurally generated canvas. Let's use a nice Unsplash video loop for realism.
-            const randomId = Math.floor(Math.random() * 1000);
-            // Using a tech/cyberpunk themed video loop from Pexels (free CDN)
-            const videoUrl = `https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_25fps.mp4`;
-            // Or a generic abstract loop if that fails, but let's try this one.
-            // Fallback to a placeholder image if video fails, but let's try video first.
-            mainVideo.src = videoUrl;
-            mainVideo.style.display = 'block';
             placeholder.style.display = 'none';
             // Reset UI
             isGenerating = false;
             generateBtn.disabled = false;
@@ -747,16 +750,72 @@
             log('Video rendered successfully.', 'success');
             statusText.textContent = "Inference Complete";
-            addToGallery(videoUrl, prompt);
         }
         function addToGallery(url, prompt) {
             const item = document.createElement('div');
             item.className = 'gallery-item';
-            // Create thumbnail
             const thumb = document.createElement('img');
-            thumb.src = url; // Using same URL for thumbnail
             const badge = document.createElement('div');
             badge.className = 'badge';
@@ -765,16 +824,12 @@
             item.appendChild(thumb);
             item.appendChild(badge);
-            // Click to load back into main player
             item.addEventListener('click', () => {
-                mainVideo.src = url;
-                mainVideo.play();
-                placeholder.style.display = 'none';
-                mainVideo.style.display = 'block';
                 log('Loaded video from gallery.', 'info');
             });
-            // Insert at top
             gallery.insertBefore(item, gallery.firstChild);
         }
@@ -787,7 +842,6 @@
         setTimeout(() => {
             log('Connecting to Hugging Face Hub...', 'info');
         }, 500);
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LTX-Video Inference Studio</title>
+  <!-- Phosphor Icons for modern, clean iconography -->
+  <script src="https://unpkg.com/@phosphor-icons/web"></script>
+  <style>
+    /* --- CSS VARIABLES & RESET --- */
+    :root {
+      --bg-dark: #0f1115;
+      --bg-panel: #181b21;
+      --bg-input: #232730;
+      --primary: #6366f1;
+      --primary-hover: #4f46e5;
+      --accent: #ec4899;
+      --text-main: #ffffff;
+      --text-muted: #9ca3af;
+      --border: #2d313a;
+      --success: #10b981;
+      --terminal-bg: #000000;
+      --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      outline: none;
+    }
+    body {
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      font-family: var(--font-sans);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    /* --- HEADER --- */
+    header {
+      height: 60px;
+      background-color: var(--bg-panel);
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+      justify-content: space-between;
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-weight: 700;
+      font-size: 1.1rem;
+      letter-spacing: -0.5px;
+    }
+    .brand i {
+      color: var(--primary);
+      font-size: 1.5rem;
+    }
+    .status-badge {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.85rem;
+      padding: 6px 12px;
+      background: rgba(16, 185, 129, 0.1);
+      color: var(--success);
+      border-radius: 20px;
+      border: 1px solid rgba(16, 185, 129, 0.2);
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background-color: var(--success);
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+      }
+      70% {
+        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+      }
+    }
+    /* --- MAIN LAYOUT --- */
+    main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 350px 1fr;
+      height: calc(100vh - 60px);
+    }
+    /* --- SIDEBAR (CONTROLS) --- */
+    aside {
+      background-color: var(--bg-panel);
+      border-right: 1px solid var(--border);
+      padding: 24px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .control-group label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      display: flex;
+      justify-content: space-between;
+    }
+    .value-display {
+      color: var(--primary);
+    }
+    /* Inputs */
+    input[type="text"],
+    textarea,
+    select {
+      background-color: var(--bg-input);
+      border: 1px solid var(--border);
+      color: var(--text-main);
+      padding: 12px;
+      border-radius: var(--radius-md);
+      font-family: var(--font-sans);
+      font-size: 0.95rem;
+      transition: border-color 0.2s;
+    }
+    input[type="text"]:focus,
+    textarea:focus,
+    select:focus {
+      border-color: var(--primary);
+    }
+    textarea {
+      resize: vertical;
+      min-height: 100px;
+    }
+    /* Range Slider */
+    input[type="range"] {
+      -webkit-appearance: none;
+      width: 100%;
+      height: 6px;
+      background: var(--bg-input);
+      border-radius: 3px;
+      outline: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: var(--primary);
+      border-radius: 50%;
+      cursor: pointer;
+      transition: transform 0.1s;
+    }
+    input[type="range"]::-webkit-slider-thumb:hover {
+      transform: scale(1.1);
+    }
+    /* Buttons */
+    .btn {
+      padding: 12px 20px;
+      border-radius: var(--radius-md);
+      border: none;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: all 0.2s;
+      font-size: 0.95rem;
+    }
+    .btn-primary {
+      background-color: var(--primary);
+      color: white;
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    }
+    .btn-primary:hover {
+      background-color: var(--primary-hover);
+      transform: translateY(-1px);
+    }
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+    .btn-primary:disabled {
+      background-color: var(--bg-input);
+      color: var(--text-muted);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+    .btn-secondary {
+      background-color: var(--bg-input);
+      color: var(--text-main);
+      border: 1px solid var(--border);
+    }
+    .btn-secondary:hover {
+      background-color: var(--border);
+    }
+    /* --- PREVIEW AREA --- */
+    .preview-area {
+      background-color: #000;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px;
+      background-image:
+        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 20%);
+    }
+    .video-container {
+      width: 100%;
+      max-width: 800px;
+      aspect-ratio: 16/9;
+      background-color: #1a1a1a;
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    video, canvas {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    /* Placeholder State */
+    .placeholder-state {
+      text-align: center;
+      color: var(--text-muted);
+    }
+    .placeholder-state i {
+      font-size: 4rem;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+    /* Loading Overlay */
+    .loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.85);
+      backdrop-filter: blur(5px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s;
+    }
+    .loading-overlay.active {
+      opacity: 1;
+      pointer-events: all;
+    }
+    .loader-ring {
+      width: 60px;
+      height: 60px;
+      border: 4px solid var(--bg-input);
+      border-top: 4px solid var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20px;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    .loading-text {
+      font-family: var(--font-mono);
+      font-size: 0.9rem;
+      color: var(--text-main);
+      text-align: center;
+    }
+    /* --- TERMINAL / CONSOLE --- */
+    .console-panel {
+      position: absolute;
+      bottom: 24px;
+      right: 24px;
+      width: 600px;
+      height: 300px;
+      background-color: var(--terminal-bg);
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      box-shadow: var(--shadow-lg);
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      overflow: hidden;
+      transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+    .console-panel.hidden {
+      transform: translateY(20px);
+      opacity: 0;
+      pointer-events: none;
+    }
+    .console-header {
+      background-color: #1f2937;
+      padding: 8px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #374151;
+      color: #9ca3af;
+    }
+    .console-body {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      color: #10b981;
+    }
+    .console-line {
+      margin-bottom: 4px;
+      line-height: 1.4;
+    }
+    .console-line.error { color: #ef4444; }
+    .console-line.warn { color: #f59e0b; }
+    .console-line.info { color: #3b82f6; }
+    /* --- GALLERY --- */
+    .gallery-section {
+      position: absolute;
+      top: 24px;
+      right: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      align-items: flex-end;
+    }
+    .gallery-item {
+      width: 120px;
+      height: 68px;
+      background-color: #222;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: all 0.2s;
+      position: relative;
+    }
+    .gallery-item:hover {
+      border-color: var(--primary);
+      transform: scale(1.05);
+    }
+    .gallery-item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .gallery-item .badge {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, 0.7);
+      font-size: 0.6rem;
+      padding: 2px 4px;
+      text-align: center;
+    }
+    /* --- RESPONSIVE --- */
+    @media (max-width: 900px) {
+      main {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        height: auto;
+        overflow-y: auto;
+      }
+      aside { border-right: none; border-bottom: 1px solid var(--border); }
+      .console-panel { width: 90%; right: 5%; bottom: 10px; }
+      .gallery-section { display: none; }
+    }
+    .footer-link {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .footer-link:hover { color: var(--text-main); }
+  </style>
 </head>
 <body>
+  <header>
+    <div class="brand">
+      <i class="ph ph-film-strip"></i>
+      <span>LTX-Video <span style="font-weight:400; opacity: 0.7;">Studio</span></span>
+    </div>
+    <div class="status-badge">
+      <div class="status-dot"></div>
+      <span id="status-text">GPU Ready</span>
+    </div>
+  </header>
+  <main>
+    <!-- CONTROLS SIDEBAR -->
+    <aside>
+      <div class="control-group">
+        <label for="prompt-input">Prompt</label>
+        <textarea id="prompt-input" placeholder="A cinematic shot of a cyberpunk city street at night with neon lights reflecting on wet pavement..."></textarea>
+      </div>
+      <div class="control-group">
+        <label>Negative Prompt</label>
+        <input type="text" id="neg-prompt" value="blurry, low quality, distorted, watermark">
+      </div>
+      <div class="control-group">
+        <label>
                     Duration (Frames)
                     <span class="value-display" id="duration-val">129</span>
                 </label>
+        <input type="range" id="duration" min="16" max="129" step="1" value="129">
+      </div>
+      <div class="control-group">
+        <label>
                     Resolution
                     <span class="value-display">512x896</span>
                 </label>
+        <select id="resolution">
                     <option value="512x896">512x896 (Native)</option>
                     <option value="768x1344">768x1344 (HD)</option>
                 </select>
+      </div>
+      <div class="control-group">
+        <label>
                     Seed
                     <button class="btn-secondary" style="padding: 4px 8px; font-size: 0.7rem;" id="random-seed">Random</button>
                 </label>
+        <input type="text" id="seed" value="-1">
+      </div>
+      <div class="control-group" style="margin-top: auto;">
+        <button id="generate-btn" class="btn btn-primary">
                     <i class="ph ph-play-circle"></i>
                     Generate Video
                 </button>
+      </div>
+    </aside>
+    <!-- PREVIEW AREA -->
+    <section class="preview-area">
+      <div class="video-container">
+        <!-- Placeholder -->
+        <div id="placeholder" class="placeholder-state">
+          <i class="ph ph-video-camera"></i>
+          <p>Enter a prompt and click Generate to start inference.</p>
+        </div>
+        <!-- Hidden Video Element -->
+        <video id="main-video" controls loop playsinline style="display: none;"></video>
+        <!-- Canvas for Procedural Generation (Replacing External Video) -->
+        <canvas id="generated-canvas" style="display: none;"></canvas>
+        <!-- Loading Overlay -->
+        <div id="loading-overlay" class="loading-overlay">
+          <div class="loader-ring"></div>
+          <div class="loading-text" id="loading-status">Initializing Environment...</div>
+        </div>
+      </div>
+      <!-- Gallery -->
+      <div class="gallery-section" id="gallery">
+        <!-- Items will be injected here -->
+      </div>
+      <!-- Terminal Console -->
+      <div class="console-panel" id="console-panel">
+        <div class="console-header">
+          <span><i class="ph ph-terminal-window"></i> Inference Console</span>
+          <button class="btn-secondary" style="padding: 2px 6px; font-size: 0.7rem;" id="clear-console">Clear</button>
+        </div>
+        <div class="console-body" id="console-body">
+          <div class="console-line info">> System initialized.</div>
+          <div class="console-line">> Waiting for user input...</div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    /**
+     * LTX-Video Simulation Logic
+     * Handles UI interactions, simulated terminal output, and canvas-based procedural generation.
+     */
         // --- DOM Elements ---
         const generateBtn = document.getElementById('generate-btn');
         const seedInput = document.getElementById('seed');
         const randomSeedBtn = document.getElementById('random-seed');
         const mainVideo = document.getElementById('main-video');
+        const canvas = document.getElementById('generated-canvas');
+        const ctx = canvas.getContext('2d');
         const placeholder = document.getElementById('placeholder');
         const loadingOverlay = document.getElementById('loading-overlay');
         const loadingStatus = document.getElementById('loading-status');
         // --- State ---
         let isGenerating = false;
         let isModelLoaded = false;
+        let animationId = null;
         // --- Utilities ---
         const log = (msg, type = 'info') => {
             const line = document.createElement('div');
             line.className = `console-line ${type}`;
             const time = new Date().toLocaleTimeString('en-US', {hour12: false, hour: "numeric", minute: "numeric", second: "numeric"});
             line.textContent = `[${time}] ${msg}`;
             consoleBody.appendChild(line);
             consolePanel.classList.remove('hidden');
         };
         // --- Event Listeners ---
         // Duration Slider Update
                     'transformers',
                     'accelerate',
                     'safetensors',
+                    'xformers',
                     'opencv-python'
                 ];
                     }
                     const pkg = packages[pIndex];
                     const delay = Math.random() * 800 + 400;
                     setTimeout(() => {
             loadingOverlay.classList.remove('active');
             log('Inference complete. Saving video...', 'success');
+            // Stop any previous animation
+            if (animationId) cancelAnimationFrame(animationId);
+            // Setup Canvas
+            const container = document.querySelector('.video-container');
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight; // 16:9 aspect ratio handling is done in CSS
+            // Hide video, show canvas
+            mainVideo.style.display = 'none';
+            canvas.style.display = 'block';
             placeholder.style.display = 'none';
+            // Start the procedural generation
+            startProceduralAnimation();
             // Reset UI
             isGenerating = false;
             generateBtn.disabled = false;
             log('Video rendered successfully.', 'success');
             statusText.textContent = "Inference Complete";
+            addToGallery(canvas.toDataURL('image/jpeg'), prompt);
+        }
+        function startProceduralAnimation() {
+            let frame = 0;
+            const particles = [];
+            // Create random particles
+            for(let i=0; i<50; i++) {
+                particles.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    vx: (Math.random() - 0.5) * 2,
+                    vy: (Math.random() - 0.5) * 2,
+                    size: Math.random() * 20 + 5,
+                    color: `hsl(${Math.random() * 60 + 200}, 70%, 50%)` // Blue/Purple hues
+                });
+            }
+            function animate() {
+                // Clear with trail effect
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                // Draw background gradient
+                const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+                gradient.addColorStop(0, `hsl(${frame % 360}, 50%, 10%)`);
+                gradient.addColorStop(1, `hsl(${(frame + 60) % 360}, 50%, 10%)`);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                // Draw particles
+                particles.forEach(p => {
+                    p.x += p.vx;
+                    p.y += p.vy;
+                    // Bounce off walls
+                    if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
+                    if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+                    ctx.fillStyle = p.color;
+                    ctx.fill();
+                    ctx.closePath();
+                });
+                // Add some "noise" or "scanlines" for that cinematic feel
+                ctx.fillStyle = "rgba(255, 255, 255, 0.02)";
+                for (let i = 0; i < canvas.height; i += 4) {
+                    ctx.fillRect(0, i, canvas.width, 1);
+                }
+                frame++;
+                animationId = requestAnimationFrame(animate);
+            }
+            animate();
         }
         function addToGallery(url, prompt) {
             const item = document.createElement('div');
             item.className = 'gallery-item';
             const thumb = document.createElement('img');
+            thumb.src = url;
             const badge = document.createElement('div');
             badge.className = 'badge';
             item.appendChild(thumb);
             item.appendChild(badge);
             item.addEventListener('click', () => {
+                // When clicking gallery, we reload the canvas with a new seed/randomness
+                startProceduralAnimation();
                 log('Loaded video from gallery.', 'info');
             });
             gallery.insertBefore(item, gallery.firstChild);
         }
         setTimeout(() => {
             log('Connecting to Hugging Face Hub...', 'info');
         }, 500);
+  </script>
 </body>
 </html>