Spaces:
Running
Running
| import streamlit as st | |
| import random | |
| import numpy as np | |
| from bokeh.plotting import figure | |
| from bokeh.embed import components | |
| from bokeh.models import ColumnDataSource, HoverTool | |
| def generate_interactive_plot_html(): | |
| # Generar datos de ejemplo | |
| N = 10 | |
| x = np.random.rand(N) | |
| y = np.random.rand(N) | |
| # Dos im谩genes de ejemplo codificadas en base64: | |
| red_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAF/wK+bNykAAAAAElFTkSuQmCC" | |
| blue_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/f8/AwAI/AL+fB/9AAAAAElFTkSuQmCC" | |
| # Asignar a cada punto una imagen aleatoria y una etiqueta | |
| images = [random.choice([red_image, blue_image]) for _ in range(N)] | |
| labels = ["subset1" if img == red_image else "subset2" for img in images] | |
| # Crear el ColumnDataSource para Bokeh | |
| source = ColumnDataSource(data=dict(x=x, y=y, img=images, label=labels)) | |
| # Crear la figura | |
| p = figure(title="Interactive Plot with Hover Images", tools="hover", width=600, height=600) | |
| p.scatter('x', 'y', size=15, source=source, fill_color="navy", alpha=0.5) | |
| # Configurar el HoverTool para mostrar la etiqueta e imagen | |
| hover = p.select_one(HoverTool) | |
| hover.tooltips = """ | |
| <div> | |
| <div> | |
| <span style="font-size: 12px; font-weight: bold;">Label: @label</span> | |
| </div> | |
| <div> | |
| <img src="@img" alt="Image" style="width:100px;"/> | |
| </div> | |
| </div> | |
| """ | |
| # Obtener el script y el div del plot | |
| script, div = components(p) | |
| # Construir el HTML completo, incluyendo los recursos de BokehJS versi贸n 1.4.0 | |
| html = f""" | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/bokeh.min.css" type="text/css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/lib/bokeh.min.js"></script> | |
| </head> | |
| <body> | |
| {div} | |
| {script} | |
| </body> | |
| </html> | |
| """ | |
| return html | |
| # Genera el HTML del plot interactivo | |
| plot_html = generate_interactive_plot_html() | |
| # Usa el componente de Streamlit para incrustar el HTML sin sanitizaci贸n | |
| st.components.v1.html(plot_html, height=700) | |