Dynamic upper right window height

app.py

@@ -770,7 +770,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
             That is, CODA uses predictions from candidate models to guide the labeling process, querying you (a species identification expert)
             for labels on a select few images that will most efficiently differentiate between your candidate machine learning models.
 
-            This demo lets you try CODA yourself! First, become a species identification expert by reading our classification guide
+            This demo lets you try CODA yourself! First, **become a species identification expert by reading our classification guide**
             so that you will be equipped to provide ground truth labels. Then, watch as CODA narrows down the best model over time
             as you provide labels for the query images. You will see that with your input CODA is able to identify the best model candidate
             with as few as ten (correctly) labeled images.
@@ -896,8 +896,10 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
             )
             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>")
+                    
+                    # example of how to add spacing:
+                    # gr.HTML("<div style='margin-top: 2.9em;'></div>")
+
                     hidden_text0 = gr.Markdown("""
                         # True model performance is hidden 
                         """,
@@ -915,19 +917,26 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                     )
                     gr.HTML("<div style='margin-top: 0.25em;'></div>")
 
+                    # with gr.Row():
+                    #     with gr.Column(scale=2):
+                    #         pass
+                    #     with gr.Column(scale=1, min_width=100):
+                    #         reveal_accuracy_button = gr.Button(
+                    #             "🔍 Reveal",
+                    #             variant="secondary",
+                    #             size="lg"
+                    #         )
+                    #     with gr.Column(scale=2):
+                    #         pass
                     with gr.Row():
