file upload gallery

app.py

@@ -6,6 +6,7 @@ import numpy as np
 from itertools import chain
 from PIL import Image
 from io import BytesIO
+import base64
 import pandas as pd
 from typing import Union
 from google.oauth2 import service_account
@@ -550,7 +551,43 @@ def delete_directory(dir_path):
 #             except Exception as e:
 #                 with message_loc:
 #                     st.error(f"Google PaLM 2 API Key Failed:exclamation: {e}")
-       
+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)
+            base64_image = image_to_base64(image_path)
+
+            # Embed the image with the determined width in the custom div
+            img_html = f"""
+            <div style='display: inline-block; padding: 10px; max-width: 50px;'>
+                <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: 50px) {
+                .scrollable-image-container img {
+                    max-width: 100%;
+                    height: 300px;
+                    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):
@@ -1106,8 +1143,9 @@ def content_tab_settings():
         if st.session_state['input_list']:
             st.subheader('Image Gallery')
             # selected_img = image_select("Uploaded Images Ready for Transcription", st.session_state['input_list'], use_container_width=False)
-            st.image(st.session_state['input_list'])
-            st.button("Clear Staged Images",on_click=delete_directory, args=[st.session_state['dir_uploaded_images']])
+            # st.image(st.session_state['input_list'])
+            display_image_gallery()
+            # st.button("Clear Staged Images",on_click=delete_directory, args=[st.session_state['dir_uploaded_images']])
         
     with col_cropped_1:
         default_crops = st.session_state.config['leafmachine']['cropped_components'].get('save_cropped_annotations', ['leaf_whole'])