grid

app.py

@@ -682,21 +682,21 @@ with gr.Blocks(title="AIQuoteClipGenerator - MCP Edition", theme=gr.themes.Soft(
     - 🎨 **Multiple Variations:** Get different video styles
     """)
     
-    # Example Gallery - Dynamic updates
+    # Example Gallery - Instagram-style grid
     with gr.Accordion("📸 Example Gallery - Recent Videos", open=True):
         gr.Markdown("See what others have created! Updates automatically after generation.")
         
-        # Create a Gallery component that displays as thumbnails in a grid
-        gallery_display = gr.Gallery(
-            label="Recent Generations",
-            show_label=False,
-            columns=3,  # 3 videos per row
-            rows=2,     # 2 rows = 6 videos total
-            height=300, # Smaller height so they don't take over screen
-            object_fit="cover",  # Crop to fit nicely
-            allow_preview=True,   # Click to see full video
-            preview=True
-        )
+        # First row - 3 videos
+        with gr.Row():
+            gallery_video1 = gr.Video(label="", height=300, show_label=False, interactive=False)
+            gallery_video2 = gr.Video(label="", height=300, show_label=False, interactive=False)
+            gallery_video3 = gr.Video(label="", height=300, show_label=False, interactive=False)
+        
+        # Second row - 3 videos
+        with gr.Row():
+            gallery_video4 = gr.Video(label="", height=300, show_label=False, interactive=False)
+            gallery_video5 = gr.Video(label="", height=300, show_label=False, interactive=False)
+            gallery_video6 = gr.Video(label="", height=300, show_label=False, interactive=False)
     
     # Function to load gallery videos
     def load_gallery_videos():
@@ -707,7 +707,13 @@ with gr.Blocks(title="AIQuoteClipGenerator - MCP Edition", theme=gr.themes.Soft(
         existing_videos = sorted(glob.glob(f"{gallery_output_dir}/*.mp4"), 
                                 key=os.path.getmtime, reverse=True)[:6]
         
-        return existing_videos if existing_videos else []
+        # Return 6 videos (None for empty slots)
+        videos = [None] * 6
+        for i, video_path in enumerate(existing_videos):
+            if i < 6:
+                videos[i] = video_path
+        
+        return videos
     
     gr.Markdown("---")
     gr.Markdown("## 🎯 Generate Your Own Quote Video")
@@ -793,21 +799,28 @@ with gr.Blocks(title="AIQuoteClipGenerator - MCP Edition", theme=gr.themes.Soft(
         v2 = videos[1] if len(videos) > 1 else None
         v3 = videos[2] if len(videos) > 2 else None
         
-        # Load updated gallery
-        updated_gallery = load_gallery_videos()
+        # Load updated gallery (6 videos)
+        gallery_vids = load_gallery_videos()
         
-        return status, v1, v2, v3, updated_gallery
+        return [status, v1, v2, v3] + gallery_vids
     
     generate_btn.click(
         process_and_display, 
         inputs=[niche, style, num_variations], 
-        outputs=[output, video1, video2, video3, gallery_display]
+        outputs=[
+            output, video1, video2, video3,
+            gallery_video1, gallery_video2, gallery_video3,
+            gallery_video4, gallery_video5, gallery_video6
+        ]
     )
     
     # Load gallery on page load
     demo.load(
         load_gallery_videos,
-        outputs=[gallery_display]
+        outputs=[
+            gallery_video1, gallery_video2, gallery_video3,
+            gallery_video4, gallery_video5, gallery_video6
+        ]
     )
 
 if __name__ == "__main__":