How to implement HTML canvas in streamlit

Custom Components
1

Hi everyone,
I have just started to learn streamlit and have started to like it as it requires a very minimalistic amount of work for making an ml app. My query was regarding if I want to make an app in which someone can draw digits on it and i can use it for digit recognition. Basically, how can I implement an HTML canvas in streamlit.

Thanks

1 Like
2

Hi @ritwik_singh

Welcome to the community.

It’s currently not possible with Streamlit except if you really wan’t to do it and use all sorts of JS hacks.

Right now one alternative is the HoloViz suite of tools. See for example https://examples.pyviz.org/ml_annotators/ml_annotators.html. For more info on the annotation possibilities see the Streams section of http://holoviews.org/reference/index.html.

But please file a feature request on GitHub or upvote an existing as this is one of the things that is really needed in Streamlit.

3

Hi Marc

Would it be possible to mix that solution into a streamlit app? I haven’t done any bokeh/ holoviews based plotting in streamlit yet… or is the bokeh plotting backend strictly for plotting and not capable to register interactions?

C

4

Hi @cwerner

Streamlit cannot send events from bokeh/holoviews in your frontend browser back to the server.

Someone with enough javascript skills though Can do a hack where you

Use st.bokeh_chart to show the canvas

Use st.bokeh_chart to setup a js function to save the annotations to a st.text_area

Use st.bokeh_chart to insert a button that triggers the st.text_area to send the annotations back to the Streamlit server where you can use it.

1 Like
5

Ah bummer… thought so. Maybe in the future :man_shrugging:

6

Hi @cwerner,
I wonder this could be a cool widget on its own. Feel free to file a feature request. Also, with the Plugin Architecture proposed here, we are going to make it easier to write custom widgets.

Matteo

7

Well, this has a Streamlit component now : Streamlit Drawable Canvas