Spaces:
Sleeping
Sleeping
import streamlit as st | |
import graphviz as gv | |
import streamlit as st | |
from st_clickable_images import clickable_images | |
clicked = clickable_images( | |
[ | |
"https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=700", | |
"https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=700", | |
"https://images.unsplash.com/photo-1582550945154-66ea8fff25e1?w=700", | |
"https://images.unsplash.com/photo-1591797442444-039f23ddcc14?w=700", | |
"https://images.unsplash.com/photo-1518727818782-ed5341dbd476?w=700", | |
], | |
titles=[f"Image #{str(i)}" for i in range(5)], | |
div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"}, | |
img_style={"margin": "5px", "height": "200px"}, | |
) | |
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked") | |
from streamlit_pills import pills | |
selected = pills("Label", ["Option 1", "Option 2", "Option 3"], ["🍀", "🎈", "🌈"]) | |
st.write(selected) | |
st.markdown("") | |
# Define the Graphviz diagram using the DOT language | |
dot = gv.Digraph() | |
# Add some nodes and edges to the diagram | |
dot.node('A', label='<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/1024px-SVG_logo.svg.png" width="50"/>') | |
dot.node('B', label='<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Python-logo-notext.svg" width="50"/>') | |
dot.node('C', label='<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Google_Drive_logo.svg" width="50"/>') | |
dot.edge('A', 'B', label='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5V2zm10 5l-10 5v10l10-5V7z"/></svg>') | |
dot.edge('A', 'C', label='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M16 10c0 1.1-.9 2-2 2H2v8h16v-2c0-1.1.9-2 2-2h2V10h-2zM8 14c0 1.1-.9 2-2 2H4v-4h2c1.1 0 2 .9 2 2zm10 0c0 1.1-.9 2-2 2h-2v-4h2c1.1 0 2 .9 2 2z"/></svg>') | |
# Render the diagram in Streamlit using the Graphviz renderer | |
st.graphviz_chart(dot.source) |