add multi-images view and selection

app.py

@@ -2,12 +2,11 @@ import pandas as pd
 from PIL import Image
 import streamlit as st
 from streamlit_drawable_canvas import st_canvas
+from streamlit_image_select import image_select
+from streamlit_sortables import sort_items
 
 
-
-
-
-def expand2square(imgpath, background_color = (0,0,0)):
+def expand2square(imgpath, background_color=(0, 0, 0)):
     pil_img = Image.open(imgpath)
     width, height = pil_img.size
     if width == height:
@@ -21,46 +20,79 @@ def expand2square(imgpath, background_color = (0,0,0)):
         result.paste(pil_img, ((height - width) // 2, 0))
         return result.resize((700, 700))
 
-# Specify canvas parameters in application
-drawing_mode = st.sidebar.selectbox(
-    "Drawing tool:", ("point", "line", "rect", "circle", "transform")
-)
-
-stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 3)
-if drawing_mode == 'point':
-    point_display_radius = st.sidebar.slider("Point display radius: ", 1, 25, 3)
-stroke_color = st.sidebar.color_picker("Stroke color hex: ")
-bg_color = st.sidebar.color_picker("Background color hex: ", "#eee")
-
-#bg_image = "./IMG_02099.jpg"
-bg_image = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
-
-realtime_update = st.sidebar.checkbox("Update in realtime", True)
-
-# Create a canvas component
-canvas_result = st_canvas(
-    fill_color="rgba(255, 165, 0, 0.3)",  # Fixed fill color with some opacity
-    stroke_width=stroke_width,
-    stroke_color=stroke_color,
-    background_color=bg_color,
-    background_image=expand2square(bg_image) if bg_image else expand2square("./IMG_02099.jpg"),
-    update_streamlit=realtime_update,
-    height=700,
-    width=700,
-    drawing_mode=drawing_mode,
-    point_display_radius=point_display_radius if drawing_mode == 'point' else 0,
-    key="canvas",
-)
-test= st.sidebar.write(Image.open(bg_image).size if bg_image else None)
-
-#testt = st.image(Image.open(bg_image) if bg_image else Image.open("./IMG_02099.jpg"))
-
-test2 = st.sidebar.write(bg_color)
-# Do something interesting with the image data and paths
-# if canvas_result.image_data is not None:
-#    st.image(canvas_result.image_data)
-if canvas_result.json_data is not None:
-    objects = pd.json_normalize(canvas_result.json_data["objects"])  # need to convert obj to str because PyArrow
-    for col in objects.select_dtypes(include=['object']).columns:
-        objects[col] = objects[col].astype("str")
-    st.dataframe(objects)
+
+@st.cache_data
+def loading_data(files):
+    imgs = []
+    imgs_names = []
+    for file in files:
+        imgs.append(expand2square(file))
+        imgs_names.append(file.name)
+    return imgs, imgs_names
+
+if 'uploaded' not in st.session_state:
+    st.session_state['uploaded'] = False
+
+images = st.sidebar.file_uploader("Upload here the images (max 4 imgs for demo version):",
+                                    type=["png", "jpg"], accept_multiple_files=True)
+
+
+if len(images) > 0:
+    st.session_state['uploaded'] = True
+    imgs_path = []
+    imgs = []
+else:
+    st.session_state['uploaded'] = False
+
+if st.session_state['uploaded'] is True:
+
+    # Loading uploaded images and cache the data
+    imgs, imgs_path = loading_data(images)
+
+    # Specify canvas parameters in application
+    drawing_mode = st.sidebar.selectbox(
+        "Drawing tool:", ("point", "line", "rect", "circle", "transform")
+    )
+
+    stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 3)
+    if drawing_mode == 'point':
+        point_display_radius = st.sidebar.slider("Point display radius: ", 1, 25, 3)
+    stroke_color = st.sidebar.color_picker("Stroke color hex: ")
+    bg_color = st.sidebar.color_picker("Background color hex: ", "#eee")
+
+    realtime_update = st.sidebar.checkbox("Update in realtime", False)
+
+    master_index = image_select("Uploaded images", imgs, captions=imgs_path, return_value="index")
+
+    # Create a canvas component
+    canvas_result = st_canvas(
+        fill_color="rgba(255, 165, 0, 0.3)",  # Fixed fill color with some opacity
+        stroke_width=stroke_width,
+        stroke_color=stroke_color,
+        background_color=bg_color,
+        background_image= imgs[master_index], #expand2square(bg_image) if bg_image else expand2square("./IMG_02099.jpg"),
+        update_streamlit=realtime_update,
+        height=700,
+        width=700,
+        drawing_mode=drawing_mode,
+        point_display_radius=point_display_radius if drawing_mode == 'point' else 0,
+        key="canvas",
+    )
+
+    test = st.sidebar.write("Select the processing order of slave images")
+
+    with st.sidebar:
+        imgs_path2 = imgs_path.copy()
+        imgs_path2.pop(master_index)
+        sorted_items = sort_items(imgs_path2, multi_containers=False, direction='vertical')
+
+
+    # if canvas_result.image_data is not None:
+    #    st.image(canvas_result.image_data)
+    if canvas_result.json_data is not None:
+        objects = pd.json_normalize(canvas_result.json_data["objects"])  # need to convert obj to str because PyArrow
+
+        for col in objects.select_dtypes(include=['object']).columns:
+            objects[col] = objects[col].astype("str")
+        st.dataframe(objects)
+