file upload gallery

app.py

@@ -1,5 +1,5 @@
 import streamlit as st
-import yaml, os, json, random, time, re, shutil
+import yaml, os, json, random, time, re, shutil, io
 import matplotlib.pyplot as plt
 import plotly.graph_objs as go
 import numpy as np
@@ -557,44 +557,79 @@ 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 have a maximum width of 500 pixels.
+    Each image will be downsampled to 120px on the long side.
     """
     # Initialize the container
     con_image = st.empty()
     with con_image.container():
+        # Start the gallery HTML with a div that will create a horizontal scrolling effect
+        gallery_html = "<div style='display: flex; flex-wrap: nowrap; overflow-x: auto;'>"
+
         # 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;'>
+            # Open the image
+            img = Image.open(image_path)
+            # Downsample the image to 120px on the long side
+            img.thumbnail((120, 120))
+            
+            # 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;'>
+                <img src='data:image/jpeg;base64,{img_str}' alt='Image' style='height: 120px; margin-right: 10px;'>
             </div>
             """
 
-            # Apply the image with HTML
-            st.markdown(img_html, unsafe_allow_html=True)
+        # Close the gallery container div
+        gallery_html += "</div>"
 
-        # 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)  
+        # 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):