search

dkapur17 / streamlit-flow

Streamlit Component to quickly create Interactive Flow Diagrams using React Flow
https://stflow.streamlit.app
52 stars 6 forks source link

Image Support? #8

Open shuZro opened 1 week ago

shuZro commented 1 week ago

Is there support for images in the nodes?

dkapur17 commented 1 week ago

The StreamlitFlowNode class is a thin wrapper over the ReactFlow node, which doesn't directly support images. Adding support for images within nodes would require creating a custom ReactFlow node and a new class (something like StreamlitFlowImageNode) to interface with it. Will add this to the roadmap.

TL;DR: Currently, images in nodes are not supported.

shuZro commented 1 week ago

I was able to implement an image in the node using a background image in the styles.

style={"backgroundImage": f"url({im})", "backgroundRepeat": "no-repeat", "width": 500, "height": 500}

But from within in the flow editor would be nice

dkapur17 commented 1 week ago

This is a clever work around! Thanks for sharing.

dkapur17 commented 1 week ago

Images within nodes is supported natively through Markdown since v1.2.8! Check out the demo at https://stflow.streamlit.app/Markdown_Node.