style: remove below-the-fold examples grid and integrate clean visual example pills directly inside the main UI under the input card

index.html

@@ -453,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 {
@@ -477,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;
@@ -1818,18 +1851,7 @@
 
     </div>
 
-    <!-- FOLD 2: RECOMMENDED EXAMPLES GRID SECTION (BELOW THE FOLD) -->
-    <div class="examples-section-fold" id="examples-wrapper-element">
-        <div class="examples-container">
-            <div class="section-header">
-                <i data-lucide="sparkles"></i>
-                <span id="examples-section-title">Recommended Cases</span>
-            </div>
-            <div class="examples-grid" id="examples-grid-container">
-                <!-- Will be populated dynamically via renderRecommendedGrid() -->
-            </div>
-        </div>
-    </div>
+
 
     <!-- SLIDE-OUT CONTROLS SIDEBAR -->
     <div class="controls-sidebar" id="sidebar-controls-pane">
@@ -2022,11 +2044,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");
@@ -2111,8 +2129,7 @@
         const centeredImageOutput = document.getElementById("centered-image-output");
         const centeredVideoOutput = document.getElementById("centered-video-output");
         const closeTerminalTrigger = document.getElementById("close-terminal-trigger");
-        const examplesGridContainer = document.getElementById("examples-grid-container");
-        const examplesWrapperElement = document.getElementById("examples-wrapper-element");
+
 
         // Trigger and status panel
         const generateTrigger = document.getElementById("generate-trigger");
@@ -2382,7 +2399,7 @@
 
             // Populate examples
             renderQuickExamples(activeTask);
-            renderRecommendedGrid(activeTask);
+
         }
 
         // --- Populate Resolutions, ratios, durations dynamically ---
@@ -2605,8 +2622,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);
@@ -2614,6 +2674,7 @@
                     
                     quickExamplesWrapper.appendChild(pill);
                 }
+                lucide.createIcons();
             } else {
                 quickExamplesBox.style.display = "none";
             }
@@ -2626,125 +2687,7 @@
             return "/api/file?path=" + encodeURIComponent(filePath);
         }
 
-        // --- Render Visual Examples Grid (Fold 2 below Fold 1) ---
-        function renderRecommendedGrid(task) {
-            if (!examplesGridContainer || !examplesWrapperElement) return;
-
-            let cases = [];
-            let taskTitle = "Recommended Cases";
-            let badgeText = "Task";
-            
-            if (task === "t2v") {
-                cases = appConfig.VIDEO_GENERATION_EXAMPLES;
-                taskTitle = "Video Generation Recommended Cases";
-                badgeText = "Video Gen";
-            } else if (task === "video_edit") {
-                cases = appConfig.VIDEO_EDIT_EXAMPLES;
-                taskTitle = "Video Editing Recommended Cases";
-                badgeText = "Video Edit";
-            } else if (task === "x2t_video") {
-                cases = appConfig.VIDEO_UNDERSTANDING_EXAMPLES;
-                taskTitle = "Video Understanding Recommended Cases";
-                badgeText = "Video QA";
-            } else if (task === "t2i") {
-                cases = appConfig.IMAGE_GENERATION_EXAMPLES;
-                taskTitle = "Image Generation Recommended Cases";
-                badgeText = "Image Gen";
-            } else if (task === "image_edit") {
-                cases = appConfig.IMAGE_EDIT_EXAMPLES;
-                taskTitle = "Image Editing Recommended Cases";
-                badgeText = "Image Edit";
-            } else if (task === "x2t_image") {
-                cases = appConfig.IMAGE_UNDERSTANDING_EXAMPLES;
-                taskTitle = "Image Understanding Recommended Cases";
-                badgeText = "Image QA";
-            }
-
-            const examplesTitleElement = document.getElementById("examples-section-title");
-            if (examplesTitleElement) {
-                examplesTitleElement.textContent = taskTitle;
-            }
-
-            if (cases && cases.length > 0) {
-                examplesWrapperElement.style.display = "block";
-                examplesGridContainer.innerHTML = "";
-
-                cases.forEach(row => {
-                    const promptText = row[0];
-                    if (!promptText) return;
-
-                    // Determine the visual preview media URL
-                    // Index 1 = preview_video, Index 2 = input_video (fallback)
-                    // Index 3 = preview_image, Index 4 = input_image (fallback)
-                    const isVideoType = (task === "t2v" || task === "video_edit" || task === "x2t_video");
-                    let mediaUrl = null;
-                    
-                    if (isVideoType) {
-                        mediaUrl = resolveMediaUrl(row[1] || row[2]);
-                    } else {
-                        mediaUrl = resolveMediaUrl(row[3] || row[4]);
-                    }
-
-                    // Create elegant Card
-                    const card = document.createElement("div");
-                    card.className = "example-card";
-                    
-                    // 1. Media Preview Area (if media exists)
-                    if (mediaUrl) {
-                        const mediaPreview = document.createElement("div");
-                        mediaPreview.className = "example-media-preview";
-                        
-                        if (isVideoType) {
-                            const video = document.createElement("video");
-                            video.src = mediaUrl;
-                            video.muted = true;
-                            video.playsInline = true;
-                            video.loop = true;
-                            
-                            // On hover play preview, on leave pause
-                            card.addEventListener("mouseenter", () => {
-                                video.play().catch(() => {});
-                            });
-                            card.addEventListener("mouseleave", () => {
-                                video.pause();
-                                video.currentTime = 0.5;
-                            });
-                            
-                            mediaPreview.appendChild(video);
-                            video.addEventListener("loadeddata", () => {
-                                video.currentTime = 0.5;
-                            });
-                        } else {
-                            const img = document.createElement("img");
-                            img.src = mediaUrl;
-                            mediaPreview.appendChild(img);
-                        }
-                        card.appendChild(mediaPreview);
-                    }
-
-                    // 2. Task Badge
-                    const badge = document.createElement("div");
-                    badge.className = "example-badge";
-                    badge.textContent = badgeText;
-                    card.appendChild(badge);
-
-                    // 3. Prompt Text
-                    const prompt = document.createElement("div");
-                    prompt.className = "example-prompt";
-                    prompt.textContent = promptText;
-                    card.appendChild(prompt);
 
-                    // 4. Interaction click handler
-                    card.addEventListener("click", () => {
-                        populateExample(row);
-                    });
-
-                    examplesGridContainer.appendChild(card);
-                });
-            } else {
-                examplesWrapperElement.style.display = "none";
-            }
-        }
 
         // --- Helper to calculate height/width based on Aspect Ratio ---
         function calculateDimensions(aspectRatio, isImage) {