file upload gallery

app.py

@@ -557,46 +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']:
-            img = Image.open(image_path)
-            img.thumbnail((120, 120), Image.Resampling.LANCZOS)  
+# 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
@@ -608,21 +608,22 @@ def display_image_gallery():
     """
     
     # 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)  
-
-        # Convert the image to base64
-        base64_image = image_to_base64(img)
-
-        # Append the image to the grid HTML
-        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)
+    with con_image.container():
+        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)  
+
+            # Convert the image to base64
+            base64_image = image_to_base64(img)
+
+            # Append the image to the grid HTML
+            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