Update app.py

app.py

@@ -47,7 +47,7 @@ def check_and_refresh_dataset():
 # Initial dataset load
 load_and_prepare_dataset()
 
-# Load and prepare the dataset (again, as in your original code)
+# (Optional) Load a different dataset for variety, as in your original code:
 dataset = load_dataset(
     "taesiri/PhotoshopRequest-DailyDump",
     split="train",
@@ -79,8 +79,8 @@ reshuffle_dataset()  # Initial shuffle
 def get_next_samples(num_samples=5):
     """
     Fetch 'num_samples' items from the dataset and return
-    the text/markdown + the source/edited images for each.
-    This will produce 3 * num_samples outputs in total.
+    the text + source/edited images for each sample.
+    This yields 3 * num_samples outputs in a fixed order.
     """
     check_and_refresh_dataset()
 
@@ -133,39 +133,50 @@ with gr.Blocks() as demo:
     gr.Markdown(
         """
         This is a preview of the PhotoshopRequest dataset. Each sample represents a Photoshop editing request post.
-        Click the 'Sample New Item' button to retrieve 5 random samples from the dataset (displayed as pairs).
+        Click the 'Sample New Item' button to retrieve **5 random samples** from the dataset.
+        
+        **Layout**: For each sample, you'll see:
+        1. A text block with the post info.
+        2. A row with two images (source on the left, edited on the right).
         """
     )
 
-    # We will create 5 sets of outputs: (markdown, source_image, edited_image)
-    # Each set is in its own column.
+    # We'll define 5 sets of outputs, each is: (Markdown, source_image, edited_image).
+
+    # Sample 1
+    post_info1 = gr.Markdown()
+    with gr.Row():
+        source_image1 = gr.Image(label="Source Image 1")
+        edited_image1 = gr.Image(label="Edited Image 1")
+
+    # Sample 2
+    post_info2 = gr.Markdown()
+    with gr.Row():
+        source_image2 = gr.Image(label="Source Image 2")
+        edited_image2 = gr.Image(label="Edited Image 2")
+
+    # Sample 3
+    post_info3 = gr.Markdown()
+    with gr.Row():
+        source_image3 = gr.Image(label="Source Image 3")
+        edited_image3 = gr.Image(label="Edited Image 3")
+
+    # Sample 4
+    post_info4 = gr.Markdown()
+    with gr.Row():
+        source_image4 = gr.Image(label="Source Image 4")
+        edited_image4 = gr.Image(label="Edited Image 4")
+
+    # Sample 5
+    post_info5 = gr.Markdown()
     with gr.Row():
-        with gr.Column():
-            post_info1 = gr.Markdown()
-            source_image1 = gr.Image(label="Source Image 1")
-            edited_image1 = gr.Image(label="Edited Image 1")
-        with gr.Column():
-            post_info2 = gr.Markdown()
-            source_image2 = gr.Image(label="Source Image 2")
-            edited_image2 = gr.Image(label="Edited Image 2")
-        with gr.Column():
-            post_info3 = gr.Markdown()
-            source_image3 = gr.Image(label="Source Image 3")
-            edited_image3 = gr.Image(label="Edited Image 3")
-        with gr.Column():
-            post_info4 = gr.Markdown()
-            source_image4 = gr.Image(label="Source Image 4")
-            edited_image4 = gr.Image(label="Edited Image 4")
-        with gr.Column():
-            post_info5 = gr.Markdown()
-            source_image5 = gr.Image(label="Source Image 5")
-            edited_image5 = gr.Image(label="Edited Image 5")
+        source_image5 = gr.Image(label="Source Image 5")
+        edited_image5 = gr.Image(label="Edited Image 5")
 
     sample_button = gr.Button("Sample New Item")
     info_md = gr.Markdown()
 
-    # When the button is clicked, get_next_samples returns 15 values (5 * 3),
-    # which we map to our 15 output components in the same order:
+    # Map the outputs in the same order they are returned by get_next_samples
     sample_button.click(
         get_next_samples,
         outputs=[