Hugging Face's logo

Spaces:
awacke1
/
StreamlitImageButtons
Sleeping

App Files Community
StreamlitImageButtons
File size: 2,088 Bytes 
e9ed578
 
 
defe0cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9ed578
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
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("![Alt Text](https://media.giphy.com/media/og52So0BUmZVe/giphy.gif)")



# 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)