Update app.py

app.py

@@ -35,7 +35,6 @@ def add_background_image(image_path):
 def display_images(image_collection, query_text, max_distance=None, debug=False):
     """
     Display images in a Streamlit app based on a query.
-
     Args:
         image_collection: The image collection object for querying.
         query_text (str): The text query for images.
@@ -54,19 +53,18 @@ def display_images(image_collection, query_text, max_distance=None, debug=False)
     # Combine uris and distances, then sort by URI in ascending order
     sorted_results = sorted(zip(uris, distances), key=lambda x: x[0])
 
-    # Filter and display images
-    for uri, distance in sorted_results:
+    # Display images side by side, 3 images per row
+    cols = st.columns(3)  # Create 3 columns for the layout
+
+    for i, (uri, distance) in enumerate(sorted_results):
         if max_distance is None or distance <= max_distance:
-            if debug:
-                st.write(f"URI: {uri} - Distance: {distance}")
             try:
                 img = PILImage.open(uri)
-                st.image(img, width=300)
+                with cols[i % 3]:  # Use modulo to cycle through columns
+                    st.image(img, use_column_width=True)
             except Exception as e:
-                st.error(f"Error loading image {uri}: {e}")
-        else:
-            if debug:
-                st.write(f"URI: {uri} - Distance: {distance} (Filtered out)")
+                st.error(f"Error loading image: {e}")
+
 
             
 
@@ -272,7 +270,7 @@ def page_2():
             st.markdown(f"```markdown\n{response}\n```")
 
             st.markdown("### Images")
-            display_images(image_collection, query, max_distance=1.55, debug=True)
+            display_images(image_collection, query, max_distance=1.55, debug=False)
 
             st.markdown("### Videos")
             frame = inputs["frame"]