Style for reveal box

app.py

@@ -750,7 +750,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                """) as demo:
     # Main page title
     gr.Markdown("# CODA: Consensus-Driven Active Model Selection", elem_classes="text-center")
-    gr.Markdown("Figure out which model is best by actively annotating data.", elem_classes="text-center")
+    gr.Markdown("*Figure out which model is best by actively annotating data.*", elem_classes="text-center")
 
     # Popup component
     with gr.Group(visible=True, elem_classes="popup-overlay") as popup_overlay:
@@ -861,34 +861,68 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                     show_label=False
                 )
         with gr.Column(scale=1):
-            with gr.Group(elem_classes="panel-container"):
-                acc_help_button = gr.Button("?", elem_classes="help-icon", size="sm")
-
-                with gr.Row(elem_classes="flex-grow") as accuracy_title_row:
-                    gr.Markdown("""
-                    ## True Model Accuracies
-
-                    Click below to view the true model accuracies.
-
-                    Note you wouldn't be able to do this in the real model selection setting!
-
-                    """,
-                    elem_classes="text-center compact-predictions flex-grow")
-
-                # Centered reveal button (initially visible)
-                with gr.Group(visible=True) as accuracy_hidden_group:
-                    with gr.Column(elem_classes="flex items-center justify-center h-full"):
-                        reveal_accuracy_button = gr.Button(
-                            "Reveal model accuracies",
-                            variant="primary"
-                        )
-
-                # Accuracy plot (initially hidden)
-                accuracy_plot = gr.Plot(
-                    value=create_accuracy_chart(),
-                    show_label=False,
-                    visible=False
-                )
+            # with gr.Group(elem_classes="panel-container"):
+                # acc_help_button = gr.Button("?", elem_classes="help-icon", size="sm")
+
+                # with gr.Row(elem_classes="flex-grow") as accuracy_title_row:
+                #     gr.Markdown("""
+                #     ## True Model Accuracies
+
+                #     Click below to view the true model accuracies.
+
+                #     Note you wouldn't be able to do this in the real model selection setting!
+
+                #     """,
+                #     elem_classes="text-center compact-predictions flex-grow")
+
+                # # Centered reveal button (initially visible)
+                # with gr.Group(visible=True) as accuracy_hidden_group:
+                #     with gr.Column(elem_classes="flex items-center justify-center h-full"):
+                #         reveal_accuracy_button = gr.Button(
+                #             "Reveal model accuracies",
+                #             variant="primary"
+                #         )
+
+                # # Accuracy plot (initially hidden)
+                # accuracy_plot = gr.Plot(
+                #     value=create_accuracy_chart(),
+                #     show_label=False,
+                #     visible=False
+                # )
+            accuracy_plot = gr.Plot(
+                value=create_accuracy_chart(),
+                show_label=False,
+                visible=False
+            )
+            with gr.Group(visible=True, elem_classes="subtle-outline") as hidden_group:
+                with gr.Column(elem_classes="flex items-center justify-center h-full"):
+                    # Placeholder text when hidden (now first)
+                    gr.HTML("<div style='margin-top: 2.9em;'></div>")
+                    hidden_text0 = gr.Markdown("""
+                        # True model performance is hidden
+                        """,
+                        elem_classes="text-center",)
+                    
+                    gr.HTML("<div style='margin-top: 0.25em;'></div>")
+
+                    hidden_text1 = gr.Markdown("""
+                        In this problem setting the true model performance is assumed to be unknown (that is why we want to perform model selection!)
+                        
+                        However, for this demo, we have computed the actual accuracies of each model in order to evaluate CODA's performance.
+
+                        """,
+                        elem_classes="text-center",
+                    )
+                    gr.HTML("<div style='margin-top: 0.25em;'></div>")
+                    
+                    reveal_accuracy_button = gr.Button(
+                        "🔍 Reveal True Model Accuracies",
+                        variant="secondary",
+                        size="lg"
+                    )
+
+                    gr.HTML("<div style='margin-top: 2.9em;'></div>")
+                    
     
     # Status display with help button
     status_with_help = gr.HTML("", visible=True, elem_classes="status-text")
@@ -1082,10 +1116,10 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
         outputs=[prob_help_popup]
     )
 
-    acc_help_button.click(
-        fn=show_acc_help,
-        outputs=[acc_help_popup]
-    )
+    # acc_help_button.click(
+    #     fn=show_acc_help,
+    #     outputs=[acc_help_popup]
+    # )
 
     acc_help_close.click(
         fn=hide_acc_help,
@@ -1105,7 +1139,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
     # Reveal accuracy button handler
     reveal_accuracy_button.click(
         fn=reveal_accuracies,
-        outputs=[accuracy_plot, accuracy_hidden_group, accuracy_title_row]
+        outputs=[accuracy_plot, hidden_group]
     )
 
     # Species guide popup handlers