preference images update

app.py

@@ -8,7 +8,7 @@ import re
 import open_clip
 from optim_utils import optimize_prompt
 from utils import clean_response_gpt, setup_model, init_gpt_api, call_gpt_api, get_refine_msg, clean_cache
-from utils import SCENARIOS, PROMPTS, IMAGES, OPTIONS, T2I_MODELS, INSTRUCTION
+from utils import SCENARIOS, PROMPTS, IMAGES, OPTIONS, T2I_MODELS, INSTRUCTION, IMAGE_OPTIONS
 import spaces #[uncomment to use ZeroGPU]
 import transformers
 import gspread
@@ -274,6 +274,18 @@ def check_evaluation(sim_radio, response):
     
     return True
 
+def select_dislike(like_radio, images_method):
+    if like_radio == IMAGE_OPTIONS[0]:
+        return images_method[0]
+    elif like_radio == IMAGE_OPTIONS[1]:
+        return images_method[1]
+    elif like_radio == IMAGE_OPTIONS[2]:
+        return images_method[2]
+    elif like_radio == IMAGE_OPTIONS[3]:
+        return images_method[3]
+    else:
+        return None
+    
 def redesign(participant, scenario, prompt, sim_radio, response, images_method, active_tab):
     global counter1, counter2, responses_memory, current_task1, current_task2
     method = current_task1 if active_tab == "Task A" else current_task2
