ipynb HTML 输出使用 ipywidgets 显示标签

小能豆

ipynb HTML 输出使用 ipywidgets 显示标签

由于习惯使用 R Markdown，我尝试找到一种解决方案来对图表/结果进行制表，以创建更清晰的输出。在 R 中，这很简单，只需将 {.tabset} 添加到父部分，所有后续子部分都会被制表。

但是，jupyter 笔记本似乎没有这种简单的解决方案。我目前的方法是使用 ipywidgets。下面的代码显示数据表中属性列表的统计信息，我想在单独的选项卡中显示每个属性（请参阅下图以了解视觉效果）。

import ipywidgets as widgets

def summary_display(df):

    out = widgets.Output()
    with out:
        print('\nStatistical Description\n')
        display(df.describe())
    return out

tab_nest = widgets.Tab()
tab_nest.children = [summary_display(data[list_of_asymmetric_binary]), 
                     summary_display(data[list_of_numeric])]
tab_nest.set_title(0, 'x')
tab_nest.set_title(1, 'list_of_numeric')

display(tab_nest)

Anaconda Jupyer 环境

当通过 jupyter anaconda web 环境运行我的代码时，输出有效。但是，对于作业，我们必须提交 HTML 文档。当我将代码导出为 HTML 时，它不会呈现屏幕截图中显示的选项卡，而是显示以下内容…Tab(children=(Output(), Output()), selected_index=0, titles=('list_of_asymmetric_binary', 'list_of_numeric'))

我不敢相信实现制表符会这么复杂，因为在 R 中只需要{.tabset}。提前感谢大家的回复。

我尝试使用jupyter-nbconvert/nbconvert而不是 jupyter anaconda web 环境来导出到 HTML。此外，我安装了voila它，但是打开本地主机并在那里显示 HTML 文档，尝试导出它不起作用。

阅读 27

2024-12-26

共1个答案

小能豆

在 Jupyter Notebook 中，使用 ipywidgets 制作交互式的选项卡（Tab）是一个常见的做法，但是你提到的导出为 HTML 时显示问题，通常与 ipywidgets 在生成的 HTML 输出中的支持有关。让我们分步解决这个问题，确保在 Jupyter Notebook 中创建的交互式选项卡可以成功导出并正确呈现。

问题分析

ipywidgets 需要一些前端 JavaScript 的支持才能正常工作，而当你导出 Jupyter Notebook 为 HTML 时，默认的转换方法（比如使用 nbconvert）并不包含所有必需的 JavaScript 代码，因此交互式控件不会正常工作。你可能看到的 "Tab(children=(Output(), Output()), selected_index=0, titles=...)" 是 Jupyter 尝试将控件输出转为静态文本，而不是显示交互式控件。

解决方案

使用 Voila：Voila 是一个用于渲染 Jupyter Notebooks 并将其转换为交互式 Web 应用程序的工具。它能够渲染交互式小部件（如 ipywidgets）并保持其功能，特别适合导出交互式的 Jupyter Notebook。
导出为 HTML 时启用 JavaScript 支持：如果你坚持使用 nbconvert 导出为 HTML，则需要确保 HTML 文件支持 JavaScript，以便 ipywidgets 可以正常显示。

解决方案 1：使用 Voila

Voila 是一个很好的工具，能够将 Jupyter Notebook 转换为 Web 应用，保持小部件的交互性。可以通过以下步骤使用 Voila：

安装 Voila：

如果还没有安装 voila，你可以通过以下命令安装它：

bash pip install voila

运行 Voila：

启动 Voila 应用，运行 Jupyter Notebook 并通过 Voila 渲染：

bash voila your_notebook.ipynb

这会在浏览器中打开一个交互式 Web 界面，其中所有的 ipywidgets 控件（包括标签页和其他交互组件）都会像在 Jupyter Notebook 中一样工作。

导出为 HTML：

Voila 本身支持渲染交互式内容并通过浏览器展示，但它不会将交互式功能导出到静态 HTML。如果你希望保存可分享的静态页面，建议使用 Voila 本地运行，并通过浏览器保存页面为 HTML。

解决方案 2：使用 `nbconvert` 和 `ipywidgets` JavaScript 支持

如果你仍然希望使用 nbconvert 导出静态 HTML，可以启用 JavaScript 支持，以便在浏览器中渲染小部件。

安装 nbconvert 支持：

首先确保安装了 nbconvert 和 ipywidgets：

bash pip install nbconvert ipywidgets

导出为 HTML 并启用交互支持：

使用 nbconvert 导出时，确保启用交互式支持。可以通过以下命令导出 notebook：

bash jupyter nbconvert --to html --template full --execute your_notebook.ipynb

这会生成带有 JavaScript 支持的 HTML 文件，尽管它仍然是静态的，但可以展示出交互式控件的静态展示。

解决 JavaScript 问题：

如果依然不能显示小部件，请确保你的 Jupyter 环境已启用小部件扩展。如果在运行 nbconvert 时遇到问题，可以尝试更新 Jupyter 的小部件支持：

bash jupyter nbextension enable --py widgetsnbextension

然后重启 Jupyter Notebook 或者 Jupyter Lab。

解决方案 3：使用 JupyterLab 和 `widgetsnbextension`

如果你使用的是 JupyterLab，确保启用了 widgetsnbextension 扩展来支持 ipywidgets 控件的交互性。

安装 widgetsnbextension：

bash pip install widgetsnbextension

启用扩展：

在 JupyterLab 中启用扩展：

bash jupyter nbextension enable --py widgetsnbextension

之后你可以通过 JupyterLab 直接显示和交互，导出时也能获得较好的效果。

总结

最佳选择： 使用 Voila 进行导出。它会保持交互式功能，适合用来创建和分享交互式 Web 应用。
静态导出： 如果你需要使用 nbconvert 导出为 HTML，确保启用了 JavaScript 支持，但它的交互性会有所限制。
JupyterLab 用户：确保安装并启用了 widgetsnbextension 扩展，以便小部件在 JupyterLab 中正确工作。

希望这些方法能帮助你解决问题！

2024-12-26