在 Jupyter Notebook 中嵌入幻灯片答案

【问题标题】：Embedding slideshow in Jupyter Notebook在 Jupyter Notebook 中嵌入幻灯片
【发布时间】：2018-07-26 20:23:16
【问题描述】：

我想要一种将幻灯片嵌入到 jupyter 笔记本单元格中的 Python 方式，类似于此处的幻灯片：

https://www.w3schools.com/howto/howto_js_slideshow.asp

我不需要任何 CSS 样式，除了下一个/上一个滑动箭头之外我不需要任何按钮。

我不想把整个笔记本变成幻灯片，只有一个单元格，所以我不能使用reveal.js。

考虑到所有这些其他交互式小部件都存在，我很难相信没有简单的方法可以在笔记本中嵌入幻灯片：

http://jupyter.org/widgets

真的没有简单的方法吗？

【问题讨论】：

标签： python jupyter-notebook

【解决方案1】：

http://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html

结果是一个 IntSlider，一旦它被聚焦（点击），可以使用箭头键递增到下一个/上一个滑块值，这对我的目的来说已经足够了。这是我如何使用滑块小部件的示例：

import ipywidgets as wg
from IPython.display import SVG

def f(x):
    if x == 1:
        return SVG(filename='./path/to/pic1')
    elif x == 2:
        return SVG(filename='./path/to/pic2')
    elif x == 3:
        return SVG(filename='./path/to/pic3')
    else:
        return SVG(filename='./path/to/pic4')

wg.interact(f, x=wg.IntSlider(min=1,max=4,step=1));

【讨论】：

【解决方案2】：

我遇到了同样的问题，但无法使用 ipywidgets（笔记本最终通过 fastpages 转换为 html）。通过使用所有图像创建一个 xarray，然后使用 plotly.js 动画功能，我找到了一个不错的方法。它添加了一个滑块，可以轻松在图像之间切换。这是一个例子：

import numpy as np
import plotly.express as px
from imageio import imread
import xarray as xr

# Show a list of numpy images as a carousel
# key is the label of the slider
def show_images_carousel(images, labels, key: str, title: str, height:int):        
    stacked = np.stack(images, axis=0)
    xrData = xr.DataArray(
        data   = stacked,
        dims   = [key, 'row', 'col', 'rgb'],
        coords = {key: labels}
    )
    # Hide the axes
    layout_dict = dict(yaxis_visible=False, yaxis_showticklabels=False, xaxis_visible=False, xaxis_showticklabels=False)
    return px.imshow(xrData, title=title, animation_frame=key).update_layout(layout_dict)

# Show a list of URLs as a carousel, loading then as numpy images first
def show_images_carousel_from_urls(image_urls, labels, key: str, title:str, height:int):
    images = [imread(url, pilmode='RGB') for url in image_urls]
    return show_images_carousel(images, labels, key, title, height)

用法是这样的：

images = {
    "simulation_images/rgbspan.png": 'Original',
    "simulation_images/rgbspan_protan_brettel1997.png": "Brettel 1997",
    "simulation_images/rgbspan_protan_vienot1999.png": "Viénot 1999",
    "simulation_images/rgbspan_protan_machado2009.png": 'Machado 2009',    
    "simulation_images/rgbspan_protan_coblisv1.png": "Coblis V1",
    "simulation_images/rgbspan_protan_coblisv2.png": "Coblis V2" 
}

fig = show_images_carousel_from_urls (images.keys(), list(images.values()), 'Method', None, 700)
fig.show()

【讨论】：