@@ -367,6 +379,11 @@ css="""
     max-width: 1000px;
 }
 
+#col-container3 {
+    margin: 0 auto;
+    max-width: 300px;
+}
+
 #button-container {
     display: flex;
     justify-content: center; /* Centers the buttons horizontally */
@@ -418,17 +435,34 @@ with gr.Blocks(theme=gr.themes.Soft(font=[gr.themes.GoogleFont("Inconsolata"), "
                     )
                     next_btn1 = gr.Button("Generate", variant="primary", scale=1, interactive=False, visible=False)
 
-            with gr.Column(elem_id="col-container"):
-                gallery_state1 = gr.State(IMAGES[DEFAULT_SCENARIO]["baseline"])
-                images_method1 = gr.Gallery(show_label=False, columns=[4], rows=[1], elem_id="gallery")
+            with gr.Row():
+                with gr.Column(elem_id="col-container"):
+                    gallery_state1 = gr.State([])
+                    images_method1 = gr.Gallery(show_label=False, columns=[4], rows=[1], height=420, elem_id="gallery")
+                with gr.Column(elem_id="col-container3"):
+                    like_image1 = gr.Image(label="Satisfied Image", width=200, height=200, sources='upload')
+                    dislike_image1 = gr.Image(label="Unsatisfied Image", width=200, height=200, sources='upload')
             with gr.Column(elem_id="col-container2"):
                 gr.Markdown("### 📝 Evaluation")               
                 sim_radio1 = gr.Radio(
                     OPTIONS, 
-                    label="How would you evaluate your satisfaction with the generated images, based on your expectations for the specified scenario?",
+                    label="How would you rate your satisfaction with the generated images, based on your expectations for the specified scenario?",
+                    type="value",
+                    elem_classes=["gradio-radio"]
+                )
+                like_radio1 = gr.Radio(
+                    IMAGE_OPTIONS, 
+                    label="Select the image you are most satisfied.",
+                    type="value",
+                    elem_classes=["gradio-radio"]
+                )
+                dislike_radio1 = gr.Radio(
+                    IMAGE_OPTIONS, 
+                    label="Select the image you are most unsatisfied.",
                     type="value",
                     elem_classes=["gradio-radio"]
                 )
+                
                 response1 = gr.Textbox(
                     label="Verbally describe key differences found in the image pair.",
                     max_lines=1,
@@ -455,21 +489,37 @@ with gr.Blocks(theme=gr.themes.Soft(font=[gr.themes.GoogleFont("Inconsolata"), "
                             scale=4,
                             visible=False
                     )
-            
                     next_btn2 = gr.Button("Generate", variant="primary", scale=1, interactive=False, visible=False)
 
-            with gr.Column(elem_id="col-container"):
-                gallery_state2 = gr.State(IMAGES[DEFAULT_SCENARIO]["ours"])
-                images_method2 = gr.Gallery(show_label=False, columns=[4], rows=[1], elem_id="gallery")
+            with gr.Row():
+                with gr.Column(elem_id="col-container"):
+                    gallery_state2 = gr.State(IMAGES[DEFAULT_SCENARIO]["ours"])
+                    images_method2 = gr.Gallery(height=420, show_label=False, columns=[4], rows=[1], elem_id="gallery")
+                with gr.Column(elem_id="col-container3"):
+                    like_image2 = gr.Image(label="Satisfied Image", width=200, height=200, sources='upload')
+                    dislike_image2 = gr.Image(label="Unsatisfied Image", width=200, height=200, sources='upload')
 
             with gr.Column(elem_id="col-container2"):
                 gr.Markdown("### 📝 Evaluation")
                 sim_radio2 = gr.Radio(
                     OPTIONS, 
-                    label="How would you evaluate your satisfaction with the generated images, based on your expectations for the specified scenario?",
+                    label="How would you rate your satisfaction with the generated images, based on your expectations for the specified scenario?",
+                    type="value",
+                    elem_classes=["gradio-radio"]
+                )
+                like_radio2 = gr.Radio(
+                    IMAGE_OPTIONS, 
+                    label="Select the image you are most satisfied.",
                     type="value",
                     elem_classes=["gradio-radio"]
                 )
+                dislike_radio2 = gr.Radio(
+                    IMAGE_OPTIONS, 
+                    label="Select the image you are most unsatisfied.",
+                    type="value",
+                    elem_classes=["gradio-radio"]
+                )
+                
                 response2 = gr.Textbox(
                     label="Verbally describe key differences found in the image pair.",
                     max_lines=1,
@@ -494,6 +544,11 @@ with gr.Blocks(theme=gr.themes.Soft(font=[gr.themes.GoogleFont("Inconsolata"), "
     next_btn2.click(fn=generate_image, inputs=[participant, scenario, prompt2, gallery_state2, active_tab], outputs=[images_method2])
     sim_radio1.change(fn=check_satisfaction, inputs=[sim_radio1, active_tab], outputs=[submit_btn1, redesign_btn1])
     sim_radio2.change(fn=check_satisfaction, inputs=[sim_radio2, active_tab], outputs=[submit_btn2, redesign_btn2])
+    dislike_radio1.select(fn=select_dislike, inputs=[dislike_radio1, gallery_state1], outputs=[dislike_image1])
+    like_radio1.select(fn=select_dislike, inputs=[like_radio1, gallery_state1], outputs=[like_image1])
+    dislike_radio2.select(fn=select_dislike, inputs=[dislike_radio2, gallery_state2], outputs=[dislike_image2])
+    like_radio2.select(fn=select_dislike, inputs=[like_radio2, gallery_state2], outputs=[like_image2])
+
     redesign_btn1.click(
         fn=redesign, 
         inputs=[participant, scenario, prompt1, sim_radio1, response1, images_method1, active_tab], 

utils.py

@@ -43,7 +43,7 @@ IMAGES = {
 }
 
 OPTIONS = ["Very Unsatisfied", "Unsatisfied", "Slightly Unsatisfied", "Neutral", "Slightly Satisfied", "Satisfied", "Very Satisfied"]
-
+IMAGE_OPTIONS = ["First Image", "Second Image", "Third Image", "Fourth Image", "None of them"]
 INSTRUCTION = "📌 **Instruction**: Now, we want to understand your satisfaction with the images generated. <br /> 📌 Step 1: You will start from evaluating the following images based on the given prompt. <br /> 📌 Step 2: Then please modify the prompt according to your expectations for the given scenario background, and answer the evaluation question **until you are satisfied** with at least one of the images generated below. If you are not satisfied with the generated images, you can repeatedly modify the prompts for at most **5 times**."
 def clean_cache():
     subprocess.run("rm -rf /data-nvme/zerogpu-offload/*", env={}, shell=True)