如何制作 HoloMap 来探索 PNG 图像；<img> DIV 的组件不显示

Question

我想制作一个简单的应用程序来浏览一组 PNG 文件。 通常，将有多个选择小部件（例如用于性别和惯用手），以及一个用于显示每个选择组合的 PNG 文件。

我正在尝试使用HoloMap和holoviews.Div对象的字典来执行此操作，以便交互性不依赖于拥有实时 Python 服务器。

HoloMap 的单个单元格显示正确，但交互式HoloMap不显示Div对象的图像组件。

为了演示，我制作了一个HoloMap来浏览两个 PNG 文件 A 或 B。

import holoviews as hv
hv.extension("bokeh")  # To render in Notebook environment.

# Define format template for html div to display a figure.
# See https://holoviews.org/reference/elements/bokeh/Div.html.
div_format = """
        <figure>
        <img src=" {pic} " height='200' width='200'>
        <figcaption> {caption} </figcaption>
        """

# Map to URLs of two images.
pic_dict = {"A": "https://assets.holoviews.org/logo/holoviews_color_icon_500x500.png",
            "B": "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"}

# Map to holoviews div objects for the images.
div_map = {key: hv.Div(div_format.format(pic=pic,
                                         caption="Figure "+key)) \
           for key, pic in pic_dict.items()}

holomap = hv.HoloMap(div_map, kdims="Figure")

holomap["A"]
# Shows PNG A and caption "Figure A".

或者，我们也可以显示holomap["B"] 。

holomap作为一个整体让我们可以交互地探索图形标题（使用它生成的选择小部件）。 然而，图像本身并没有显示在交互式HoloMap中——这是一个错误吗？ 如果是这样，是否有解决方法？ 或者探索一组图像的更好方法？

holomap
# Shows interactive display with figure caption and select widget, but no PNG.

Answer 1

不使用HoloMap ，交互式图像浏览器可以直接从散景小部件构建，用一点javascript来改变图像以反映用户选择。

该解决方案直接使用bokeh和javascript而不是依赖全息视图在后台执行此操作。

例如，要通过选择“A”或“B”来浏览两个 PNG 文件：

from bokeh.models import CustomJS, Div, Select
from bokeh.layouts import column
from bokeh.io import output_notebook, show

# Map to URLs of two images.
pic_dict = {"A": "https://assets.holoviews.org/logo/holoviews_color_icon_500x500.png",
            "B": "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"}

option_keys = list(pic_dict.keys())
option_values = list(pic_dict.values())

# Make widget to display html, set to show first URL.
bk_html = Div(text='<img src="' + option_values[0] + '"/>')

# Make widget to select key from pic_dict.
bk_select = Select(options=option_keys, value=option_keys[0], title="Image selection")

# Link select-widget value to html-widget text, to show selected image.
bk_select.js_on_change(
    'value',
    CustomJS(
        args={"html": bk_html},
        code=f"""
            console.log('Entering bk_select jscallback.');
            // Array of URLs corresponding to this.options.
            const option_lookup = {option_values};
            
            // Look up URL corresponding to chosen option.
            var option_index = this.options.indexOf(this.value);
            var url = option_lookup[option_index];
            
            // Set HTML text to display image at URL.
            html.text = '<img src="' + url + '"/>';
            console.log('Set image to ', html.text);
        """
    )
)

# Lay out widgets in a column.
layout = column(bk_select, bk_html)

# To display Bokeh output inline in a Jupyter notebook:
output_notebook(hide_banner=True)

# Display the layout.
show(layout)