Update app.py

app.py

@@ -256,7 +256,41 @@ def build_ui():
         metrics_A = gr.Markdown()
         metrics_B = gr.Markdown()
         metrics_C = gr.Markdown()
-
+          def compute_metrics_all_pairs_ui(images, captions):
+            # Show single spinner for all three
+            yield "<div class='loading-line' style='width:100%; margin-bottom:10px;'></div>"
+    
+            if len(images) < 1 or len(captions) < 3:
+                msg = "<b>Upload 1 image and generate all 3 captions.</b>"
+                yield msg
+                return
+    
+            imgs = images * 3
+            A = compute_metrics_button(imgs, captions, 0, 1)
+            B = compute_metrics_button(imgs, captions, 0, 2)
+            C = compute_metrics_button(imgs, captions, 1, 2)
+    
+            # Side-by-side layout for the metrics
+            html = f"""
+            <div style='display:flex; gap:40px; text-align:left; font-family:monospace;'>
+                <div>
+                    <h4>BLIP-large ↔ ViT-GPT2</h4>
+                    <pre>{A}</pre>
+                </div>
+                <div>
+                    <h4>BLIP-large ↔ BLIP2</h4>
+                    <pre>{B}</pre>
+                </div>
+                <div>
+                    <h4>ViT-GPT2 ↔ BLIP2</h4>
+                    <pre>{C}</pre>
+                </div>
+            </div>
+            """
+            yield html
+        metrics_btn.click(compute_metrics_all_pairs_ui, inputs=[images_state, captions_state],
+                          outputs=[metrics_A, metrics_B, metrics_C])
+        """
         def compute_metrics_all_pairs_ui(images, captions):
             yield ("<div class='loading-line'></div>", "<div class='loading-line'></div>", "<div class='loading-line'></div>")
             if len(images) < 1 or len(captions) < 3:
@@ -270,9 +304,9 @@ def build_ui():
             yield (f"**BLIP-large ↔ ViT-GPT2**<br>{A}",
                    f"**BLIP-large ↔ BLIP2**<br>{B}",
                    f"**ViT-GPT2 ↔ BLIP2**<br>{C}")
-
+            
         metrics_btn.click(compute_metrics_all_pairs_ui, inputs=[images_state, captions_state],
-                          outputs=[metrics_A, metrics_B, metrics_C])
+                          outputs=[metrics_A, metrics_B, metrics_C])"""
 
         # ---------------- NLP ----------------
         gr.Markdown("### NLP Analysis", elem_classes="heading-orange")