Show species guide during demo

app.py

@@ -61,6 +61,68 @@ MODEL_INFO = [
 DEMO_LEARNING_RATE = 0.05 # don't use default; use something more fun
 DEMO_ALPHA = 0.25
 
+def create_species_guide_content():
+    """Create the species identification guide content"""
+    with gr.Column():
+        gr.Markdown("""
+        # Species Classification Guide
+
+        ### Learn to identify the five wildlife species in this demo.
+
+        ## Jaguar
+        """)
+
+        gr.Image("species_id/jaguar.jpg", label="Jaguar example image", show_label=False)
+
+        gr.Markdown("""
+        The largest cat in the Americas, with a stocky, muscular build and a broad head; its golden coat is patterned with rosettes that often have central spots inside.
+
+        ----
+
+        ## Ocelot
+
+        """)
+
+        gr.Image("species_id/ocelot.jpg", label="Ocelot example image", show_label=False)
+
+        gr.Markdown("""
+        A medium-sized spotted cat about twice the size of a domestic cat, with a slender body, large eyes, and striking chain-link or stripe-like rosettes. It differs from jaguars by its smaller size, leaner build, and more elongated markings.
+
+        ----
+
+        ## Mountain Lion
+        """)
+
+        gr.Image("species_id/mountainlion.jpg", label="Mountain lion example image", show_label=False)
+
+        gr.Markdown("""
+        Also called cougar or puma, this cat has a plain tawny or grayish coat without spots or rosettes. Its long tail and uniformly colored fur distinguish it from jaguars and ocelots.
+
+        ----
+
+        ## Common Eland
+
+        """)
+
+        gr.Image("species_id/commoneland.jpg", label="Eland example image", show_label=False)
+
+        gr.Markdown("""
+        The largest antelope species, with a robust body, spiraled horns on both sexes, and a characteristic dewlap hanging from the throat. It differs from waterbuck by its lighter tan coat, faint body stripes, and massive size.
+
+        ----
+
+        ## Waterbuck
+        """)
+
+        gr.Image("species_id/waterbuck.jpg", label="Waterbuck example image", show_label=False)
+
+        gr.Markdown("""
+        A shaggy, dark brown antelope recognized by its white rump ring and backward-curving horns in males. Smaller and darker than the common eland, waterbuck prefer wet habitats and lack the eland's throat dewlap.
+
+        ----
+
+        """)
+
 # load image metadata
 images_data = []
 for annotation in tqdm(data['annotations'], desc='Loading annotations'):
@@ -669,64 +731,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
 
             # Species guide content (initially hidden)
             with gr.Column(visible=False) as species_guide_content:
-                gr.Markdown("""
-                # Species Classification Guide
-                 
-                ### Learn to identify the five wildlife species in this demo.
-                
-                ## Jaguar
-                """)
-
-                gr.Image("species_id/jaguar.jpg", label="Jaguar example image", show_label=False)
-
-                gr.Markdown("""       
-                The largest cat in the Americas, with a stocky, muscular build and a broad head; its golden coat is patterned with rosettes that often have central spots inside.
-
-                ----
-                
-                ## Ocelot
-                
-                """)
-
-                gr.Image("species_id/ocelot.jpg", label="Ocelot example image", show_label=False)
-
-                gr.Markdown("""
-                A medium-sized spotted cat about twice the size of a domestic cat, with a slender body, large eyes, and striking chain-link or stripe-like rosettes. It differs from jaguars by its smaller size, leaner build, and more elongated markings.
-                            
-                ----
-                            
-                ## Mountain Lion
-                """)
-
-                gr.Image("species_id/mountainlion.jpg", label="Mountain lion example image", show_label=False)
-
-                gr.Markdown("""
-                Also called cougar or puma, this cat has a plain tawny or grayish coat without spots or rosettes. Its long tail and uniformly colored fur distinguish it from jaguars and ocelots.
-                
-                ----
-                            
-                ## Common Eland
-
-                """)
-
-                gr.Image("species_id/commoneland.jpg", label="Eland example image", show_label=False)
-
-                gr.Markdown("""
-                The largest antelope species, with a robust body, spiraled horns on both sexes, and a characteristic dewlap hanging from the throat. It differs from waterbuck by its lighter tan coat, faint body stripes, and massive size.
-
-                ----
-                            
-                ## Waterbuck
-                """)
-
-                gr.Image("species_id/waterbuck.jpg", label="Waterbuck example image", show_label=False)
-
-                gr.Markdown("""
-                A shaggy, dark brown antelope recognized by its white rump ring and backward-curving horns in males. Smaller and darker than the common eland, waterbuck prefer wet habitats and lack the eland's throat dewlap.
-                
-                ----
-
-                """)
+                create_species_guide_content()
 
             # Add spacing before buttons
             gr.HTML("<div style='margin-top: 0.1em;'></div>")
@@ -787,6 +792,16 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
             [Placeholder]
             """)
             selection_help_close = gr.Button("Close", variant="secondary")
+
+    # Species guide popup during demo
+    with gr.Group(visible=False, elem_classes="popup-overlay") as species_guide_popup:
+        with gr.Group(elem_classes="popup-content"):
+            create_species_guide_content()
+
+            # Add spacing before button
+            gr.HTML("<div style='margin-top: 0.1em;'></div>")
+
+            species_guide_close = gr.Button("Go back to demo", variant="primary", size="lg")
     
     # Two panels with bar charts
     with gr.Row():
@@ -845,8 +860,10 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
     if DEBUG_MODE:
         delete_button = gr.Button("🗑️ Delete Current Image", variant="stop", size="lg")
 
-    # Add start over button
-    start_over_button = gr.Button("Start Over", variant="secondary", size="lg")
+    # Add buttons row
+    with gr.Row():
+        view_guide_button = gr.Button("📖 View Species Guide", variant="secondary", size="lg")
+        start_over_button = gr.Button("Start Over", variant="secondary", size="lg")
 
     # Set up button interactions
     def start_demo():
@@ -953,6 +970,12 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
     def hide_selection_help():
         return gr.update(visible=False)
 
+    def show_species_guide_popup():
+        return gr.update(visible=True)
+
+    def hide_species_guide_popup():
+        return gr.update(visible=False)
+
     popup_start_button.click(
         fn=start_demo,
         outputs=[image_display, status_with_help, model_predictions_display, prob_plot, accuracy_plot, popup_overlay, result_display, selection_help_button]
@@ -1004,6 +1027,17 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
         outputs=[selection_help_popup]
     )
 
+    # Species guide popup handlers
+    view_guide_button.click(
+        fn=show_species_guide_popup,
+        outputs=[species_guide_popup]
+    )
+
+    species_guide_close.click(
+        fn=hide_species_guide_popup,
+        outputs=[species_guide_popup]
+    )
+
     for btn in species_buttons:
         btn.click(
             fn=check_answer,