如何将交互式 Jupyter 笔记本嵌入到 html 中？

Posted 2023-02-18

【中文标题】如何将交互式 Jupyter 笔记本嵌入到 html 中？

【英文标题】：How to embed an interactive Jupyter notebook into html?

【发布时间】：2018-01-05 04:19:09

【问题描述】：

我正在尝试创建一个允许用户创建和共享 Jupyter 笔记本的 Web 应用程序。

目前，我已启动并运行 JupyterHub，并且能够为各个服务器生成新服务器。

但是，我不知道如何将 Jupyter 笔记本嵌入到 html 页面中。我试过 nbconvert，但这给了我一个笔记本的静态渲染。我需要的是一个用户可以编辑和运行的动态笔记本。

我计划将笔记本存储在 GitHub 中，并允许用户通过 Web 应用程序查看它们。

我在 Quantopian 网站上看到过类似的东西。 （例如：Quantopian notebook）。我如何在事物的前端实现类似的东西？

任何帮助将不胜感激！

【参考方案1】：

要嵌入 Jupyter 环境，您可以考虑使用iframe。

请注意，当前的浏览器需要正确配置您的应用程序（您的自定义 Jupyter）的 Content Security Policy (CSP) 才能运行。 您可以在浏览器（例如 Chrome）中激活开发者控制台以检查可能出现的 CSP 错误。 Github 中有两个问题（the one 和 the other），它们的响应向您展示了如何处理该配置。

要在 Github 中读取和存储笔记本，您可能需要检查其他项目，例如 mybinder 和 Everware，和/或修改源代码您的自定义 Jupyter。

您可以使用 mybinder 检查"cost estimation" example。 mybynder 配置为显示特定的 Github 存储库。它启动一个 docker 单用户 Jupyter 服务器，并在您的浏览器中显示一个交互式会话。还有其他示例here 和here。 mybinder的源码在Github 我想你也可以考虑Everware project（目前处于测试阶段）。源代码在Github。

【讨论】：

mybinder 启动一个“binder”实例，但我不知道如何将它嵌入到静态网页中的窗口中

【参考方案2】：

你不能。

用户要么将静态版本视为静态 html （您可以在任何提供静态站点主机的地方托管它），或 让用户直接访问 JupyterHub 服务。

这是可以做到的。 如果 Jupyter 的内核（例如 Python） 可以被 javascript 解释。 然后用户可以通过他们的网络浏览器评估代码。 但是 Jupyter 还没有提供这个功能。