Update app.py

app.py

@@ -1,4 +1,5 @@
 import io
+import random
 from pathlib import Path
 import streamlit as st
 from fastai.vision.all import load_learner, PILImage
@@ -89,6 +90,26 @@ st.markdown("""
         box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
     }
     
+    /* Navigation buttons styling */
+    div[data-testid="column"] .stButton > button {
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+        min-width: 50px;
+    }
+    
+    /* Page number buttons */
+    .stButton > button[kind="primary"] {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        font-weight: 700;
+    }
+    
+    .stButton > button[kind="secondary"] {
+        background: white;
+        color: #667eea;
+        border: 2px solid #667eea;
+        font-weight: 500;
+    }
+    
     /* Image container */
     .uploaded-image {
         border-radius: 15px;
@@ -97,6 +118,24 @@ st.markdown("""
         margin: 2rem 0;
     }
     
+    /* Example image containers */
+    .example-image-container {
+        aspect-ratio: 1 / 1;
+        overflow: hidden;
+        border-radius: 10px;
+        margin-bottom: 0.5rem;
+        background: #f0f2f6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .example-image-container img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    
     /* Probability bars */
     .prob-bar {
         background: #f0f2f6;
@@ -139,7 +178,7 @@ def load_model():
         learner = load_learner(MODEL_PATH)
         return learner
     except Exception as e:
-        st.error(f⚠️ Error loading model:\n\n{e}")
+        st.error(f"⚠️ Error loading model:\n\n{e}")
         return None
 
 def predict(learner, img_bytes: bytes):
@@ -148,6 +187,22 @@ def predict(learner, img_bytes: bytes):
     pred, pred_idx, probs = learner.predict(img)
     return pred, probs
 
+def get_random_examples(examples_path, num_examples=5):
+    """Get random example images from the examples folder."""
+    if not examples_path.exists():
+        return []
+    
+    all_images = (list(examples_path.glob("*.jpg")) + 
+                  list(examples_path.glob("*.png")) + 
+                  list(examples_path.glob("*.jpeg")))
+    
+    if not all_images:
+        return []
+    
+    # Get random sample (or all if less than num_examples)
+    num_to_show = min(num_examples, len(all_images))
+    return random.sample(all_images, num_to_show)
+
 def main():
     # Header
     st.title("🎮 Pokémon Gen 9 Classifier")
@@ -163,26 +218,46 @@ def main():
     
     # Example images section
     st.markdown("---")
-    st.markdown("### 🖼️ Try with Example Images")
     
-    # Define example images path (adjust this to your actual examples folder)
+    col_header = st.columns([4, 1])
+    with col_header[0]:
+        st.markdown("### 🖼️ Try with Example Images")
+    with col_header[1]:
+        if st.button("🔄 Shuffle", help="Load 5 new random examples"):
+            st.rerun()
+    
+    # Define example images path
     examples_path = Path("examples")
     
-    if examples_path.exists():
-        example_images = list(examples_path.glob("*.jpg")) + list(examples_path.glob("*.png")) + list(examples_path.glob("*.jpeg"))
+    # Initialize random examples in session state if not exists
+    if 'random_examples' not in st.session_state:
+        st.session_state.random_examples = get_random_examples(examples_path, 5)
+    
+    if st.session_state.random_examples:
+        # Display examples in a grid (always 5 columns for consistency)
+        cols = st.columns(5)
         
-        if example_images:
-            # Display examples in a grid
-            cols = st.columns(min(5, len(example_images)))
-            
-            for idx, img_path in enumerate(example_images[:5]):  # Show max 5 examples
-                with cols[idx]:
-                    st.image(str(img_path), use_container_width=True, caption=img_path.stem)
-                    if st.button(f"Use", key=f"example_{idx}"):
+        for idx in range(5):
+            with cols[idx]:
+                if idx < len(st.session_state.random_examples):
+                    img_path = st.session_state.random_examples[idx]
+                    # Use HTML container for consistent sizing
+                    st.markdown(
+                        '<div class="example-image-container">',
+                        unsafe_allow_html=True
+                    )
+                    st.image(str(img_path), use_container_width=True)
+                    st.markdown('</div>', unsafe_allow_html=True)
+                    st.caption(img_path.stem)
+                    if st.button("Use", key=f"example_{idx}"):
                         # Store the selected example in session state
                         st.session_state.example_image = img_path
-        else:
-            st.info("No example images found in the 'examples' folder.")
+                        st.rerun()
+                else:
+                    # Empty placeholder to maintain grid consistency
+                    st.markdown('<div style="height: 200px;"></div>', unsafe_allow_html=True)
+    elif examples_path.exists():
+        st.info("No example images found in the 'examples' folder.")
     else:
         st.info("💡 **Tip:** Create an 'examples' folder with sample Pokémon images to display them here!")