Spaces:
Running
Running
Commit
路
913507e
1
Parent(s):
84e4e02
Test App
Browse files
app.py
CHANGED
|
@@ -1,4 +1,64 @@
|
|
| 1 |
import streamlit as st
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
|
| 3 |
-
|
| 4 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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)
|