-                        with gr.Column(scale=2):
-                            pass
-                        with gr.Column(scale=2, min_width=200):
-                            reveal_accuracy_button = gr.Button(
-                                "🔍 Reveal Model Accuracies",
+                        reveal_accuracy_button = gr.Button(
+                                "🔍 Reveal True Model Accuracies",
                                 variant="secondary",
                                 size="lg"
                             )
-                        with gr.Column(scale=2):
-                            pass
 
-                    gr.HTML("<div style='margin-top: 2.9em;'></div>")
+                    # example of how to add spacing:
+                    # gr.HTML("<div style='margin-top: 2.9em;'></div>")
                     
     
     # Status display with help button
@@ -983,32 +992,44 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
         # Reset the demo state
         iteration_count = 0
 
-        # Subsample dataset for this user
-        subsampled_indices = []
-        for class_idx in sorted(full_class_to_indices.keys()):
-            indices = full_class_to_indices[class_idx]
-            sampled = np.random.choice(indices, size=min_class_size, replace=False)
-            subsampled_indices.extend(sampled.tolist())
-
-        # Sort indices to maintain order
-        subsampled_indices.sort()
-
-        # Create subsampled dataset for this user
-        subsampled_preds = full_preds[:, subsampled_indices, :]
-        subsampled_labels = full_labels[subsampled_indices]
-        image_filenames = [full_image_filenames[idx] for idx in subsampled_indices]
-
-        # Create Dataset object with subsampled data
-        dataset = Dataset.__new__(Dataset)
-        dataset.preds = subsampled_preds
-        dataset.labels = subsampled_labels
-        dataset.device = device
-
-        # Create oracle and CODA selector for this user
-        oracle = Oracle(dataset, loss_fn=loss_fn)
-        coda_selector = CODA(dataset, 
-                             learning_rate=DEMO_LEARNING_RATE,
-                             alpha=DEMO_ALPHA)
+        # Keep resampling until we get a subset where BioCLIP2 is NOT the initial best model
+        while True:
+            # Subsample dataset for this user
+            subsampled_indices = []
+            for class_idx in sorted(full_class_to_indices.keys()):
+                indices = full_class_to_indices[class_idx]
+                sampled = np.random.choice(indices, size=min_class_size, replace=False)
+                subsampled_indices.extend(sampled.tolist())
+
+            # Sort indices to maintain order
+            subsampled_indices.sort()
+
+            # Create subsampled dataset for this user
+            subsampled_preds = full_preds[:, subsampled_indices, :]
+            subsampled_labels = full_labels[subsampled_indices]
+            image_filenames = [full_image_filenames[idx] for idx in subsampled_indices]
+
+            # Create Dataset object with subsampled data
+            dataset = Dataset.__new__(Dataset)
+            dataset.preds = subsampled_preds
+            dataset.labels = subsampled_labels
+            dataset.device = device
+
+            # Create oracle and CODA selector for this user
+            oracle = Oracle(dataset, loss_fn=loss_fn)
+            coda_selector = CODA(dataset,
+                                 learning_rate=DEMO_LEARNING_RATE,
+                                 alpha=DEMO_ALPHA)
+
+            # Check which model is initially best
+            probs_tensor = coda_selector.get_pbest()
+            probabilities = probs_tensor.detach().cpu().numpy().flatten()
+            best_idx = np.argmax(probabilities)
+
+            # BioCLIP2 is at index 3 - if it's not the best, we accept this subset
+            if best_idx != 3:
+                break
+            # Otherwise, loop and resample
 
         image, status, predictions = get_next_coda_image()
         prob_plot = create_probability_chart()
@@ -1023,32 +1044,44 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
         # Reset the demo state
         iteration_count = 0
 
-        # Subsample dataset for this user (new random subsample)
-        subsampled_indices = []
-        for class_idx in sorted(full_class_to_indices.keys()):
-            indices = full_class_to_indices[class_idx]
-            sampled = np.random.choice(indices, size=min_class_size, replace=False)
-            subsampled_indices.extend(sampled.tolist())
-
-        # Sort indices to maintain order
-        subsampled_indices.sort()
-
-        # Create subsampled dataset for this user
-        subsampled_preds = full_preds[:, subsampled_indices, :]
-        subsampled_labels = full_labels[subsampled_indices]
-        image_filenames = [full_image_filenames[idx] for idx in subsampled_indices]
-
-        # Create Dataset object with subsampled data
-        dataset = Dataset.__new__(Dataset)
-        dataset.preds = subsampled_preds
-        dataset.labels = subsampled_labels
-        dataset.device = device
-
-        # Create oracle and CODA selector for this user
-        oracle = Oracle(dataset, loss_fn=loss_fn)
-        coda_selector = CODA(dataset,
-                             learning_rate=DEMO_LEARNING_RATE,
-                             alpha=DEMO_ALPHA)
+        # Keep resampling until we get a subset where BioCLIP2 is NOT the initial best model
+        while True:
+            # Subsample dataset for this user (new random subsample)
+            subsampled_indices = []
+            for class_idx in sorted(full_class_to_indices.keys()):
+                indices = full_class_to_indices[class_idx]
+                sampled = np.random.choice(indices, size=min_class_size, replace=False)
+                subsampled_indices.extend(sampled.tolist())
+
+            # Sort indices to maintain order
+            subsampled_indices.sort()
+
+            # Create subsampled dataset for this user
+            subsampled_preds = full_preds[:, subsampled_indices, :]
+            subsampled_labels = full_labels[subsampled_indices]
+            image_filenames = [full_image_filenames[idx] for idx in subsampled_indices]
+
+            # Create Dataset object with subsampled data
+            dataset = Dataset.__new__(Dataset)
+            dataset.preds = subsampled_preds
+            dataset.labels = subsampled_labels
+            dataset.device = device
+
+            # Create oracle and CODA selector for this user
+            oracle = Oracle(dataset, loss_fn=loss_fn)
+            coda_selector = CODA(dataset,
+                                 learning_rate=DEMO_LEARNING_RATE,
+                                 alpha=DEMO_ALPHA)
+
+            # Check which model is initially best
+            probs_tensor = coda_selector.get_pbest()
+            probabilities = probs_tensor.detach().cpu().numpy().flatten()
+            best_idx = np.argmax(probabilities)
+
+            # BioCLIP2 is at index 3 - if it's not the best, we accept this subset
+            if best_idx != 3:
+                break
+            # Otherwise, loop and resample
 
         # Reset all displays
         prob_plot = create_probability_chart()
@@ -1093,12 +1126,128 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
 
     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]
