Hugging Face's logo

Spaces:
de-Rodrigo
/
Embeddings
Running

App Files Community
Embeddings
File size: 2,272 Bytes 
b93d6c3
913507e
 
 
 
 
b93d6c3
913507e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
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)