Sending multiple values from frontend to python backend (+ websockets)


I would like to implement a custom component that can update many values efficiently (e.g. counter 1 and counter 2 but not simultaneously). If possible with websockets to make it faster.

I have typescript and python code implementing a webapp for interactive image segmentation that currently uses websockets. What I would like is to:

  1. set the config of the component from streamlit (e.g. tool number)
  2. send from frontend to backend:
  • click location
  • binary mask
  • layout coordinates (to allow for zoom-in, etc.)
  1. send from backend to frontend:
  • binary mask
  • current image

Is this possible and how should I send things from frontend to backend? (ps pure ts, won’t use react)

Have you checked out the blog post on building Streamlit components? It has some code snippets that should get you started.

That was helpful but I still need more documentation and help

For instance, if I call my_component(slider_value=slider_value) where slider_value comes from a slider and my_component includes a console.log command, I would expect to see different values logged to the console when I move the slider, but the rendering function is never re-run. This is different behavior than the one native streamlit components have.

My second question would be about bidirectional communication: say I make a click on my custom component, I want to compute a value on the backend and send it to the frontend. However, the provided example is triggered from the backend and doesn’t show how to create such custom callbacks.

I know my ambitions are high, but if it’s possible, I would like to create this component. I need a little help, is there a chat where I can ask?

You might find the section of this tutorial focused on bidirectional data flow helpful.

We don’t have a live chat for questions about the open-source library, unfortunately, but if you share a code snippet that allows us to better understand the question you’re asking, hopefully, we can help.