+        outputs=[image_display, status_with_help, model_predictions_display, prob_plot, accuracy_plot, popup_overlay, result_display, selection_help_button],
+        js="""
+        () => {
+            console.log('=== Panel Height Matching (Dynamic) ===');
+
+            function matchPanelHeights() {
+                const panels = document.querySelectorAll('.panel-container');
+                console.log('Found .panel-container elements:', panels.length);
+                const leftPanel = panels[0]; // prob_plot panel
+                const rightPanel = document.querySelector('.subtle-outline'); // hidden_group panel
+
+                console.log('Left panel (prob):', leftPanel);
+                console.log('Right panel (hidden):', rightPanel);
+
+                if (leftPanel && rightPanel) {
+                    const leftHeight = leftPanel.offsetHeight;
+                    const rightHeight = rightPanel.offsetHeight;
+                    const diff = leftHeight - rightHeight;
+
+                    console.log('Left panel height:', leftHeight);
+                    console.log('Right panel height:', rightHeight);
+                    console.log('Height difference:', diff);
+
+                    if (diff > 0) {
+                        console.log('Setting right panel min-height to:', leftHeight + 'px');
+
+                        rightPanel.style.minHeight = leftHeight + 'px';
+                        rightPanel.style.display = 'flex';
+                        rightPanel.style.flexDirection = 'column';
+                        rightPanel.style.justifyContent = 'center';
+
+                        console.log('Applied min-height and flex centering');
+                        return true; // Success
+                    } else {
+                        console.log('No height adjustment needed (diff <= 0)');
+                        return true; // Success
+                    }
+                } else {
+                    console.log('Panels not ready yet');
+                    return false; // Not ready
+                }
+            }
+
+            // Check every 50ms for 3 seconds to catch multiple height changes
+            let attempts = 0;
+            const maxAttempts = 60; // 60 * 50ms = 3 seconds to catch both height changes
+            const checkInterval = setInterval(() => {
+                attempts++;
+                console.log('Attempt', attempts, 'to match heights');
+
+                matchPanelHeights(); // Always try, don't stop early
+
+                if (attempts >= maxAttempts) {
+                    console.log('Finished checking after 3 seconds');
+                    clearInterval(checkInterval);
+                }
+            }, 50); // Check every 50ms
+        }
+        """
     )
 
     start_over_button.click(
         fn=start_over,
-        outputs=[image_display, status_with_help, model_predictions_display, prob_plot, accuracy_plot, result_display, popup_overlay, selection_help_button]
+        outputs=[image_display, status_with_help, model_predictions_display, prob_plot, accuracy_plot, result_display, popup_overlay, selection_help_button],
+        js="""
+        () => {
+            console.log('=== Panel Height Matching (Dynamic - Start Over) ===');
+
+            function matchPanelHeights() {
+                const panels = document.querySelectorAll('.panel-container');
+                console.log('Found .panel-container elements:', panels.length);
+                const leftPanel = panels[0]; // prob_plot panel
+                const rightPanel = document.querySelector('.subtle-outline'); // hidden_group panel
+
+                console.log('Left panel (prob):', leftPanel);
+                console.log('Right panel (hidden):', rightPanel);
+
+                if (leftPanel && rightPanel) {
+                    const leftHeight = leftPanel.offsetHeight;
+                    const rightHeight = rightPanel.offsetHeight;
+                    const diff = leftHeight - rightHeight;
+
+                    console.log('Left panel height:', leftHeight);
+                    console.log('Right panel height:', rightHeight);
+                    console.log('Height difference:', diff);
+
+                    if (diff > 0) {
+                        console.log('Setting right panel min-height to:', leftHeight + 'px');
+
+                        rightPanel.style.minHeight = leftHeight + 'px';
+                        rightPanel.style.display = 'flex';
+                        rightPanel.style.flexDirection = 'column';
+                        rightPanel.style.justifyContent = 'center';
+
+                        console.log('Applied min-height and flex centering');
+                        return true; // Success
+                    } else {
+                        console.log('No height adjustment needed (diff <= 0)');
+                        return true; // Success
+                    }
+                } else {
+                    console.log('Panels not ready yet');
+                    return false; // Not ready
+                }
+            }
+
+            // Check every 50ms for 3 seconds to catch multiple height changes
+            let attempts = 0;
+            const maxAttempts = 60; // 60 * 50ms = 3 seconds to catch both height changes
+            const checkInterval = setInterval(() => {
+                attempts++;
+                console.log('Attempt', attempts, 'to match heights');
+
+                matchPanelHeights(); // Always try, don't stop early
+
+                if (attempts >= maxAttempts) {
+                    console.log('Finished checking after 3 seconds');
+                    clearInterval(checkInterval);
+                }
+            }, 50); // Check every 50ms
+        }
+        """
     )
 
     guide_button.click(