file upload gallery

app.py

@@ -557,47 +557,46 @@ 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
+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']:
+            img = Image.open(image_path)
+            img.thumbnail((120, 120), Image.Resampling.LANCZOS)  
             
-#             # 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)  
+            # 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():
     # Initialize the container
@@ -612,15 +611,19 @@ def display_image_gallery():
     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
+        img.thumbnail((120, 120), Image.Resampling.LANCZOS)  
 
         # 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;'>
-        """
+        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>
+            """
+        st.markdown(img_html, unsafe_allow_html=True)
+
     
     # Close the div for the image grid
     img_grid_html += "</div>"