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

Custom Components
1

Summary

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)

2

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

3

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?

4

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.

5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.