使用Voila在Binder部署时ipywidgets Vbox组件不显示

问题概述 #

我通过Voila在Binder上部署Jupyter Notebook（目标文件为app.ipynb），本地环境及本地Voila运行均正常，但Binder部署版本中图片上传的ipywidgets组件完全不显示。已尝试调整postBuild和ProcFile配置，问题仍未解决。

当前配置文件如下：

requirements.txt #

opencv-python-headless==4.5.3.56
matplotlib==3.4.3
numpy==1.21.2
pillow==7.0.0
bokeh==2.1.1
torch==1.11.0
torchvision==0.12.0
tqdm==4.63.0
ipywidgets==7.6.5
livelossplot==0.5.4
pytest==7.1.1
pandas==1.3.5
seaborn==0.11.2
voila

runtime.txt #

python-3.7.6

postBuild #

pip install -U ipywidgets
npm install
jupyter nbextension enable --py widgetsnbextension
jupyter serverextension enable --sys-prefix voila

ProcFile #

web: voila --port=$PORT --no-browser --Voila.ip=0.0.0.0 app.ipynb

针对性解决方案 #

1. 修正postBuild的扩展配置 #

Voila需要启用自身的widgets扩展，而非仅针对经典Notebook的widgetsnbextension，同时移除不必要的npm install（Binder环境中ipywidgets前端依赖已随包安装）：

pip install -U ipywidgets voila
jupyter nbextension enable --py widgetsnbextension
jupyter serverextension enable --sys-prefix voila
# 新增Voila专属widgets扩展启用
jupyter nbextension enable --py voila

2. 调整依赖版本以提升兼容性 #

ipywidgets 7.6.5与部分Voila版本存在兼容性问题，建议升级到兼容Python3.7的稳定版本，并指定Voila具体版本：
修改requirements.txt中对应行：

ipywidgets==7.7.1
voila==0.3.5

3. 确保Notebook中widgets正确初始化 #

检查app.ipynb中的上传组件代码，确保显式调用display()渲染组件，避免依赖隐式渲染：

import ipywidgets as widgets
from IPython.display import display

# 定义并展示图片上传组件
upload_widget = widgets.FileUpload(accept='image/*', multiple=False)
display(upload_widget)

4. 升级ProcFile的启动参数 #

添加--enable_nbextensions=True确保Voila加载所需的扩展组件：

web: voila --port=$PORT --no-browser --Voila.ip=0.0.0.0 --enable_nbextensions=True app.ipynb

内容的提问来源于stack exchange，提问作者Ash