Update app.py

app.py

@@ -114,13 +114,25 @@ def load_example(model_name, images, prompt):
     return model_name, images, prompt
 
 # Create the second demo
-with gr.Blocks() as demo_vqascore_ranking_beta:
+with gr.Blocks(css="""
+    .input-gallery .gallery-item img {
+        max-width: 100px;
+        height: auto;
+    }
+    .ranked-gallery .gallery-item img {
+        max-width: 100px;
+        height: auto;
+    }
+    .ranked-gallery .gallery-item div {
+        font-size: 20px;
+    }
+""") as demo_vqascore_ranking_beta:
     gr.Markdown("# VQAScore Ranking\nThis model ranks a gallery of images based on their similarity to a text prompt.")
     model_dropdown = gr.Dropdown(["clip-flant5-xl", "clip-flant5-xxl"], label="Model Name")
-    gallery = gr.Gallery(label="Generated Images", elem_id="input-gallery").style(grid=(2, 2), height="200px")
+    gallery = gr.Gallery(label="Generated Images", elem_id="input-gallery", columns=3, height=200, allow_preview=True)
     prompt = gr.Textbox(label="Prompt")
     rank_button = gr.Button("Rank Images")
-    ranked_gallery = gr.Gallery(label="Ranked Images with Scores", elem_id="ranked-gallery").style(grid=(2, 2), height="200px")
+    ranked_gallery = gr.Gallery(label="Ranked Images with Scores", elem_id="ranked-gallery", columns=3, height=200, allow_preview=True)
     
     rank_button.click(fn=rank_images, inputs=[model_dropdown, gallery, prompt], outputs=ranked_gallery)