Enlarge input & example media previews, add bottom-row preview wrappers, and switch examples fold to a light theme

index.html

@@ -299,10 +299,6 @@
             display: none;
         }
 
-        .viewport-center-trigger.output-mode .center-inline-preview {
-            display: none;
-        }
-
         /* Hide branding when output is showing */
         .viewport-bottom.output-hidden {
             opacity: 0;
@@ -359,67 +355,6 @@
             width: 100%;
         }
 
-        /* Inline media attachment preview inside center prompt card */
-        .center-inline-preview {
-            display: none;
-            width: 100%;
-            border-radius: 10px;
-            overflow: hidden;
-            background: rgba(0, 0, 0, 0.25);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            position: relative;
-            margin-bottom: 6px;
-        }
-
-        .center-inline-preview.visible {
-            display: block;
-        }
-
-        .center-inline-preview-media {
-            width: 100%;
-            max-height: 220px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-
-        .center-inline-preview-media img,
-        .center-inline-preview-media video {
-            width: 100%;
-            max-height: 220px;
-            object-fit: contain;
-        }
-
-        .center-inline-preview-remove {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            width: 26px;
-            height: 26px;
-            border-radius: 50%;
-            background: rgba(0, 0, 0, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.15);
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: var(--transition-fast);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-        }
-
-        .center-inline-preview-remove:hover {
-            background: rgba(239, 68, 68, 0.7);
-            border-color: rgba(239, 68, 68, 0.5);
-        }
-
-        .center-inline-preview-remove i {
-            width: 13px;
-            height: 13px;
-        }
-
         .center-prompt-body textarea.prompt-textarea {
             width: 100%;
             height: 44px;
@@ -518,21 +453,23 @@
         }
 
         .quick-example-pill {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(255, 255, 255, 0.04);
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
             color: rgba(255, 255, 255, 0.65);
-            padding: 6px 12px;
+            padding: 4px 12px 4px 6px;
             border-radius: 100px;
             font-size: 12px;
             font-family: var(--font-inter);
             cursor: pointer;
             transition: var(--transition-fast);
-            max-width: 180px;
+            max-width: 260px;
             white-space: nowrap;
             overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         .quick-example-pill:hover {
@@ -542,6 +479,37 @@
             transform: translateY(-1px);
         }
 
+        .quick-example-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: #000;
+            flex-shrink: 0;
+        }
+
+        .quick-example-thumb-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: rgba(249, 115, 22, 0.1);
+            border: 1px solid rgba(249, 115, 22, 0.2);
+            color: var(--accent-orange);
+            font-size: 9px;
+            flex-shrink: 0;
+        }
+
+        .quick-example-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
         /* Bottom Section elements */
         .viewport-bottom {
             display: flex;
@@ -1521,6 +1489,282 @@
         .examples-section-fold footer a:hover {
             color: var(--accent-orange);
         }
+
+        /* --- NEW PREMIUM UI CUSTOM STYLES --- */
+
+        /* Top Task Segmented Navigation Bar */
+        .top-task-selector-container {
+            position: absolute;
+            top: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-width: 90vw;
+        }
+
+        .top-task-nav-bar {
+            background: rgba(10, 16, 32, 0.45);
+            border: 1px solid var(--glass-border);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 100px;
+            padding: 4px;
+            display: flex;
+            gap: 4px;
+            box-shadow: var(--shadow-premium);
+        }
+
+        .task-nav-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-family: var(--font-outfit);
+            font-weight: 600;
+            font-size: 12.5px;
+            padding: 7px 15px;
+            border-radius: 100px;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .task-nav-btn:hover {
+            color: #fff;
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .task-nav-btn.active {
+            background: var(--accent-gradient);
+            color: #0f172a;
+            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
+        }
+
+        @media (max-width: 900px) {
+            .top-task-selector-container {
+                position: relative;
+                top: 0;
+                left: 0;
+                transform: none;
+                margin: 20px auto 10px;
+                width: calc(100% - 40px);
+            }
+            .top-task-nav-bar {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+                padding: 6px;
+                border-radius: 14px;
+                -webkit-overflow-scrolling: touch;
+            }
+            .top-task-nav-bar::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        /* Input Media Preview inside Center Prompt Card */
+        .input-media-preview {
+            display: flex;
+            flex-direction: column;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 12px;
+            padding: 8px;
+            margin-top: 10px;
+            gap: 8px;
+            animation: slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .input-preview-thumbnail {
+            width: 100%;
+            height: 200px;
+            border-radius: 8px;
+            overflow: hidden;
+            background: rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .input-preview-thumbnail img,
+        .input-preview-thumbnail video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .input-preview-bottom-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .input-preview-info {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            flex-grow: 1;
+        }
+
+        .input-preview-name {
+            font-size: 13px;
+            font-weight: 600;
+            color: #fff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .input-preview-size {
+            font-size: 11px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .input-preview-clear {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            color: var(--text-secondary);
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-fast);
+            flex-shrink: 0;
+        }
+
+        .input-preview-clear:hover {
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+            border-color: rgba(239, 68, 68, 0.3);
+        }
+
+        .input-preview-clear i {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* Ambient Blur Backdrop Effect */
+        .fs-bg-element.ambient-blur {
+            filter: blur(50px) brightness(0.35);
+            transform: scale(1.15);
+            object-fit: cover;
+            transition: opacity 0.8s ease-in-out;
+        }
+
+        /* Centered Output Viewport Container */
+        .centered-output-container {
+            position: fixed;
+            top: 48%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 5;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            width: 80vw;
+            height: 65vh;
+            pointer-events: none;
+        }
+
+        .centered-output-container.active {
+            display: flex;
+            animation: zoom-in-premium 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @keyframes zoom-in-premium {
+            from { transform: translate(-50%, -48%) scale(0.95); opacity: 0; }
+            to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+        }
+
+        .output-media-card {
+            background: rgba(15, 23, 42, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 20px;
+            padding: 10px;
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            max-width: 100%;
+            max-height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            pointer-events: auto;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .centered-media-element {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+            border-radius: 12px;
+            display: none;
+        }
+
+        .centered-media-element.active {
+            display: block;
+        }
+
+        /* Large Centered Text Terminal styling */
+        .terminal-container.centered-large {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 90%;
+            max-width: 800px;
+            max-height: 60vh;
+            margin: 0;
+            z-index: 100;
+            background: rgba(7, 10, 19, 0.85);
+            border: 1px solid rgba(249, 115, 22, 0.3);
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(249, 115, 22, 0.15);
+            font-size: 15px;
+            line-height: 1.7;
+            padding: 28px;
+            display: none;
+            pointer-events: auto;
+        }
+
+        .close-terminal-btn {
+            position: absolute;
+            top: 14px;
+            right: 48px;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--glass-border);
+            color: var(--text-secondary);
+            padding: 6px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .close-terminal-btn:hover {
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+            border-color: rgba(239, 68, 68, 0.3);
+        }
+
+        .close-terminal-btn i {
+            width: 14px;
+            height: 14px;
+        }
     </style>
 </head>
 <body>
@@ -1541,6 +1785,14 @@
         <div class="fs-bg-overlay"></div>
     </div>
 
+    <!-- Centered Visual Output Viewport -->
+    <div class="centered-output-container" id="centered-media-viewport">
+        <div class="output-media-card">
+            <img id="centered-image-output" class="centered-media-element" alt="Lance Generated Image Output">
+            <video id="centered-video-output" class="centered-media-element" loop playsinline controls></video>
+        </div>
+    </div>
+
     <!-- FOLD 1: FLOATING CINEMATIC VIEWPORT LAYER -->
     <div class="cinematic-viewport">
         
@@ -1553,6 +1805,12 @@
                 <span class="brand-name">ByteDance</span>
             </a>
             
+            <!-- Dynamic Top task switcher navigation -->
+            <div class="top-task-selector-container">
+                <div class="top-task-nav-bar" id="top-task-navbar">
+                    <!-- populated dynamically -->
+                </div>
+            </div>
         </header>
 
         <!-- Immersive Center Prompt Console -->
@@ -1562,22 +1820,32 @@
                     <span class="active-task-pill" id="center-task-badge">Text to Video</span>
                 </div>
                 <div class="center-prompt-body">
-                    <!-- Inline media attachment preview -->
-                    <div class="center-inline-preview" id="center-inline-preview">
-                        <div class="center-inline-preview-media" id="center-inline-preview-media">
-                            <!-- JS injects img/video here -->
+                    <textarea class="prompt-textarea" id="prompt-input" placeholder="Describe what you want to generate..."></textarea>
+                    
+                    <!-- Media preview inside the input box -->
+                    <div class="input-media-preview" id="center-media-preview" style="display: none;">
+                        <div class="input-preview-thumbnail" id="center-preview-thumbnail"></div>
+                        <div class="input-preview-bottom-row">
+                            <div class="input-preview-info">
+                                <span class="input-preview-name" id="center-preview-name">file_name.mp4</span>
+                                <span class="input-preview-size" id="center-preview-size">0.0 MB</span>
+                            </div>
+                            <button class="input-preview-clear" id="center-preview-clear" title="Remove attachment">
+                                <i data-lucide="x"></i>
+                            </button>
                         </div>
-                        <button class="center-inline-preview-remove" id="center-inline-preview-remove" title="Remove attachment">
-                            <i data-lucide="x"></i>
-                        </button>
                     </div>
-                    <textarea class="prompt-textarea" id="prompt-input" placeholder="Describe what you want to generate..."></textarea>
                 </div>
                 <div class="center-prompt-footer">
                     <button class="center-options-btn" onclick="toggleSidebar()" title="Configure settings and inputs">
                         <i data-lucide="sliders"></i>
                         <span>Model Controls</span>
                     </button>
+                    <!-- Visual Input attach button for multimodal tasks -->
+                    <button class="center-options-btn" id="center-attach-btn" title="Attach input media (image or video)" style="display: none;">
+                        <i data-lucide="paperclip"></i>
+                        <span>Attach Media</span>
+                    </button>
                     <button class="center-generate-btn" id="generate-trigger">
                         <i data-lucide="sparkles"></i>
                         <span>Generate</span>
@@ -1610,6 +1878,8 @@
 
     </div>
 
+
+
     <!-- SLIDE-OUT CONTROLS SIDEBAR -->
     <div class="controls-sidebar" id="sidebar-controls-pane">
         <div class="panel-title">
@@ -1622,8 +1892,8 @@
             </button>
         </div>
 
-        <!-- Segmented Tab task selectors in sidebar -->
-        <div class="form-group">
+        <!-- Segmented Tab task selectors in sidebar (hidden, synced behind-the-scenes) -->
+        <div class="form-group" style="display: none;">
             <label class="form-label">Task family</label>
             <div class="select-wrapper">
                 <select class="select-control" id="task-select-dropdown">
@@ -1756,6 +2026,9 @@
             <div class="terminal-header">
                 <i data-lucide="terminal"></i> Response Output
             </div>
+            <button class="close-terminal-btn" id="close-terminal-trigger" title="Close response console">
+                <i data-lucide="x"></i>
+            </button>
             <button class="copy-btn" id="copy-clipboard-btn" title="Copy response to clipboard">
                 <i data-lucide="copy"></i>
             </button>
@@ -1800,11 +2073,7 @@
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         
-        function scrollToExamples() {
-            const examplesFold = document.getElementById("examples-wrapper-element");
-            examplesFold.style.display = "block";
-            examplesFold.scrollIntoView({ behavior: "smooth" });
-        }
+
         
         function toggleSidebar() {
             const pane = document.getElementById("sidebar-controls-pane");
@@ -1877,6 +2146,20 @@
         const cfgControl = document.getElementById("cfg-control");
         const cfgVal = document.getElementById("cfg-val");
 
+        // New Visual and Task Switcher Element Caches
+        const topTaskNavbar = document.getElementById("top-task-navbar");
+        const centerAttachBtn = document.getElementById("center-attach-btn");
+        const centerMediaPreview = document.getElementById("center-media-preview");
+        const centerPreviewThumbnail = document.getElementById("center-preview-thumbnail");
+        const centerPreviewName = document.getElementById("center-preview-name");
+        const centerPreviewSize = document.getElementById("center-preview-size");
+        const centerPreviewClear = document.getElementById("center-preview-clear");
+        const centeredMediaViewport = document.getElementById("centered-media-viewport");
+        const centeredImageOutput = document.getElementById("centered-image-output");
+        const centeredVideoOutput = document.getElementById("centered-video-output");
+        const closeTerminalTrigger = document.getElementById("close-terminal-trigger");
+
+
         // Trigger and status panel
         const generateTrigger = document.getElementById("generate-trigger");
         const statusCard = document.getElementById("status-card");
@@ -1923,15 +2206,42 @@
         function initializeUI() {
             if (!appConfig) return;
 
-            // Generate Task dropdown items
+            // Generate Task dropdown items and Top Segmented Nav Switcher
             taskSelectDropdown.innerHTML = "";
+            topTaskNavbar.innerHTML = "";
             appConfig.TASK_CHOICES.forEach((taskLabel, idx) => {
                 const internalTask = appConfig.TASK_LABEL_TO_INTERNAL[taskLabel];
+                
+                // Dropdown setup
                 const opt = document.createElement("option");
                 opt.value = internalTask;
                 opt.textContent = taskLabel;
                 if (idx === 0) opt.selected = true;
                 taskSelectDropdown.appendChild(opt);
+
+                // Top Segmented Pill Button setup
+                const btn = document.createElement("button");
+                btn.className = "task-nav-btn";
+                btn.setAttribute("data-task", internalTask);
+                
+                // Cohesive Lucide icons
+                let iconName = "sparkles";
+                if (internalTask === "t2v") iconName = "video";
+                else if (internalTask === "t2i") iconName = "image";
+                else if (internalTask === "video_edit") iconName = "film";
+                else if (internalTask === "image_edit") iconName = "scissors";
+                else if (internalTask === "x2t_video") iconName = "help-circle";
+                else if (internalTask === "x2t_image") iconName = "help-circle";
+                
+                btn.innerHTML = `<i data-lucide="${iconName}"></i><span>${taskLabel}</span>`;
+                if (idx === 0) btn.classList.add("active");
+                
+                btn.addEventListener("click", () => {
+                    document.querySelectorAll(".task-nav-btn").forEach(b => b.classList.remove("active"));
+                    btn.classList.add("active");
+                    switchTask(internalTask, taskLabel);
+                });
+                topTaskNavbar.appendChild(btn);
             });
 
             // Bind click to task dropdown change
@@ -1992,10 +2302,11 @@
                 }
             });
 
-            // Bind Audio Volume toggles (mute/unmute generated full-screen video background)
+            // Bind Audio Volume toggles (mute/unmute generated videos)
             bgVolumeToggle.addEventListener("click", () => {
                 videoMuted = !videoMuted;
                 bgVideoOutput.muted = videoMuted;
+                centeredVideoOutput.muted = videoMuted;
                 
                 if (videoMuted) {
                     bgVolumeToggle.innerHTML = '<i data-lucide="volume-x"></i>';
@@ -2021,6 +2332,22 @@
                 });
             });
 
+            // Bind Visual attach button inside prompt box to target hidden file selector
+            centerAttachBtn.addEventListener("click", () => {
+                fileSelector.click();
+            });
+
+            // Bind Clear button inside prompt box preview
+            centerPreviewClear.addEventListener("click", (e) => {
+                e.stopPropagation();
+                clearSelectedFile();
+            });
+
+            // Bind Close button inside centered large output terminal
+            closeTerminalTrigger.addEventListener("click", () => {
+                resetOutputViewer();
+            });
+
             // Load initial task
             if (taskSelectDropdown.options.length > 0) {
                 const opt = taskSelectDropdown.options[0];
@@ -2038,6 +2365,15 @@
                 taskSelectDropdown.value = activeTask;
             }
 
+            // Sync top segmented navbar active button
+            document.querySelectorAll(".task-nav-btn").forEach(btn => {
+                if (btn.getAttribute("data-task") === activeTask) {
+                    btn.classList.add("active");
+                } else {
+                    btn.classList.remove("active");
+                }
+            });
+
             // Pulse highlight sidebar panel for feedback
             sidebarControlsPane.classList.add("highlight-pulse");
             setTimeout(() => sidebarControlsPane.classList.remove("highlight-pulse"), 1200);
@@ -2064,13 +2400,14 @@
                 promptInput.value = "";
             }
 
-            // Toggle Input Media upload visibility
+            // Toggle Input Media upload visibility and Center Attach Button
             const isEdit = activeTask === "image_edit" || activeTask === "video_edit";
             const isUnderstanding = activeTask === "x2t_video" || activeTask === "x2t_image";
             const isVideoTask = activeTask === "video_edit" || activeTask === "x2t_video";
             
             if (isEdit || isUnderstanding) {
                 mediaUploadContainer.style.display = "block";
+                centerAttachBtn.style.display = "flex";
                 mediaFieldLabel.textContent = isVideoTask ? "Input Video" : "Input Image";
                 
                 // Customize drag-drop zone instructions
@@ -2082,6 +2419,7 @@
                 dragDropZone.style.display = "block";
             } else {
                 mediaUploadContainer.style.display = "none";
+                centerAttachBtn.style.display = "none";
                 dragDropZone.style.display = "none";
             }
 
@@ -2091,8 +2429,6 @@
             // Populate examples
             renderQuickExamples(activeTask);
 
-            // Hide output displays back to initial placeholders
-            // resetOutputViewer();
         }
 
         // --- Populate Resolutions, ratios, durations dynamically ---
@@ -2140,34 +2476,23 @@
             }
         }
 
-        // --- Inline preview element caches ---
-        const centerInlinePreview = document.getElementById("center-inline-preview");
-        const centerInlinePreviewMedia = document.getElementById("center-inline-preview-media");
-        const centerInlinePreviewRemove = document.getElementById("center-inline-preview-remove");
-
-        // Bind inline preview remove button
-        centerInlinePreviewRemove.addEventListener("click", () => clearSelectedFile());
-
-        // --- Sync inline preview inside center prompt card ---
-        function updateCenterInlinePreview(src, type) {
-            centerInlinePreviewMedia.innerHTML = "";
-            if (!src) {
-                centerInlinePreview.classList.remove("visible");
-                return;
-            }
-            if (type === "video") {
+        // Helper to render thumbnails for either File objects or URL paths
+        function renderThumbnail(wrapperElement, fileOrUrl, isVideoType) {
+            wrapperElement.innerHTML = "";
+            if (isVideoType) {
                 const video = document.createElement("video");
-                video.src = src;
+                video.src = typeof fileOrUrl === "string" ? fileOrUrl : URL.createObjectURL(fileOrUrl);
                 video.muted = true;
                 video.playsInline = true;
-                video.addEventListener("loadeddata", () => { video.currentTime = 0.5; });
-                centerInlinePreviewMedia.appendChild(video);
+                wrapperElement.appendChild(video);
+                video.addEventListener("loadeddata", () => {
+                    video.currentTime = 0.5;
+                });
             } else {
                 const img = document.createElement("img");
-                img.src = src;
-                centerInlinePreviewMedia.appendChild(img);
+                img.src = typeof fileOrUrl === "string" ? fileOrUrl : URL.createObjectURL(fileOrUrl);
+                wrapperElement.appendChild(img);
             }
-            centerInlinePreview.classList.add("visible");
         }
 
         // --- Handle Uploaded Files locally ---
@@ -2175,43 +2500,23 @@
             if (!file) return;
             selectedFile = file;
 
-            // Display file details in preview card
+            const sizeText = `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`;
+            const isVideoType = selectedFile.type.startsWith("video/");
+
+            // 1. Update Controls Sidebar file details & thumbnail
             previewFilename.textContent = selectedFile.name;
-            previewFilesize.textContent = `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`;
+            previewFilesize.textContent = sizeText;
+            renderThumbnail(previewMediaWrapper, selectedFile, isVideoType);
             
-            // Build visual thumbnail preview
-            previewMediaWrapper.innerHTML = "";
-            const fileType = selectedFile.type;
-            const objectUrl = URL.createObjectURL(selectedFile);
-            
-            if (fileType.startsWith("image/")) {
-                const img = document.createElement("img");
-                img.src = objectUrl;
-                previewMediaWrapper.appendChild(img);
-                updateCenterInlinePreview(objectUrl, "image");
-            } else if (fileType.startsWith("video/")) {
-                const video = document.createElement("video");
-                video.src = objectUrl;
-                video.muted = true;
-                video.playsInline = true;
-                previewMediaWrapper.appendChild(video);
-                
-                // Seek to tiny frame to show video thumbnail
-                video.addEventListener("loadeddata", () => {
-                    video.currentTime = 0.5;
-                });
-                updateCenterInlinePreview(objectUrl, "video");
-            } else {
-                const docIcon = document.createElement("div");
-                docIcon.style.color = "var(--text-secondary)";
-                docIcon.innerHTML = '<i data-lucide="file"></i>';
-                previewMediaWrapper.appendChild(docIcon);
-                lucide.createIcons();
-                updateCenterInlinePreview(null, null);
-            }
+            // 2. Update Center Prompt Card file details & thumbnail
+            centerPreviewName.textContent = selectedFile.name;
+            centerPreviewSize.textContent = sizeText;
+            renderThumbnail(centerPreviewThumbnail, selectedFile, isVideoType);
 
+            // Toggle element visibilities
             dragDropZone.style.display = "none";
             filePreviewCard.style.display = "flex";
+            centerMediaPreview.style.display = "flex";
             uploadedFileReference = null;
         }
 
@@ -2220,7 +2525,10 @@
             uploadedFileReference = null;
             fileSelector.value = "";
             filePreviewCard.style.display = "none";
-            updateCenterInlinePreview(null, null);
+            centerMediaPreview.style.display = "none";
+            
+            previewMediaWrapper.innerHTML = "";
+            centerPreviewThumbnail.innerHTML = "";
             
             const isEdit = activeTask === "image_edit" || activeTask === "video_edit";
             const isUnderstanding = activeTask === "x2t_video" || activeTask === "x2t_image";
@@ -2265,35 +2573,41 @@
             const hasImage = exampleRow[4];
 
             if (hasVideo && (activeTask === "video_edit" || activeTask === "x2t_video")) {
-                previewFilename.textContent = hasVideo.split("/").pop();
+                const filename = hasVideo.split("/").pop();
+                
+                // 1. Sidebar Preview
+                previewFilename.textContent = filename;
                 previewFilesize.textContent = "Example Asset";
+                renderThumbnail(previewMediaWrapper, hasVideo, true);
                 
-                previewMediaWrapper.innerHTML = "";
-                const video = document.createElement("video");
-                video.src = hasVideo;
-                video.muted = true;
-                video.playsInline = true;
-                previewMediaWrapper.appendChild(video);
+                // 2. Center Card Preview
+                centerPreviewName.textContent = filename;
+                centerPreviewSize.textContent = "Example Asset";
+                renderThumbnail(centerPreviewThumbnail, hasVideo, true);
                 
                 dragDropZone.style.display = "none";
                 filePreviewCard.style.display = "flex";
+                centerMediaPreview.style.display = "flex";
                 
                 uploadedFileReference = hasVideo;
-                updateCenterInlinePreview(hasVideo, "video");
             } else if (hasImage && (activeTask === "image_edit" || activeTask === "x2t_image")) {
-                previewFilename.textContent = hasImage.split("/").pop();
+                const filename = hasImage.split("/").pop();
+                
+                // 1. Sidebar Preview
+                previewFilename.textContent = filename;
                 previewFilesize.textContent = "Example Asset";
+                renderThumbnail(previewMediaWrapper, hasImage, false);
                 
-                previewMediaWrapper.innerHTML = "";
-                const img = document.createElement("img");
-                img.src = hasImage;
-                previewMediaWrapper.appendChild(img);
+                // 2. Center Card Preview
+                centerPreviewName.textContent = filename;
+                centerPreviewSize.textContent = "Example Asset";
+                renderThumbnail(centerPreviewThumbnail, hasImage, false);
                 
                 dragDropZone.style.display = "none";
                 filePreviewCard.style.display = "flex";
+                centerMediaPreview.style.display = "flex";
                 
                 uploadedFileReference = hasImage;
-                updateCenterInlinePreview(hasImage, "image");
             }
 
             // Trigger reset of viewer output
@@ -2337,8 +2651,51 @@
 
                     const pill = document.createElement("button");
                     pill.className = "quick-example-pill";
-                    pill.textContent = promptText;
-                    pill.title = promptText;
+
+                    // Resolve visual preview URL (Index 1/2 for video, Index 3/4 for image)
+                    const isVideoType = (task === "t2v" || task === "video_edit" || task === "x2t_video");
+                    let mediaUrl = isVideoType ? resolveMediaUrl(row[1] || row[2]) : resolveMediaUrl(row[3] || row[4]);
+
+                    if (mediaUrl) {
+                        if (isVideoType) {
+                            const thumbVideo = document.createElement("video");
+                            thumbVideo.src = mediaUrl;
+                            thumbVideo.className = "quick-example-thumb";
+                            thumbVideo.muted = true;
+                            thumbVideo.playsInline = true;
+                            
+                            // Micro-animation: Hover to play tiny video thumbnail
+                            pill.addEventListener("mouseenter", () => {
+                                thumbVideo.play().catch(() => {});
+                            });
+                            pill.addEventListener("mouseleave", () => {
+                                thumbVideo.pause();
+                                thumbVideo.currentTime = 0.5;
+                            });
+
+                            pill.appendChild(thumbVideo);
+                            thumbVideo.addEventListener("loadeddata", () => {
+                                thumbVideo.currentTime = 0.5;
+                            });
+                        } else {
+                            const thumbImg = document.createElement("img");
+                            thumbImg.src = mediaUrl;
+                            thumbImg.className = "quick-example-thumb";
+                            pill.appendChild(thumbImg);
+                        }
+                    } else {
+                        const fallbackIcon = document.createElement("div");
+                        fallbackIcon.className = "quick-example-thumb-icon";
+                        fallbackIcon.innerHTML = '<i data-lucide="sparkles" style="width:10px;height:10px;"></i>';
+                        pill.appendChild(fallbackIcon);
+                    }
+
+                    // Add text element
+                    const textSpan = document.createElement("span");
+                    textSpan.className = "quick-example-text";
+                    textSpan.textContent = promptText;
+                    textSpan.title = promptText;
+                    pill.appendChild(textSpan);
                     
                     pill.addEventListener("click", () => {
                         populateExample(row);
@@ -2346,11 +2703,21 @@
                     
                     quickExamplesWrapper.appendChild(pill);
                 }
+                lucide.createIcons();
             } else {
                 quickExamplesBox.style.display = "none";
             }
         }
 
+        // Global Helper: resolve a file path to a servable URL
+        function resolveMediaUrl(filePath) {
+            if (!filePath || filePath.trim() === "") return null;
+            if (filePath.startsWith("http")) return filePath;
+            return "/api/file?path=" + encodeURIComponent(filePath);
+        }
+
+
+
         // --- Helper to calculate height/width based on Aspect Ratio ---
         function calculateDimensions(aspectRatio, isImage) {
             let width = 640;
@@ -2587,7 +2954,6 @@
                 if (typeof rawData === "string") {
                     parsed = JSON.parse(rawData);
                 } else if (typeof rawData === "object" && rawData !== null) {
-                    // Already an object (in case Gradio deserializes it)
                     parsed = rawData;
                 } else {
                     console.warn("displayResult: Unexpected rawData type:", typeof rawData);
@@ -2607,13 +2973,6 @@
             const textData  = parsed.text   || "";
             const statusMsg = parsed.status || "";
 
-            // Helper: resolve a file path to a servable URL
-            function resolveMediaUrl(filePath) {
-                if (!filePath || filePath.trim() === "") return null;
-                if (filePath.startsWith("http")) return filePath;
-                return "/api/file?path=" + encodeURIComponent(filePath);
-            }
-
             const videoUrl = resolveMediaUrl(videoPath);
             const imageUrl = resolveMediaUrl(imagePath);
             console.log("Resolved URLs:", { videoUrl, imageUrl, textData, statusMsg });
@@ -2624,27 +2983,41 @@
                 return;
             }
 
-            // Output Video generated: Takes up full-screen background
+            // Output Video generated: Takes up full-screen background as ambient blur + centered sharp preview
             if (videoUrl) {
+                // 1. Ambient Blur Backdrop
                 bgFallback.classList.remove("active");
                 bgImageOutput.classList.remove("active");
                 bgImageOutput.src = "";
                 bgLightboxTrigger.style.display = "none";
 
                 bgVideoOutput.src = videoUrl;
-                bgVideoOutput.classList.add("active");
-                bgVideoOutput.muted = videoMuted;
+                bgVideoOutput.className = "fs-bg-element fs-bg-video ambient-blur active";
+                bgVideoOutput.muted = true; // ambient blur backdrop is always silent
                 bgVideoOutput.play();
 
+                // 2. Centered Sharp Foreground
+                centeredMediaViewport.classList.add("active");
+                centeredImageOutput.classList.remove("active");
+                centeredImageOutput.src = "";
+                
+                centeredVideoOutput.src = videoUrl;
+                centeredVideoOutput.classList.add("active");
+                centeredVideoOutput.muted = videoMuted;
+                centeredVideoOutput.play();
+
                 bgVolumeToggle.style.display = "flex";
                 bgDownloadLink.href = videoUrl;
                 outputActionsCard.style.display = "flex";
                 outputTextContainer.style.display = "none";
+                outputTextContainer.classList.remove("centered-large");
+                
                 enterOutputMode();
                 console.log("Video output displayed:", videoUrl);
             } 
-            // Output Image generated: Takes up full-screen background
+            // Output Image generated: Takes up full-screen background as ambient blur + centered sharp preview
             else if (imageUrl) {
+                // 1. Ambient Blur Backdrop
                 bgFallback.classList.remove("active");
                 bgVideoOutput.classList.remove("active");
                 bgVideoOutput.removeAttribute("src");
@@ -2652,22 +3025,52 @@
                 bgVolumeToggle.style.display = "none";
 
                 bgImageOutput.src = imageUrl;
-                bgImageOutput.classList.add("active");
+                bgImageOutput.className = "fs-bg-element ambient-blur active";
                 bgLightboxTrigger.style.display = "flex";
 
+                // 2. Centered Sharp Foreground
+                centeredMediaViewport.classList.add("active");
+                centeredVideoOutput.classList.remove("active");
+                centeredVideoOutput.removeAttribute("src");
+                try { centeredVideoOutput.load(); } catch (e) {}
+                
+                centeredImageOutput.src = imageUrl;
+                centeredImageOutput.classList.add("active");
+
                 bgDownloadLink.href = imageUrl;
                 outputActionsCard.style.display = "flex";
                 outputTextContainer.style.display = "none";
+                outputTextContainer.classList.remove("centered-large");
+                
                 enterOutputMode();
                 console.log("Image output displayed:", imageUrl);
             } 
-            // Output Text / Question answers: Rendered in styled overlay card on right
+            // Output Text / Question answers: Rendered in enlarged centered panel
             else if (textData) {
+                // Reset visual backgrounds
+                bgFallback.classList.add("active");
+                bgImageOutput.classList.remove("active");
+                bgImageOutput.src = "";
+                bgVideoOutput.classList.remove("active");
+                bgVideoOutput.removeAttribute("src");
+                try { bgVideoOutput.load(); } catch (e) {}
+                
+                centeredMediaViewport.classList.remove("active");
+                centeredImageOutput.classList.remove("active");
+                centeredImageOutput.src = "";
+                centeredVideoOutput.classList.remove("active");
+                centeredVideoOutput.removeAttribute("src");
+
                 outputTextContent.textContent = textData;
+                outputTextContainer.classList.add("centered-large");
                 outputTextContainer.style.display = "block";
+                
                 outputActionsCard.style.display = "none";
+                bgLightboxTrigger.style.display = "none";
+                bgVolumeToggle.style.display = "none";
+                
                 enterOutputMode();
-                console.log("Text output displayed:", textData);
+                console.log("Text output displayed centered:", textData);
             } else {
                 console.warn("displayResult: No usable output found, resetting");
                 resetOutputViewer();
@@ -2676,23 +3079,34 @@
 
         // --- Helper to hide viewer outputs back to empty state ---
         function resetOutputViewer() {
-            // Reset full-screen background elements back to fallback festival crowd
+            // Reset full-screen background elements back to fallback
             bgFallback.classList.add("active");
             
             bgImageOutput.classList.remove("active");
             bgImageOutput.src = "";
+            bgImageOutput.className = "fs-bg-element";
             bgLightboxTrigger.style.display = "none";
             
             bgVideoOutput.classList.remove("active");
             bgVideoOutput.removeAttribute("src");
+            bgVideoOutput.className = "fs-bg-element fs-bg-video";
             try { bgVideoOutput.load(); } catch (e) {}
             bgVolumeToggle.style.display = "none";
 
+            // Reset centered outputs
+            centeredMediaViewport.classList.remove("active");
+            centeredImageOutput.classList.remove("active");
+            centeredImageOutput.src = "";
+            centeredVideoOutput.classList.remove("active");
+            centeredVideoOutput.removeAttribute("src");
+            try { centeredVideoOutput.load(); } catch (e) {}
+
             // Reset actions card and terminal
             outputActionsCard.style.display = "none";
             bgDownloadLink.href = "";
             
             outputTextContainer.style.display = "none";
+            outputTextContainer.classList.remove("centered-large");
             outputTextContent.textContent = "";
 
             exitOutputMode();