new approach ,new lib

app.py

@@ -1,38 +1,43 @@
+import pandas as pd
+from PIL import Image
 import streamlit as st
-from PIL import Image, ImageDraw
+from streamlit_drawable_canvas import st_canvas
 
-# Create a canvas with a pen drawing tool
-canvas_size = (500, 500)
-canvas_image = Image.new("RGB", canvas_size, "white")
-draw = ImageDraw.Draw(canvas_image)
+# Specify canvas parameters in application
+drawing_mode = st.sidebar.selectbox(
+    "Drawing tool:", ("point", "freedraw", "line", "rect", "circle", "transform")
+)
 
-# Function to handle drawing on the canvas
-def draw_on_canvas():
-    canvas = st.image(canvas_image, use_column_width=True, clamp=True, channels="RGB")
-    canvas_drawing = canvas.drawings
-    if canvas_drawing:
-        for drawing in canvas_drawing:
-            draw.line(drawing["points"], fill="black", width=2)
+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 = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
 
-# Main function
-def main():
-    st.title("Canvas Drawing Tool")
-    st.sidebar.title("Options")
+realtime_update = st.sidebar.checkbox("Update in realtime", True)
 
-    # Draw on the canvas
-    draw_on_canvas()
+    
 
-    # Save the canvas as a JPEG
-    if st.sidebar.button("Save as JPEG"):
-        canvas_image.save("canvas_image.jpg", "JPEG")
-        st.sidebar.success("Image saved as JPEG!")
+# 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=Image.open(bg_image) if bg_image else None,
+    update_streamlit=realtime_update,
+    height=150,
+    drawing_mode=drawing_mode,
+    point_display_radius=point_display_radius if drawing_mode == 'point' else 0,
+    key="canvas",
+)
 
-def draw_on_canvas():
-    canvas = st.image(canvas_image, use_column_width=True, clamp=True, channels="RGB")
-    canvas_drawing = canvas_image.drawings
-    if canvas_drawing:
-        for drawing in canvas_drawing:
-            draw.line(drawing["points"], fill="black", width=2)
-
-if __name__ == "__main__":
-    main()
+# 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)