file upload gallery

app.py

@@ -557,83 +557,89 @@ def image_to_base64(img):
     img.save(buffered, format="JPEG")
     return base64.b64encode(buffered.getvalue()).decode()
 
-def display_image_gallery():
-    """
-    Display an image gallery from st.session_state['input_list'] in a scrollable container.
-    Each image will have a maximum width of 500 pixels.
-    """
-    # Initialize the container
-    con_image = st.empty()
-    with con_image.container():
-        # Loop through each image in the input list
-        for image_path in st.session_state['input_list']:
-            # Convert the image to base64 (assuming you have this utility function)
-            img = Image.open(image_path)
-            img.thumbnail((120, 120), Image.Resampling.LANCZOS)  # This modifies 'img' in place
-            
-            # Convert the image to base64
-            base64_image = image_to_base64(img)
-
-            # Embed the image with the determined width in the custom div
-            img_html = f"""
-            <div style='display: flex; flex-wrap: wrap; overflow-y: auto; max-height: 400px;'>
-                <img src='data:image/jpeg;base64,{base64_image}' alt='Image' style='max-width: 100%; height: auto;'>
-            </div>
-            """
-
-            # Apply the image with HTML
-            st.markdown(img_html, unsafe_allow_html=True)
-
-        # The CSS to make the images display inline and be responsive
-        css = """
-        <style>
-            @media (max-width: 120px) {
-                .scrollable-image-container img {
-                    max-width: 100%;
-                    height: 400px;
-                    height: auto;
-                }
-            }
-        </style>
-        """
-        # Apply the CSS
-        st.markdown(css, unsafe_allow_html=True)  
 # def display_image_gallery():
 #     """
 #     Display an image gallery from st.session_state['input_list'] in a scrollable container.
-#     Each image will be downsampled to 120px on the long side.
-#     The container will be as wide as its containing Streamlit column and no more than 400px tall.
+#     Each image will have a maximum width of 500 pixels.
 #     """
 #     # Initialize the container
 #     con_image = st.empty()
 #     with con_image.container():
-#         # Start the gallery HTML with a div that will create a vertical scrolling effect
-#         gallery_html = "<div style='display: flex; flex-wrap: wrap; overflow-y: auto; max-height: 400px;'>"
-
 #         # Loop through each image in the input list
 #         for image_path in st.session_state['input_list']:
-#             # Open the image
+#             # Convert the image to base64 (assuming you have this utility function)
 #             img = Image.open(image_path)
-#             # Downsample the image to 120px on the long side
-#             img.thumbnail((120, 120), Image.Resampling.LANCZOS)
+#             img.thumbnail((120, 120), Image.Resampling.LANCZOS)  # This modifies 'img' in place
             
-#             # Convert the image to base64 for HTML embedding
-#             buffered = io.BytesIO()
-#             img.save(buffered, format="JPEG")
-#             img_str = base64.b64encode(buffered.getvalue()).decode()
-
-#             # Add each image to the gallery HTML
-#             gallery_html += f"""
-#             <div style='padding: 5px; flex: 1 0 auto;'>
-#                 <img src='data:image/jpeg;base64,{img_str}' alt='Image' style='max-height: 120px; width: auto;'>
+#             # Convert the image to base64
+#             base64_image = image_to_base64(img)
+
+#             # Embed the image with the determined width in the custom div
+#             img_html = f"""
+#             <div style='display: flex; flex-wrap: wrap; overflow-y: auto; max-height: 400px;'>
+#                 <img src='data:image/jpeg;base64,{base64_image}' alt='Image' style='max-width: 100%; height: auto;'>
 #             </div>
 #             """
 
-#         # Close the gallery container div
-#         gallery_html += "</div>"
+#             # Apply the image with HTML
+#             st.markdown(img_html, unsafe_allow_html=True)
+
+#         # The CSS to make the images display inline and be responsive
+#         css = """
+#         <style>
+#             @media (max-width: 120px) {
+#                 .scrollable-image-container img {
+#                     max-width: 100%;
+#                     height: 400px;
+#                     height: auto;
+#                 }
+#             }
+#         </style>
+#         """
+#         # Apply the CSS
+#         st.markdown(css, unsafe_allow_html=True)  
 
-#         # Apply the gallery HTML
-#         st.markdown(gallery_html, unsafe_allow_html=True)
+def display_image_gallery():
+    # Initialize the container
+    con_image = st.empty()
+    
+    # Start the div for the image grid
+    img_grid_html = """
+    <div style='display: flex; flex-wrap: wrap; align-items: flex-start; overflow-y: auto; max-height: 400px; gap: 10px;'>
+    """
+    
+    # Loop through each image in the input list
+    for image_path in st.session_state['input_list']:
+        # Open the image and create a thumbnail
+        img = Image.open(image_path)
+        img.thumbnail((120, 120), Image.Resampling.LANCZOS)  # This modifies 'img' in place
+
+        # Convert the image to base64
+        base64_image = image_to_base64(img)
+
+        # Append the image to the grid HTML
+        img_grid_html += f"""
+            <img src='data:image/jpeg;base64,{base64_image}' alt='Image' style='max-width: 100%; height: auto; width: 500px;'>
+        """
+    
+    # Close the div for the image grid
+    img_grid_html += "</div>"
+    
+    # Display the image grid in the container
+    with con_image.container():
+        st.markdown(img_grid_html, unsafe_allow_html=True)
+
+    # The CSS to make the images display inline and be responsive
+    css = """
+    <style>
+        .scrollable-image-container img {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+    """
+    # Apply the CSS
+    st.markdown(css, unsafe_allow_html=True)
 
 def save_changes_to_API_keys(cfg_private,openai_api_key,azure_openai_api_version,azure_openai_api_key,
                              azure_openai_api_base,azure_openai_organization,azure_openai_api_type,google_vision,google_palm):