file upload gallery

app.py

@@ -557,80 +557,80 @@ 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_file = Image.open(image_path)
-#             base64_image = image_to_base64(img_file)
-
-#             # Embed the image with the determined width in the custom div
-#             img_html = f"""
-#             <div style='display: inline-block; padding: 10px; max-width: 100px;'>
-#                 <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: 100px) {
-#                 .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
-            img = Image.open(image_path)
-            # Downsample the image to 120px on the long side
-            img.thumbnail((120, 120), Image.Resampling.LANCZOS)
-            
-            # 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 (assuming you have this utility function)
+            img_file = Image.open(image_path).thumbnail((120, 120), Image.Resampling.LANCZOS)
+            base64_image = image_to_base64(img_file)
+
+            # 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)  
+# 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.
+#     """
+#     # 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
+#             img = Image.open(image_path)
+#             # Downsample the image to 120px on the long side
+#             img.thumbnail((120, 120), Image.Resampling.LANCZOS)
+            
+#             # 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;'>
+#             </div>
+#             """
+
+#         # Close the gallery container div
+#         gallery_html += "</div>"
 
-        # Apply the gallery HTML
-        st.markdown(gallery_html, unsafe_allow_html=True)
+#         # Apply the gallery HTML
+#         st.markdown(gallery_html, 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):