Update app.py

app.py

@@ -132,13 +132,13 @@ def process(dataframe, row_number=0):
         submission_names[dataframe.iloc[row_number][f"choice_{i}"]]
         for i in range(len(SUBMISSIONS))
     ]
-    images = [SUBMISSIONS[c][int(image_id)]["images"] for c in choices]
+    images = (SUBMISSIONS[c][int(image_id)]["images"] for c in choices)
 
     prompt = SUBMISSIONS[choices[0]][int(image_id)]["Prompt"]
     prompt = PROMPT_FORMAT.format(prompt)
     counter = f"{row_number + 1}/{NUM_QUESTIONS}"
 
-    return images, prompt, counter
+    return *images, prompt, counter
 
 
 def write_result(user_choice, row_number, dataframe):
@@ -193,7 +193,7 @@ EXPLANATION = """\n\n
 1. Click on 'Start'
 2. A prompt and 4 different images are displayed
 3. Select your favorite image
-4. Click on 'Select'
+4. Click on 'Confirm'
 5. After 10 rounds your favorite diffusion model is displayed
 """
 
@@ -240,7 +240,19 @@ with gr.Blocks() as demo:
         gallery = gr.Gallery(
             label="All images", show_label=False, elem_id="gallery"
         ).style(columns=GALLERY_COLUMN_NUM, object_fit="contain", preview=True)
-        next_button = gr.Button("Select").style(full_width=False)
+        with gr.Blocks():
+            with gr.Row() as images:
+                image_1 = gr.Image(interactive=False)
+                image_2 = gr.Image(interactive=False)
+                image_3 = gr.Image(interactive=False)
+                image_4 = gr.Image(interactive=False)
+            with gr.Row():
+                image1_button = gr.Button("1").style(full_width=False)
+                image2_button = gr.Button("2").style(full_width=False)
+                image3_button = gr.Button("3").style(full_width=False)
+                image4_button = gr.Button("4").style(full_width=False)
+                
+        next_button = gr.Button("Confirm").style(full_width=True)
 
     with gr.Column(visible=False):
         selected_image = gr.Number(label="Selected index", value=-1, precision=0)
@@ -259,7 +271,7 @@ with gr.Blocks() as demo:
         inputs=[row_number, dataframe],
         outputs=[intro_view, result_view, gallery_view, result]
     ).then(
-        fn=process, inputs=[dataframe], outputs=[gallery, prompt, counter]
+        fn=process, inputs=[dataframe], outputs=[image_1, image_2, image_3, image_4, prompt, counter]
     )
 
     gallery.select(
@@ -279,7 +291,7 @@ with gr.Blocks() as demo:
     ).then(
         fn=process,
         inputs=[dataframe, row_number],
-        outputs=[gallery, prompt, counter]
+        outputs=[image_1, image_2, image_3, image_4, prompt, counter]
     ).then(
         fn=lambda x: 0 if x == NUM_QUESTIONS else x,
         inputs=[row_number],