Hugging Face's logo

Spaces:
de-Rodrigo
/
Embeddings
Running

App Files Community
de-Rodrigo commited on
Commit
1280fd8
路
1 Parent(s): 913507e

Bokeh Native Functionality in Strimlit

Browse files
Files changed (1) hide show
  1. app.py +29 -59
app.py CHANGED
@@ -1,64 +1,34 @@
1
- import streamlit as st
2
- import random
3
- import numpy as np
4
  from bokeh.plotting import figure
5
- from bokeh.embed import components
6
  from bokeh.models import ColumnDataSource, HoverTool
 
 
 
 
 
 
 
 
 
 
 
 
 
7
 
8
- def generate_interactive_plot_html():
9
- # Generar datos de ejemplo
10
- N = 10
11
- x = np.random.rand(N)
12
- y = np.random.rand(N)
13
-
14
- # Dos im谩genes de ejemplo codificadas en base64:
15
- red_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAF/wK+bNykAAAAAElFTkSuQmCC"
16
- blue_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/f8/AwAI/AL+fB/9AAAAAElFTkSuQmCC"
17
-
18
- # Asignar a cada punto una imagen aleatoria y una etiqueta
19
- images = [random.choice([red_image, blue_image]) for _ in range(N)]
20
- labels = ["subset1" if img == red_image else "subset2" for img in images]
21
-
22
- # Crear el ColumnDataSource para Bokeh
23
- source = ColumnDataSource(data=dict(x=x, y=y, img=images, label=labels))
24
-
25
- # Crear la figura
26
- p = figure(title="Interactive Plot with Hover Images", tools="hover", width=600, height=600)
27
- p.scatter('x', 'y', size=15, source=source, fill_color="navy", alpha=0.5)
28
-
29
- # Configurar el HoverTool para mostrar la etiqueta e imagen
30
- hover = p.select_one(HoverTool)
31
- hover.tooltips = """
32
- <div>
33
- <div>
34
- <span style="font-size: 12px; font-weight: bold;">Label: @label</span>
35
- </div>
36
- <div>
37
- <img src="@img" alt="Image" style="width:100px;"/>
38
- </div>
39
- </div>
40
- """
41
-
42
- # Obtener el script y el div del plot
43
- script, div = components(p)
44
-
45
- # Construir el HTML completo, incluyendo los recursos de BokehJS versi贸n 1.4.0
46
- html = f"""
47
- <html>
48
- <head>
49
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/bokeh.min.css" type="text/css">
50
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/lib/bokeh.min.js"></script>
51
- </head>
52
- <body>
53
- {div}
54
- {script}
55
- </body>
56
- </html>
57
- """
58
- return html
59
 
60
- # Genera el HTML del plot interactivo
61
- plot_html = generate_interactive_plot_html()
 
 
 
 
 
 
 
 
 
62
 
63
- # Usa el componente de Streamlit para incrustar el HTML sin sanitizaci贸n
64
- st.components.v1.html(plot_html, height=700)
 
1
+ # Ejemplo usando st.bokeh_chart en lugar de st.components.v1.html
 
 
2
  from bokeh.plotting import figure
 
3
  from bokeh.models import ColumnDataSource, HoverTool
4
+ import streamlit as st
5
+ import numpy as np
6
+ import random
7
+
8
+ # Generar datos
9
+ N = 10
10
+ x = np.random.rand(N)
11
+ y = np.random.rand(N)
12
+
13
+ red_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAF/wK+bNykAAAAAElFTkSuQmCC"
14
+ blue_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/f8/AwAI/AL+fB/9AAAAAElFTkSuQmCC"
15
+ images = [random.choice([red_image, blue_image]) for _ in range(N)]
16
+ labels = ["subset1" if img == red_image else "subset2" for img in images]
17
 
18
+ source = ColumnDataSource(data=dict(x=x, y=y, img=images, label=labels))
19
+ p = figure(title="Interactive Plot with Hover Images", tools="hover", width=600, height=600)
20
+ p.scatter('x', 'y', size=15, source=source, fill_color="navy", alpha=0.5)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
 
22
+ hover = p.select_one(HoverTool)
23
+ hover.tooltips = """
24
+ <div>
25
+ <div>
26
+ <span style="font-size: 12px; font-weight: bold;">Label: @label</span>
27
+ </div>
28
+ <div>
29
+ <img src="@img" alt="Image" style="width:100px;"/>
30
+ </div>
31
+ </div>
32
+ """
33
 
34
+ st.bokeh_chart(p)