UI mockup that toggles between grid / detail modes.

app.py

@@ -1,6 +1,5 @@
 #!/usr/bin/env python
 # coding: utf-8
-import os
 import random
 from typing import List
 import gradio as gr
@@ -13,15 +12,41 @@ block = gr.Blocks(css=".container { max-width: 800px; margin: auto; }")
 SELECT_LABEL = "Select as seed"
 selectors: List[gr.Radio] = []
 
-def infer(prompt):
-    print(f"Current selection: {current_selection()}")
+def infer_seeded_image(prompt, seed):
+    return Image.open(f"sample_outputs/seeded_1.png")
+
+def infer_grid(prompt):
     response = defaultdict(list)
     for i in range(1, 7):
         response["images"].append(Image.open(f"sample_outputs/{i}.png"))
         response["seeds"].append(random.randint(0, 2 ** 32 -1))
-    image1.value = response["images"][0]
+
+    # TODO: only run when a selection exists
+    # TODO: get seed to reuse
     return response["images"]
 
+def infer(prompt):
+    """
+    Outputs:
+    - Grid images (list)
+    - Seeded Image (Image or None)
+    - Grid Box with updated visibility
+    - Seeded Box with updated visibility
+    """
+    grid_images = [None] * 6
+    image_with_seed = None
+    visible = (False, False)
+
+    if current_selection() > -1:
+        image_with_seed = infer_seeded_image(prompt, 7667)
+        visible = (False, True)
+    else:
+        grid_images = infer_grid(prompt)
+        visible = (True, False)
+
+    boxes = [gr.Box.update(visible=v) for v in visible]
+    return grid_images + [image_with_seed] + boxes
+
 
 def image_block():
     return gr.Image(
@@ -48,6 +73,12 @@ def current_selection():
     except:
         return -1
 
+def clear_seed():
+    """Update state of Radio buttons, grid, seeded_box"""
+    global selectors_state
+    selectors_state = [''] * 6
+    return selectors_state + [gr.Box.update(visible=True), gr.Box.update(visible=False)]
+
 def radio_block():
     radio = gr.Radio(
         choices=[SELECT_LABEL], interactive=True, show_label=False,
@@ -77,34 +108,45 @@ with block:
                 )
 
         ## Can we create a Component with these, so it can participate as an output?
-        with gr.Row():
-            with gr.Box().style(border=None):
-                image1 = image_block()
-                select1 = radio_block()
-            with gr.Box().style(border=None):
-                image2 = image_block()
-                select2 = radio_block()
-            with gr.Box().style(border=None):
-                image3 = image_block()
-                select3 = radio_block()
-        with gr.Row():
-            with gr.Box().style(border=None):
-                image4 = image_block()
-                select4 = radio_block()
-            with gr.Box().style(border=None):
-                image5 = image_block()
-                select5 = radio_block()
-            with gr.Box().style(border=None):
-                image6 = image_block()
-                select6 = radio_block()
+        with (grid := gr.Box()):
+            with gr.Row():
+                with gr.Box().style(border=None):
+                    image1 = image_block()
+                    select1 = radio_block()
+                with gr.Box().style(border=None):
+                    image2 = image_block()
+                    select2 = radio_block()
+                with gr.Box().style(border=None):
+                    image3 = image_block()
+                    select3 = radio_block()
+            with gr.Row():
+                with gr.Box().style(border=None):
+                    image4 = image_block()
+                    select4 = radio_block()
+                with gr.Box().style(border=None):
+                    image5 = image_block()
+                    select5 = radio_block()
+                with gr.Box().style(border=None):
+                    image6 = image_block()
+                    select6 = radio_block()
 
         images = [image1, image2, image3, image4, image5, image6]
         selectors += [select1, select2, select3, select4, select5, select6]
 
         for radio in selectors:
             radio.change(fn=partial(update_state, radio), inputs=selectors, outputs=selectors)
-            
-        text.submit(infer, inputs=text, outputs=images)
-        btn.click(infer, inputs=text, outputs=images)
+
+    with (seeded_box := gr.Box()):
+        seeded_image = image_block()
+        clear_seed_button = gr.Button("Clear Seed")
+    seeded_box.visible = False
+    clear_seed_button.click(clear_seed, inputs=[], outputs=selectors + [grid, seeded_box])
+
+    all_images = images + [seeded_image]
+    boxes = [grid, seeded_box]
+    infer_outputs = all_images + boxes
+
+    text.submit(infer, inputs=text, outputs=infer_outputs)
+    btn.click(infer, inputs=text, outputs=infer_outputs)
 
 block.launch(enable_queue=False)