Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.
MIT License
Streamlit component which provides a sketching canvas using Fabric.js.
pip install streamlit-drawable-canvas
Copy this code snippet:
import pandas as pd
from PIL import Image
import streamlit as st
from streamlit_drawable_canvas import st_canvas
# Specify canvas parameters in application
drawing_mode = st.sidebar.selectbox(
"Drawing tool:", ("point", "freedraw", "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 = 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=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",
)
# 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)
You will find more detailed examples on the demo app.
st_canvas(
fill_color: str
stroke_width: int
stroke_color: str
background_color: str
background_image: Image
update_streamlit: bool
height: int
width: int
drawing_mode: str
initial_drawing: dict
display_toolbar: bool
point_display_radius: int
key: str
)
json_data
output from other canvas. Beware: if you try to import a drawing from a bigger/smaller canvas, no rescaling is done in the canvas and the import could fail.False
, don't display the undo/redo/delete toolbar.Example:
import streamlit as st
from streamlit_drawable_canvas import st_canvas
canvas_result = st_canvas()
st_canvas(initial_drawing=canvas_result.json_data)
cd frontend
npm install
conda create -n streamlit-drawable-canvas python=3.7
conda activate streamlit-drawable-canvas
pip install -e .
Both webpack dev server and Streamlit should run at the same time.
cd frontend
npm run start
streamlit run app.py
cd e2e; npm i
or npx install cypress
(with --force
if cache problem)cd streamlit_drawable_canvas/frontend; npm run start
streamlit run e2e/app_to_test.py
cd e2e; npm run cypress:open
useRef
hook allows you to create a persistent ref to a DOM node, or really to any value. React will persist this value between re-renders (between calls to your component function).