Update src/streamlit_app.py

src/streamlit_app.py

@@ -23,6 +23,8 @@ import sys
 import time
 import json
 import random
+import base64
+from io import BytesIO
 import numpy as np
 from PIL import Image
 import streamlit as st
@@ -93,7 +95,7 @@ faiss_index = load_faiss_index()
 metadata = load_metadata()
 
 # ==========================================================================
-# Preprocessing Logic
+# Preprocessing & Helper Logic
 # ==========================================================================
 def preprocess_image(pil_img):
     """
@@ -151,6 +153,15 @@ def perform_search(features_batch, top_k=5):
         
     return results
 
+def get_image_base64(image_path):
+    """Converts a local image to base64 string for direct HTML rendering."""
+    if os.path.exists(image_path):
+        img = Image.open(image_path)
+        buffered = BytesIO()
+        img.save(buffered, format="PNG")
+        return base64.b64encode(buffered.getvalue()).decode()
+    return ""
+
 # ==========================================================================
 # Streamlit UI Configuration
 # ==========================================================================
@@ -322,10 +333,10 @@ 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 (Fixed to prevent layout shift)
+            # Display Results Grid (Fixed completely with Base64 HTML rendering)
             st.markdown("#### Retrieved Nearest Neighbors")
             
-            # Create dynamic rows to prevent shaking/layout shifting
+            # Create dynamic rows
             for i in range(0, len(results), 3):
                 cols = st.columns(3)
                 for j in range(3):
@@ -349,9 +360,14 @@ with tab1:
                                     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
+                            # Convert local image to base64
+                            img_b64 = get_image_base64(res["image_path"])
+                            img_html = f'<img src="data:image/png;base64,{img_b64}" style="width: 100%; border-radius: 8px; margin-bottom: 12px; display: block;">' if img_b64 else '<div style="color: #EF4444; padding: 20px; border: 1px solid #EF4444; border-radius: 8px; margin-bottom: 12px;">Image missing</div>'
+                            
+                            # Custom card container integrating image and text as a single HTML block
                             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="background: {bg_color}; border: 1px solid {border_color}; border-radius: 8px; padding: 12px; margin-bottom: 12px; text-align: center; height: 100%;">
+                                {img_html}
                                 <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>
@@ -360,13 +376,6 @@ with tab1:
                             </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: