Style changes to accuracy plot

app.py

@@ -224,11 +224,13 @@ def get_next_coda_image():
 
     # Get next item from CODA
     chosen_idx, selection_prob = coda_selector.get_next_item_to_label()
+    print("CODA chosen_idx, selection prob:", chosen_idx, selection_prob)
 
     # Get the corresponding image filename
     if chosen_idx < len(image_filenames):
         filename = image_filenames[chosen_idx]
         image_path = os.path.join('iwildcam_demo_images', filename)
+        print("Next image is", filename)
 
         # Find the corresponding annotation for this image
         current_image_info = None
@@ -475,12 +477,26 @@ def create_accuracy_bar_chart():
 
     fig, ax = plt.subplots(figsize=(8, 2.8), dpi=150)
 
-    # Use muted, uniform color for all bars (no highlighting)
-    bars = ax.bar(range(len(model_labels)), accuracies, color='#8B9DC3', alpha=0.6)
+    # Create colors array - highlight the best model with a significantly darker shade
+    colors = ['#4B6D98' if i == best_idx else '#8B9DC3' for i in range(len(model_labels))]
+    bars = ax.bar(range(len(model_labels)), accuracies, color=colors, alpha=0.7)
+
+    # Add text above the highest bar
+    ax.text(best_idx, accuracies[best_idx] + 0.0025, 'True best model',
+            ha='center', va='bottom', fontsize=12, fontweight='bold')
 
     ax.set_ylabel('True (oracle) \naccuracy of model', fontsize=12)
     ax.set_title('True Model Accuracies', fontsize=12)
-    ax.set_ylim(np.min(accuracies) - 0.025, np.max(accuracies) + 0.05)
+    y_min = np.min(accuracies) - 0.025
+    y_max = np.max(accuracies) + 0.05
+    ax.set_ylim(y_min, y_max)
+
+    # Add accuracy values in the middle of the visible portion of each bar
+    for i, (bar, acc) in enumerate(zip(bars, accuracies)):
+        # Position text in the middle of the visible part of the bar
+        text_y = (y_min + acc) / 2
+        ax.text(i, text_y, f'{acc:.3f}',
+                ha='center', va='center', fontsize=10, fontweight='bold', color='white')
 
     # Set x-axis labels and ticks
     ax.set_xticks(range(len(model_labels)))
@@ -747,7 +763,9 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                .subtle-outline * {
                    color: var(--body-text-color) !important;
                }
-               """) as demo:
+               """,
+               delete_cache=(3600,3600) # once per hour - clear old javascript
+               ) 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")
@@ -901,7 +919,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                     # gr.HTML("<div style='margin-top: 2.9em;'></div>")
 
                     hidden_text0 = gr.Markdown("""
-                        # True model performance is hidden 
+                        ## True model performance is hidden 
                         """,
                         elem_classes="text-center",)
                     
@@ -948,7 +966,8 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
             label="Identify this animal:",
             value=None,
             height=400,
-            width=550
+            width=550,
+            elem_id="main-image-display"
         )
 
     # Model predictions panel (full width, single line)
@@ -1328,12 +1347,13 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
             outputs=[result_display, image_display, model_predictions_display, prob_plot, accuracy_plot, status_with_help]
         )
 
-    # Add JavaScript to handle inline help button clicks
+    # Add JavaScript to handle inline help button clicks and dynamic image sizing
     demo.load(
         lambda: None,
         outputs=[],
         js="""
         () => {
+            // Handle inline help button clicks
             setTimeout(() => {
                 document.addEventListener('click', function(e) {
                     if (e.target && e.target.classList.contains('inline-help-btn')) {
@@ -1346,13 +1366,64 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                     }
                 });
             }, 100);
+
+            // Dynamic image sizing (NEW VERSION)
+            console.log('=== IMAGE SIZING V2 LOADED ===');
+
+            function adjustImageSize() {
+                const imageContainer = document.getElementById('main-image-display');
+                if (!imageContainer) {
+                    console.log('[V2] Image container not found');
+                    return false;
+                }
+
+                const viewportHeight = window.innerHeight;
+                const docHeight = document.documentElement.scrollHeight;
+                const currentImageHeight = imageContainer.offsetHeight;
+
+                // Calculate how much we're overflowing
+                const overflow = docHeight - viewportHeight;
+
+                // If we're not overflowing, increase image size
+                // If we are overflowing, decrease image size by the overflow amount
+                const adjustment = -overflow - 30; // Keep padding below bottom button
+                const targetHeight = currentImageHeight + adjustment;
+
+                console.log('[V2] viewport:', viewportHeight, 'docHeight:', docHeight, 'currentImg:', currentImageHeight, 'overflow:', overflow, 'target:', targetHeight);
+
+                // Only apply if reasonable
+                if (targetHeight > 300 && targetHeight < viewportHeight - 100) {
+                    imageContainer.style.height = targetHeight + 'px';
+                    imageContainer.style.maxHeight = targetHeight + 'px';
+                    console.log('[V2] Set image height to:', targetHeight + 'px');
+                    return true;
+                }
+
+                return false;
+            }
+
+            // Run after initial load
+            setTimeout(adjustImageSize, 500);
+
+            // Run periodically for first 5 seconds to catch layout changes
+            let attempts = 0;
+            const interval = setInterval(() => {
+                attempts++;
+                adjustImageSize();
+                if (attempts >= 50) { // 50 * 100ms = 5 seconds
+                    clearInterval(interval);
+                }
+            }, 100);
+
+            // Re-adjust on window resize
+            window.addEventListener('resize', adjustImageSize);
         }
-        """
+        """,
     )
 
 if __name__ == "__main__":
     demo.launch(
         # share=True,
         # server_port=7861,
-        allowed_paths=["/"]
+        allowed_paths=["/"],
     )