Update src/streamlit_app.py

src/streamlit_app.py

@@ -156,7 +156,6 @@ def perform_search(features_batch, top_k=5):
 # ==========================================================================
 st.set_page_config(
     page_title="SimCLR ResNet-50 Visual Search",
-    page_icon="🔍",
     layout="wide",
     initial_sidebar_state="expanded"
 )
@@ -208,7 +207,7 @@ st.markdown("""
 # ==========================================================================
 # Sidebar Configuration
 # ==========================================================================
-st.sidebar.markdown("###  Engine Settings")
+st.sidebar.markdown("### Engine Settings")
 top_k_slider = st.sidebar.slider("Number of results (K)", min_value=3, max_value=20, value=6, step=1)
 
 st.sidebar.markdown("---")
@@ -224,7 +223,7 @@ st.sidebar.markdown("""
 """)
 
 st.sidebar.markdown("---")
-st.sidebar.markdown("###  Backend Pipeline")
+st.sidebar.markdown("### Backend Pipeline")
 st.sidebar.markdown("""
 * **Inference Engine**: ONNX Runtime CPU
 * **Vector Database**: FAISS (IndexFlatIP)
@@ -263,7 +262,7 @@ with tab1:
         
         # Method 2: Pick a random image from the database
         st.markdown("<p style='text-align: center; color: #94A3B8; margin: 10px 0;'>— OR —</p>", unsafe_allow_html=True)
-        if st.button("🎲 Pick a Random Test Image from Database", use_container_width=True):
+        if st.button("Pick a Random Test Image from Database", use_container_width=True):
             st.session_state.random_img_id = random.randint(0, len(metadata["images"]) - 1)
             
         # Display selected/uploaded image
@@ -323,53 +322,53 @@ with tab1:
                 else:
                     st.markdown(f'<div class="glass-card"><div class="metric-value">N/A</div><div class="metric-label">Upload class unknown</div></div>', unsafe_allow_html=True)
             
-            # Display Results Grid
+            # Display Results Grid (Fixed to prevent layout shift)
             st.markdown("#### Retrieved Nearest Neighbors")
             
-            # Create dynamic grid columns
-            grid_cols = st.columns(3)
-            
-            for idx, res in enumerate(results):
-                col = grid_cols[idx % 3]
-                
-                with col:
-                    # Determine styling color based on class match if query info exists
-                    is_match = False
-                    border_color = "rgba(255, 255, 255, 0.05)"
-                    bg_color = "rgba(30, 41, 59, 0.7)"
-                    badge_html = f'<span style="background-color: #475569; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]}</span>'
-                    
-                    if query_info is not None:
-                        is_match = (res["class_name"] == query_info["class_name"])
-                        if is_match:
-                            border_color = "rgba(16, 185, 129, 0.3)"
-                            bg_color = "rgba(6, 78, 59, 0.3)"
-                            badge_html = f'<span style="background-color: #10B981; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]} (MATCH)</span>'
-                        else:
-                            border_color = "rgba(239, 68, 68, 0.2)"
-                            bg_color = "rgba(127, 29, 29, 0.1)"
-                            badge_html = f'<span style="background-color: #EF4444; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]}</span>'
-                    
-                    # Custom card container
-                    card_content = f"""
-                    <div style="background: {bg_color}; border: 1px solid {border_color}; border-radius: 8px; padding: 12px; margin-bottom: 12px; text-align: center;">
-                        <div style="color: #38BDF8; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px;">Rank #{res["rank"]}</div>
-                        <div style="margin-bottom: 10px;">{badge_html}</div>
-                        <div style="color: #94A3B8; font-size: 0.9rem; margin-bottom: 4px;">Cosine Similarity:</div>
-                        <div style="color: #E2E8F0; font-size: 1.4rem; font-weight: 700; margin-bottom: 10px;">{res["similarity"] * 100:.2f}%</div>
-                        <div style="color: #64748B; font-size: 0.8rem;">Vector ID: {res["id"]}</div>
-                    </div>
-                    """
-                    
-                    # Render matched image and custom card
-                    if os.path.exists(res["image_path"]):
-                        matched_img = Image.open(res["image_path"])
-                        col.image(matched_img, use_container_width=True)
-                    else:
-                        col.error("Image file missing.")
-                        
-                    col.markdown(card_content, unsafe_allow_html=True)
-                    
+            # Create dynamic rows to prevent shaking/layout shifting
+            for i in range(0, len(results), 3):
+                cols = st.columns(3)
+                for j in range(3):
+                    if i + j < len(results):
+                        res = results[i + j]
+                        with cols[j]:
+                            # Determine styling color based on class match if query info exists
+                            is_match = False
+                            border_color = "rgba(255, 255, 255, 0.05)"
+                            bg_color = "rgba(30, 41, 59, 0.7)"
+                            badge_html = f'<span style="background-color: #475569; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]}</span>'
+                            
+                            if query_info is not None:
+                                is_match = (res["class_name"] == query_info["class_name"])
+                                if is_match:
+                                    border_color = "rgba(16, 185, 129, 0.3)"
+                                    bg_color = "rgba(6, 78, 59, 0.3)"
+                                    badge_html = f'<span style="background-color: #10B981; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]} (MATCH)</span>'
+                                else:
+                                    border_color = "rgba(239, 68, 68, 0.2)"
+                                    bg_color = "rgba(127, 29, 29, 0.1)"
+                                    badge_html = f'<span style="background-color: #EF4444; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: white;">{res["class_name"]}</span>'
+                            
+                            # Custom card container
+                            card_content = f"""
+                            <div style="background: {bg_color}; border: 1px solid {border_color}; border-radius: 8px; padding: 12px; margin-bottom: 12px; text-align: center;">
+                                <div style="color: #38BDF8; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px;">Rank #{res["rank"]}</div>
+                                <div style="margin-bottom: 10px;">{badge_html}</div>
+                                <div style="color: #94A3B8; font-size: 0.9rem; margin-bottom: 4px;">Cosine Similarity:</div>
+                                <div style="color: #E2E8F0; font-size: 1.4rem; font-weight: 700; margin-bottom: 10px;">{res["similarity"] * 100:.2f}%</div>
+                                <div style="color: #64748B; font-size: 0.8rem;">Vector ID: {res["id"]}</div>
+                            </div>
+                            """
+                            
+                            # Render matched image and custom card
+                            if os.path.exists(res["image_path"]):
+                                matched_img = Image.open(res["image_path"])
+                                st.image(matched_img, use_container_width=True)
+                            else:
+                                st.error("Image file missing.")
+                                
+                            st.markdown(card_content, unsafe_allow_html=True)
+                            
         else:
             st.info("Please upload a custom image or click the button to select a random test image to query the visual search engine!")
 
@@ -377,8 +376,8 @@ with tab1:
 # TAB 2: Ablation Study Dashboard
 # ==========================================================================
 with tab2:
-    st.markdown("### 🧪 Experiment Ablation Study & Color Jitter Findings")
-    st.markdown("##### Evaluating Natalie's Midterm Pipelines against Mahmoud's Final Jittered Re-runs")
+    st.markdown("### Experiment Ablation Study & Color Jitter Findings")
+    st.markdown("##### Evaluating Midterm Pipelines against Jittered Re-runs")
     
     st.markdown("""
     This section presents the results of the complete **Color Jitter Shortcut-Learning Ablation Study** (Experiments 38-42).
@@ -412,12 +411,12 @@ with tab2:
             st.markdown(card_html, unsafe_allow_html=True)
             
     st.markdown("---")
-    st.markdown("####  Key Project Takeaways")
+    st.markdown("#### Key Project Takeaways")
     col1, col2 = st.columns(2)
     
     with col1:
         st.markdown("""
-        ##### 1. The Shortcut-Learning Problem 🧩
+        ##### 1. The Shortcut-Learning Problem
         Without Color Jitter, contrastive self-supervised encoders exploit low-level **color histograms** as a shortcut to maximize mutual information, rather than learning general shapes and semantic features. This results in weaker downstream representations, showing a severe performance limit (e.g. baseline Crop+Flip+Blur achieves only **64.49%**).
         
         ##### 2. The Color Jitter Shield 
@@ -433,4 +432,4 @@ with tab2:
         Our zero-shot CLIP ViT-B/32 foundation model evaluation sets the academic upper bound at **88.80%**. Our custom-trained SimCLR ResNet-50 achieves **95% of this performance** (**84.30%**) while using **8,000x less training data**!
         """)
 
-    st.success("🎉 Weights & Biases Dashboard has archived all 5 experiments complete with training curves, checkpoints, and t-SNE files.")
+    st.success("Weights & Biases Dashboard has archived all 5 experiments complete with training curves, checkpoints, and t-SNE files.")